aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/EditableView.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/EditableView.tsx')
-rw-r--r--src/client/views/EditableView.tsx130
1 files changed, 54 insertions, 76 deletions
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index ec3e754fb..d35271ffd 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -4,10 +4,8 @@ import { observer } from 'mobx-react';
import * as Autosuggest from 'react-autosuggest';
import { ObjectField } from '../../fields/ObjectField';
import { SchemaHeaderField } from '../../fields/SchemaHeaderField';
-import "./EditableView.scss";
import { DragManager } from '../util/DragManager';
-import { ComputedField } from '../../fields/ScriptField';
-import { FieldValue } from '../../fields/Types';
+import "./EditableView.scss";
export interface EditableProps {
/**
@@ -20,11 +18,12 @@ export interface EditableProps {
* @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): boolean;
+ SetValue(value: string, shiftDown?: boolean, enterKey?: boolean): boolean;
OnFillDown?(value: string): void;
OnTab?(shift?: boolean): void;
+ OnEmpty?(): void;
/**
* The contents to render when not editing
@@ -54,10 +53,6 @@ export interface EditableProps {
color?: string | undefined;
onDrop?: any;
placeholder?: string;
- highlight?: boolean;
- positions?: number[];
- search?: string;
- bing?: () => string | undefined;
}
/**
@@ -96,25 +91,34 @@ export class EditableView extends React.Component<EditableProps> {
@action
onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
- if (e.key === "Tab") {
- e.stopPropagation();
- this.finalizeEdit(e.currentTarget.value, e.shiftKey, false);
- this.props.OnTab && this.props.OnTab(e.shiftKey);
- } else if (e.key === "Enter") {
- e.stopPropagation();
- if (!e.ctrlKey) {
- this.finalizeEdit(e.currentTarget.value, e.shiftKey, false);
- } else if (this.props.OnFillDown) {
- this.props.OnFillDown(e.currentTarget.value);
+ switch (e.key) {
+ case "Tab":
+ e.stopPropagation();
+ this.finalizeEdit(e.currentTarget.value, e.shiftKey, false, false);
+ this.props.OnTab?.(e.shiftKey);
+ break;
+ case "Backspace":
+ e.stopPropagation();
+ if (!e.currentTarget.value) this.props.OnEmpty?.();
+ break;
+ case "Enter":
+ e.stopPropagation();
+ if (!e.ctrlKey) {
+ this.finalizeEdit(e.currentTarget.value, e.shiftKey, false, true);
+ } else if (this.props.OnFillDown) {
+ this.props.OnFillDown(e.currentTarget.value);
+ this._editing = false;
+ this.props.isEditingCallback?.(false);
+ }
+ break;
+ case "Escape":
+ e.stopPropagation();
this._editing = false;
this.props.isEditingCallback?.(false);
- }
- } else if (e.key === "Escape") {
- e.stopPropagation();
- this._editing = false;
- this.props.isEditingCallback?.(false);
- } else if (e.key === ":") {
- this.props.menuCallback?.(e.currentTarget.getBoundingClientRect().x, e.currentTarget.getBoundingClientRect().y);
+ break;
+ case ":":
+ this.props.menuCallback?.(e.currentTarget.getBoundingClientRect().x, e.currentTarget.getBoundingClientRect().y);
+ break;
}
}
@@ -123,20 +127,18 @@ 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)) {
- this._editing = true;
- this.props.isEditingCallback?.(true);
- }
+ } else if (!this.props.onClick?.(e)) {
+ this._editing = true;
+ this.props.isEditingCallback?.(true);
}
e.stopPropagation();
}
@action
- private finalizeEdit(value: string, shiftDown: boolean, lostFocus: boolean) {
- if (this.props.SetValue(value, shiftDown)) {
+ private finalizeEdit(value: string, shiftDown: boolean, lostFocus: boolean, enterKey: boolean) {
+ if (this.props.SetValue(value, shiftDown, enterKey)) {
this._editing = false;
- this.props.isEditingCallback?.(false);
+ this.props.isEditingCallback?.(false,);
} else {
this._editing = false;
this.props.isEditingCallback?.(false);
@@ -154,7 +156,7 @@ export class EditableView extends React.Component<EditableProps> {
@action
setIsFocused = (value: boolean) => {
const wasFocused = this._editing;
- //this._editing = value;
+ this._editing = value;
return wasFocused !== this._editing;
}
@@ -167,10 +169,11 @@ export class EditableView extends React.Component<EditableProps> {
className: "editableView-input",
onKeyDown: this.onKeyDown,
autoFocus: true,
- onBlur: e => this.finalizeEdit(e.currentTarget.value, false, true),
+ onBlur: e => this.finalizeEdit(e.currentTarget.value, false, true, false),
onPointerDown: this.stopPropagation,
onClick: this.stopPropagation,
onPointerUp: this.stopPropagation,
+ onKeyPress: this.stopPropagation,
value: this.props.autosuggestProps.value,
onChange: this.props.autosuggestProps.onChange
}}
@@ -179,58 +182,33 @@ export class EditableView extends React.Component<EditableProps> {
defaultValue={this.props.GetValue()}
onKeyDown={this.onKeyDown}
autoFocus={true}
- onBlur={e => this.finalizeEdit(e.currentTarget.value, false, 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}
/>;
}
- returnHighlights() {
- const results = [];
- const contents = this.props.bing!();
-
- if (contents !== undefined) {
- if (this.props.positions !== undefined) {
- const positions = this.props.positions;
- const length = this.props.search!.length;
-
- // contents = String(this.props.contents.valueOf());
-
- results.push(<span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{contents ? contents.slice(0, this.props.positions[0]) : this.props.placeholder?.valueOf()}</span>);
- positions.forEach((num, cur) => {
- results.push(<span style={{ backgroundColor: "#FFFF00", fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{contents ? contents.slice(num, num + length) : this.props.placeholder?.valueOf()}</span>);
- let end = 0;
- cur === positions.length - 1 ? end = contents.length : end = positions[cur + 1];
- results.push(<span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{contents ? contents.slice(num + length, end) : this.props.placeholder?.valueOf()}</span>);
- }
- );
- }
- return results;
- }
- else {
- return <span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()}</span>;
- }
- }
-
render() {
if (this._editing && this.props.GetValue() !== undefined) {
return this.props.sizeToContent ?
<div style={{ display: "grid", minWidth: 100 }}>
- <div style={{ display: "inline-block", position: "relative", height: 0, width: "100%", overflow: "hidden" }}>{this.props.GetValue()}</div>
+ <div style={{ display: "inline-block", position: "relative", height: 0, width: "100%", overflow: "hidden" }}>
+ {this.props.GetValue()}
+ </div>
{this.renderEditor()}
- </div> : this.renderEditor();
- } else {
- setTimeout(() => this.props.autosuggestProps?.resetValue(), 0);
- return (this.props.contents instanceof ObjectField ? (null) :
- <div className={`editableView-container-editing${this.props.oneLine ? "-oneLine" : ""}`}
- ref={this._ref}
- style={{ display: this.props.display, minHeight: "17px", whiteSpace: "nowrap", height: `${this.props.height ? this.props.height : "auto"}`, maxHeight: `${this.props.maxHeight}` }}
- onClick={this.onClick} placeholder={this.props.placeholder}>
- {this.props.highlight === undefined || this.props.positions === undefined || this.props.bing === undefined ? <span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()}</span>
- : this.returnHighlights()}
- </div>
- );
+ </div> :
+ this.renderEditor();
}
+ setTimeout(() => this.props.autosuggestProps?.resetValue(), 0);
+ return this.props.contents instanceof ObjectField ? (null) :
+ <div className={`editableView-container-editing${this.props.oneLine ? "-oneLine" : ""}`} ref={this._ref}
+ style={{ display: this.props.display, 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>
+ </div>;
}
} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-17 17:31:53 +0000