aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/EditableView.tsx59
-rw-r--r--src/client/views/collections/CollectionMasonryViewFieldRow.tsx35
-rw-r--r--src/client/views/collections/CollectionStackingViewFieldColumn.tsx33
-rw-r--r--src/client/views/collections/CollectionTimeView.tsx32
-rw-r--r--src/client/views/collections/TreeView.tsx1
-rw-r--r--src/client/views/nodes/KeyValuePair.tsx7
-rw-r--r--src/client/views/nodes/LinkDescriptionPopup.tsx1
-rw-r--r--src/debug/Viewer.tsx3
8 files changed, 63 insertions, 108 deletions
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<EditableProps> {
+ private _ref = React.createRef<HTMLDivElement>();
+ private _inputref = React.createRef<HTMLInputElement>();
@observable _editing: boolean = false;
constructor(props: EditableProps) {
@@ -71,17 +65,6 @@ export class EditableView extends React.Component<EditableProps> {
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<EditableProps> {
}
}
- @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<HTMLInputElement>) => {
switch (e.key) {
@@ -149,7 +123,7 @@ export class EditableView extends React.Component<EditableProps> {
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<EditableProps> {
}
@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<EditableProps> {
}
}
- 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<EditableProps> {
return wasFocused !== this._editing;
}
- _ref = React.createRef<HTMLDivElement>();
- _inputref = React.createRef<HTMLInputElement>();
renderEditor() {
return this.props.autosuggestProps
? <Autosuggest
@@ -203,14 +173,13 @@ export class EditableView extends React.Component<EditableProps> {
}}
/>
: <input className="editableView-input" ref={this._inputref}
+ style={{ display: this.props.display, fontSize: this.props.fontSize, minWidth: 20, background: this.props.background }}
+ placeholder={this.props.placeholder}
+ onBlur={e => 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<EditableProps> {
</div> :
this.renderEditor();
}
- setTimeout(() => this.props.autosuggestProps?.resetValue(), 0);
+ setTimeout(() => this.props.autosuggestProps?.resetValue());
return this.props.contents instanceof ObjectField ? (null) :
<div className={`editableView-container-editing${this.props.oneLine ? "-oneLine" : ""}`} ref={this._ref}
style={{ display: this.props.display, textOverflow: this.props.overflow, minHeight: "17px", whiteSpace: "nowrap", height: this.props.height || "auto", maxHeight: this.props.maxHeight }}
onClick={this.onClick} placeholder={this.props.placeholder}>
- <span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize }} >{
- this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()}
+ <span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize }} >
+ {this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()}
</span>
</div>;
}
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<CMVFieldRowPr
const rows = Math.max(1, Math.min(this.props.docList.length, Math.floor((this.props.parent.props.PanelWidth() - 2 * this.props.parent.xMargin) / (this.props.parent.columnWidth + this.props.parent.gridGap))));
const style = this.props.parent;
const chromeStatus = this.props.parent.props.Document._chromeStatus;
- const newEditableViewProps = {
- GetValue: () => "",
- 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<CMVFieldRowPr
//width: style.columnWidth / style.numGroupColumns,
padding: `${NumCast(this.props.parent.layoutDoc._yPadding, this.props.parent.yMargin)}px 0px 0px 0px`
}}>
- <EditableView {...newEditableViewProps} />
+ <EditableView
+ GetValue={returnEmptyString}
+ SetValue={this.addDocument}
+ textCallback={this.textCallback}
+ contents={"+ NEW"}
+ toggle={this.toggleVisibility} />
</div> : null
}
<div className={`collectionStackingView-masonryGrid`}
@@ -288,17 +285,15 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
const noChrome = this.props.parent.props.Document._chromeStatus === "disabled";
const key = StrCast(this.props.parent.props.Document._pivotField);
const evContents = this.heading ? this.heading : this.props.type && this.props.type === "number" ? "0" : `NO ${key.toUpperCase()} VALUE`;
- const headerEditableViewProps = {
- GetValue: () => evContents,
- SetValue: this.headingChanged,
- contents: evContents,
- oneLine: true,
- HeadingObject: this.props.headingObject,
- toggle: this.toggleVisibility,
- };
+ const editableHeaderView = <EditableView
+ GetValue={() => evContents}
+ SetValue={this.headingChanged}
+ contents={evContents}
+ oneLine={true}
+ toggle={this.toggleVisibility} />;
return this.props.parent.props.Document.miniHeaders ?
<div className="collectionStackingView-miniHeader">
- <EditableView {...headerEditableViewProps} />
+ {editableHeaderView}
</div> :
!this.props.headingObject ? (null) :
<div className="collectionStackingView-sectionHeader" ref={this._headerRef} >
@@ -306,7 +301,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
title={evContents === `NO ${key.toUpperCase()} VALUE` ?
`Documents that don't have a ${key} value will go here. This column cannot be removed.` : ""}
style={{ background: evContents !== `NO ${key.toUpperCase()} VALUE` ? this.color : "lightgrey" }}>
- {noChrome ? evContents : <EditableView {...headerEditableViewProps} />}
+ {noChrome ? evContents : editableHeaderView}
{noChrome || evContents === `NO ${key.toUpperCase()} VALUE` ? (null) :
<div className="collectionStackingView-sectionColor">
<button className="collectionStackingView-sectionColorButton" onClick={action(e => this._paletteOn = !this._paletteOn)}>
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index ec6458d00..0182c2625 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -10,7 +10,7 @@ import { ScriptField } from "../../../fields/ScriptField";
import { Cast, NumCast, StrCast } from "../../../fields/Types";
import { ImageField } from "../../../fields/URLField";
import { TraceMobx } from "../../../fields/util";
-import { emptyFunction, setupMoveUpEvents, returnFalse } from "../../../Utils";
+import { emptyFunction, setupMoveUpEvents, returnFalse, returnEmptyString } from "../../../Utils";
import { Docs, DocUtils } from "../../documents/Documents";
import { DocumentType } from "../../documents/DocumentTypes";
import { DragManager } from "../../util/DragManager";
@@ -294,22 +294,6 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
const columnYMargin = this.props.headingObject ? 0 : NumCast(this.props.parent.yMargin, 5);
const uniqueHeadings = headings.map((i, idx) => headings.indexOf(i) === idx);
const evContents = heading ? heading : this.props?.type === "number" ? "0" : `NO ${key.toUpperCase()} VALUE`;
- const headerEditableViewProps = {
- GetValue: () => evContents,
- SetValue: this.headingChanged,
- contents: evContents,
- oneLine: true,
- HeadingObject: this.props.headingObject,
- toggle: this.toggleVisibility,
- };
- const newEditableViewProps = {
- GetValue: () => "",
- SetValue: this.addDocument,
- textCallback: this.textCallback,
- contents: "+ NEW",
- HeadingObject: this.props.headingObject,
- toggle: this.toggleVisibility,
- };
const headingView = this.props.headingObject ?
<div key={heading} className="collectionStackingView-sectionHeader" ref={this._headerRef}
style={{
@@ -325,7 +309,12 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
title={evContents === `NO ${key.toUpperCase()} VALUE` ?
`Documents that don't have a ${key} value will go here. This column cannot be removed.` : ""}
style={{ background: evContents !== `NO ${key.toUpperCase()} VALUE` ? this._color : "inherit" }}>
- <EditableView {...headerEditableViewProps} />
+ <EditableView
+ GetValue={() => evContents}
+ SetValue={this.headingChanged}
+ contents={evContents}
+ oneLine={true}
+ toggle={this.toggleVisibility} />
{evContents === `NO ${key.toUpperCase()} VALUE` ? (null) :
<div className="collectionStackingView-sectionColor">
<button className="collectionStackingView-sectionColorButton" onClick={action(e => this._paletteOn = !this._paletteOn)}>
@@ -373,7 +362,13 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
{(chromeStatus !== 'view-mode' && chromeStatus !== 'disabled' && type !== DocumentType.PRES) ?
<div key={`${heading}-add-document`} className="collectionStackingView-addDocumentButton"
style={{ width: style.columnWidth / style.numGroupColumns, marginBottom: 10 }}>
- <EditableView {...newEditableViewProps} menuCallback={this.menuCallback} />
+ <EditableView
+ GetValue={returnEmptyString}
+ SetValue={this.addDocument}
+ textCallback={this.textCallback}
+ contents={"+ NEW"}
+ toggle={this.toggleVisibility}
+ menuCallback={this.menuCallback} />
</div> : null}
</div>
}
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 <div className={"pivotKeyEntry"}>
- <EditableView {...newEditableViewProps} display={"inline"} menuCallback={this.menuCallback} />
+ <EditableView
+ GetValue={returnEmptyString}
+ SetValue={(value: any) => {
+ 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} />
</div>;
}
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<TreeViewProps> {
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<KeyValuePairProps> {
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)}>
- </EditableView>
+ KeyValueBox.SetField(props.Document, props.fieldKey, value)} />
</div>
</td>
</tr>
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 <p>Unrecognized field type</p>;
}
- return <EditableView GetValue={() => Field.toScriptString(field)} SetValue={this.props.setValue}
- contents={content}></EditableView>;
+ return <EditableView GetValue={() => Field.toScriptString(field)} SetValue={this.props.setValue} contents={content} />;
}
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 11:36:46 +0000