fixed props => _props referneces

1 files changed, 23 insertions, 8 deletions

diff --git a/src/client/views/nodes/DocumentIcon.tsx b/src/client/views/nodes/DocumentIcon.tsx
index e8d8c05e3..0c780af2a 100644
--- a/src/client/views/nodes/DocumentIcon.tsx
+++ b/src/client/views/nodes/DocumentIcon.tsx
@@ -5,20 +5,35 @@ import { DocumentManager } from '../../util/DocumentManager';
 import { Transformer, ts } from '../../util/Scripting';
 import { Field } from '../../../fields/Doc';
 import { Tooltip } from '@mui/material';
-import { action, observable } from 'mobx';
+import { action, makeObservable, observable } from 'mobx';
 import { Id } from '../../../fields/FieldSymbols';
 import { factory } from 'typescript';
 import { LightboxView } from '../LightboxView';
 import { SettingsManager } from '../../util/SettingsManager';
+import { copyProps } from '../../../Utils';
 
-@observer
-export class DocumentIcon extends React.Component<{ view: DocumentView; index: number }> {
+interface DocumentIconProps {
+    view: DocumentView;
+    index: number;
+}
+export class DocumentIcon extends React.Component<DocumentIconProps> {
     @observable _hovered = false;
+    _prevProps: DocumentIconProps;
+    @observable _props: DocumentIconProps;
+    constructor(props: DocumentIconProps) {
+        super(props);
+        this._props = this._prevProps = props;
+        makeObservable(this);
+    }
+    componentDidUpdate() {
+        copyProps(this);
+    }
+
     static get DocViews() {
-        return LightboxView.LightboxDoc ? DocumentManager.Instance.DocumentViews.filter(v => LightboxView.IsLightboxDocView(v.props.docViewPath())) : DocumentManager.Instance.DocumentViews;
+        return LightboxView.LightboxDoc ? DocumentManager.Instance.DocumentViews.filter(v => LightboxView.IsLightboxDocView(v._props.docViewPath())) : DocumentManager.Instance.DocumentViews;
     }
     render() {
-        const view = this.props.view;
+        const view = this._props.view;
         const { left, top, right, bottom } = view.getBounds() || { left: 0, top: 0, right: 0, bottom: 0 };
 
         return (
@@ -33,8 +48,8 @@ export class DocumentIcon extends React.Component<{ view: DocumentView; index: n
                     background: SettingsManager.userBackgroundColor,
                     transform: `translate(${(left + right) / 2}px, ${top}px)`,
                 }}>
-                <Tooltip title={<>{this.props.view.Document.title}</>}>
-                    <p>d{this.props.index}</p>
+                <Tooltip title={<>{this._props.view.Document.title}</>}>
+                    <p>d{this._props.index}</p>
                 </Tooltip>
             </div>
         );
@@ -74,7 +89,7 @@ export class DocumentIconContainer extends React.Component {
             getVars() {
                 const docs = DocumentIcon.DocViews;
                 const capturedVariables: { [name: string]: Field } = {};
-                usedDocuments.forEach(index => (capturedVariables[`d${index}`] = docs.length > index ? docs[index].props.Document : `d${index}`));
+                usedDocuments.forEach(index => (capturedVariables[`d${index}`] = docs.length > index ? docs[index].Document : `d${index}`));
                 return capturedVariables;
             },
         };