diff options
Diffstat (limited to 'src')
5 files changed, 45 insertions, 52 deletions
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 05c926399..1eec11e64 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -54,6 +54,8 @@ export interface EditableProps { background?: string | undefined; placeholder?: string; wrap?: string; // nowrap, pre-wrap, etc + + isColHeader?: boolean; } /** @@ -135,7 +137,9 @@ export class EditableView extends ObservableReactComponent<EditableProps> { if (!e.currentTarget.value) this._props.OnEmpty?.(); break; case 'Enter': + console.log("enter press detected") if (this._props.allowCRs !== true) { + console.log("noCrs??") e.stopPropagation(); if (!e.ctrlKey) { this.finalizeEdit(e.currentTarget.value, e.shiftKey, false, true); @@ -242,9 +246,9 @@ export class EditableView extends ObservableReactComponent<EditableProps> { /> ) : this._props.oneLine !== false && this._props.GetValue()?.toString().indexOf('\n') === -1 ? ( <input - className="editableView-input" + className="editableView-input" ref={r => { this._inputref = r; }} // prettier-ignore - style={{ display: this._props.display, overflow: 'auto', fontSize: this._props.fontSize, minWidth: 20, background: this._props.background }} + style={{ display: this._props.display, overflow: 'auto', fontSize: this._props.fontSize, minWidth: 20, background: this._props.background}} placeholder={this._props.placeholder} onBlur={e => this.finalizeEdit(e.currentTarget.value, false, true, false)} defaultValue={this._props.GetValue()} @@ -277,7 +281,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> { render() { const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n'); - if (this._editing && gval !== undefined) { + if ((this._editing && gval !== undefined) || this._props.isColHeader) { 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> diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 6fb8e40db..269bb4de5 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -162,6 +162,13 @@ min-width: 20%; } + .schema-column-edit-wrapper { + flex-grow: 2; + margin: 5px; + overflow: hidden; + min-width: 20%; + } + .schema-header-menu { margin: 5px; } @@ -176,6 +183,11 @@ } } + .editableView-input { + border: none; + outline: none; + } + /*.schema-column-resizer.left { min-width: 5px; transform: translate(-3px, 0px); diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index d74cb56cf..2d181a772 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -277,6 +277,7 @@ export class CollectionSchemaView extends CollectionSubView() { this.addNewKey(newKey, defaultVal); console.log("added") } + console.log("changed " + index) const currKeys = this.columnKeys.slice(); // copy the column key array first, then change it. currKeys[index] = newKey; @@ -321,39 +322,6 @@ export class CollectionSchemaView extends CollectionSubView() { return modField; } - // @action - // setupAutoUpdate = (equation: string, doc: Doc) => { - // return autorun(() => { - // const result = this.parsedEquationResult(equation, doc); - // doc[DocData][equation] = result; - // }); - // } - - // parseEquation = (eq: string): [string, Map<string, Doc>] => { - // const variablePattern = /[a-z]+/gi; - // const tagRefPattern = /{([^}]*)}/g; - // const docTagRefPairs = new Map<string, Doc>(); - // let modifiedEq = eq; - // let match; - - // while (match = tagRefPattern.exec(eq)) { - // const ref = match[1]; - // const [doc, key] = this.getCellInfoFromTag(ref); - // docTagRefPairs.set(ref, doc); - // const replacement = `docTagRefPairs.get('${ref}').${key}`; - // modifiedEq = modifiedEq.replace(new RegExp(`{${ref}}`, 'g'), replacement); - // } - - // modifiedEq = modifiedEq.replace(variablePattern, (match) => `doc.${match}`); - - // return [modifiedEq, docTagRefPairs]; - // } - - // parsedEquationResult = (eq: [string, Map<string, Doc>], doc: any): number => { - // const func = new Function('doc', 'docTagRefPairs', 'return ' + eq[0]); - // return func(doc, eq[1]); - // } - @undoBatch removeColumn = (index: number) => { if (this.columnKeys.length === 1) return; @@ -745,14 +713,13 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - setKey = (key: string, defaultVal?: any) => { + setKey = (key: string, defaultVal?: any, index?: number) => { console.log("setKey called with" + key) if (this._makeNewColumn) { this.addColumn(key, defaultVal); this._makeNewColumn = false; } else { - this.changeColumnKey(this._columnMenuIndex!, key, defaultVal); - console.log("changed") + this.changeColumnKey(this._columnMenuIndex! | index!, key, defaultVal); } this.closeColumnMenu(); }; diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index b74b2ace9..794d5d8ac 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -53,12 +53,12 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea @observable _editing: boolean = false; - get fieldKey() { + @computed get fieldKey() { return this._props.columnKeys[this._props.columnIndex]; } getFinfo = computedFn((fieldKey: string) => this._props.schemaView?.fieldInfos.get(fieldKey)); - setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue);} + setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue, this._props.columnIndex);} @action sortClicked = (e: React.PointerEvent) => { @@ -108,24 +108,34 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea }; const readOnly = this.getFinfo(fieldKey)?.readOnly ?? false; const cursor = !readOnly ? 'text' : 'default'; - const pointerEvents = 'all'; + const pointerEvents: 'all' | 'none' = 'all'; return { color, fieldProps, cursor, pointerEvents }; } @computed get editableView() { const { color, fieldProps, pointerEvents } = this.renderProps(this._props); - return <div className='column-header-edit-wrapper'> + return <div className='schema-column-edit-wrapper' + style={{ + color, + width: '100%', + pointerEvents, + }}> <EditableView ref={r => this._props.autoFocus && r?.setIsFocused(true)} oneLine={this._props.oneLine} allowCRs={this._props.allowCRs} contents={undefined} fieldContents={fieldProps} - editing={this._editing ? undefined : false} - GetValue={() => Field.toKeyValueString(fieldProps.Document, this.fieldKey, SnappingManager.MetaKey).replace(/[";]/g, '')} - SetValue={undoable((value: string) => { - this.setColumnValues(value, value); + editing={undefined} + isColHeader={true} + GetValue={() => {console.log(this.fieldKey); return this.fieldKey}} + SetValue={undoable((value: string, shiftKey?: boolean, enterKey?: boolean) => { + if (shiftKey && enterKey) { + this.setColumnValues(value, value); + this._props.finishEdit?.(); + return true; + } this._props.finishEdit?.(); return true; }, 'edit column header')} @@ -133,9 +143,9 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea </div> } - staticView = () => { - return <div className="schema-column-title" onPointerDown={e => {this._editing = true; console.log(this._editing)}}>{this.fieldKey}</div> - } + // staticView = () => { + // return <div className="schema-column-title" onPointerDown={e => {this._editing = true; console.log(this._editing)}}>{this.fieldKey}</div> + // } render() { return ( @@ -152,7 +162,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea }}> <div className="schema-column-resizer left" onPointerDown={e => this._props.resizeColumn(e, this._props.columnIndex)} /> - <div>{this._editing ? this.editableView : this.staticView()}</div> + <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)}> diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 733cf3722..51a92ff35 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -194,7 +194,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro onPointerDown={action(e => { const shift: boolean = e.shiftKey; const ctrl: boolean = e.ctrlKey; - if (this._props.isRowActive?.() !== false) { + if (this._props.isRowActive?.()) { if (selectedCell(this._props) && ctrl) { this._props.selectCell(this._props.Document, this._props.col, shift, ctrl); e.stopPropagation(); |