diff options
Diffstat (limited to 'src/client/views/collections/collectionSchema/SchemaTableCell.tsx')
-rw-r--r-- | src/client/views/collections/collectionSchema/SchemaTableCell.tsx | 40 |
1 files changed, 27 insertions, 13 deletions
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index bf36b2668..0085f9938 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -7,7 +7,7 @@ import * as React from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import Select from 'react-select'; -import { Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero } from '../../../../Utils'; +import { StopEvent, Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero } from '../../../../Utils'; import { DateField } from '../../../../fields/DateField'; import { Doc, DocListCast, Field } from '../../../../fields/Doc'; import { RichTextField } from '../../../../fields/RichTextField'; @@ -35,8 +35,9 @@ export interface SchemaTableCellProps { Document: Doc; col: number; deselectCell: () => void; - selectCell: (doc: Doc, col: number) => void; - selectedCell: () => [Doc, number] | undefined; + selectCell: (doc: Doc, col: number, shift: boolean, ctrl: boolean) => void; + selectedCells: () => Doc[] | undefined; + selectedCol: () => number; fieldKey: string; maxWidth?: () => number; columnWidth: () => number; @@ -45,6 +46,7 @@ export interface SchemaTableCellProps { isRowActive: () => boolean | undefined; getFinfo: (fieldKey: string) => FInfo | undefined; setColumnValues: (field: string, value: string) => boolean; + setSelectedColumnValues: (field: string, value: string) => boolean; oneLine?: boolean; // whether all input should fit on one line vs allowing textare multiline inputs allowCRs?: boolean; // allow carriage returns in text input (othewrise CR ends the edit) finishEdit?: () => void; // notify container that edit is over (eg. to hide view in DashFieldView) @@ -78,7 +80,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro doc = DocCast(doc.proto); } const parenCount = Math.max(0, protoCount - 1); - const color = protoCount === 0 || (fieldKey.startsWith('_') && Document[fieldKey] === undefined) ? 'black' : 'blue'; + const color = protoCount === 0 || (fieldKey.startsWith('_') && Document[fieldKey] === undefined) ? 'black' : 'blue'; //color of text in cells const textDecoration = color !== 'black' && parenCount ? 'underline' : ''; const fieldProps: FieldViewProps = { childFilters: returnEmptyFilter, @@ -111,8 +113,9 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro } @computed get selected() { - const selected: [Doc, number] | undefined = this._props.selectedCell(); - return this._props.isRowActive() && selected?.[0] === this._props.Document && selected[1] === this._props.col; + const selectedDocs: Doc[] | undefined = this._props.selectedCells(); + let isSelected = this._props.isRowActive() && selectedDocs?.filter(doc => doc === this._props.Document).length !== 0 && this._props.selectedCol() === this._props.col; + return isSelected; } @computed get defaultCellContent() { @@ -184,7 +187,17 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro return ( <div className="schema-table-cell" - onPointerDown={action(e => !this.selected && this._props.selectCell(this._props.Document, this._props.col))} + onContextMenu={e => StopEvent(e)} + onPointerDown={action(e => { + const shift: boolean = e.shiftKey; + const ctrl: boolean = e.ctrlKey; + if (this._props.isRowActive?.() !== false) { + if (this.selected && ctrl) { + this._props.selectCell(this._props.Document, this._props.col, shift, ctrl); + e.stopPropagation(); + } else !this.selected && this._props.selectCell(this._props.Document, this._props.col, shift, ctrl); + } + })} style={{ padding: this._props.padding, maxWidth: this._props.maxWidth?.(), width: this._props.columnWidth() || undefined, border: this.selected ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined }}> {this.content} </div> @@ -316,8 +329,9 @@ export class SchemaRTFCell extends ObservableReactComponent<SchemaTableCellProps } @computed get selected() { - const selected: [Doc, number] | undefined = this._props.selectedCell(); - return this._props.isRowActive() && selected?.[0] === this._props.Document && selected[1] === this._props.col; + const selected = this._props.selectedCells(); + return this._props.isRowActive() && selected && selected?.filter(doc => 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; } // if the text box blurs and none of its contents are focused(), then the edit finishes @@ -340,8 +354,8 @@ export class SchemaBoolCell extends ObservableReactComponent<SchemaTableCellProp } @computed get selected() { - const selected: [Doc, number] | undefined = this._props.selectedCell(); - return this._props.isRowActive() && selected?.[0] === this._props.Document && selected[1] === this._props.col; + const selected = this._props.selectedCells(); + return this._props.isRowActive() && selected && selected?.filter(doc => doc === this._props.Document).length !== 0 && this._props.selectedCol() === this._props.col; } render() { const { color, textDecoration, fieldProps, cursor, pointerEvents } = SchemaTableCell.renderProps(this._props); @@ -385,8 +399,8 @@ export class SchemaEnumerationCell extends ObservableReactComponent<SchemaTableC } @computed get selected() { - const selected: [Doc, number] | undefined = this._props.selectedCell(); - return this._props.isRowActive() && selected?.[0] === this._props.Document && selected[1] === this._props.col; + const selected = this._props.selectedCells(); + return this._props.isRowActive() && selected && selected?.filter(doc => doc === this._props.Document).length !== 0 && this._props.selectedCol() === this._props.col; } render() { const { color, textDecoration, fieldProps, cursor, pointerEvents } = SchemaTableCell.renderProps(this._props); |