diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/collections/collectionSchema/SchemaCellField.tsx | 44 |
1 files changed, 22 insertions, 22 deletions
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index 5048bf899..3be9167fe 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -111,7 +111,6 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro } componentDidUpdate(prevProps: Readonly<SchemaCellFieldProps>) { - this.addReactComponents(); super.componentDidUpdate(prevProps); if (this._editing && this._props.editing === false) { this.finalizeEdit(false, true, false); @@ -127,24 +126,25 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro this.finalizeEdit(false, true, false); } - addReactComponents = () => { - if (!this._inputref) return; + // addReactComponents = () => { + // if (!this._inputref) return; - const dateRefs = Array.from(this._inputref.querySelectorAll('.date-placeholder')); + // const dateRefs = Array.from(this._inputref.querySelectorAll('.date-placeholder')); - dateRefs.forEach(ref => { - const root = createRoot(ref); - root.render(<DatePicker dateFormat="Pp" selected={new Date()} onChange={emptyFunction} />); - }) - } + // dateRefs.forEach(ref => { + // const root = createRoot(ref); + // root.render(<DatePicker dateFormat="Pp" selected={new Date} onChange={emptyFunction} />); + // }) + // } generateSpan = (text: string, cell: HTMLDivElement | undefined): JSX.Element => { const selfRef = text === this.selfRefPattern; + const color: string | undefined = cell?.style.borderTop.replace('2px solid', ''); return ( <span style={{ textDecoration: selfRef ? 'underline' : 'none', textDecorationColor: 'red', - color: selfRef ? 'gray' : cell?.style.borderTop.replace('2px solid', '')}}> + color: selfRef ? 'gray' : color}}> {text} </span> ); @@ -176,7 +176,6 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro }) chunkedText = chunkedText.replace(/{{date}}/g, `<span class="date-placeholder">placeholder text</span>`); - console.log(chunkedText) return chunkedText; } @@ -206,10 +205,10 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro const cellRef = this.verifyCellRef(text); if (cellRef) { eles.push(this.generateSpan(cellRef[0], cellRef[1])); - } else if (!text.replace('{{date}}', '')){ + } else if (text && !text.replace('{{date}}', '')){ eles.push(<DatePicker dateFormat="Pp" selected={new Date()} onChange={emptyFunction} />); - } else if (!text.replace('{{boolean}}', '')) { - eles.push(<div>boolean thing</div>); + } else if (text && !text.replace('{{boolean}}', '')) { + eles.push(<span>boolean thing</span>); } else { eles.push(<span>{text}</span>); } @@ -218,8 +217,8 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro return eles; } - parseElements = () => { - let string: string = this._unrenderedContent; + parseElements = (content: string) => { + let string: string = content; if (string.startsWith(':')) string = string.slice(1); if (string.startsWith('=')) string = string.slice(1); @@ -229,7 +228,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro let currChar = ''; for (let i = 0; i < string.length; i++){ currChar = string[i]; - if ((currChar === ' ' && subStr.trim()) || (currChar !== ' ' && !subStr.trim())) { + if (((string.charCodeAt(i) === 32 || string.charCodeAt(i) === 160) && subStr.trim()) || (currChar !== ' ' && !subStr.trim())) { chunks.push(subStr); subStr = currChar; } else { @@ -256,7 +255,8 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro @action setContent = (content: string, restoreCursorPos?: boolean) => { const pos = this.cursorPosition; - this._displayedContent = this.makeSpans(content); + this._displayedContent = content; + this._displayedElements = this.parseElements(content); restoreCursorPos && setTimeout(() => this.setCursorPosition(pos)); } @@ -339,9 +339,9 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro } this._unrenderedContent = targVal; this._props.highlightCells?.(targVal); - if (this.shouldUpdate(prevVal, targVal)) {this.setContent(targVal, true)}; + if (this.parseElements(targVal).length > this.parseElements(this._displayedContent).length) this.setContent(targVal, true); this.setupRefSelect(this.refSelectConditionMet); - console.log(this.parseElements()); + console.log(this.parseElements(targVal)); }; setupRefSelect = (enabled: boolean) => { @@ -461,8 +461,8 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro suppressContentEditableWarning={true} //dangerouslySetInnerHTML={{ __html: this._displayedContent }} > - {this.parseElements().map((ele, index) => { - return <div key={index}>{ele}</div> + {this._displayedElements.map((ele, index) => { + return <span key={index}>{ele}</span>; })} </div> ); |