From d3edc59402efb5d8ada602305a95a7a3a7f0ba95 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Mon, 22 Jul 2019 17:08:46 -0400 Subject: can have expanded collection in schema --- .../CollectionSchemaMovableTableHOC.tsx | 2 - .../views/collections/CollectionSchemaView.scss | 9 ++- .../views/collections/CollectionSchemaView.tsx | 93 ++++++++++------------ 3 files changed, 51 insertions(+), 53 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx index 8ed71d70f..db60e657a 100644 --- a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx +++ b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx @@ -179,8 +179,6 @@ export class MovableRow extends React.Component { let reference = React.createRef(); let onItemDown = SetupDrag(reference, () => doc, this.props.moveDoc); - console.log("row focused", this.props.rowFocused); - return (
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index ef93e381b..4b20e8241 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -6,9 +6,9 @@ border-style: solid; border-radius: $border-radius; box-sizing: border-box; - position: absolute; + // position: absolute; width: 100%; - height: calc(100% - 25px); + // height: calc(100% - 25px); // overflow: hidden; overflow-x: scroll; border: none; @@ -333,4 +333,9 @@ #preview-schema-checkbox-div { margin-left: 20px; font-size: 12px; +} + +.sub { + padding: 20px; + background-color: red; } \ No newline at end of file diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index a1251b028..25e90a25e 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -61,7 +61,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { private _startPreviewWidth = 0; private DIVIDER_WIDTH = 4; - // @observable _selectedIndex = 0; @observable _columnsPercentage = 0; @observable _keys: string[] = []; @observable _newKeyName: string = ""; @@ -70,8 +69,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @observable _cellIsEditing: boolean = false; @observable _focusedCell: {row: number, col: number} = {row: 0, col: 0}; @observable _sortedColumns: Map = new Map(); + @observable _openCollections: Array = []; @observable private _node : HTMLDivElement | null = null; - // @observable _schemaIsFocused: boolean = @computed get previewWidth() { return () => NumCast(this.props.Document.schemaPreviewWidth); } @computed get previewHeight() { return () => this.props.PanelHeight() - 2 * this.borderWidth; } @@ -81,27 +80,30 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); } @computed get tableColumns(): Column[] { let possibleKeys = this.documentKeys.filter(key => this.columns.findIndex(existingKey => existingKey.toUpperCase() === key.toUpperCase()) === -1); - let columns: Column[] = [ - { - expander: true, - Header: "", - width: 45, - Expander: (rowInfo) => { - if (rowInfo.original.type === "collection") { - return
+
; - } else { - return null; + let columns: Column[] = []; + + if (this.childDocs.reduce((found, doc) => found || doc.type === "collection", false)) { + columns.push( + { + expander: true, + Header: "", + width: 45, + Expander: (rowInfo) => { + if (rowInfo.original.type === "collection") { + if (rowInfo.isExpanded) return
this.onCloseCollection(rowInfo.original)}>-
; + if (!rowInfo.isExpanded) return
this.onExpandCollection(rowInfo.original)}>+
; + } else { + return null; + } + } } - } + ); } - ]; let cols = this.columns.map(col => { let focusedRow = this._focusedCell.row; let focusedCol = this._focusedCell.col; - let isSelected = SelectionManager.SelectedDocuments().length ? SelectionManager.SelectedDocuments()[0].props.Document === this.props.Document : false; - let isEditable = !this._headerIsEditing && (isSelected);// || BoolCast(this.props.Document.libraryBrush)); - console.log(BoolCast(this.props.Document.libraryBrush), isSelected); + let isEditable = !this._headerIsEditing && this.props.isSelected();// || BoolCast(this.props.Document.libraryBrush)); let header = doc) { let colType = this.getColumnType(col); if (colType === ColumnType.Number) return ; if (colType === ColumnType.String) return ; - // if (colType === ColumnType.Boolean) return ; - // if (colType === ColumnType.Checkbox) return ; if (colType === ColumnType.Boolean) return ; if (colType === ColumnType.Doc) return ; return ; }, minWidth: 200, }; - });// as {Header?: TableCellRenderer, accessor?: (doc: Doc) => FieldResult, id?: string, Cell?: (rowProps: CellInfo) => JSX.Element, width?: number, resizable?: boolean, expander?: boolean, Expander?: (rowInfo: RowInfo) => JSX.Element | null, minWidth?: number}[]; + }); columns.push(...cols); columns.push({ - Header: , + Header: , accessor: (doc: Doc) => 0, id: "add", Cell: (rowProps: CellInfo) => <>, width: 45, resizable: false }); - - // SubComponent={row => row.original.type === "collection" &&
SUB
} - return columns; } @@ -204,25 +195,12 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { if (!rowInfo) { return {}; } - let isSelected = SelectionManager.SelectedDocuments().length ? SelectionManager.SelectedDocuments()[0].props.Document === this.props.Document : false; return { ScreenToLocalTransform: this.props.ScreenToLocalTransform, addDoc: (doc: Doc, relativeTo?: Doc, before?: boolean) => Doc.AddDocToList(this.props.Document, this.props.fieldKey, doc, relativeTo, before), moveDoc: (d: Doc, target: Doc, addDoc: (doc: Doc) => boolean) => this.props.moveDocument(d, target, addDoc), rowInfo, - rowFocused: !this._headerIsEditing && isSelected && rowInfo.index === this._focusedCell.row, - // style: { - // background: rowInfo.index === this._focusedCell.row ? "lightGray" : "white", - // //color: rowInfo.index === this._selectedIndex ? "white" : "black" - // } - // onClick: action((e: React.MouseEvent, handleOriginal: Function) => { - // that.props.select(e.ctrlKey); - // that._selectedIndex = rowInfo.index; - - // if (handleOriginal) { - // handleOriginal(); - // } - // }), + rowFocused: !this._headerIsEditing && this.props.isSelected() && rowInfo.index === this._focusedCell.row, }; } @@ -239,6 +217,17 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { // } // } + @action + onExpandCollection = (collection: Doc): void => { + this._openCollections.push(collection); + } + + @action + onCloseCollection = (collection: Doc): void => { + let index = this._openCollections.findIndex(col => col === collection); + if (index > -1) this._openCollections.splice(index, 1); + } + @action setCellIsEditing = (isEditing: boolean): void => { this._cellIsEditing = isEditing; @@ -296,8 +285,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { } onKeyDown = (e: KeyboardEvent): void => { - let isSelected = SelectionManager.SelectedDocuments().length ? SelectionManager.SelectedDocuments()[0].props.Document === this.props.Document : false; - if (!this._cellIsEditing && !this._headerIsEditing && isSelected) { + if (!this._cellIsEditing && !this._headerIsEditing && this.props.isSelected()) { let direction = e.key === "Tab" ? "tab" : e.which === 39 ? "right" : e.which === 37 ? "left" : e.which === 38 ? "up" : e.which === 40 ? "down" : ""; this.changeFocusedCellByDirection(direction); } @@ -457,7 +445,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @computed get previewDocument(): Doc | undefined { let selectedIndex = this._focusedCell.row; - console.log("preview", selectedIndex); const selected = this.childDocs.length > selectedIndex ? this.childDocs[selectedIndex] : undefined; let pdc = selected ? (this.previewScript && this.previewScript !== "this" ? FieldValue(Cast(selected[this.previewScript], Doc)) : selected) : undefined; return pdc; @@ -484,6 +471,11 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @computed get reactTable() { let previewWidth = this.previewWidth() + 2 * this.borderWidth + this.DIVIDER_WIDTH + 1; + let hasCollectionChild = this.childDocs.reduce((found, doc) => found || doc.type === "collection", false); + let expandedRowsList = this._openCollections.map(col => this.childDocs.findIndex(doc => doc === col).toString()); + let expanded = {}; + expandedRowsList.forEach(row => expanded[row] = true); + return doc) { getTrProps={this.getTrProps} sortable={false} TrComponent={MovableRow} - sorted={Array.from(this._sortedColumns.values())} - SubComponent={row => row.original.type === "collection" &&
this is the sub component
} + sorted={Array.from(this._sortedColumns.values())} + expanded={expanded} + SubComponent={hasCollectionChild ? row => row.original.type === "collection" && +
: undefined} + />; -- cgit v1.2.3-70-g09d2