diff options
3 files changed, 49 insertions, 27 deletions
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 8e48b4c11..0c09e12de 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -193,7 +193,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> { @action onClick = (e?: React.MouseEvent) => { this._props.onClick && this._props.onClick(); - if (this._props.editing) { + if (this._props.editing !== false) { e?.nativeEvent.stopPropagation(); if (this._ref.current && this._props.showMenuOnLoad) { this._props.menuCallback?.(this._ref.current.getBoundingClientRect().x, this._ref.current.getBoundingClientRect().y); @@ -203,11 +203,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> { } } }; - - // checkForInvalidText = (text: string) => { - // const regX = new RegExp(new Array<string>(...this._props.prohibitedText), 'g') - // } - + @action finalizeEdit(value: string, shiftDown: boolean, lostFocus: boolean, enterKey: boolean) { //if (invalid) raise error diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 018fd35b5..48c34c647 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -102,8 +102,9 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _colKeysFiltered: boolean = false; @observable _cellTags: ObservableMap = new ObservableMap<Doc, Array<string>>(); @observable _highlightedCellsInfo: Array<[doc: Doc, field: string]> = []; - @observable _cellHighlightColors: ObservableMap = new ObservableMap<[doc: Doc, field: string], string[]>(); + @observable _cellHighlightColors: ObservableMap = new ObservableMap<string, string[]>(); @observable _docs: Doc[] = []; + @observable _inCellSelectMode: boolean = false; // target HTMLelement portal for showing a popup menu to edit cell values. public get MenuTarget() { @@ -488,13 +489,13 @@ export class CollectionSchemaView extends CollectionSubView() { .filter(doc => (i !== this._selectedCol || !this._selectedDocs.includes(doc)) && !sorted) .map(doc => this._rowEles.get(doc).children[1].children[i]), ]; - !sorted && (cellEles[0].style.borderTop = edgeStyle); cellEles.forEach(ele => { - if (ele === cellEles[0] && sorted) return; + if (sorted || this.highlightedCells.includes(ele)) return; + ele.style.borderTop = ele === cellEles[0] ? edgeStyle : ''; ele.style.borderLeft = edgeStyle; ele.style.borderRight = edgeStyle; + ele.style.borderBottom = ele === cellEles.slice(-1)[0] ? edgeStyle : ''; }); - !sorted && (cellEles.slice(-1)[0].style.borderBottom = edgeStyle); }); highlightSortedColumn = (field?: string, descending?: boolean) => { @@ -521,15 +522,14 @@ export class CollectionSchemaView extends CollectionSubView() { ]; const cellCount = cellEles.length; for (let ele = 0; ele < cellCount; ++ele){ - const toHighlight = cellEles[ele]; - if (!this.highlightedCells.includes(toHighlight)){ + const currCell = cellEles[ele]; + if (this.highlightedCells.includes(currCell)) continue; const style = highlight ? desc ? `${highlightColors[cellCount - 1 - ele]}` : `${highlightColors[ele]}` : ''; - toHighlight.style.borderLeft = style; - toHighlight.style.borderRight = style; - } + currCell.style.borderLeft = style; + currCell.style.borderRight = style; } cellEles[0].style.borderTop = highlight ? desc ? `${highlightColors[cellCount - 1]}` : `${highlightColors[0]}` : ''; - if (!(this._selectedDocs.includes(this.docsWithDrag.docs[this.docsWithDrag.docs.length - 1]) && this._selectedCol === index)) cellEles[cellCount - 1].style.borderBottom = highlight ? desc ? `${highlightColors[0]}` : `${highlightColors[cellCount - 1]}` : ''; + if (!(this._selectedDocs.includes(this.docsWithDrag.docs[this.docsWithDrag.docs.length - 1]) && this._selectedCol === index) && !this.highlightedCells.includes(cellEles[cellCount - 1])) cellEles[cellCount - 1].style.borderBottom = highlight ? desc ? `${highlightColors[0]}` : `${highlightColors[cellCount - 1]}` : ''; }); } @@ -568,6 +568,20 @@ export class CollectionSchemaView extends CollectionSubView() { this._highlightedCellsInfo = []; } + restoreCellHighlights = () => { + this._highlightedCellsInfo.forEach(info => { + const doc = info[0]; + const field = info[1]; + const key = `${doc[Id]}_${field}`; + const cell = this.getCellElement(doc, field); + const color = this._cellHighlightColors.get(key)[0]; + cell.style.borderTop = color; + cell.style.borderLeft = color; + cell.style.borderRight = color; + cell.style.borderBottom = color; + }); + } + highlightCells = (text: string) => { this.removeCellHighlights(); @@ -690,10 +704,11 @@ export class CollectionSchemaView extends CollectionSubView() { colRef.style.borderTop = ''; this.childDocs.forEach(doc => { - if (!(this._selectedDocs.includes(doc) && i === this._selectedCol)) { - this._rowEles.get(doc).children[1].children[i].style.borderLeft = ''; - this._rowEles.get(doc).children[1].children[i].style.borderRight = ''; - this._rowEles.get(doc).children[1].children[i].style.borderBottom = ''; + const cell = this._rowEles.get(doc).children[1].children[i]; + if (!(this._selectedDocs.includes(doc) && i === this._selectedCol) && !(this.highlightedCells.includes(cell))) { + cell.style.borderLeft = ''; + cell.style.borderRight = ''; + cell.style.borderBottom = ''; } }); }); @@ -1178,6 +1193,7 @@ export class CollectionSchemaView extends CollectionSubView() { if (newIndex !== this._draggedColIndex) this.moveColumn(this._draggedColIndex, newIndex ?? this._draggedColIndex); this._draggedColIndex = newIndex || this._draggedColIndex; this.highlightSortedColumn(); //TODO: Make this more efficient + this.restoreCellHighlights(); !(this.sortField && this._draggedColIndex === this.columnKeys.indexOf(this.sortField)) && this.highlightDraggedColumn(newIndex ?? this._draggedColIndex); } }; diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index ccd15cbd0..e13763b45 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -1,4 +1,4 @@ -import { IReactionDisposer, action, makeObservable, observable, reaction, runInAction } from "mobx"; +import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction } from "mobx"; import { ObservableReactComponent } from "../../ObservableReactComponent"; import { observer } from "mobx-react"; import { OverlayView } from "../../OverlayView"; @@ -30,6 +30,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro _overlayDisposer?: () => void; @observable _editing: boolean = false; @observable _displayedContent = ''; + @observable _inCellSelectMode: boolean = false; constructor(props: SchemaCellFieldProps) { super(props); @@ -40,6 +41,10 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro }, 0); //must be moved to end of batch or else other docs aren't loaded, so render as d-1 in function } + @computed get inCellSelectMode() { + return + } + get docIndex(){return DocumentView.getDocViewIndex(this._props.Document);} // prettier-ignore componentDidMount(): void { @@ -90,6 +95,10 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro this.finalizeEdit(false, true, false); } + generateSpan = (text: string, cell: HTMLDivElement | undefined) => { + return `<span style="color: ${cell?.style.borderTop.replace('2px solid', '')}">${text}</span>` + } + makeSpans = (content: string) => { let chunkedText = content; @@ -109,8 +118,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro let matchNum = 0; matches.forEach((match: string) => { - const adjMatch = match.replace('this.', `d${this.docIndex}`) - chunkedText = chunkedText.replace(match, `<span style="color: ${cells.get(match)?.style.borderTop.replace('2px solid', '')}">${match}</span>`); + chunkedText = chunkedText.replace(match, this.generateSpan(match, cells.get(match))); ++matchNum; }) @@ -222,9 +230,12 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro e.stopPropagation(); this._editing = false; break; - case 'ArrowUp': case 'ArrowDown': case 'ArrowLeft': case 'ArrowRight': //prettier-ignore + case 'ArrowUp': case 'ArrowDown': case 'ArrowLeft': case 'ArrowRight': // prettier-ignore e.stopPropagation(); break; + case '+': case '*': case '/': case '%': // prettier-ignore + + break; case ' ': e.stopPropagation(); console.log('deteected') @@ -239,12 +250,11 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro case 'u': // for some reason 'u' otherwise exits the editor e.stopPropagation(); break; - case 'Shift': case 'Alt': case 'Meta': case 'Control': case ':': //prettier-ignore + case 'Shift': case 'Alt': case 'Meta': case 'Control': case ':': // prettier-ignore break; // eslint-disable-next-line no-fallthrough - case 'P': - break; default: + console.log('default called') break; } }; |