From b8907e69160d97d919fcd83eb86d60e3634205ca Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 7 May 2024 14:55:54 -0400 Subject: lint cleanup for schemaview --- .../collectionSchema/CollectionSchemaView.tsx | 179 +++++++++------------ .../collections/collectionSchema/SchemaRowBox.tsx | 11 +- .../collectionSchema/SchemaTableCell.tsx | 7 +- src/client/views/nodes/DocumentView.tsx | 3 - 4 files changed, 82 insertions(+), 118 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index fd57f3d13..7c2cfd15f 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -1,7 +1,7 @@ /* eslint-disable no-restricted-syntax */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Popup, PopupTrigger, Type } from 'browndash-components'; -import { ObservableMap, action, computed, makeObservable, observable, observe } from 'mobx'; +import { ObservableMap, action, computed, makeObservable, observable, observe, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../ClientUtils'; @@ -10,9 +10,8 @@ import { Doc, DocListCast, Field, FieldType, NumListCast, Opt, StrListCast } fro import { DocData } from '../../../../fields/DocSymbols'; import { Id } from '../../../../fields/FieldSymbols'; import { List } from '../../../../fields/List'; -import { listSpec } from '../../../../fields/Schema'; import { ColumnType } from '../../../../fields/SchemaHeaderField'; -import { BoolCast, Cast, NumCast, StrCast } from '../../../../fields/Types'; +import { BoolCast, NumCast, StrCast } from '../../../../fields/Types'; import { DocUtils } from '../../../documents/DocUtils'; import { Docs, DocumentOptions, FInfo } from '../../../documents/Documents'; import { DragManager } from '../../../util/DragManager'; @@ -84,8 +83,8 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _selectedCol: number = 0; @observable _selectedCells: Array = []; @observable _mouseCoordinates = { x: 0, y: 0 }; - @observable _lowestSelectedIndex = -1; //lowest index among selected rows; used to properly sync dragged docs with cursor position - @observable _relCursorIndex = -1; //cursor index relative to the current selected cells + @observable _lowestSelectedIndex = -1; // lowest index among selected rows; used to properly sync dragged docs with cursor position + @observable _relCursorIndex = -1; // cursor index relative to the current selected cells @observable _draggedColIndex = 0; @observable _colBeingDragged = false; @@ -121,11 +120,7 @@ export class CollectionSchemaView extends CollectionSubView() { } @computed get columnKeys() { - return Cast(this.layoutDoc.schema_columnKeys, listSpec('string'), defaultColumnKeys); - } - - @computed get rowKeys() { - return Cast(this.layoutDoc.schema_rowKeys, listSpec('string'), []); + return StrListCast(this.layoutDoc.schema_columnKeys, defaultColumnKeys); } @computed get storedColumnWidths() { @@ -135,7 +130,7 @@ export class CollectionSchemaView extends CollectionSubView() { ); const totalWidth = widths.reduce((sum, width) => sum + width, 0); - //If the total width of all columns is not the width of the schema table minus the width of the row menu, resize them appropriately + // If the total width of all columns is not the width of the schema table minus the width of the row menu, resize them appropriately if (totalWidth !== this.tableWidth - CollectionSchemaView._rowMenuWidth) { return widths.map(w => (w / totalWidth) * (this.tableWidth - CollectionSchemaView._rowMenuWidth)); } @@ -143,8 +138,7 @@ export class CollectionSchemaView extends CollectionSubView() { } @computed get rowHeights() { - const heights = this.childDocs.map(() => this.rowHeightFunc()); - return heights; + return this.childDocs.map(() => this.rowHeightFunc()); } @computed get displayColumnWidths() { @@ -209,9 +203,7 @@ export class CollectionSchemaView extends CollectionSubView() { DocumentView.DeselectView(DocumentView.getFirstDocumentView(curDoc)); this.deselectCell(curDoc); } else { - const shift: boolean = e.shiftKey; - const ctrl: boolean = e.ctrlKey; - this.selectCell(newDoc, this._selectedCol, shift, ctrl); + this.selectCell(newDoc, this._selectedCol, e.shiftKey, e.ctrlKey); this.scrollToDoc(newDoc, {}); } } @@ -230,9 +222,7 @@ export class CollectionSchemaView extends CollectionSubView() { DocumentView.DeselectView(DocumentView.getFirstDocumentView(curDoc)); this.deselectCell(curDoc); } else { - const shift: boolean = e.shiftKey; - const ctrl: boolean = e.ctrlKey; - this.selectCell(newDoc, this._selectedCol, shift, ctrl); + this.selectCell(newDoc, this._selectedCol, e.shiftKey, e.ctrlKey); this.scrollToDoc(newDoc, {}); } } @@ -284,7 +274,7 @@ export class CollectionSchemaView extends CollectionSubView() { this.addNewKey(newKey, defaultVal); } - const currKeys = [...this.columnKeys]; + const currKeys = this.columnKeys.slice(); // copy the column key array first, then change it. currKeys[index] = newKey; this.layoutDoc.schema_columnKeys = new List(currKeys); }; @@ -368,7 +358,7 @@ export class CollectionSchemaView extends CollectionSubView() { @undoBatch moveColumn = (fromIndex: number, toIndex: number) => { if (this._selectedCol === fromIndex) this._selectedCol = toIndex; - else if (toIndex === this._selectedCol) this._selectedCol = fromIndex; //keeps selected cell consistent + else if (toIndex === this._selectedCol) this._selectedCol = fromIndex; // keeps selected cell consistent const currKeys = this.columnKeys.slice(); currKeys.splice(toIndex, 0, currKeys.splice(fromIndex, 1)[0]); @@ -400,7 +390,7 @@ export class CollectionSchemaView extends CollectionSubView() { else index = i + 1; } return total + curr; - }, 2 * CollectionSchemaView._rowMenuWidth); //probably prone to issues; find better implementation (!!!) + }, 2 * CollectionSchemaView._rowMenuWidth); // probably prone to issues; find better implementation (!!!) return index; }; @@ -412,11 +402,11 @@ export class CollectionSchemaView extends CollectionSubView() { */ @action setRelCursorIndex = (mouseY: number) => { - this._mouseCoordinates.y = mouseY; //updates this.rowDropIndex computed value to overwrite the old cached value + this._mouseCoordinates.y = mouseY; // updates this.rowDropIndex computed value to overwrite the old cached value - let rowHeight = CollectionSchemaView._rowHeight; - let adjInitMouseY = mouseY - rowHeight - 100; //rowHeight: height of the column menu cells | 100: height of the top menu - let yOffset = this._lowestSelectedIndex * rowHeight; + const rowHeight = CollectionSchemaView._rowHeight; + const adjInitMouseY = mouseY - rowHeight - 100; // rowHeight: height of the column menu cells | 100: height of the top menu + const yOffset = this._lowestSelectedIndex * rowHeight; const heights = this._selectedDocs.map(() => this.rowHeightFunc()); let index: number = 0; @@ -430,9 +420,8 @@ export class CollectionSchemaView extends CollectionSubView() { this._relCursorIndex = index; }; - //Uses current mouse position to calculate the indexes of actively dragged docs findRowDropIndex = (mouseY: number) => { - let rowHeight = CollectionSchemaView._rowHeight; + const rowHeight = CollectionSchemaView._rowHeight; let index: number = 0; this.rowHeights.reduce((total, curr, i) => { if (total <= mouseY && total + curr >= mouseY) { @@ -442,39 +431,31 @@ export class CollectionSchemaView extends CollectionSubView() { return total + curr; }, rowHeight); - //fix index if selected rows are dragged out of bounds + // fix index if selected rows are dragged out of bounds let adjIndex = index - this._relCursorIndex; - let maxY = this.rowHeights.reduce((total, curr) => total + curr, 0) + rowHeight; + const maxY = this.rowHeights.reduce((total, curr) => total + curr, 0) + rowHeight; if (mouseY > maxY) adjIndex = this.childDocs.length - 1; else if (adjIndex <= 0) adjIndex = 0; return adjIndex; }; - @action - highlightDraggedColumn = (index: number) => { + highlightDraggedColumn = (index: number) => this._colEles.forEach((colRef, i) => { - let edgeStyle = ''; - if (i === index) edgeStyle = `solid 2px ${Colors.MEDIUM_BLUE}`; - - //border styles of menu cell - colRef.style.borderLeft = edgeStyle; - colRef.style.borderRight = edgeStyle; - colRef.style.borderTop = edgeStyle; - - for (let doc = 0; doc < this.childDocs.length; ++doc) { - if (i === this._selectedCol && this._selectedDocs.includes(this.childDocs[doc])) { - continue; - } else { - this._rowEles.get(this.childDocs[doc]).children[1].children[i].style.borderLeft = edgeStyle; - this._rowEles.get(this.childDocs[doc]).children[1].children[i].style.borderRight = edgeStyle; - if (doc === this.childDocs.length - 1) { - this._rowEles.get(this.childDocs[doc]).children[1].children[i].style.borderBottom = edgeStyle; - } - } - } + const edgeStyle = i === index ? `solid 2px ${Colors.MEDIUM_BLUE}` : ''; + const cellEles = [ + colRef, + ...this.childDocs // + .filter(doc => i !== this._selectedCol || !this._selectedDocs.includes(doc)) + .map(doc => this._rowEles.get(doc).children[1].children[i]), + ]; + cellEles[0].style.borderTop = edgeStyle; + cellEles.forEach(ele => { + ele.style.borderLeft = edgeStyle; + ele.style.borderRight = edgeStyle; + }); + cellEles.slice(-1)[0].style.borderBottom = edgeStyle; }); - }; @action addRowRef = (doc: Doc, ref: HTMLDivElement) => this._rowEles.set(doc, ref); @@ -518,7 +499,7 @@ export class CollectionSchemaView extends CollectionSubView() { if (!shiftKey && !ctrlKey) this.clearSelection(); !this._selectedCells && (this._selectedCells = []); !shiftKey && this._selectedCells && this._selectedCells.push(doc); - let index = this.rowIndex(doc); + const index = this.rowIndex(doc); if (!this) return; const lastSelected = Array.from(this._selectedDocs).lastElement(); @@ -533,13 +514,13 @@ export class CollectionSchemaView extends CollectionSubView() { if (this._lowestSelectedIndex === -1 || index < this._lowestSelectedIndex) this._lowestSelectedIndex = index; - //let selectedIndexes: Array = this._selectedCells.map(doc => this.rowIndex(doc)); + // let selectedIndexes: Array = this._selectedCells.map(doc => this.rowIndex(doc)); }; @action deselectCell = (doc: Doc) => { this._selectedCells && (this._selectedCells = this._selectedCells.filter(d => d !== doc)); - if (this.rowIndex(doc) == this._lowestSelectedIndex) this._lowestSelectedIndex = Math.min(...this._selectedDocs.map(doc => this.rowIndex(doc))); + if (this.rowIndex(doc) === this._lowestSelectedIndex) this._lowestSelectedIndex = Math.min(...this._selectedDocs.map(d => this.rowIndex(d))); }; @action @@ -553,8 +534,7 @@ export class CollectionSchemaView extends CollectionSubView() { @computed get rowDropIndex() { const mouseY = this.ScreenToLocalBoxXf().transformPoint(this._mouseCoordinates.x, this._mouseCoordinates.y)[1]; - const index = this.findRowDropIndex(mouseY); - return index; + return this.findRowDropIndex(mouseY); } onInternalDrop = (e: Event, de: DragManager.DropEvent) => { @@ -563,7 +543,7 @@ export class CollectionSchemaView extends CollectionSubView() { e.stopPropagation(); this._colEles.forEach((colRef, i) => { - //style for menu cell + // style for menu cell colRef.style.borderLeft = ''; colRef.style.borderRight = ''; colRef.style.borderTop = ''; @@ -581,23 +561,20 @@ export class CollectionSchemaView extends CollectionSubView() { const draggedDocs = de.complete.docDragData?.draggedDocuments; if (draggedDocs && super.onInternalDrop(e, de) && !this.sortField) { - let map = draggedDocs?.map(doc => this.rowIndex(doc)); + const map = draggedDocs?.map(doc => this.rowIndex(doc)); console.log(map); this.dataDoc[this.fieldKey ?? 'data'] = new List([...this.sortedDocs.docs]); this.clearSelection(); draggedDocs.forEach(doc => { DocumentView.addViewRenderedCb(doc, dv => dv.select(true)); }); - this._lowestSelectedIndex = Math.min(...draggedDocs?.map(doc => this.rowIndex(doc))); + this._lowestSelectedIndex = Math.min(...(draggedDocs?.map(doc => this.rowIndex(doc)) ?? [])); return true; } return false; }; - onExternalDrop = async (e: React.DragEvent): Promise => { - super.onExternalDrop(e, {}, undoBatch(action(docs => docs.map((doc: Doc) => this.addDocument(doc))))); - }; - + onExternalDrop = (e: React.DragEvent) => super.onExternalDrop(e, {}, docs => docs.map(doc => this.addDocument(doc))); onDividerDown = (e: React.PointerEvent) => setupMoveUpEvents(this, e, this.onDividerMove, emptyFunction, emptyFunction); @action @@ -693,9 +670,9 @@ export class CollectionSchemaView extends CollectionSubView() { case 'Enter': this._menuKeys.length > 0 && this._menuValue.length > 0 ? this.setKey(this._menuKeys[0]) - : action(() => { + : runInAction(() => { this._makeNewField = true; - })(); + }); break; case 'Escape': this.closeColumnMenu(); @@ -715,9 +692,9 @@ export class CollectionSchemaView extends CollectionSubView() { }; setColumnValues = (key: string, value: string) => { - const selectedDocs: Doc[] = new Array(); + const selectedDocs: Doc[] = []; this.childDocs.forEach(doc => { - let docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0); + const docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0); if (docIsSelected) { selectedDocs.push(doc); } @@ -732,7 +709,7 @@ export class CollectionSchemaView extends CollectionSubView() { setSelectedColumnValues = (key: string, value: string) => { this.childDocs.forEach(doc => { - let docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0); + const docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0); if (docIsSelected) { Doc.SetField(doc, key, value); } @@ -963,17 +940,11 @@ export class CollectionSchemaView extends CollectionSubView() { } return (
- e.stopPropagation()} onClick={e => e.stopPropagation()} - onChange={action((e: any) => { - if (e.target.checked) { - Doc.setDocFilter(this.Document, columnKey, key, 'check'); - } else { - Doc.setDocFilter(this.Document, columnKey, key, 'remove'); - } - })} + onChange={e => Doc.setDocFilter(this.Document, columnKey, key, e.target.checked ? 'check' : 'remove')} checked={bool} /> {key} @@ -1006,9 +977,9 @@ export class CollectionSchemaView extends CollectionSubView() { this._mouseCoordinates = { x: e.clientX, y: e.clientY }; } if (this._colBeingDragged) { - let newIndex = this.findColDropIndex(e.clientX); - if (newIndex != this._draggedColIndex) this.moveColumn(this._draggedColIndex, newIndex ?? this._draggedColIndex); - this._draggedColIndex = newIndex ? newIndex : this._draggedColIndex; + const newIndex = this.findColDropIndex(e.clientX); + if (newIndex !== this._draggedColIndex) this.moveColumn(this._draggedColIndex, newIndex ?? this._draggedColIndex); + this._draggedColIndex = newIndex || this._draggedColIndex; this.highlightDraggedColumn(newIndex ?? this._draggedColIndex); } }; @@ -1045,7 +1016,7 @@ export class CollectionSchemaView extends CollectionSubView() { render() { return (
this.createDashEventsTarget(ele)} onDrop={this.onExternalDrop.bind(this)} onPointerMove={e => this.onPointerMove(e)}> -
+
void; - childDocs: () => { docs: Doc[] }; - rowHeight: () => number; -} - -@observer -class CollectionSchemaViewDocs extends React.Component { - render() { - return ( -
- {this.props.childDocs().docs.map((doc: Doc, index: number) => ( -
- { - // eslint-disable-next-line no-use-before-define - - } -
- ))} -
- ); - } -} - interface CollectionSchemaViewDocProps { schema: CollectionSchemaView; index: number; @@ -1239,3 +1185,24 @@ class CollectionSchemaViewDoc extends ObservableReactComponent void; + childDocs: () => { docs: Doc[] }; + rowHeight: () => number; +} + +@observer +class CollectionSchemaViewDocs extends React.Component { + render() { + return ( +
+ {this.props.childDocs().docs.map((doc: Doc, index: number) => ( +
+ +
+ ))} +
+ ); + } +} diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 059aa912e..760089ffb 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -41,7 +41,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { } @computed get schemaDoc() { - return this.DocumentView?.().containerViewPath?.().lastElement()?.Document; + return this.schemaView.Document; } @computed get rowIndex() { @@ -104,12 +104,13 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { e, returnFalse, emptyFunction, - undoable(e => { - e.stopPropagation(); + undoable(clickEv => { + clickEv.stopPropagation(); Doc.toggleLockedPosition(this.Document); - }, 'Delete Row') //(??) should this be something else? + }, 'toggle document lock') ) - }> + } + /> } diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 48c86ac27..b017eb62b 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -82,7 +82,7 @@ export class SchemaTableCell extends ObservableReactComponent doc === this._props.Document).length !== 0 && this._props.selectedCol() === this._props.col; - return isSelected; + return this._props.isRowActive() && selectedDocs?.filter(doc => doc === this._props.Document).length !== 0 && this._props.selectedCol() === this._props.col; } @computed get defaultCellContent() { @@ -333,7 +332,7 @@ export class SchemaRTFCell extends ObservableReactComponent doc === this._props.Document).length !== 0 && this._props.selectedCol() === this._props.col; - //return this._props.isRowActive() && selected?.[0] === this._props.Document && selected[1] === this._props.col; + // return this._props.isRowActive() && selected?.[0] === this._props.Document && selected[1] === this._props.col; } // if the text box blurs and none of its contents are focused(), then the edit finishes diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 03cdc8472..dc597e5ff 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1319,8 +1319,6 @@ export class DocumentView extends DocComponent() { screenToLocalScale = () => this._props.ScreenToLocalTransform().Scale; isSelected = () => this.IsSelected; select = (extendSelection: boolean, focusSelection?: boolean) => { - // if (this.IsSelected && DocumentView.Selected().length > 1) DocumentView.DeselectView(this); - // else { DocumentView.SelectView(this, extendSelection); if (focusSelection) { DocumentView.showDocument(this.Document, { @@ -1329,7 +1327,6 @@ export class DocumentView extends DocComponent() { zoomTime: 500, }); } - // } }; backgroundColor = () => this._docViewInternal?.backgroundBoxColor; DataTransition = () => this._props.DataTransition?.() || StrCast(this.Document.dataTransition); -- cgit v1.2.3-70-g09d2