massive changes to use mobx 6 which means not accessing props directly in @computed functions.

1 files changed, 24 insertions, 13 deletions

diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index 3cda70648..40991f371 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -1,7 +1,7 @@
-import { action, observable } from 'mobx';
+import { action, makeObservable, observable, toJS } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc, Field } from '../../../fields/Doc';
-import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero } from '../../../Utils';
+import { copyProps, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero } from '../../../Utils';
 import { Transform } from '../../util/Transform';
 import { undoBatch } from '../../util/UndoManager';
 import { ContextMenu } from '../ContextMenu';
@@ -34,6 +34,18 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
     @observable public isChecked = false;
     private checkbox = React.createRef<HTMLInputElement>();
 
+    _prevProps: KeyValuePairProps;
+    @observable _props: KeyValuePairProps;
+    constructor(props: KeyValuePairProps) {
+        super(props);
+        this._props = this._prevProps = props;
+        makeObservable(this);
+    }
+
+    componentDidUpdate() {
+        copyProps(this);
+    }
+
     @action
     handleCheck = (e: React.ChangeEvent<HTMLInputElement>) => {
         this.isChecked = e.currentTarget.checked;
@@ -46,24 +58,24 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
     };
 
     onContextMenu = (e: React.MouseEvent) => {
-        const value = this.props.doc[this.props.keyName];
+        const value = this._props.doc[this._props.keyName];
         if (value instanceof Doc) {
             e.stopPropagation();
             e.preventDefault();
-            ContextMenu.Instance.addItem({ description: 'Open Fields', event: () => this.props.addDocTab(value, OpenWhere.addRightKeyvalue), icon: 'layer-group' });
+            ContextMenu.Instance.addItem({ description: 'Open Fields', event: () => this._props.addDocTab(value, OpenWhere.addRightKeyvalue), icon: 'layer-group' });
             ContextMenu.Instance.displayMenu(e.clientX, e.clientY);
         }
     };
 
     render() {
         const props: FieldViewProps = {
-            Document: this.props.doc,
+            Document: this._props.doc,
             childFilters: returnEmptyFilter,
             childFiltersByRanges: returnEmptyFilter,
             searchFilterDocs: returnEmptyDoclist,
             styleProvider: DefaultStyleProvider,
             docViewPath: returnEmptyDoclist,
-            fieldKey: this.props.keyName,
+            fieldKey: this._props.keyName,
             isSelected: returnFalse,
             setHeight: returnFalse,
             select: emptyFunction,
@@ -73,12 +85,11 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
             whenChildContentsActiveChanged: emptyFunction,
             ScreenToLocalTransform: Transform.Identity,
             focus: emptyFunction,
-            PanelWidth: this.props.PanelWidth,
-            PanelHeight: this.props.PanelHeight,
+            PanelWidth: this._props.PanelWidth,
+            PanelHeight: this._props.PanelHeight,
             addDocTab: returnFalse,
             pinToPres: returnZero,
         };
-        const contents = <FieldView {...props} />;
         // let fieldKey = Object.keys(props.Document).indexOf(props.fieldKey) !== -1 ? props.fieldKey : "(" + props.fieldKey + ")";
         let protoCount = 0;
         let doc: Doc | undefined = props.Document;
@@ -95,8 +106,8 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
         const hover = { transition: '0.3s ease opacity', opacity: this.isPointerOver || this.isChecked ? 1 : 0 };
 
         return (
-            <tr className={this.props.rowStyle} onPointerEnter={action(() => (this.isPointerOver = true))} onPointerLeave={action(() => (this.isPointerOver = false))}>
-                <td className="keyValuePair-td-key" style={{ width: `${this.props.keyWidth}%` }}>
+            <tr className={this._props.rowStyle} onPointerEnter={action(() => (this.isPointerOver = true))} onPointerLeave={action(() => (this.isPointerOver = false))}>
+                <td className="keyValuePair-td-key" style={{ width: `${this._props.keyWidth}%` }}>
                     <div className="keyValuePair-td-key-container">
                         <button
                             style={hover}
@@ -118,9 +129,9 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
                         </Tooltip>
                     </div>
                 </td>
-                <td className="keyValuePair-td-value" style={{ width: `${100 - this.props.keyWidth}%` }} onContextMenu={this.onContextMenu}>
+                <td className="keyValuePair-td-value" style={{ width: `${100 - this._props.keyWidth}%` }} onContextMenu={this.onContextMenu}>
                     <div className="keyValuePair-td-value-container">
-                        <EditableView contents={contents} GetValue={() => Field.toKeyValueString(props.Document, props.fieldKey)} SetValue={(value: string) => KeyValueBox.SetField(props.Document, props.fieldKey, value)} />
+                        <EditableView contents={undefined} fieldContents={props} GetValue={() => Field.toKeyValueString(props.Document, props.fieldKey)} SetValue={(value: string) => KeyValueBox.SetField(props.Document, props.fieldKey, value)} />
                     </div>
                 </td>
             </tr>