From 61ed32360221a458aafce1e570af7cfc4d22e400 Mon Sep 17 00:00:00 2001 From: Jose Grana Date: Thu, 28 Sep 2017 21:37:26 +0200 Subject: [PATCH 1/7] feat(realm-browser): add SelectObject --- src/ui/realm-browser/RealmBrowser.scss | 8 +++++ src/ui/realm-browser/SelectObject.tsx | 48 ++++++++++++++++++++++++++ 2 files changed, 56 insertions(+) create mode 100644 src/ui/realm-browser/SelectObject.tsx diff --git a/src/ui/realm-browser/RealmBrowser.scss b/src/ui/realm-browser/RealmBrowser.scss index 2bd356403..21a6d604b 100644 --- a/src/ui/realm-browser/RealmBrowser.scss +++ b/src/ui/realm-browser/RealmBrowser.scss @@ -121,6 +121,14 @@ $realm-browser-header-icon-space: 24px; flex-direction: column; } + &__SelectObject{ + min-height:300px; + flex: 1 1 0; + display: flex; + flex-direction: column; + padding:0; + } + &__Tabs { min-height: 42px; } diff --git a/src/ui/realm-browser/SelectObject.tsx b/src/ui/realm-browser/SelectObject.tsx new file mode 100644 index 000000000..4b05e6b18 --- /dev/null +++ b/src/ui/realm-browser/SelectObject.tsx @@ -0,0 +1,48 @@ +import * as React from 'react'; +import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap'; +import { ContentContainer } from './ContentContainer'; + +export interface IProps { + status: boolean; + schema: Realm.ObjectSchema; + data: Realm.Results | any; + close: () => void; + schemaName: string; + updateReference: (object: any) => void; + optional: boolean; +} + +export const SelectObject = ({ + status, + schema, + data, + close, + updateReference, + schemaName, + optional, +}: IProps) => ( + + Select a new {schemaName} + + {data && + schema && ( + + )} + + + {optional && ( + + )} + + + +); From 957133f66eff2c6870515eca71979dd1263723b3 Mon Sep 17 00:00:00 2001 From: Jose Grana Date: Thu, 28 Sep 2017 21:41:23 +0200 Subject: [PATCH 2/7] feat(realm-browser-content): add onRowClick handler --- src/ui/realm-browser/Content.tsx | 49 +++++++++++++++++------ src/ui/realm-browser/ContentContainer.tsx | 23 +++++++++-- 2 files changed, 56 insertions(+), 16 deletions(-) diff --git a/src/ui/realm-browser/Content.tsx b/src/ui/realm-browser/Content.tsx index e30d66d21..3ba7dbeef 100644 --- a/src/ui/realm-browser/Content.tsx +++ b/src/ui/realm-browser/Content.tsx @@ -25,25 +25,35 @@ export const Content = ({ sort, onSortClick, onContextMenu, + onRowClick, }: { columnWidths: number[]; gridContentRef: (grid: Grid) => void; gridHeaderRef: (grid: Grid) => void; - onCellChange: (object: any, propertyName: string, value: string) => void; - onListCellClick: ( + onCellChange?: (object: any, propertyName: string, value: string) => void; + onListCellClick?: ( object: any, property: Realm.ObjectSchemaProperty, value: any, ) => void; onColumnWidthChanged: (index: number, width: number) => void; schema: Realm.ObjectSchema | null; - rowToHighlight: number | null; + rowToHighlight?: number | null; data: Realm.Results | any; query: string | null; onQueryChange: (e: React.SyntheticEvent) => void; sort: string | null; onSortClick: (property: string) => void; - onContextMenu: (e: React.SyntheticEvent, object: any) => void; + onContextMenu?: ( + e: React.SyntheticEvent, + object: any, + property: Realm.ObjectSchemaProperty, + ) => void; + onRowClick?: ( + object: any, + property: Realm.ObjectSchemaProperty, + value: any, + ) => void; }) => { if (schema) { // Generate the columns from the schemas properties @@ -64,7 +74,8 @@ export const Content = ({ style: React.CSSProperties; }) => { const object = data[rowIndex]; - return ( + + const cell = ( { - onListCellClick(object, property, value); - }} + ) => onListCellClick && onListCellClick(object, property, value)} value={object[propertyName]} property={property} - onUpdateValue={value => { - onCellChange(object, propertyName, value); - }} + onUpdateValue={value => + onCellChange && onCellChange(object, propertyName, value)} isHighlight={rowToHighlight === rowIndex} - onContextMenu={e => onContextMenu(e, object)} + onContextMenu={e => + onContextMenu && onContextMenu(e, object, property)} /> ); + + return onRowClick ? ( +
{ + e.stopPropagation(); + e.preventDefault(); + onRowClick(object, property, object[propertyName]); + }} + > + {cell} +
+ ) : ( + cell + ); }; }); diff --git a/src/ui/realm-browser/ContentContainer.tsx b/src/ui/realm-browser/ContentContainer.tsx index ab787c6eb..aa95810c3 100644 --- a/src/ui/realm-browser/ContentContainer.tsx +++ b/src/ui/realm-browser/ContentContainer.tsx @@ -6,16 +6,25 @@ import { Content } from './Content'; const MINIMUM_COLUMN_WIDTH = 20; export interface IContentContainerProps { - onCellChange: (object: any, propertyName: string, value: string) => void; - onListCellClick: ( + onCellChange?: (object: any, propertyName: string, value: string) => void; + onListCellClick?: ( + object: any, + property: Realm.ObjectSchemaProperty, + value: any, + ) => void; + onRowClick?: ( object: any, property: Realm.ObjectSchemaProperty, value: any, ) => void; schema: Realm.ObjectSchema | null; - rowToHighlight: number | null; + rowToHighlight?: number | null; data: Realm.Results | any; - onContextMenu: (e: React.SyntheticEvent, object: any) => void; + onContextMenu?: ( + e: React.SyntheticEvent, + object: any, + property: Realm.ObjectSchemaProperty, + ) => void; } export class ContentContainer extends React.Component< @@ -84,6 +93,12 @@ export class ContentContainer extends React.Component< ); } + public componentWillMount() { + if (this.props.schema) { + this.setDefaultColumnWidths(this.props.schema); + } + } + public componentWillReceiveProps(props: IContentContainerProps) { if (props.schema && this.props.schema !== props.schema) { this.setDefaultColumnWidths(props.schema); From 6e97dbe938a2802593c772772f54eb777315e198 Mon Sep 17 00:00:00 2001 From: Jose Grana Date: Thu, 28 Sep 2017 21:47:46 +0200 Subject: [PATCH 3/7] feat(realm-browser): allow object references to be edited --- src/ui/realm-browser/RealmBrowser.tsx | 24 ++++- .../realm-browser/RealmBrowserContainer.tsx | 87 ++++++++++++++++--- 2 files changed, 97 insertions(+), 14 deletions(-) diff --git a/src/ui/realm-browser/RealmBrowser.tsx b/src/ui/realm-browser/RealmBrowser.tsx index 3d7fdfe80..220f886a3 100644 --- a/src/ui/realm-browser/RealmBrowser.tsx +++ b/src/ui/realm-browser/RealmBrowser.tsx @@ -6,6 +6,7 @@ import { ContextMenu } from '../reusable/context-menu'; import { ContentContainer } from './ContentContainer'; import './RealmBrowser.scss'; import { IList } from './RealmBrowserContainer'; +import { SelectObject } from './SelectObject'; import { Sidebar } from './Sidebar'; export const RealmBrowser = ({ @@ -23,6 +24,9 @@ export const RealmBrowser = ({ contextMenu, onContextMenuClose, confirmModal, + selectObject, + closeSelectObject, + updateObjectReference, }: { getSchemaLength: (name: string) => number; getSelectedData: () => any; @@ -38,13 +42,20 @@ export const RealmBrowser = ({ rowToHighlight: number | null; selectedSchemaName?: string | null; list: IList | null; - onContextMenu: (e: React.SyntheticEvent, object: any) => void; + onContextMenu: ( + e: React.SyntheticEvent, + object: any, + property: Realm.ObjectSchemaProperty, + ) => void; contextMenu: any; onContextMenuClose: () => void; confirmModal: { yes: () => void; no: () => void; } | null; + selectObject?: any; + closeSelectObject: () => void; + updateObjectReference: (object: any) => void; }) => { const values = getSelectedData(); return ( @@ -78,6 +89,17 @@ export const RealmBrowser = ({ no={confirmModal.no} /> )} + {selectObject && ( + + )} ); }; diff --git a/src/ui/realm-browser/RealmBrowserContainer.tsx b/src/ui/realm-browser/RealmBrowserContainer.tsx index 07adde848..7e4dc72d7 100644 --- a/src/ui/realm-browser/RealmBrowserContainer.tsx +++ b/src/ui/realm-browser/RealmBrowserContainer.tsx @@ -38,6 +38,14 @@ export interface IState { object: any; actions: IContextMenuAction[]; } | null; + selectObject?: { + schema: Realm.ObjectSchema | null; + data: Realm.Results | any; + property: any; + schemaName: string; + object: any; + optional: boolean; + } | null; } export class RealmBrowserContainer extends React.Component< @@ -55,6 +63,7 @@ export class RealmBrowserContainer extends React.Component< rowToHighlight: null, contextMenu: null, confirmModal: null, + selectObject: null, }; } @@ -143,18 +152,24 @@ export class RealmBrowserContainer extends React.Component< }; this.setState({ list, selectedSchemaName: 'list', rowToHighlight: null }); } else { - const index = this.realm - .objects(property.objectType || '') - .indexOf(value); - this.setState({ - selectedSchemaName: property.objectType, - list: null, - rowToHighlight: index, - }); + if (value) { + const index = this.realm + .objects(property.objectType || '') + .indexOf(value); + this.setState({ + selectedSchemaName: property.objectType, + list: null, + rowToHighlight: index, + }); + } } }; - public onContextMenu = (e: React.MouseEvent, object: any) => { + public onContextMenu = ( + e: React.MouseEvent, + object: any, + property: Realm.ObjectSchemaProperty, + ) => { e.preventDefault(); const { list } = this.state; @@ -163,19 +178,65 @@ export class RealmBrowserContainer extends React.Component< ? list.data.indexOf(object) : this.realm.objects(object.objectSchema().name).indexOf(object); + const actions = [ + { + label: 'Delete', + onClick: () => this.openConfirmModal(object), + }, + ]; + + if (property.type === 'object') { + actions.push({ + label: 'Update reference', + onClick: () => this.openSelectObject(object, property), + }); + } + this.setState({ rowToHighlight: index, contextMenu: { x: e.clientX, y: e.clientY, object, - actions: [ - { label: 'Delete', onClick: () => this.openConfirmModal(object) }, - ], + actions, + }, + }); + }; + + public openSelectObject = (object: any, property: any) => { + const { schemas } = this.state; + + const objectSchema = + schemas.find(schema => schema.name === property.objectType) || null; + const data = this.realm.objects(property.objectType) || null; + + this.setState({ + selectObject: { + property, + object, + optional: property.optional, + schemaName: property.objectType, + schema: objectSchema, + data, }, }); }; + public updateObjectReference = (reference: any) => { + const { selectObject } = this.state; + if (selectObject) { + const { property, object } = selectObject; + this.realm.write(() => { + object[property.name] = reference; + }); + this.setState({ selectObject: null }); + } + }; + + public closeSelectObject = () => { + this.setState({ selectObject: null }); + }; + public openConfirmModal = (object: any) => { this.setState({ confirmModal: { @@ -191,7 +252,7 @@ export class RealmBrowserContainer extends React.Component< }; public onContextMenuClose = (): void => { - this.setState({ contextMenu: null, rowToHighlight: null }); + this.setState({ contextMenu: null }); }; private async initializeLocalRealm(options: ILocalRealmBrowserOptions) { From 0b0e8757e856e7a1eca3bd49c5bcbc3d3712e5cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= Date: Fri, 29 Sep 2017 11:09:28 +0200 Subject: [PATCH 4/7] Adding spaces and sorting properties --- src/ui/realm-browser/RealmBrowser.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/ui/realm-browser/RealmBrowser.scss b/src/ui/realm-browser/RealmBrowser.scss index 21a6d604b..f544cbf95 100644 --- a/src/ui/realm-browser/RealmBrowser.scss +++ b/src/ui/realm-browser/RealmBrowser.scss @@ -121,12 +121,12 @@ $realm-browser-header-icon-space: 24px; flex-direction: column; } - &__SelectObject{ - min-height:300px; - flex: 1 1 0; + &__SelectObject { display: flex; flex-direction: column; - padding:0; + flex: 1 1 0; + min-height: 300px; + padding: 0; } &__Tabs { From 5b9fbd310f9bf3a5ea5d613fcf1861f58bef84cf Mon Sep 17 00:00:00 2001 From: Jose Grana Date: Sat, 30 Sep 2017 00:43:04 +0200 Subject: [PATCH 5/7] feat(realm-browser): enable select rows on single click and edit on double click, improve 'SelectObject' and 'StringCell' --- src/ui/realm-browser/Cell.tsx | 9 +- src/ui/realm-browser/Content.tsx | 33 ++----- src/ui/realm-browser/ContentContainer.tsx | 8 +- src/ui/realm-browser/RealmBrowser.scss | 4 + src/ui/realm-browser/RealmBrowser.tsx | 7 +- .../realm-browser/RealmBrowserContainer.tsx | 35 +++++++- src/ui/realm-browser/SelectObject.tsx | 87 +++++++++++-------- src/ui/realm-browser/types/StringCell.tsx | 9 +- .../types/StringCellContainer.tsx | 5 +- 9 files changed, 119 insertions(+), 78 deletions(-) diff --git a/src/ui/realm-browser/Cell.tsx b/src/ui/realm-browser/Cell.tsx index be498f13c..96a38f468 100644 --- a/src/ui/realm-browser/Cell.tsx +++ b/src/ui/realm-browser/Cell.tsx @@ -9,7 +9,7 @@ import { StringCellContainer } from './types/StringCellContainer'; export const Cell = ({ onUpdateValue, - onListCellClick, + onCellClick, property, style, value, @@ -18,7 +18,7 @@ export const Cell = ({ onContextMenu, }: { onUpdateValue: (value: string) => void; - onListCellClick: (property: Realm.ObjectSchemaProperty, value: any) => void; + onCellClick: (property: Realm.ObjectSchemaProperty, value: any) => void; property: Realm.ObjectSchemaProperty; style: React.CSSProperties; value: any; @@ -40,6 +40,7 @@ export const Cell = ({ value={value} onUpdateValue={onUpdateValue} onContextMenu={onContextMenu} + onClick={onCellClick} /> ); break; @@ -50,7 +51,7 @@ export const Cell = ({ onContextMenu={onContextMenu} property={property} value={value} - onClick={onListCellClick} + onClick={onCellClick} /> ); break; @@ -60,7 +61,7 @@ export const Cell = ({ onContextMenu={onContextMenu} property={property} value={value} - onClick={onListCellClick} + onClick={onCellClick} /> ); break; diff --git a/src/ui/realm-browser/Content.tsx b/src/ui/realm-browser/Content.tsx index 3ba7dbeef..c897d8d6d 100644 --- a/src/ui/realm-browser/Content.tsx +++ b/src/ui/realm-browser/Content.tsx @@ -15,7 +15,7 @@ export const Content = ({ gridContentRef, gridHeaderRef, onCellChange, - onListCellClick, + onCellClick, onColumnWidthChanged, schema, rowToHighlight, @@ -25,16 +25,16 @@ export const Content = ({ sort, onSortClick, onContextMenu, - onRowClick, }: { columnWidths: number[]; gridContentRef: (grid: Grid) => void; gridHeaderRef: (grid: Grid) => void; onCellChange?: (object: any, propertyName: string, value: string) => void; - onListCellClick?: ( + onCellClick?: ( object: any, property: Realm.ObjectSchemaProperty, value: any, + rowIndex: number, ) => void; onColumnWidthChanged: (index: number, width: number) => void; schema: Realm.ObjectSchema | null; @@ -49,11 +49,6 @@ export const Content = ({ object: any, property: Realm.ObjectSchemaProperty, ) => void; - onRowClick?: ( - object: any, - property: Realm.ObjectSchemaProperty, - value: any, - ) => void; }) => { if (schema) { // Generate the columns from the schemas properties @@ -75,15 +70,15 @@ export const Content = ({ }) => { const object = data[rowIndex]; - const cell = ( + return ( onListCellClick && onListCellClick(object, property, value)} + ) => onCellClick && onCellClick(object, property, value, rowIndex)} value={object[propertyName]} property={property} onUpdateValue={value => @@ -93,22 +88,6 @@ export const Content = ({ onContextMenu && onContextMenu(e, object, property)} /> ); - - return onRowClick ? ( -
{ - e.stopPropagation(); - e.preventDefault(); - onRowClick(object, property, object[propertyName]); - }} - > - {cell} -
- ) : ( - cell - ); }; }); diff --git a/src/ui/realm-browser/ContentContainer.tsx b/src/ui/realm-browser/ContentContainer.tsx index aa95810c3..957293afd 100644 --- a/src/ui/realm-browser/ContentContainer.tsx +++ b/src/ui/realm-browser/ContentContainer.tsx @@ -7,15 +7,11 @@ const MINIMUM_COLUMN_WIDTH = 20; export interface IContentContainerProps { onCellChange?: (object: any, propertyName: string, value: string) => void; - onListCellClick?: ( - object: any, - property: Realm.ObjectSchemaProperty, - value: any, - ) => void; - onRowClick?: ( + onCellClick?: ( object: any, property: Realm.ObjectSchemaProperty, value: any, + index: number, ) => void; schema: Realm.ObjectSchema | null; rowToHighlight?: number | null; diff --git a/src/ui/realm-browser/RealmBrowser.scss b/src/ui/realm-browser/RealmBrowser.scss index f544cbf95..e1f71b0c7 100644 --- a/src/ui/realm-browser/RealmBrowser.scss +++ b/src/ui/realm-browser/RealmBrowser.scss @@ -256,6 +256,10 @@ $realm-browser-header-icon-space: 24px; &--disabled { color: $color-elephant; } + + &--unselectable { + user-select: none; + } } &__Link { diff --git a/src/ui/realm-browser/RealmBrowser.tsx b/src/ui/realm-browser/RealmBrowser.tsx index 220f886a3..9d2139bf5 100644 --- a/src/ui/realm-browser/RealmBrowser.tsx +++ b/src/ui/realm-browser/RealmBrowser.tsx @@ -14,7 +14,7 @@ export const RealmBrowser = ({ getSelectedSchema, onCellChange, onSchemaSelected, - onListCellClick, + onCellClick, schemas, rowToHighlight, getSelectedData, @@ -33,10 +33,11 @@ export const RealmBrowser = ({ getSelectedSchema: () => Realm.ObjectSchema | null; onCellChange: (object: any, propertyName: string, value: string) => void; onSchemaSelected: (name: string, objectToScroll: any) => void; - onListCellClick: ( + onCellClick: ( object: any, property: Realm.ObjectSchemaProperty, value: any, + index: number, ) => void; schemas: Realm.ObjectSchema[]; rowToHighlight: number | null; @@ -71,7 +72,7 @@ export const RealmBrowser = ({ { private realm: Realm; + private clickTimeout?: any; constructor() { super(); @@ -138,7 +139,27 @@ export class RealmBrowserContainer extends React.Component< } }; - public onListCellClick = ( + public onCellClick = ( + object: any, + property: Realm.ObjectSchemaProperty, + value: any, + index: number, + ) => { + this.setState({ rowToHighlight: index }); + + if (this.clickTimeout) { + clearTimeout(this.clickTimeout); + this.onCellDoubleClick(object, property, value); + this.clickTimeout = null; + } else { + this.clickTimeout = setTimeout(() => { + this.onCellSingleClick(object, property, value); + this.clickTimeout = null; + }, 200); + } + }; + + public onCellSingleClick = ( object: any, property: Realm.ObjectSchemaProperty, value: any, @@ -151,7 +172,7 @@ export class RealmBrowserContainer extends React.Component< property, }; this.setState({ list, selectedSchemaName: 'list', rowToHighlight: null }); - } else { + } else if (property.type === 'object') { if (value) { const index = this.realm .objects(property.objectType || '') @@ -165,6 +186,16 @@ export class RealmBrowserContainer extends React.Component< } }; + public onCellDoubleClick = ( + object: any, + property: Realm.ObjectSchemaProperty, + value: any, + ) => { + if (property.type === 'object') { + this.openSelectObject(object, property); + } + }; + public onContextMenu = ( e: React.MouseEvent, object: any, diff --git a/src/ui/realm-browser/SelectObject.tsx b/src/ui/realm-browser/SelectObject.tsx index 4b05e6b18..ad3cc02d7 100644 --- a/src/ui/realm-browser/SelectObject.tsx +++ b/src/ui/realm-browser/SelectObject.tsx @@ -12,37 +12,56 @@ export interface IProps { optional: boolean; } -export const SelectObject = ({ - status, - schema, - data, - close, - updateReference, - schemaName, - optional, -}: IProps) => ( - - Select a new {schemaName} - - {data && - schema && ( - - )} - - - {optional && ( - - )} - - - -); +export interface IState { + rowToHighlight?: number; + objectToAdd?: Realm.ObjectSchema; +} + +export class SelectObject extends React.Component { + public state = { + rowToHighlight: undefined, + objectToAdd: undefined, + }; + + public onCellClick = ( + object: any, + property: Realm.ObjectSchemaProperty, + value: any, + index: number, + ) => { + this.setState({ rowToHighlight: index, objectToAdd: object }); + }; + + public setNewValue = () => this.props.updateReference(this.state.objectToAdd); + + public render() { + const { status, schema, data, close, schemaName, optional } = this.props; + const { rowToHighlight, objectToAdd } = this.state; + return ( + + Select a new {schemaName} + + {data && + schema && ( + + )} + + + {optional && ( + + )} + + + + ); + } +} diff --git a/src/ui/realm-browser/types/StringCell.tsx b/src/ui/realm-browser/types/StringCell.tsx index 89f78e916..3a4a5e7df 100644 --- a/src/ui/realm-browser/types/StringCell.tsx +++ b/src/ui/realm-browser/types/StringCell.tsx @@ -10,14 +10,18 @@ export const StringCell = ({ value, temporalValue, onContextMenu, + onClick, + property, }: { isEditing: boolean; onChange: (newValue: string) => void; onBlur: (input: HTMLInputElement) => void; + property: Realm.ObjectSchemaProperty; onFocus: () => void; value: string; temporalValue: string; onContextMenu: (e: React.SyntheticEvent) => void; + onClick: (property: Realm.ObjectSchemaProperty, value: any) => void; }) => { let textInput: HTMLInputElement; return isEditing ? ( @@ -32,6 +36,7 @@ export const StringCell = ({ onBlur={e => onBlur(textInput)} onKeyPress={e => e.key === 'Enter' && onBlur(textInput)} onContextMenu={onContextMenu} + autoFocus={true} /> ) : (
onClick(property, value)} + onDoubleClick={onFocus} onContextMenu={onContextMenu} > {value === null ? 'null' : value.toString()} diff --git a/src/ui/realm-browser/types/StringCellContainer.tsx b/src/ui/realm-browser/types/StringCellContainer.tsx index f0a4197d8..84e9981fc 100644 --- a/src/ui/realm-browser/types/StringCellContainer.tsx +++ b/src/ui/realm-browser/types/StringCellContainer.tsx @@ -9,6 +9,7 @@ export interface IStringCellContainerProps { property: Realm.ObjectSchemaProperty; value: string; onContextMenu: (e: React.SyntheticEvent) => void; + onClick: (property: Realm.ObjectSchemaProperty, value: any) => void; } export class StringCellContainer extends React.Component< @@ -38,12 +39,14 @@ export class StringCellContainer extends React.Component< } public render() { - const { value, onContextMenu } = this.props; + const { value, onContextMenu, onClick, property } = this.props; return ( From 1c2138fb54dde483a40f48d98397490ac43ff4b3 Mon Sep 17 00:00:00 2001 From: Jose Grana Date: Sat, 30 Sep 2017 01:35:25 +0200 Subject: [PATCH 6/7] feat(realm-browser): add missing 'columnToHighlight' prop --- src/ui/realm-browser/Content.tsx | 5 ++++- src/ui/realm-browser/ContentContainer.tsx | 9 ++++++--- src/ui/realm-browser/RealmBrowser.tsx | 6 +++++- src/ui/realm-browser/RealmBrowserContainer.tsx | 15 ++++++++++++--- src/ui/realm-browser/SelectObject.tsx | 14 +++++++++++--- 5 files changed, 38 insertions(+), 11 deletions(-) diff --git a/src/ui/realm-browser/Content.tsx b/src/ui/realm-browser/Content.tsx index c897d8d6d..01c845adc 100644 --- a/src/ui/realm-browser/Content.tsx +++ b/src/ui/realm-browser/Content.tsx @@ -35,6 +35,7 @@ export const Content = ({ property: Realm.ObjectSchemaProperty, value: any, rowIndex: number, + columnIndex: number, ) => void; onColumnWidthChanged: (index: number, width: number) => void; schema: Realm.ObjectSchema | null; @@ -78,7 +79,9 @@ export const Content = ({ onCellClick={( property: Realm.ObjectSchemaProperty, // tslint:disable-line:no-shadowed-variable value: any, - ) => onCellClick && onCellClick(object, property, value, rowIndex)} + ) => + onCellClick && + onCellClick(object, property, value, rowIndex, columnIndex)} value={object[propertyName]} property={property} onUpdateValue={value => diff --git a/src/ui/realm-browser/ContentContainer.tsx b/src/ui/realm-browser/ContentContainer.tsx index 957293afd..2121e279d 100644 --- a/src/ui/realm-browser/ContentContainer.tsx +++ b/src/ui/realm-browser/ContentContainer.tsx @@ -11,10 +11,12 @@ export interface IContentContainerProps { object: any, property: Realm.ObjectSchemaProperty, value: any, - index: number, + rowIndex: number, + columnIndex: number, ) => void; schema: Realm.ObjectSchema | null; rowToHighlight?: number | null; + columnToHighlight?: number; data: Realm.Results | any; onContextMenu?: ( e: React.SyntheticEvent, @@ -106,10 +108,11 @@ export class ContentContainer extends React.Component< if ( this.gridContent && this.props.rowToHighlight && - this.props.rowToHighlight !== prevProps.rowToHighlight + (this.props.rowToHighlight !== prevProps.rowToHighlight || + this.props.columnToHighlight !== prevProps.columnToHighlight) ) { this.gridContent.scrollToCell({ - columnIndex: 0, + columnIndex: this.props.columnToHighlight || 0, rowIndex: this.props.rowToHighlight, }); } diff --git a/src/ui/realm-browser/RealmBrowser.tsx b/src/ui/realm-browser/RealmBrowser.tsx index 9d2139bf5..e5e186a95 100644 --- a/src/ui/realm-browser/RealmBrowser.tsx +++ b/src/ui/realm-browser/RealmBrowser.tsx @@ -17,6 +17,7 @@ export const RealmBrowser = ({ onCellClick, schemas, rowToHighlight, + columnToHighlight, getSelectedData, selectedSchemaName, list, @@ -37,10 +38,12 @@ export const RealmBrowser = ({ object: any, property: Realm.ObjectSchemaProperty, value: any, - index: number, + rowIndex: number, + columnIndex: number, ) => void; schemas: Realm.ObjectSchema[]; rowToHighlight: number | null; + columnToHighlight?: number; selectedSchemaName?: string | null; list: IList | null; onContextMenu: ( @@ -73,6 +76,7 @@ export const RealmBrowser = ({ schema={getSelectedSchema()} onCellChange={onCellChange} onCellClick={onCellClick} + columnToHighlight={columnToHighlight} rowToHighlight={rowToHighlight} data={values} onContextMenu={onContextMenu} diff --git a/src/ui/realm-browser/RealmBrowserContainer.tsx b/src/ui/realm-browser/RealmBrowserContainer.tsx index 355a772da..cdddaab7f 100644 --- a/src/ui/realm-browser/RealmBrowserContainer.tsx +++ b/src/ui/realm-browser/RealmBrowserContainer.tsx @@ -28,6 +28,7 @@ export interface IState { list: IList | null; selectedSchemaName?: string | null; rowToHighlight: number | null; + columnToHighlight?: number; confirmModal: { yes: () => void; no: () => void; @@ -62,6 +63,7 @@ export class RealmBrowserContainer extends React.Component< list: null, selectedSchemaName: null, rowToHighlight: null, + columnToHighlight: undefined, contextMenu: null, confirmModal: null, selectObject: null, @@ -143,9 +145,10 @@ export class RealmBrowserContainer extends React.Component< object: any, property: Realm.ObjectSchemaProperty, value: any, - index: number, + rowIndex: number, + columnIndex: number, ) => { - this.setState({ rowToHighlight: index }); + this.setState({ rowToHighlight: rowIndex, columnToHighlight: columnIndex }); if (this.clickTimeout) { clearTimeout(this.clickTimeout); @@ -171,7 +174,12 @@ export class RealmBrowserContainer extends React.Component< parent: object, property, }; - this.setState({ list, selectedSchemaName: 'list', rowToHighlight: null }); + this.setState({ + list, + selectedSchemaName: 'list', + rowToHighlight: null, + columnToHighlight: undefined, + }); } else if (property.type === 'object') { if (value) { const index = this.realm @@ -181,6 +189,7 @@ export class RealmBrowserContainer extends React.Component< selectedSchemaName: property.objectType, list: null, rowToHighlight: index, + columnToHighlight: 0, }); } } diff --git a/src/ui/realm-browser/SelectObject.tsx b/src/ui/realm-browser/SelectObject.tsx index ad3cc02d7..780dcf554 100644 --- a/src/ui/realm-browser/SelectObject.tsx +++ b/src/ui/realm-browser/SelectObject.tsx @@ -14,12 +14,14 @@ export interface IProps { export interface IState { rowToHighlight?: number; + columnToHighlight?: number; objectToAdd?: Realm.ObjectSchema; } export class SelectObject extends React.Component { public state = { rowToHighlight: undefined, + columnToHighlight: undefined, objectToAdd: undefined, }; @@ -27,16 +29,21 @@ export class SelectObject extends React.Component { object: any, property: Realm.ObjectSchemaProperty, value: any, - index: number, + rowIndex: number, + columnIndex: number, ) => { - this.setState({ rowToHighlight: index, objectToAdd: object }); + this.setState({ + rowToHighlight: rowIndex, + columnToHighlight: columnIndex, + objectToAdd: object, + }); }; public setNewValue = () => this.props.updateReference(this.state.objectToAdd); public render() { const { status, schema, data, close, schemaName, optional } = this.props; - const { rowToHighlight, objectToAdd } = this.state; + const { rowToHighlight, objectToAdd, columnToHighlight } = this.state; return ( Select a new {schemaName} @@ -48,6 +55,7 @@ export class SelectObject extends React.Component { data={data} onCellClick={this.onCellClick} rowToHighlight={rowToHighlight} + columnToHighlight={columnToHighlight} /> )} From 8f6df1fde4b5a005f03305ad861485229b7fa2bc Mon Sep 17 00:00:00 2001 From: Jose Grana Date: Sat, 30 Sep 2017 12:41:44 +0200 Subject: [PATCH 7/7] feat(realm-browser): improve typings and context-menu order --- src/ui/realm-browser/Content.tsx | 2 +- src/ui/realm-browser/ContentContainer.tsx | 2 +- src/ui/realm-browser/RealmBrowser.tsx | 10 ++-- .../realm-browser/RealmBrowserContainer.tsx | 46 ++++++++++--------- src/ui/realm-browser/Sidebar.tsx | 4 +- 5 files changed, 34 insertions(+), 30 deletions(-) diff --git a/src/ui/realm-browser/Content.tsx b/src/ui/realm-browser/Content.tsx index 01c845adc..8cff6b390 100644 --- a/src/ui/realm-browser/Content.tsx +++ b/src/ui/realm-browser/Content.tsx @@ -39,7 +39,7 @@ export const Content = ({ ) => void; onColumnWidthChanged: (index: number, width: number) => void; schema: Realm.ObjectSchema | null; - rowToHighlight?: number | null; + rowToHighlight?: number; data: Realm.Results | any; query: string | null; onQueryChange: (e: React.SyntheticEvent) => void; diff --git a/src/ui/realm-browser/ContentContainer.tsx b/src/ui/realm-browser/ContentContainer.tsx index 2121e279d..81718fbaa 100644 --- a/src/ui/realm-browser/ContentContainer.tsx +++ b/src/ui/realm-browser/ContentContainer.tsx @@ -15,7 +15,7 @@ export interface IContentContainerProps { columnIndex: number, ) => void; schema: Realm.ObjectSchema | null; - rowToHighlight?: number | null; + rowToHighlight?: number; columnToHighlight?: number; data: Realm.Results | any; onContextMenu?: ( diff --git a/src/ui/realm-browser/RealmBrowser.tsx b/src/ui/realm-browser/RealmBrowser.tsx index e5e186a95..614ed712a 100644 --- a/src/ui/realm-browser/RealmBrowser.tsx +++ b/src/ui/realm-browser/RealmBrowser.tsx @@ -42,10 +42,10 @@ export const RealmBrowser = ({ columnIndex: number, ) => void; schemas: Realm.ObjectSchema[]; - rowToHighlight: number | null; + rowToHighlight?: number; columnToHighlight?: number; - selectedSchemaName?: string | null; - list: IList | null; + selectedSchemaName?: string; + list?: IList; onContextMenu: ( e: React.SyntheticEvent, object: any, @@ -53,10 +53,10 @@ export const RealmBrowser = ({ ) => void; contextMenu: any; onContextMenuClose: () => void; - confirmModal: { + confirmModal?: { yes: () => void; no: () => void; - } | null; + }; selectObject?: any; closeSelectObject: () => void; updateObjectReference: (object: any) => void; diff --git a/src/ui/realm-browser/RealmBrowserContainer.tsx b/src/ui/realm-browser/RealmBrowserContainer.tsx index cdddaab7f..104a49a9f 100644 --- a/src/ui/realm-browser/RealmBrowserContainer.tsx +++ b/src/ui/realm-browser/RealmBrowserContainer.tsx @@ -25,14 +25,14 @@ export interface IList { export interface IState { schemas: Realm.ObjectSchema[]; - list: IList | null; - selectedSchemaName?: string | null; - rowToHighlight: number | null; + list?: IList; + selectedSchemaName?: string; + rowToHighlight?: number; columnToHighlight?: number; - confirmModal: { + confirmModal?: { yes: () => void; no: () => void; - } | null; + }; contextMenu: { x: number; y: number; @@ -60,12 +60,12 @@ export class RealmBrowserContainer extends React.Component< super(); this.state = { schemas: [], - list: null, - selectedSchemaName: null, - rowToHighlight: null, + list: undefined, + selectedSchemaName: undefined, + rowToHighlight: undefined, columnToHighlight: undefined, contextMenu: null, - confirmModal: null, + confirmModal: undefined, selectObject: null, }; } @@ -118,8 +118,12 @@ export class RealmBrowserContainer extends React.Component< if (selectedSchemaName !== name) { const rowToHighlight = objectToScroll ? this.realm.objects(name).indexOf(objectToScroll) - : null; - this.setState({ selectedSchemaName: name, list: null, rowToHighlight }); + : undefined; + this.setState({ + selectedSchemaName: name, + list: undefined, + rowToHighlight, + }); } }; @@ -177,7 +181,7 @@ export class RealmBrowserContainer extends React.Component< this.setState({ list, selectedSchemaName: 'list', - rowToHighlight: null, + rowToHighlight: undefined, columnToHighlight: undefined, }); } else if (property.type === 'object') { @@ -187,7 +191,7 @@ export class RealmBrowserContainer extends React.Component< .indexOf(value); this.setState({ selectedSchemaName: property.objectType, - list: null, + list: undefined, rowToHighlight: index, columnToHighlight: 0, }); @@ -218,12 +222,7 @@ export class RealmBrowserContainer extends React.Component< ? list.data.indexOf(object) : this.realm.objects(object.objectSchema().name).indexOf(object); - const actions = [ - { - label: 'Delete', - onClick: () => this.openConfirmModal(object), - }, - ]; + const actions = []; if (property.type === 'object') { actions.push({ @@ -232,6 +231,11 @@ export class RealmBrowserContainer extends React.Component< }); } + actions.push({ + label: 'Delete', + onClick: () => this.openConfirmModal(object), + }); + this.setState({ rowToHighlight: index, contextMenu: { @@ -281,14 +285,14 @@ export class RealmBrowserContainer extends React.Component< this.setState({ confirmModal: { yes: () => this.deleteObject(object), - no: () => this.setState({ confirmModal: null }), + no: () => this.setState({ confirmModal: undefined }), }, }); }; public deleteObject = (object: Realm.Object) => { this.realm.write(() => this.realm.delete(object)); - this.setState({ rowToHighlight: null, confirmModal: null }); + this.setState({ rowToHighlight: undefined, confirmModal: undefined }); }; public onContextMenuClose = (): void => { diff --git a/src/ui/realm-browser/Sidebar.tsx b/src/ui/realm-browser/Sidebar.tsx index 1dbddc499..f4be913d2 100644 --- a/src/ui/realm-browser/Sidebar.tsx +++ b/src/ui/realm-browser/Sidebar.tsx @@ -16,9 +16,9 @@ export const Sidebar = ({ }: { onSchemaSelected: (name: string, objectToScroll?: any) => void; schemas: Realm.ObjectSchema[]; - selectedSchemaName?: string | null; + selectedSchemaName?: string; getSchemaLength: (name: string) => number; - list: IList | null; + list?: IList; }) => (
Classes