diff options
Diffstat (limited to 'src/client/views/collections/CollectionNoteTakingViewColumn.tsx')
| -rw-r--r-- | src/client/views/collections/CollectionNoteTakingViewColumn.tsx | 39 |
1 files changed, 25 insertions, 14 deletions
diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx index e00fdb50c..95aecc7d0 100644 --- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx @@ -1,3 +1,4 @@ +/* eslint-disable jsx-a11y/control-has-associated-label */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; @@ -14,7 +15,7 @@ import { DocUtils, Docs } from '../../documents/Documents'; import { DragManager } from '../../util/DragManager'; import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; -import { undoBatch } from '../../util/UndoManager'; +import { undoBatch, undoable } from '../../util/UndoManager'; import { ContextMenu } from '../ContextMenu'; import { ContextMenuProps } from '../ContextMenuItem'; import { EditableView } from '../EditableView'; @@ -113,13 +114,15 @@ export class CollectionNoteTakingViewColumn extends ObservableReactComponent<CSV }; @action - headingChanged = (value: string, shiftDown?: boolean) => { + headingChanged = (value: string /* , shiftDown?: boolean */) => { const castedValue = this.getValue(value); if (castedValue) { if (this._props.colHeaderData?.map(i => i.heading).indexOf(castedValue.toString()) !== -1) { return false; } - this._props.docList.forEach(d => (d[this._props.pivotField] = castedValue)); + this._props.docList.forEach(d => { + d[this._props.pivotField] = castedValue; + }); if (this._props.headingObject) { this._props.headingObject.setHeading(castedValue.toString()); this._heading = this._props.headingObject.heading; @@ -129,10 +132,14 @@ export class CollectionNoteTakingViewColumn extends ObservableReactComponent<CSV return false; }; - @action pointerEntered = () => (this._hover = true); - @action pointerLeave = () => (this._hover = false); - @undoBatch - addTextNote = (char: string) => this.addNewTextDoc('-typed text-', false, true); + @action pointerEntered = () => { + this._hover = true; + }; + @action pointerLeave = () => { + this._hover = false; + }; + + addTextNote = undoable(() => this.addNewTextDoc('-typed text-', false, true), 'add text note'); // addNewTextDoc is called when a user starts typing in a column to create a new node @action @@ -195,6 +202,7 @@ export class CollectionNoteTakingViewColumn extends ObservableReactComponent<CSV } return this._props.addDocument?.(created); } + return undefined; }, icon: 'compress-arrows-alt', }) @@ -214,6 +222,7 @@ export class CollectionNoteTakingViewColumn extends ObservableReactComponent<CSV } return this._props.addDocument?.(created) || false; } + return undefined; }, icon: 'compress-arrows-alt', }) @@ -238,7 +247,7 @@ export class CollectionNoteTakingViewColumn extends ObservableReactComponent<CSV const key = this._props.pivotField; const heading = this._heading; const columnYMargin = this._props.headingObject ? 0 : this._props.yMargin; - const evContents = heading ? heading : '25'; + const evContents = heading || '25'; const headingView = this._props.headingObject ? ( <div key={heading} @@ -252,17 +261,16 @@ export class CollectionNoteTakingViewColumn extends ObservableReactComponent<CSV className="collectionNoteTakingView-sectionHeader-subCont" title={evContents === `No Value` ? `Documents that don't have a ${key} value will go here. This column cannot be removed.` : ''} style={{ background: evContents !== `No Value` ? this._color : 'inherit' }}> - <EditableView GetValue={() => evContents} isEditingCallback={isEditing => isEditing && this._props.select(false)} SetValue={this.headingChanged} contents={evContents} oneLine={true} /> + <EditableView GetValue={() => evContents} isEditingCallback={isEditing => isEditing && this._props.select(false)} SetValue={this.headingChanged} contents={evContents} oneLine /> </div> {(this._props.colHeaderData?.length ?? 0) > 1 && ( - <button className="collectionNoteTakingView-sectionDelete" onClick={this.deleteColumn}> + <button type="button" className="collectionNoteTakingView-sectionDelete" onClick={this.deleteColumn}> <FontAwesomeIcon icon="trash" size="lg" /> </button> )} </div> ) : null; const templatecols = this.columnWidth; - const type = this._props.Document.type; return ( <> {headingView} @@ -270,7 +278,7 @@ export class CollectionNoteTakingViewColumn extends ObservableReactComponent<CSV <div className="collectionNoteTakingView-columnStack"> <div key={`${heading}-stack`} - className={`collectionNoteTakingView-Nodes`} + className="collectionNoteTakingView-Nodes" style={{ padding: `${columnYMargin}px ${0}px ${this._props.yMargin}px ${0}px`, gridGap: this._props.gridGap, @@ -282,10 +290,13 @@ export class CollectionNoteTakingViewColumn extends ObservableReactComponent<CSV {!this._props.chromeHidden ? ( <div className="collectionNoteTakingView-DocumentButtons" style={{ display: this._props.isContentActive() ? 'flex' : 'none', marginBottom: 10 }}> <div className="collectionNoteTakingView-addDocumentButton" style={{ color: lightOrDark(this._props.backgroundColor?.()) }}> - <EditableView GetValue={returnEmptyString} SetValue={this.addNewTextDoc} textCallback={this.addTextNote} placeholder={"Type ':' for commands"} contents={'+ Node'} menuCallback={this.menuCallback} /> + <EditableView GetValue={returnEmptyString} SetValue={this.addNewTextDoc} textCallback={this.addTextNote} placeholder={"Type ':' for commands"} contents="+ Node" menuCallback={this.menuCallback} /> </div> <div className="collectionNoteTakingView-addDocumentButton" style={{ color: lightOrDark(this._props.backgroundColor?.()) }}> - <EditableView {...this._props.editableViewProps()} /> + { + // eslint-disable-next-line react/jsx-props-no-spreading + <EditableView {...this._props.editableViewProps()} /> + } </div> </div> ) : null} |