Feature/refresh on context change (#18)

Author: JelteMX

package.json

@@ -1,7 +1,7 @@
 {
   "name": "mxtreetable",
   "widgetName": "MxTreeTable",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "TreeTable widget",
   "copyright": "Mendix 2019",
   "author": "Jelte Lagendijk <jelte.lagendijk@mendix.com>",

src/MxTreeTable.tsx

@@ -122,6 +122,7 @@ class MxTreeTable extends Component<MxTreeTableContainerProps> {
 
         // Create store
         const storeOpts: NodeStoreConstructorOptions = {
+            dataResetOnContextChange: this.props.dataResetOnContextChange,
             calculateInitialParents: this.props.loadScenario === "all",
             rowObjectMxProperties: {
                 nodeChildReference: this.referenceAttr,
@@ -202,6 +203,10 @@ class MxTreeTable extends Component<MxTreeTableContainerProps> {
         }
     }
 
+    componentWillUnmount(): void {
+        this.store.clearSubscriptions();
+    }
+
     render(): ReactNode {
         const {
             uiShowHeader,

src/MxTreeTable.xml

@@ -64,6 +64,12 @@
                     </attributeTypes>
                 </property>
             </propertyGroup>
+            <propertyGroup caption="Reset">
+                <property key="dataResetOnContextChange" type="boolean" defaultValue="false">
+                    <caption>Reset on context change</caption>
+                    <description>This should be false by default, because you only want to reload the whole table when the context object is switched (new object guid). If for some reason you need to reset the table whenever the context object changes, set this to true. Use this combined with the 'Whole Tree' scenario and state management.</description>
+                </property>
+            </propertyGroup>
         </propertyGroup>
 
         <!-- ****************

src/package.xml

@@ -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.0.3" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="MxTreeTable" version="2.0.4" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="MxTreeTable.xml"/>
         </widgetFiles>

src/store/index.ts

@@ -43,6 +43,7 @@ export interface RowObjectMxProperties {
 
 export interface NodeStoreConstructorOptions {
     contextObject?: mendix.lib.MxObject;
+    dataResetOnContextChange?: boolean;
     columns: TreeColumnProps[];
     validColumns: boolean;
     selectFirstOnSingle: boolean;
@@ -87,6 +88,7 @@ export class NodeStore {
     private writeTableState: (state: TableState) => void;
     private onSelect: (ids: string[]) => void;
 
+    private dataResetOnContextChange: boolean;
     private needToCalculateInitialParents: boolean;
     private needToRestoreStateOnContextChange: boolean;
     private needToRestoreSelectFirst: boolean;
@@ -96,6 +98,7 @@ export class NodeStore {
 
     constructor({
         contextObject,
+        dataResetOnContextChange,
         columns,
         validColumns,
         selectFirstOnSingle,
@@ -113,6 +116,7 @@ export class NodeStore {
         debug
     }: NodeStoreConstructorOptions) {
         this.contextObject = contextObject || null;
+        this.dataResetOnContextChange = typeof dataResetOnContextChange !== 'undefined' ? dataResetOnContextChange : false;
         this.columns = columns;
         this.validColumns = validColumns;
         this.selectFirstOnSingle = selectFirstOnSingle;
@@ -140,7 +144,7 @@ export class NodeStore {
     @action
     setContext(obj?: mendix.lib.MxObject): void {
         this.debug("Store: setContext", obj);
-        if (this.contextObject !== null && obj && this.contextObject.getGuid() !== obj.getGuid()) {
+        if (this.contextObject !== null && obj && (this.contextObject.getGuid() !== obj.getGuid() || this.dataResetOnContextChange)) {
             if (this.needToCalculateInitialParents) {
                 this.calculateInitialParents = true;
                 if (this.needToRestoreStateOnContextChange) {
@@ -385,7 +389,7 @@ export class NodeStore {
 
         const { subscribe } = window.mx.data;
 
-        if (this.contextObject && this.contextObject.getGuid) {
+        if (this.contextObject && this.contextObject.getGuid && !this.dataResetOnContextChange) {
             const guid = this.contextObject.getGuid();
             this.subscriptionHandles.push(
                 subscribe({

typings/MxTreeTableProps.d.ts

@@ -64,6 +64,7 @@ export interface MxTreeTableContainerProps extends CommonProps {
     getDataMf: string;
     getDataNf: Nanoflow;
     nodeIsRootAttr: string;
+    dataResetOnContextChange: boolean;
 
     childMethod: ChildDataSource;
     childReference: string;