From 380ee1acac1c0b7972d7d423cf804af146dc0edf Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Sun, 10 Dec 2023 20:19:27 -0500
Subject: massive changes to use mobx 6 which means not accessing props
 directly in @computed functions.

---
 src/client/views/EditableView.tsx | 111 ++++++++++++++++++++------------------
 1 file changed, 59 insertions(+), 52 deletions(-)

(limited to 'src/client/views/EditableView.tsx')

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 6bc0e5424..3db77be71 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -1,11 +1,13 @@
 import * as React from 'react';
-import { action, IReactionDisposer, observable, reaction } from 'mobx';
+import { action, IReactionDisposer, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as Autosuggest from 'react-autosuggest';
 import { ObjectField } from '../../fields/ObjectField';
 import './EditableView.scss';
 import { DocumentIconContainer } from './nodes/DocumentIcon';
 import { OverlayView } from './OverlayView';
+import { copyProps } from '../../Utils';
+import { FieldView, FieldViewProps } from './nodes/FieldView';
 
 export interface EditableProps {
     /**
@@ -26,6 +28,7 @@ export interface EditableProps {
      * The contents to render when not editing
      */
     contents: any;
+    fieldContents?: FieldViewProps;
     fontStyle?: string;
     fontSize?: number;
     height?: number | 'auto';
@@ -64,9 +67,13 @@ export class EditableView extends React.Component<EditableProps> {
     _editingDisposer?: IReactionDisposer;
     @observable _editing: boolean = false;
 
+    _prevProps: EditableProps;
+    @observable _props: EditableProps;
     constructor(props: EditableProps) {
         super(props);
-        this._editing = this.props.editing ? true : false;
+        this._props = this._prevProps = props;
+        makeObservable(this);
+        this._editing = this._props.editing ? true : false;
     }
 
     componentDidMount(): void {
@@ -89,12 +96,12 @@ export class EditableView extends React.Component<EditableProps> {
         );
     }
 
-    @action
     componentDidUpdate() {
-        if (this._editing && this.props.editing === false) {
+        copyProps(this);
+        if (this._editing && this._props.editing === false) {
             this._inputref?.value && this.finalizeEdit(this._inputref.value, false, true, false);
-        } else if (this.props.editing !== undefined) {
-            this._editing = this.props.editing;
+        } else if (this._props.editing !== undefined) {
+            this._editing = this._props.editing;
         }
     }
 
@@ -120,28 +127,28 @@ export class EditableView extends React.Component<EditableProps> {
             case 'Tab':
                 e.stopPropagation();
                 this.finalizeEdit(e.currentTarget.value, e.shiftKey, false, false);
-                this.props.OnTab?.(e.shiftKey);
+                this._props.OnTab?.(e.shiftKey);
                 break;
             case 'Backspace':
                 e.stopPropagation();
-                if (!e.currentTarget.value) this.props.OnEmpty?.();
+                if (!e.currentTarget.value) this._props.OnEmpty?.();
                 break;
             case 'Enter':
-                if (this.props.allowCRs !== true) {
+                if (this._props.allowCRs !== true) {
                     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);
+                    } else if (this._props.OnFillDown) {
+                        this._props.OnFillDown(e.currentTarget.value);
                         this._editing = false;
-                        this.props.isEditingCallback?.(false);
+                        this._props.isEditingCallback?.(false);
                     }
                 }
                 break;
             case 'Escape':
                 e.stopPropagation();
                 this._editing = false;
-                this.props.isEditingCallback?.(false);
+                this._props.isEditingCallback?.(false);
                 break;
             case 'ArrowUp':
             case 'ArrowDown':
@@ -155,30 +162,30 @@ export class EditableView extends React.Component<EditableProps> {
             case 'Control':
                 break;
             case ':':
-                if (this.props.menuCallback) {
+                if (this._props.menuCallback) {
                     e.stopPropagation();
-                    this.props.menuCallback(e.currentTarget.getBoundingClientRect().x, e.currentTarget.getBoundingClientRect().y);
+                    this._props.menuCallback(e.currentTarget.getBoundingClientRect().x, e.currentTarget.getBoundingClientRect().y);
                     break;
                 }
 
             default:
-                if (this.props.textCallback?.(e.key)) {
+                if (this._props.textCallback?.(e.key)) {
                     e.stopPropagation();
                     this._editing = false;
-                    this.props.isEditingCallback?.(false);
+                    this._props.isEditingCallback?.(false);
                 }
         }
     };
 
     @action
     onClick = (e: React.MouseEvent) => {
-        if (this.props.editing !== false) {
+        if (this._props.editing !== false) {
             e.nativeEvent.stopPropagation();
-            if (this._ref.current && this.props.showMenuOnLoad) {
-                this.props.menuCallback?.(this._ref.current.getBoundingClientRect().x, this._ref.current.getBoundingClientRect().y);
+            if (this._ref.current && this._props.showMenuOnLoad) {
+                this._props.menuCallback?.(this._ref.current.getBoundingClientRect().x, this._ref.current.getBoundingClientRect().y);
             } else {
                 this._editing = true;
-                this.props.isEditingCallback?.(true);
+                this._props.isEditingCallback?.(true);
             }
             // e.stopPropagation();
         }
@@ -186,17 +193,17 @@ export class EditableView extends React.Component<EditableProps> {
 
     @action
     finalizeEdit(value: string, shiftDown: boolean, lostFocus: boolean, enterKey: boolean) {
-        if (this.props.SetValue(value, shiftDown, enterKey)) {
+        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);
+            this._props.isEditingCallback?.(false);
             !lostFocus &&
                 setTimeout(
                     action(() => {
                         this._editing = true;
-                        this.props.isEditingCallback?.(true);
+                        this._props.isEditingCallback?.(true);
                     }),
                     0
                 );
@@ -215,9 +222,9 @@ export class EditableView extends React.Component<EditableProps> {
     };
 
     renderEditor() {
-        return this.props.autosuggestProps ? (
+        return this._props.autosuggestProps ? (
             <Autosuggest
-                {...this.props.autosuggestProps.autosuggestProps}
+                {...this._props.autosuggestProps.autosuggestProps}
                 inputProps={{
                     className: 'editableView-input',
                     onKeyDown: this.onKeyDown,
@@ -228,19 +235,19 @@ export class EditableView extends React.Component<EditableProps> {
                     onClick: this.stopPropagation,
                     onPointerUp: this.stopPropagation,
                     onKeyPress: this.stopPropagation,
-                    value: this.props.autosuggestProps.value,
+                    value: this._props.autosuggestProps.value,
                     // @ts-ignore
-                    onChange: this.props.autosuggestProps.onChange,
+                    onChange: this._props.autosuggestProps.onChange,
                 }}
             />
-        ) : this.props.oneLine !== false && this.props.GetValue()?.toString().indexOf('\n') === -1 ? (
+        ) : this._props.oneLine !== false && this._props.GetValue()?.toString().indexOf('\n') === -1 ? (
             <input
                 className="editableView-input"
                 ref={r => (this._inputref = r)}
-                style={{ display: this.props.display, overflow: 'auto', fontSize: this.props.fontSize, minWidth: 20, background: this.props.background }}
-                placeholder={this.props.placeholder}
+                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()}
+                defaultValue={this._props.GetValue()}
                 autoFocus={true}
                 onChange={this.onChange}
                 onKeyDown={this.onKeyDown}
@@ -253,10 +260,10 @@ export class EditableView extends React.Component<EditableProps> {
             <textarea
                 className="editableView-input"
                 ref={r => (this._inputref = r)}
-                style={{ display: this.props.display, overflow: 'auto', fontSize: this.props.fontSize, minHeight: `min(100%, ${(this.props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20, background: this.props.background }}
-                placeholder={this.props.placeholder}
+                style={{ display: this._props.display, overflow: 'auto', fontSize: this._props.fontSize, minHeight: `min(100%, ${(this._props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20, background: this._props.background }}
+                placeholder={this._props.placeholder}
                 onBlur={e => this.finalizeEdit(e.currentTarget.value, false, true, false)}
-                defaultValue={this.props.GetValue()}
+                defaultValue={this._props.GetValue()}
                 autoFocus={true}
                 onChange={this.onChange}
                 onKeyDown={this.onKeyDown}
@@ -269,9 +276,9 @@ export class EditableView extends React.Component<EditableProps> {
     }
 
     render() {
-        const gval = this.props.GetValue()?.replace(/\n/g, '\\r\\n');
+        const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
         if (this._editing && gval !== undefined) {
-            return this.props.sizeToContent ? (
+            return this._props.sizeToContent ? (
                 <div style={{ display: 'grid', minWidth: 100 }}>
                     <div style={{ display: 'inline-block', position: 'relative', height: 0, width: '100%', overflow: 'hidden' }}>{gval}</div>
                     {this.renderEditor()}
@@ -280,30 +287,30 @@ export class EditableView extends React.Component<EditableProps> {
                 this.renderEditor()
             );
         }
-        setTimeout(() => this.props.autosuggestProps?.resetValue());
-        return this.props.contents instanceof ObjectField ? null : (
+        setTimeout(() => this._props.autosuggestProps?.resetValue());
+        return this._props.contents instanceof ObjectField ? null : (
             <div
-                className={`editableView-container-editing${this.props.oneLine ? '-oneLine' : ''}`}
+                className={`editableView-container-editing${this._props.oneLine ? '-oneLine' : ''}`}
                 ref={this._ref}
                 style={{
-                    display: this.props.display, //
-                    textOverflow: this.props.overflow,
+                    display: this._props.display, //
+                    textOverflow: this._props.overflow,
                     minHeight: '10px',
-                    whiteSpace: this.props.oneLine ? 'nowrap' : 'pre-line',
-                    height: this.props.height,
-                    maxHeight: this.props.maxHeight,
-                    fontStyle: this.props.fontStyle,
-                    fontSize: this.props.fontSize,
+                    whiteSpace: this._props.oneLine ? 'nowrap' : 'pre-line',
+                    height: this._props.height,
+                    maxHeight: this._props.maxHeight,
+                    fontStyle: this._props.fontStyle,
+                    fontSize: this._props.fontSize,
                 }}
                 //onPointerDown={this.stopPropagation}
                 onClick={this.onClick}
-                placeholder={this.props.placeholder}>
+                placeholder={this._props.placeholder}>
                 <span
                     style={{
-                        fontStyle: this.props.fontStyle,
-                        fontSize: this.props.fontSize,
+                        fontStyle: this._props.fontStyle,
+                        fontSize: this._props.fontSize,
                     }}>
-                    {this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()}
+                    {this._props.fieldContents ? <FieldView {...this._props.fieldContents} /> : this.props.contents ? this._props.contents?.valueOf() : this._props.placeholder?.valueOf()}
                 </span>
             </div>
         );
-- 
cgit v1.2.3-70-g09d2