Update widget to 2.3.1 - fix MX9

Author: JelteMX

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "mxtreetable",
   "widgetName": "MxTreeTable",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "TreeTable widget",
   "copyright": "Mendix 2019",
   "author": "Jelte Lagendijk <jelte.lagendijk@mendix.com>",
@@ -53,7 +53,7 @@
     "webpack-bundle-analyzer": "^3.6.0"
   },
   "dependencies": {
-    "@jeltemx/mendix-react-widget-utils": "^0.7.0",
+    "@jeltemx/mendix-react-widget-utils": "^0.9.0",
     "antd": "^4.8.5",
     "array-to-tree": "^3.3.2",
     "big.js": "^5.2.2",

package.json

@@ -1,5 +1,4 @@
-import { Component, ReactNode, createElement } from "react";
-import { hot } from "react-hot-loader/root";
+import { Component, ReactNode, createElement, createRef } from "react";
 import { findDOMNode } from "react-dom";
 import { observer } from "mobx-react";
 import store from "store2";
@@ -17,7 +16,8 @@ import {
     createObject,
     OpenPageAs,
     entityIsPersistable,
-    executeAction
+    executeAction,
+    debug
 } from "@jeltemx/mendix-react-widget-utils";
 
 import { NodeStore, NodeStoreConstructorOptions } from "./store";
@@ -48,6 +48,8 @@ export interface TransformNanoflows {
 
 @observer
 class MxTreeTable extends Component<MxTreeTableContainerProps> {
+    ref = createRef<HTMLDivElement>();
+
     private store: NodeStore;
     private widgetId?: string;
 
@@ -150,26 +152,39 @@ class MxTreeTable extends Component<MxTreeTableContainerProps> {
         this.store = new NodeStore(storeOpts);
 
         // @ts-ignore
-        window._STORE = this.store;
+        // window._STORE = this.store;
     }
 
     // **********************
     // DEFAULT REACT METHODS
     // **********************
 
-    componentDidUpdate(): void {
-        if (this.widgetId) {
-            const domNode = findDOMNode(this);
-            // @ts-ignore
-            domNode.setAttribute("widgetId", this.widgetId);
-        }
-    }
+    // componentDidUpdate(): void {
+    //     // if (this.widgetId && this.ref.current) {
+    //     //     try {
+    //     //         const domNode = findDOMNode(this);
+    //     //         // @ts-ignore
+    //     //         domNode.setAttribute("widgetId", this.widgetId);
+    //     //     } catch (error) {
+    //     //         const domNode = findDOMNode(this.ref.current);
+    //     //         // @ts-ignore
+    //     //         domNode.setAttribute("widgetId", this.widgetId);
+    //     //     }
+    //     // }
+    // }
 
     componentWillReceiveProps(nextProps: MxTreeTableContainerProps): void {
-        if (!this.widgetId) {
-            const domNode = findDOMNode(this);
-            // @ts-ignore
-            this.widgetId = domNode.getAttribute("widgetId") || undefined;
+        if (!this.widgetId && this.ref.current) {
+            try {
+                const domNode = findDOMNode(this);
+                // @ts-ignore
+                this.widgetId = domNode.getAttribute("widgetId") || undefined;
+            } catch (error) {
+                const domNode = findDOMNode(this.ref.current);
+                // @ts-ignore
+                const alternativeID = domNode.getAttribute("data-mendix-id") || undefined;
+                this.widgetId = alternativeID;
+            }
         }
 
         if (nextProps.experimentalExposeSetSelected && this.store.contextObject) {
@@ -238,7 +253,7 @@ class MxTreeTable extends Component<MxTreeTableContainerProps> {
             );
         }
 
-        return createElement(TreeTable, {
+        const treeTableProps = {
             store: this.store,
             className: this.props.class,
             expanderFunc: this.expanderFunction,
@@ -252,7 +267,13 @@ class MxTreeTable extends Component<MxTreeTableContainerProps> {
             clickToSelect: selectClickSelect,
             hideSelectBoxes: selectHideCheckboxes,
             renderExpandButton: this.props.loadScenario === "all" && this.props.uiRenderExpandButton
-        });
+        };
+
+        return (
+            <div ref={this.ref}>
+                <TreeTable {...treeTableProps} />
+            </div>
+        );
     }
 
     // **********************
@@ -620,6 +641,13 @@ class MxTreeTable extends Component<MxTreeTableContainerProps> {
         if (!helperObject) {
             return;
         }
+
+        if (helperObject.isPersistable()) {
+            this.debug(
+                "Created helper object is persistable, please see the widget. This object should NOT be persistable"
+            );
+        }
+
         const context = new window.mendix.lib.MxContext();
         context.setContext(helperObject.getEntity(), helperObject.getGuid());
 
@@ -926,11 +954,9 @@ Your context object is of type "${contextEntity}". Please check the configuratio
     }
 
     private _debug(...args: unknown[]): void {
-        const id = this.props.friendlyId || this.widgetId;
-        if (window.logger) {
-            window.logger.debug(`${id}:`, ...args);
-        }
+        const id = this.props.friendlyId || this.widgetId || "mendix.treetable.TreeTable";
+        debug(id, ...args);
     }
 }
 
-export default hot(MxTreeTable);
+export default MxTreeTable;

src/MxTreeTable.tsx

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="MxTreeTable" version="2.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="MxTreeTable" version="2.3.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="MxTreeTable.xml"/>
         </widgetFiles>

src/package.xml

@@ -1,7 +1,7 @@
 import { observable, action, computed, flow, toJS } from "mobx";
 import { RowObjectMxProperties } from "..";
 import { TreeColumnProps } from "../../util/columns";
-import { getFormattedValue } from "@jeltemx/mendix-react-widget-utils";
+import { debug, getFormattedValue } from "@jeltemx/mendix-react-widget-utils";
 
 export interface RowObjectOptions {
     mxObject: mendix.lib.MxObject;
@@ -103,14 +103,10 @@ export class RowObject {
             const subscription = subscribe({
                 guid: this._obj.getGuid(),
                 callback: guid => {
-                    if (window.logger) {
-                        window.logger.debug(`TreeTable subscription fired row: ${guid}`, this._keyValCorePairs);
-                    }
+                    debug("treeTable store", `TreeTable subscription fired row: ${guid}`, this._keyValCorePairs);
                     this._changeHandler(`${guid}`, removed => {
                         if (removed) {
-                            if (window.logger) {
-                                window.logger.debug(`Removed row: ${guid}`);
-                            }
+                            debug("treeTable store", `Removed row: ${guid}`);
                         } else {
                             this.fixAttributes();
                         }

src/store/objects/row.ts

@@ -2,7 +2,7 @@ import { MxTreeTableContainerProps } from "../../typings/MxTreeTableProps";
 import { ValidationMessage } from "@jeltemx/mendix-react-widget-utils/lib/validation";
 
 export interface ExtraMXValidateProps {
-    helperObjectPersistence?: boolean;
+    helperObjectPersistence?: boolean | null;
 }
 
 export const validateProps = (