diff options
5 files changed, 70 insertions, 50 deletions
diff --git a/src/client/views/EditableView.scss b/src/client/views/EditableView.scss index 27b260450..e492068c8 100644 --- a/src/client/views/EditableView.scss +++ b/src/client/views/EditableView.scss @@ -5,6 +5,7 @@ hyphens: auto; overflow: hidden; height: 100%; + width: 100%; min-width: 20; text-overflow: ellipsis; } @@ -33,6 +34,8 @@ pointer-events: all; } + + .editableView-input:focus { border: none; outline: none; diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 011b6c77a..4c4ef227a 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -1,6 +1,6 @@ /* eslint-disable jsx-a11y/no-static-element-interactions */ /* eslint-disable jsx-a11y/click-events-have-key-events */ -import { action, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx'; +import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import * as Autosuggest from 'react-autosuggest'; @@ -55,7 +55,7 @@ export interface EditableProps { placeholder?: string; wrap?: string; // nowrap, pre-wrap, etc - isColHeader?: boolean; + showKeyNotVal?: boolean; } /** @@ -277,9 +277,35 @@ export class EditableView extends ObservableReactComponent<EditableProps> { ); } + display = () => { + let toDisplay; + const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n'); + if (this._props.showKeyNotVal){ + toDisplay = <input className="editableView-input" + value={this._props.GetValue()} + readOnly + style={{ display: this._props.display, overflow: 'auto', pointerEvents: 'none', fontSize: this._props.fontSize, width: '100%', margin: 0, background: this._props.background}} + // eslint-disable-next-line jsx-a11y/no-autofocus + /> + } else { + toDisplay = (<span + style={{ + fontStyle: this._props.fontStyle, + fontSize: this._props.fontSize, + }}> + { + // eslint-disable-next-line react/jsx-props-no-spreading + this._props.fieldContents ? <FieldView {...this._props.fieldContents} /> : this.props.contents ? this._props.contents?.valueOf() : '' + } + </span>) + } + + return toDisplay; + } + render() { const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n'); - if ((this._editing && gval !== undefined) || this._props.isColHeader) { + if ((this._editing && gval !== undefined)) { return this._props.sizeToContent ? ( <div style={{ display: 'grid', minWidth: 100 }}> <div style={{ display: 'inline-block', position: 'relative', height: 0, width: '100%', overflow: 'hidden' }}>{gval}</div> @@ -300,21 +326,13 @@ export class EditableView extends ObservableReactComponent<EditableProps> { minHeight: '10px', whiteSpace: this._props.oneLine ? 'nowrap' : 'pre-line', height: this._props.height, + width: '100%', maxHeight: this._props.maxHeight, fontStyle: this._props.fontStyle, fontSize: this._props.fontSize, }} onClick={this.onClick}> - <span - style={{ - fontStyle: this._props.fontStyle, - fontSize: this._props.fontSize, - }}> - { - // eslint-disable-next-line react/jsx-props-no-spreading - this._props.fieldContents ? <FieldView {...this._props.fieldContents} /> : this.props.contents ? this._props.contents?.valueOf() : '' - } - </span> + {this.display()} </div> ); } diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 269bb4de5..fd2e882d9 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -159,7 +159,7 @@ flex-grow: 2; margin: 5px; overflow: hidden; - min-width: 20%; + min-width: 100%; } .schema-column-edit-wrapper { diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 3d7c7882e..db23f874e 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -331,7 +331,7 @@ export class CollectionSchemaView extends CollectionSubView() { const currKeys = this.columnKeys.slice(); currKeys.splice(index, 1); - this.layoutDoc.schema_columnKeys = new List<string>(currKeys); + this.layoutDoc.schema_columnKeys = new List<string>(currKeys); }; @action @@ -677,19 +677,6 @@ export class CollectionSchemaView extends CollectionSubView() { })} /> ); - case ColumnType.Equation: - return ( - <input - type="text" - name="" - id="" - value={this._newFieldDefault ?? ''} - onPointerDown={e => e.stopPropagation()} - onChange={action((e: any) => { - this._newFieldDefault = e.target.value; - })} - /> - ); default: return undefined; } @@ -714,7 +701,6 @@ export class CollectionSchemaView extends CollectionSubView() { @action setKey = (key: string, defaultVal?: any, index?: number) => { if (this.columnKeys.includes(key)){ - this._newFieldWarning = 'Field already exists'; return; } @@ -798,12 +784,29 @@ export class CollectionSchemaView extends CollectionSubView() { this._filterColumnIndex = undefined; }; - openContextMenu = (x: number, y: number, index: number) => { + openContextMenu = (x: number, y: number, index: number, fieldType: ColumnType) => { this.closeColumnMenu(); this.closeFilterMenu(); + + let toDisplay: string = ''; + switch (fieldType) { + case ColumnType.Number: + toDisplay = 'number'; + break; + case ColumnType.String: + toDisplay = 'string'; + break; + case ColumnType.Boolean: + toDisplay = 'boolean'; + break; + default: + toDisplay = 'string'; + break; + } + ContextMenu.Instance.clearItems(); ContextMenu.Instance.addItem({ - description: 'Change field', + description: `Field type: ${toDisplay}`, event: () => this.openColumnMenu(index, false), icon: 'pencil-alt', }); @@ -886,18 +889,6 @@ export class CollectionSchemaView extends CollectionSubView() { /> string </div> - <div className="schema-key-type-option"> - <input - type="radio" - name="newFieldType" - checked={this._newFieldType === ColumnType.Equation} - onChange={action(() => { - this._newFieldType = ColumnType.Equation; - this._newFieldDefault = ''; - })} - /> - equation - </div> <div className="schema-key-default-val">value: {this.fieldDefaultInput}</div> <div className="schema-key-warning">{this._newFieldWarning}</div> <div diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index 58ac4e45d..f404eb444 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -21,6 +21,7 @@ import { CollectionSchemaView } from './CollectionSchemaView'; import { SnappingManager } from '../../../util/SnappingManager'; import { undoable } from '../../../util/UndoManager'; import { FInfo } from '../../../documents/Documents'; +import { ColumnType } from '../../../../fields/SchemaHeaderField'; export interface SchemaColumnHeaderProps { Document: Doc; @@ -38,7 +39,7 @@ export interface SchemaColumnHeaderProps { rowHeight: () => number; resizeColumn: (e: any, index: number) => void; dragColumn: (e: any, index: number) => boolean; - openContextMenu: (x: number, y: number, index: number) => void; + openContextMenu: (x: number, y: number, index: number, fieldType: ColumnType) => void; setColRef: (index: number, ref: HTMLDivElement) => void; rootSelected?: () => boolean; columnWidth: () => number; @@ -49,7 +50,8 @@ export interface SchemaColumnHeaderProps { @observer export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHeaderProps> { - @observable _editing: boolean = false; + @observable _editing: boolean | undefined = false; + @observable _fieldType: ColumnType = ColumnType.String; @computed get fieldKey() { return this._props.columnKeys[this._props.columnIndex]; @@ -125,9 +127,9 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea allowCRs={false} contents={undefined} fieldContents={fieldProps} - editing={undefined} - isColHeader={true} // tells the EditableView to display the fieldKey itself, and not its value - GetValue={() => {console.log(this.fieldKey); return this.fieldKey}} + editing={undefined} + showKeyNotVal={true} // tells the EditableView to display the fieldKey itself, and not its value + GetValue={() => this.fieldKey} SetValue={undoable((value: string, shiftKey?: boolean, enterKey?: boolean) => { if (shiftKey && enterKey) { // if shift & enter, set value of each cell in column this.setColumnValues(value, value); @@ -142,7 +144,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea } // staticView = () => { - // return <div className="schema-column-title" onPointerDown={e => {this._editing = true; console.log(this._editing)}}>{this.fieldKey}</div> + // return <div className="schema-column-title" onPointerDown={e => {this._editing = true; console.log(this._editing)}}>{this.fieldKey}</div> // } render() { @@ -153,6 +155,12 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea width: this._props.columnWidths[this._props.columnIndex], }} onPointerDown={this.setupDrag} + // onPointerEnter={() => { + // console.log(true); + // this._editing = true}} + // onPointerLeave={() => { + // console.log(false); + // this._editing = false}} ref={col => { if (col) { this._props.setColRef(this._props.columnIndex, col); @@ -163,7 +171,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea <div>{this.editableView}</div> <div className="schema-header-menu"> - <div className="schema-header-button" onPointerDown={e => this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex)}> + <div className="schema-header-button" onPointerDown={e => this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex, this._fieldType)}> <FontAwesomeIcon icon="ellipsis-h" /> </div> <div className="schema-sort-button" onPointerDown={this.sortClicked} style={this._props.sortField === this.fieldKey ? { backgroundColor: Colors.MEDIUM_BLUE } : {}}> |