diff options
Diffstat (limited to 'src')
4 files changed, 126 insertions, 94 deletions
diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 55185e30e..2dd3eeff4 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -20,6 +20,7 @@ import { CollectionView } from "./CollectionView"; import { NumCast, StrCast, BoolCast, FieldValue, Cast } from "../../../new_fields/Types"; import { Docs } from "../../documents/Documents"; import { DocumentContentsView } from "../nodes/DocumentContentsView"; +import { SelectionManager } from "../../util/SelectionManager"; export interface CellProps { @@ -118,6 +119,8 @@ export class CollectionSchemaCell extends React.Component<CellProps> { } renderCellWithType(type: string | undefined) { + let dragRef: React.RefObject<HTMLDivElement> = React.createRef(); + let props: FieldViewProps = { Document: this.props.rowProps.original, DataDoc: this.props.rowProps.original, @@ -136,10 +139,19 @@ export class CollectionSchemaCell extends React.Component<CellProps> { PanelWidth: returnZero, addDocTab: this.props.addDocTab, }; + let onItemDown = (e: React.PointerEvent) => { SetupDrag(this._focusRef, () => this._document[props.fieldKey] instanceof Doc ? this._document[props.fieldKey] : this._document, this._document[props.fieldKey] instanceof Doc ? (doc: Doc, target: Doc, addDoc: (newDoc: Doc) => any) => addDoc(doc) : this.props.moveDocument, this._document[props.fieldKey] instanceof Doc ? "alias" : this.props.Document.schemaDoc ? "copy" : undefined)(e); }; + let onPointerEnter = (e: React.PointerEvent): void => { + if (e.buttons === 1 && SelectionManager.GetIsDragging() && (type === "document" || type === undefined)) { + dragRef!.current!.className = "doc-drag-over"; + } + }; + let onPointerLeave = (e: React.PointerEvent): void => { + dragRef!.current!.className = ""; + }; let field = props.Document[props.fieldKey]; let contents: any = "incorrect type"; @@ -153,40 +165,42 @@ export class CollectionSchemaCell extends React.Component<CellProps> { } return ( - <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown}> - <div className="collectionSchemaView-cellContents" ref={this.dropRef} onPointerDown={onItemDown} key={props.Document[Id]}> - <EditableView - editing={this._isEditing} - isEditingCallback={this.isEditingCallback} - display={"inline"} - contents={contents} - height={Number(MAX_ROW_HEIGHT)} - GetValue={() => { - let field = props.Document[props.fieldKey]; - if (Field.IsField(field)) { - return Field.toScriptString(field); + <div className="" ref={dragRef} onPointerEnter={onPointerEnter} onPointerLeave={onPointerLeave}> + <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown}> + <div className="collectionSchemaView-cellContents" ref={type === undefined || type === "document" ? this.dropRef: null} onPointerDown={onItemDown} key={props.Document[Id]}> + <EditableView + editing={this._isEditing} + isEditingCallback={this.isEditingCallback} + display={"inline"} + contents={contents} + height={Number(MAX_ROW_HEIGHT)} + GetValue={() => { + let field = props.Document[props.fieldKey]; + if (Field.IsField(field)) { + return Field.toScriptString(field); + } + return ""; } - return ""; - } - } - SetValue={(value: string) => { - let script = CompileScript(value, { requiredType: type, addReturn: true, params: { this: Doc.name } }); - if (!script.compiled) { - return false; } - return this.applyToDoc(props.Document, script.run); - }} - OnFillDown={async (value: string) => { - let script = CompileScript(value, { requiredType: type, addReturn: true, params: { this: Doc.name } }); - if (!script.compiled) { - return; - } - const run = script.run; - //TODO This should be able to be refactored to compile the script once - const val = await DocListCastAsync(this.props.Document[this.props.fieldKey]); - val && val.forEach(doc => this.applyToDoc(doc, run)); - }} /> - </div > + SetValue={(value: string) => { + let script = CompileScript(value, { requiredType: type, addReturn: true, params: { this: Doc.name } }); + if (!script.compiled) { + return false; + } + return this.applyToDoc(props.Document, script.run); + }} + OnFillDown={async (value: string) => { + let script = CompileScript(value, { requiredType: type, addReturn: true, params: { this: Doc.name } }); + if (!script.compiled) { + return; + } + const run = script.run; + //TODO This should be able to be refactored to compile the script once + const val = await DocListCastAsync(this.props.Document[this.props.fieldKey]); + val && val.forEach(doc => this.applyToDoc(doc, run)); + }} /> + </div > + </div> </div> ); } @@ -218,6 +232,13 @@ export class CollectionSchemaStringCell extends CollectionSchemaCell { } @observer +export class CollectionSchemaDocCell extends CollectionSchemaCell { + render() { + return this.renderCellWithType("document"); + } +} + +@observer export class CollectionSchemaCheckboxCell extends CollectionSchemaCell { @observable private _isChecked: boolean = typeof this.props.rowProps.original[this.props.rowProps.column.id as string] === "boolean" ? BoolCast(this.props.rowProps.original[this.props.rowProps.column.id as string]) : false; @@ -245,21 +266,3 @@ export class CollectionSchemaCheckboxCell extends CollectionSchemaCell { ); } } - -@observer -export class CollectionSchemaDocCell extends CollectionSchemaCell { - render() { - return this.renderCellWithType("document"); - // let reference = React.createRef<HTMLDivElement>(); - // let onItemDown = (e: React.PointerEvent) => { - // // (!this.props.CollectionView.props.isSelected() ? undefined : - // // SetupDrag(reference, () => props.Document, this.props.moveDocument, this.props.Document.schemaDoc ? "copy" : undefined)(e)); - // }; - // return ( - // <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown}> - // <div className="collectionSchemaView-cellContents" onPointerDown={onItemDown} key={this._document[Id]} ref={reference}> - // </div > - // </div> - // ); - } -} diff --git a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx index 3a61881a7..8ed71d70f 100644 --- a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx +++ b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx @@ -105,6 +105,7 @@ export interface MovableRowProps { ScreenToLocalTransform: () => Transform; addDoc: (doc: Doc, relativeTo?: Doc, before?: boolean) => boolean; moveDoc: DragManager.MoveFunction; + rowFocused: boolean; } export class MovableRow extends React.Component<MovableRowProps> { @@ -178,8 +179,10 @@ export class MovableRow extends React.Component<MovableRowProps> { let reference = React.createRef<HTMLDivElement>(); let onItemDown = SetupDrag(reference, () => doc, this.props.moveDoc); + console.log("row focused", this.props.rowFocused); + return ( - <div className="collectionSchema-row" ref={this.createRowDropTarget}> + <div className={this.props.rowFocused ? "collectionSchema-row row-focused" : "collectionSchema-row"} ref={this.createRowDropTarget}> <div className="collectionSchema-row-wrapper" ref={this._header} onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}> <div className="row-dragger" ref={reference} onPointerDown={onItemDown}> <ReactTableDefaults.TrComponent> diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index e511bc1bd..ef93e381b 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -11,6 +11,7 @@ height: calc(100% - 25px); // overflow: hidden; overflow-x: scroll; + border: none; .collectionSchemaView-previewRegion { position: relative; @@ -70,10 +71,11 @@ .rt-thead { &.-header { - background: $intermediate-color; - color: $light-color; + // background: $intermediate-color; + // color: $light-color; font-size: 12px; height: 30px; + border: 1px solid $intermediate-color; } .rt-resizable-header { @@ -89,11 +91,14 @@ height: 100%; overflow: visible; } + + .rt-th { + padding: 0; + } } .rt-th { - max-height: $MAX_ROW_HEIGHT; - padding: 3px 7px; + // max-height: $MAX_ROW_HEIGHT; font-size: 13px; text-align: center; @@ -108,16 +113,17 @@ .rt-tr-group { direction: ltr; - max-height: $MAX_ROW_HEIGHT; + flex: 0 1 auto; + // max-height: $MAX_ROW_HEIGHT; // for sub comp - &:nth-child(even) { - background-color: $light-color; - } + // &:nth-child(even) { + // background-color: $light-color; + // } - &:nth-child(odd) { - background-color: $light-color-secondary; - } + // &:nth-child(odd) { + // background-color: $light-color-secondary; + // } &:last-child { border-bottom: $intermediate-color; @@ -128,13 +134,13 @@ .rt-tr { width: 100%; - height: $MAX_ROW_HEIGHT; + // height: $MAX_ROW_HEIGHT; } .rt-td { border-width: 1px; border-right-color: $intermediate-color; - max-height: $MAX_ROW_HEIGHT; + // max-height: $MAX_ROW_HEIGHT; padding: 0; font-size: 13px; text-align: center; @@ -184,6 +190,7 @@ .collectionSchemaView-header { height: 100%; + color: $intermediate-color; .collectionSchema-header-menu { height: 100%; @@ -223,10 +230,6 @@ position: relative; max-width: 175px; - // .keys-search { - - // } - .keys-options-wrapper { width: 100%; max-height: 150px; @@ -261,17 +264,18 @@ } .collectionSchema-row { - height: $MAX_ROW_HEIGHT; - // display: flex; + // height: $MAX_ROW_HEIGHT; + + &.row-focused { + background-color: $light-color-secondary; + } .row-dragger { - height: $MAX_ROW_HEIGHT; + // height: $MAX_ROW_HEIGHT; } .collectionSchema-row-wrapper { - max-height: $MAX_ROW_HEIGHT; - // width: 100%; - // border: 1px solid lightgray; + // max-height: $MAX_ROW_HEIGHT; &.row-above { border-top: 1px solid red; @@ -287,8 +291,6 @@ .collectionSchemaView-cellWrapper { - // height: $MAX_ROW_HEIGHT; - // background-color: red; height: 100%; padding: 4px; @@ -311,6 +313,21 @@ border: none; } } + + p { + width: 100%; + height: 100%; + word-wrap: break-word; + } +} + +.doc-drag-over { + background-color: red; +} + +.collectionSchemaView-toolbar { + display: flex; + justify-content: flex-end; } #preview-schema-checkbox-div { diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index ea09926d4..a1251b028 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -81,6 +81,21 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); } @computed get tableColumns(): Column<Doc>[] { let possibleKeys = this.documentKeys.filter(key => this.columns.findIndex(existingKey => existingKey.toUpperCase() === key.toUpperCase()) === -1); + let columns: Column<Doc>[] = [ + { + expander: true, + Header: "", + width: 45, + Expander: (rowInfo) => { + if (rowInfo.original.type === "collection") { + return <div>+</div>; + } else { + return null; + } + } + } + ]; + let cols = this.columns.map(col => { let focusedRow = this._focusedCell.row; let focusedCol = this._focusedCell.col; @@ -139,22 +154,10 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { }, minWidth: 200, }; - }) 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, minWidth?: number}[]; - - // cols.push({ - // expander: true, - // Header: "", - // width: 45, - // Expander: (rowInfo) => { - // if (rowInfo.original.type === "collection") { - // return <div>+</div>; - // } else { - // return null; - // } - // } - // }); - - cols.push({ + });// 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, minWidth?: number}[]; + columns.push(...cols); + + columns.push({ Header: <CollectionSchemaAddColumnHeader createColumn={this.createColumn} // possibleKeys={possibleKeys} @@ -171,7 +174,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { // SubComponent={row => row.original.type === "collection" && <div>SUB</div>} - return cols; + return columns; } // onHeaderDrag = (columnName: string) => { @@ -201,11 +204,17 @@ 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; @@ -486,7 +495,7 @@ 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>} + SubComponent={row => row.original.type === "collection" && <div>this is the sub component</div>} />; |