diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/collections/collectionSchema/SchemaCellField.tsx | 119 | ||||
| -rw-r--r-- | src/client/views/collections/collectionSchema/SchemaTableCell.tsx | 2 |
2 files changed, 116 insertions, 5 deletions
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index e1059b8fc..5048bf899 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -8,6 +8,15 @@ import { FieldView, FieldViewProps } from "../../nodes/FieldView"; import { ObjectField } from "../../../../fields/ObjectField"; import { Doc } from "../../../../fields/Doc"; import { DocumentView } from "../../nodes/DocumentView"; +import { date } from "serializr"; +import { createRoot } from "react-dom/client"; +import DatePicker from "react-datepicker"; +import { emptyFunction } from "../../../../Utils"; +import { DateField } from "../../../../fields/DateField"; + +enum EleType { + plainText, fieldReference, date, boolean +} export interface SchemaCellFieldProps { contents: any; @@ -34,6 +43,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro @observable _displayedContent = ''; @observable _inCellSelectMode: boolean = false; @observable _dependencyMessageShown: boolean = false; + @observable _displayedElements: JSX.Element[] = []; constructor(props: SchemaCellFieldProps) { super(props); @@ -101,6 +111,7 @@ 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); @@ -116,12 +127,31 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro this.finalizeEdit(false, true, false); } - generateSpan = (text: string, cell: HTMLDivElement | undefined) => { + addReactComponents = () => { + if (!this._inputref) return; + + 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} />); + }) + } + + generateSpan = (text: string, cell: HTMLDivElement | undefined): JSX.Element => { const selfRef = text === this.selfRefPattern; - return `<span style="text-decoration: ${selfRef ? 'underline' : 'none'}; text-decoration-color: red; color: ${selfRef ? 'gray' : cell?.style.borderTop.replace('2px solid', '')}">${text}</span>`; + return ( + <span style={{ + textDecoration: selfRef ? 'underline' : 'none', + textDecorationColor: 'red', + color: selfRef ? 'gray' : cell?.style.borderTop.replace('2px solid', '')}}> + {text} + </span> + ); } makeSpans = (content: string) => { + const spans: JSX.Element[] = []; let chunkedText = content; const pattern = /(this|d(\d+))\.(\w+)/g; @@ -140,13 +170,89 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro let matchNum = 0; matches.forEach((match: string) => { - chunkedText = chunkedText.replace(match, this.generateSpan(match, cells.get(match))); + chunkedText = chunkedText.replace(match, ''); + spans.push(this.generateSpan(match, cells.get(match))); ++matchNum; }) + chunkedText = chunkedText.replace(/{{date}}/g, `<span class="date-placeholder">placeholder text</span>`); + console.log(chunkedText) + return chunkedText; } + verifyCellRef = (text: string): [string, HTMLDivElement | undefined] | undefined => { + const pattern = /(this|d(\d+))\.(\w+)/g; + let matchedText: string = ''; + let matchedCell: HTMLDivElement | undefined = undefined; + let match: RegExpExecArray | null; + + while ((match = pattern.exec(text)) !== null) { + const cells = this._props.getCells(match[0]); + if (cells.length) { + matchedText = match[0]; + matchedCell = cells[0]; + } + } + + if (!matchedText && !matchedCell) return undefined; + else return [matchedText, matchedCell]; + } + + elementsFromText = (chunks: string[]): JSX.Element[] => { + const eles: any[] = []; + + chunks.forEach(text => { + const cellRef = this.verifyCellRef(text); + if (cellRef) { + eles.push(this.generateSpan(cellRef[0], cellRef[1])); + } else if (!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 { + eles.push(<span>{text}</span>); + } + }); + + return eles; + } + + parseElements = () => { + let string: string = this._unrenderedContent; + if (string.startsWith(':')) string = string.slice(1); + if (string.startsWith('=')) string = string.slice(1); + + const chunks: string[] = []; + + let subStr: string = ''; + let currChar = ''; + for (let i = 0; i < string.length; i++){ + currChar = string[i]; + if ((currChar === ' ' && subStr.trim()) || (currChar !== ' ' && !subStr.trim())) { + chunks.push(subStr); + subStr = currChar; + } else { + subStr += currChar; + } + } + + if (subStr) {chunks.push(subStr)}; + + return this.elementsFromText(chunks); + } + + // `<input + // style={{ marginRight: 4 }} + // type="checkbox" + // checked={BoolCast(this._props.Document[this._props.fieldKey])} + // onChange={undoBatch((value: React.ChangeEvent<HTMLInputElement> | undefined) => { + // if ((value?.nativeEvent as any).shiftKey) { + // this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + (value?.target?.checked.toString() ?? '')); + // } else Doc.SetField(this._props.Document, this._props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + (value?.target?.checked.toString() ?? '')); + // })} + // />` + @action setContent = (content: string, restoreCursorPos?: boolean) => { const pos = this.cursorPosition; @@ -235,6 +341,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro this._props.highlightCells?.(targVal); if (this.shouldUpdate(prevVal, targVal)) {this.setContent(targVal, true)}; this.setupRefSelect(this.refSelectConditionMet); + console.log(this.parseElements()); }; setupRefSelect = (enabled: boolean) => { @@ -351,8 +458,12 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro onClick={e => e.stopPropagation} onPointerUp={e => e.stopPropagation} onPointerMove={e => {e.stopPropagation(); e.preventDefault()}} - dangerouslySetInnerHTML={{ __html: this._displayedContent }} + suppressContentEditableWarning={true} + //dangerouslySetInnerHTML={{ __html: this._displayedContent }} > + {this.parseElements().map((ele, index) => { + return <div key={index}>{ele}</div> + })} </div> ); } diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index e2a05da7f..7d29e40cc 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -389,7 +389,7 @@ export class SchemaDateCell extends ObservableReactComponent<SchemaTableCellProp const { pointerEvents } = SchemaTableCell.renderProps(this._props); return ( <> - <div style={{ pointerEvents: 'none' }}> + <div style={{ pointerEvents: 'none'}}> <DatePicker dateFormat="Pp" selected={this.date?.date ?? Date.now()} onChange={emptyFunction} /> </div> {pointerEvents === 'none' ? null : ( |