diff options
| -rw-r--r-- | src/client/views/collections/CollectionSchemaCells.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionSchemaView.scss | 1 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionSchemaView.tsx | 22 |
3 files changed, 22 insertions, 3 deletions
diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 31a9baa11..7c82ed720 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -42,7 +42,7 @@ export interface CellProps { export class CollectionSchemaCell extends React.Component<CellProps> { @observable protected _isEditing: boolean = false; protected _focusRef = React.createRef<HTMLDivElement>(); - protected _document = this.props.rowProps.original; + protected _document: Doc = this.props.rowProps.original; componentDidMount() { if (this._focusRef.current) { diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 045994751..2134362ce 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -108,6 +108,7 @@ .rt-tr-group { direction: ltr; max-height: $MAX_ROW_HEIGHT; + // for sub comp &:nth-child(even) { background-color: $light-color; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 02c1ec082..7c7309a4a 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -4,7 +4,7 @@ import { faCog, faPlus } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable, trace, untracked } from "mobx"; import { observer } from "mobx-react"; -import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults, TableCellRenderer, Column } from "react-table"; +import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults, TableCellRenderer, Column, RowInfo } from "react-table"; import "react-table/react-table.css"; import { emptyFunction, returnFalse, returnZero, returnOne } from "../../../Utils"; import { Doc, DocListCast, DocListCastAsync, Field, FieldResult } from "../../../new_fields/Doc"; @@ -132,7 +132,20 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { return <CollectionSchemaCell {...props}/>; } }; - }) as {Header: TableCellRenderer, accessor: (doc: Doc) => FieldResult<Field>, id: string, Cell: (rowProps: CellInfo) => JSX.Element, width?: number, resizable?: boolean}[]; + }) as {Header?: TableCellRenderer, accessor?: (doc: Doc) => FieldResult<Field>, id?: string, Cell?: (rowProps: CellInfo) => JSX.Element, width?: number, resizable?: boolean, expander?: boolean, Expander?: (rowInfo: RowInfo) => JSX.Element | null}[]; + + cols.push({ + expander: true, + Header: "", + width: 45, + Expander: (rowInfo) => { + if (rowInfo.original.type === "collection") { + return <div>+</div>; + } else { + return null; + } + } + }); cols.push({ Header: <CollectionSchemaAddColumnHeader @@ -149,6 +162,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { resizable: false }); + // SubComponent={row => row.original.type === "collection" && <div>SUB</div>} + return cols; } @@ -453,7 +468,10 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { sortable={false} TrComponent={MovableRow} sorted={Array.from(this._sortedColumns.values())} + SubComponent={row => row.original.type === "collection" && <div>this is the sub component</div>} />; + + } @computed |