From ee2f9feea2ec70dbf5a60d2b26a61b05eca3dbf5 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 23 Feb 2021 10:23:26 -0500 Subject: cleaned up EditableView a bit --- src/client/views/EditableView.tsx | 59 +++++----------------- .../collections/CollectionMasonryViewFieldRow.tsx | 35 ++++++------- .../CollectionStackingViewFieldColumn.tsx | 33 +++++------- .../views/collections/CollectionTimeView.tsx | 32 ++++++------ src/client/views/collections/TreeView.tsx | 1 + src/client/views/nodes/KeyValuePair.tsx | 7 +-- src/client/views/nodes/LinkDescriptionPopup.tsx | 1 - src/debug/Viewer.tsx | 3 +- 8 files changed, 63 insertions(+), 108 deletions(-) (limited to 'src') diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index ed7a8265f..e2f171f9d 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -3,8 +3,6 @@ import { action, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as Autosuggest from 'react-autosuggest'; import { ObjectField } from '../../fields/ObjectField'; -import { SchemaHeaderField } from '../../fields/SchemaHeaderField'; -import { DragManager } from '../util/DragManager'; import "./EditableView.scss"; export interface EditableProps { @@ -12,16 +10,13 @@ export interface EditableProps { * Called to get the initial value for editing * */ GetValue(): string | undefined; - /** * Called to apply changes * @param value - The string entered by the user to set the value to * @returns `true` if setting the value was successful, `false` otherwise * */ SetValue(value: string, shiftDown?: boolean, enterKey?: boolean): boolean; - OnFillDown?(value: string): void; - OnTab?(shift?: boolean): void; OnEmpty?(): void; @@ -45,15 +40,12 @@ export interface EditableProps { }; oneLine?: boolean; editing?: boolean; - onClick?: (e: React.MouseEvent) => boolean; isEditingCallback?: (isEditing: boolean) => void; menuCallback?: (x: number, y: number) => void; textCallback?: (char: string) => boolean; showMenuOnLoad?: boolean; - HeadingObject?: SchemaHeaderField | undefined; toggle?: () => void; - color?: string | undefined; - onDrop?: any; + background?: string | undefined; placeholder?: string; } @@ -64,6 +56,8 @@ export interface EditableProps { */ @observer export class EditableView extends React.Component { + private _ref = React.createRef(); + private _inputref = React.createRef(); @observable _editing: boolean = false; constructor(props: EditableProps) { @@ -71,17 +65,6 @@ export class EditableView extends React.Component { this._editing = this.props.editing ? true : false; } - // @action - // componentDidUpdate(nextProps: EditableProps) { - // // this is done because when autosuggest is turned on, the suggestions are passed in as a prop, - // // so when the suggestions are passed in, and no editing prop is passed in, it used to set it - // // to false. this will no longer do so -syip - // if (nextProps.editing && nextProps.editing !== this._editing) { - // this._editing = nextProps.editing; - // EditableView.loadId = ""; - // } - // } - @action componentDidUpdate() { if (this._editing && this.props.editing === false) { @@ -91,19 +74,10 @@ export class EditableView extends React.Component { } } - @action - componentDidMount() { - if (this._ref.current && this.props.onDrop) { - DragManager.MakeDropTarget(this._ref.current, this.props.onDrop.bind(this)); - } - } - @action componentWillUnmount() { this._inputref.current?.value && this.finalizeEdit(this._inputref.current.value, false, true, false); } - _didShow = false; - @action onKeyDown = (e: React.KeyboardEvent) => { switch (e.key) { @@ -149,7 +123,7 @@ export class EditableView extends React.Component { e.nativeEvent.stopPropagation(); if (this._ref.current && this.props.showMenuOnLoad) { this.props.menuCallback?.(this._ref.current.getBoundingClientRect().x, this._ref.current.getBoundingClientRect().y); - } else if (!this.props.onClick?.(e)) { + } else { this._editing = true; this.props.isEditingCallback?.(true); } @@ -158,7 +132,7 @@ export class EditableView extends React.Component { } @action - private finalizeEdit(value: string, shiftDown: boolean, lostFocus: boolean, enterKey: boolean) { + finalizeEdit(value: string, shiftDown: boolean, lostFocus: boolean, enterKey: boolean) { if (this.props.SetValue(value, shiftDown, enterKey)) { this._editing = false; this.props.isEditingCallback?.(false,); @@ -172,9 +146,7 @@ export class EditableView extends React.Component { } } - stopPropagation(e: React.SyntheticEvent) { - e.stopPropagation(); - } + stopPropagation(e: React.SyntheticEvent) { e.stopPropagation(); } @action setIsFocused = (value: boolean) => { @@ -183,8 +155,6 @@ export class EditableView extends React.Component { return wasFocused !== this._editing; } - _ref = React.createRef(); - _inputref = React.createRef(); renderEditor() { return this.props.autosuggestProps ? { }} /> : this.finalizeEdit(e.currentTarget.value, false, true, false)} defaultValue={this.props.GetValue()} - onKeyDown={this.onKeyDown} autoFocus={true} - onKeyPress={e => e.stopPropagation()} - onBlur={e => this.finalizeEdit(e.currentTarget.value, false, true, false)} - onPointerDown={this.stopPropagation} onClick={this.stopPropagation} onPointerUp={this.stopPropagation} - style={{ display: this.props.display, fontSize: this.props.fontSize, minWidth: 20 }} - placeholder={this.props.placeholder} + onKeyDown={this.onKeyDown} + onKeyPress={this.stopPropagation} onPointerDown={this.stopPropagation} onClick={this.stopPropagation} onPointerUp={this.stopPropagation} />; } @@ -225,13 +194,13 @@ export class EditableView extends React.Component { : this.renderEditor(); } - setTimeout(() => this.props.autosuggestProps?.resetValue(), 0); + setTimeout(() => this.props.autosuggestProps?.resetValue()); return this.props.contents instanceof ObjectField ? (null) :
- { - this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()} + + {this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()}
; } diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx index ff69c7d05..4bdd39194 100644 --- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx +++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx @@ -6,7 +6,7 @@ import { Doc, DocListCast, DataSym } from "../../../fields/Doc"; import { PastelSchemaPalette, SchemaHeaderField } from "../../../fields/SchemaHeaderField"; import { ScriptField } from "../../../fields/ScriptField"; import { StrCast, NumCast } from "../../../fields/Types"; -import { numberRange, setupMoveUpEvents, emptyFunction } from "../../../Utils"; +import { numberRange, setupMoveUpEvents, emptyFunction, returnEmptyString } from "../../../Utils"; import { Docs } from "../../documents/Documents"; import { DragManager } from "../../util/DragManager"; import { CompileScript } from "../../util/Scripting"; @@ -249,14 +249,6 @@ export class CollectionMasonryViewFieldRow extends React.Component "", - SetValue: this.addDocument, - textCallback: this.textCallback, - contents: "+ NEW", - HeadingObject: this.props.headingObject, - toggle: this.toggleVisibility, - }; const showChrome = (chromeStatus !== 'view-mode' && chromeStatus !== 'disabled'); const stackPad = showChrome ? `0px ${this.props.parent.xMargin}px` : `${this.props.parent.yMargin}px ${this.props.parent.xMargin}px 0px ${this.props.parent.xMargin}px `; return this.collapsed ? (null) : @@ -267,7 +259,12 @@ export class CollectionMasonryViewFieldRow extends React.Component - + : null }
evContents, - SetValue: this.headingChanged, - contents: evContents, - oneLine: true, - HeadingObject: this.props.headingObject, - toggle: this.toggleVisibility, - }; + const editableHeaderView = evContents} + SetValue={this.headingChanged} + contents={evContents} + oneLine={true} + toggle={this.toggleVisibility} />; return this.props.parent.props.Document.miniHeaders ?
- + {editableHeaderView}
: !this.props.headingObject ? (null) :
@@ -306,7 +301,7 @@ export class CollectionMasonryViewFieldRow extends React.Component - {noChrome ? evContents : } + {noChrome ? evContents : editableHeaderView} {noChrome || evContents === `NO ${key.toUpperCase()} VALUE` ? (null) :
: null}
} diff --git a/src/client/views/collections/CollectionTimeView.tsx b/src/client/views/collections/CollectionTimeView.tsx index cd91cbf63..857d5e1d7 100644 --- a/src/client/views/collections/CollectionTimeView.tsx +++ b/src/client/views/collections/CollectionTimeView.tsx @@ -8,7 +8,7 @@ import { RichTextField } from "../../../fields/RichTextField"; import { listSpec } from "../../../fields/Schema"; import { ComputedField, ScriptField } from "../../../fields/ScriptField"; import { Cast, NumCast, StrCast } from "../../../fields/Types"; -import { emptyFunction, returnFalse, returnTrue, setupMoveUpEvents } from "../../../Utils"; +import { emptyFunction, returnFalse, returnTrue, setupMoveUpEvents, returnEmptyString } from "../../../Utils"; import { Docs, DocUtils } from "../../documents/Documents"; import { DocumentManager } from "../../util/DocumentManager"; import { Scripting } from "../../util/Scripting"; @@ -193,22 +193,22 @@ export class CollectionTimeView extends CollectionSubView(doc => doc) { } @computed get pivotKeyUI() { - const newEditableViewProps = { - GetValue: () => "", - SetValue: (value: any) => { - if (value?.length) { - this.layoutDoc._pivotField = value; - return true; - } - return false; - }, - showMenuOnLoad: true, - contents: ":" + StrCast(this.layoutDoc._pivotField), - toggle: this.toggleVisibility, - color: "#f1efeb" // this.props.headingObject ? this.props.headingObject.color : "#f1efeb"; - }; return
- + { + if (value?.length) { + this.layoutDoc._pivotField = value; + return true; + } + return false; + }} + toggle={this.toggleVisibility} + background={"#f1efeb"} // this.props.headingObject ? this.props.headingObject.color : "#f1efeb"; + contents={":" + StrCast(this.layoutDoc._pivotField)} + showMenuOnLoad={true} + display={"inline"} + menuCallback={this.menuCallback} />
; } diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index ec8e63b6c..297796b4b 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -548,6 +548,7 @@ export class TreeView extends React.Component { oneLine={true} display={"inline-block"} editing={true} + background={"#7089bb"} contents={StrCast(this.doc.title)} height={12} sizeToContent={true} diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx index ce9d8bed5..ebb953dad 100644 --- a/src/client/views/nodes/KeyValuePair.tsx +++ b/src/client/views/nodes/KeyValuePair.tsx @@ -125,12 +125,9 @@ export class KeyValuePair extends React.Component { contents={contents} maxHeight={36} height={"auto"} - GetValue={() => { - return Field.toKeyValueString(props.Document, props.fieldKey); - }} + GetValue={() => Field.toKeyValueString(props.Document, props.fieldKey)} SetValue={(value: string) => - KeyValueBox.SetField(props.Document, props.fieldKey, value)}> - + KeyValueBox.SetField(props.Document, props.fieldKey, value)} />
diff --git a/src/client/views/nodes/LinkDescriptionPopup.tsx b/src/client/views/nodes/LinkDescriptionPopup.tsx index 720af6c9d..30b272a9a 100644 --- a/src/client/views/nodes/LinkDescriptionPopup.tsx +++ b/src/client/views/nodes/LinkDescriptionPopup.tsx @@ -2,7 +2,6 @@ import React = require("react"); import { observer } from "mobx-react"; import "./LinkDescriptionPopup.scss"; import { observable, action } from "mobx"; -import { EditableView } from "../EditableView"; import { LinkManager } from "../../util/LinkManager"; import { TaskCompletionBox } from "./TaskCompletedBox"; diff --git a/src/debug/Viewer.tsx b/src/debug/Viewer.tsx index bebd71dcf..ee7dd1fc1 100644 --- a/src/debug/Viewer.tsx +++ b/src/debug/Viewer.tsx @@ -138,8 +138,7 @@ class DebugViewer extends React.Component<{ field: FieldResult, setValue(value: return

Unrecognized field type

; } - return Field.toScriptString(field)} SetValue={this.props.setValue} - contents={content}>; + return Field.toScriptString(field)} SetValue={this.props.setValue} contents={content} />; } } -- cgit v1.2.3-70-g09d2