Merge branch 'master' into data-visualization-view-naafi

1 files changed, 65 insertions, 48 deletions

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index d7707a6fe..8036df471 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -3,7 +3,7 @@ import { action, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as Autosuggest from 'react-autosuggest';
 import { ObjectField } from '../../fields/ObjectField';
-import "./EditableView.scss";
+import './EditableView.scss';
 
 export interface EditableProps {
     /**
@@ -26,17 +26,16 @@ export interface EditableProps {
     contents: any;
     fontStyle?: string;
     fontSize?: number;
-    height?: number | "auto";
+    height?: number | 'auto';
     sizeToContent?: boolean;
     maxHeight?: number;
     display?: string;
     overflow?: string;
     autosuggestProps?: {
         resetValue: () => void;
-        value: string,
-        onChange: (e: React.ChangeEvent, { newValue }: { newValue: string }) => void,
-        autosuggestProps: Autosuggest.AutosuggestProps<string, any>
-
+        value: string;
+        onChange: (e: React.ChangeEvent, { newValue }: { newValue: string }) => void;
+        autosuggestProps: Autosuggest.AutosuggestProps<string, any>;
     };
     oneLine?: boolean;
     editing?: boolean;
@@ -81,16 +80,16 @@ export class EditableView extends React.Component<EditableProps> {
     @action
     onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         switch (e.key) {
-            case "Tab":
+            case 'Tab':
                 e.stopPropagation();
                 this.finalizeEdit(e.currentTarget.value, e.shiftKey, false, false);
                 this.props.OnTab?.(e.shiftKey);
                 break;
-            case "Backspace":
+            case 'Backspace':
                 e.stopPropagation();
                 if (!e.currentTarget.value) this.props.OnEmpty?.();
                 break;
-            case "Enter":
+            case 'Enter':
                 e.stopPropagation();
                 if (!e.ctrlKey) {
                     this.finalizeEdit(e.currentTarget.value, e.shiftKey, false, true);
@@ -100,22 +99,26 @@ export class EditableView extends React.Component<EditableProps> {
                     this.props.isEditingCallback?.(false);
                 }
                 break;
-            case "Escape":
+            case 'Escape':
                 e.stopPropagation();
                 this._editing = false;
                 this.props.isEditingCallback?.(false);
                 break;
-            case ":":
+            case ':':
                 this.props.menuCallback?.(e.currentTarget.getBoundingClientRect().x, e.currentTarget.getBoundingClientRect().y);
                 break;
-            case "Shift": case "Alt": case "Meta": case "Control": break;
+            case 'Shift':
+            case 'Alt':
+            case 'Meta':
+            case 'Control':
+                break;
             default:
                 if (this.props.textCallback?.(e.key)) {
                     this._editing = false;
-                    this.props.isEditingCallback?.(false,);
+                    this.props.isEditingCallback?.(false);
                 }
         }
-    }
+    };
 
     @action
     onClick = (e: React.MouseEvent) => {
@@ -129,40 +132,44 @@ export class EditableView extends React.Component<EditableProps> {
             }
             e.stopPropagation();
         }
-    }
+    };
 
     @action
     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);
-            !lostFocus && setTimeout(action(() => {
-                this._editing = true;
-                this.props.isEditingCallback?.(true);
-            }), 0);
+            !lostFocus &&
+                setTimeout(
+                    action(() => {
+                        this._editing = true;
+                        this.props.isEditingCallback?.(true);
+                    }),
+                    0
+                );
         }
     }
 
-    stopPropagation(e: React.SyntheticEvent) { e.stopPropagation(); }
+    stopPropagation(e: React.SyntheticEvent) {
+        e.stopPropagation();
+    }
 
     @action
     setIsFocused = (value: boolean) => {
         const wasFocused = this._editing;
         this._editing = value;
         return wasFocused !== this._editing;
-    }
-
-
+    };
 
     renderEditor() {
-        return this.props.autosuggestProps
-            ? <Autosuggest
+        return this.props.autosuggestProps ? (
+            <Autosuggest
                 {...this.props.autosuggestProps.autosuggestProps}
                 inputProps={{
-                    className: "editableView-input",
+                    className: 'editableView-input',
                     onKeyDown: this.onKeyDown,
                     autoFocus: true,
                     onBlur: e => this.finalizeEdit(e.currentTarget.value, false, true, false),
@@ -171,39 +178,49 @@ export class EditableView extends React.Component<EditableProps> {
                     onPointerUp: this.stopPropagation,
                     onKeyPress: this.stopPropagation,
                     value: this.props.autosuggestProps.value,
-                    onChange: this.props.autosuggestProps.onChange
+                    onChange: this.props.autosuggestProps.onChange,
                 }}
             />
-            : <input className="editableView-input" ref={this._inputref}
-                style={{ display: this.props.display, overflow: "auto", fontSize: this.props.fontSize, minWidth: 20, background: this.props.background }}
+        ) : (
+            <input
+                className="editableView-input"
+                ref={this._inputref}
+                style={{ display: this.props.display, overflow: 'auto', 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()}
                 autoFocus={true}
                 onKeyDown={this.onKeyDown}
-                onKeyPress={this.stopPropagation} onPointerDown={this.stopPropagation} onClick={this.stopPropagation} onPointerUp={this.stopPropagation}
-            />;
+                onKeyPress={this.stopPropagation}
+                onPointerDown={this.stopPropagation}
+                onClick={this.stopPropagation}
+                onPointerUp={this.stopPropagation}
+            />
+        );
     }
 
     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>
+            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>
                     {this.renderEditor()}
-                </div> :
-                this.renderEditor();
+                </div>
+            ) : (
+                this.renderEditor()
+            );
         }
         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: "10px", 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>;
+        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: '10px', whiteSpace: 'nowrap', height: this.props.height || 'auto', maxHeight: this.props.maxHeight }}
+                onPointerDown={e => e.stopPropagation()}
+                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
+}