Update code && add expand/collapse all button

Author: JelteMX

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "mxtreetable",
   "widgetName": "MxTreeTable",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "TreeTable widget",
   "copyright": "Mendix 2019",
   "author": "Jelte Lagendijk <jelte.lagendijk@mendix.com>",
@@ -32,7 +32,7 @@
   },
   "license": "Apache-2.0",
   "devDependencies": {
-    "@mendix/pluggable-widgets-tools": "^8.6.0",
+    "@mendix/pluggable-widgets-tools": "8.6.0",
     "@types/big.js": "^4.0.5",
     "@types/camelcase": "^5.2.0",
     "@types/classnames": "^2.2.10",
@@ -53,7 +53,7 @@
     "webpack-bundle-analyzer": "^3.6.0"
   },
   "dependencies": {
-    "@jeltemx/mendix-react-widget-utils": "^0.6.2",
+    "@jeltemx/mendix-react-widget-utils": "^0.7.0",
     "@thi.ng/strings": "^1.8.3",
     "antd": "^3.26.7",
     "array-to-tree": "^3.3.2",
@@ -63,6 +63,7 @@
     "mobx": "^4.15.2",
     "mobx-react": "^6.2.2",
     "promise-queue": "^2.2.5",
+    "react-icons": "^3.10.0",
     "store2": "^2.11.1"
   }
 }

package.json

@@ -12,16 +12,16 @@ import {
     IAction,
     getObjectContextFromObjects,
     executeMicroflow,
-    executeNanoFlow,
-    openPage,
+    executeNanoflow,
     fetchByXpath,
     getObjects,
     ValidationMessage,
     getObject,
     commitObject,
     createObject,
     OpenPageAs,
-    entityIsPersistable
+    entityIsPersistable,
+    executeAction
 } from "@jeltemx/mendix-react-widget-utils";
 
 import { NodeStore, NodeStoreConstructorOptions } from "./store";
@@ -45,7 +45,7 @@ import { TableState } from "./store/index";
 import { ColumnProps } from "antd/es/table/interface";
 
 export interface Action extends IAction {}
-export type ActionReturn = string | number | boolean | mendix.lib.MxObject | mendix.lib.MxObject[] | void;
+export type ActionReturn = null | string | number | boolean | mendix.lib.MxObject | mendix.lib.MxObject[] | void;
 export interface TransformNanoflows {
     [key: string]: Nanoflow;
 }
@@ -253,7 +253,8 @@ class MxTreeTable extends Component<MxTreeTableContainerProps> {
             getInlineActionButtons: this._getInlineButtonColumns.bind(this),
             buttonBar,
             clickToSelect: selectClickSelect,
-            hideSelectBoxes: selectHideCheckboxes
+            hideSelectBoxes: selectHideCheckboxes,
+            renderExpandButton: this.props.loadScenario === "all" && this.props.uiRenderExpandButton
         });
     }
 
@@ -627,7 +628,7 @@ class MxTreeTable extends Component<MxTreeTableContainerProps> {
         if (mf !== null) {
             executeMicroflow(mf, context, this.props.mxform, true);
         } else if (nf !== null) {
-            executeNanoFlow(nf, context, this.props.mxform, true);
+            executeNanoflow(nf, context, this.props.mxform, true);
         }
     }
 
@@ -696,7 +697,7 @@ Your context object is of type "${contextEntity}". Please check the configuratio
                 this.debug("Action executed");
             });
         } else if (nf !== null) {
-            return executeNanoFlow(nf, context, mxform).then(() => {
+            return executeNanoflow(nf, context, mxform).then(() => {
                 this.debug("Action executed");
             });
         }
@@ -888,19 +889,12 @@ Your context object is of type "${contextEntity}". Please check the configuratio
 
     private _executeAction(action: Action, showError = false, obj?: mendix.lib.MxObject): Promise<ActionReturn> {
         this.debug("executeAction", action, obj && obj.getGuid());
-        const { mxform } = this.props;
-        const context = getObjectContextFromObjects(obj, this.props.mxObject);
-
-        if (action.microflow) {
-            return executeMicroflow(action.microflow, context, mxform, showError);
-        } else if (action.nanoflow) {
-            return executeNanoFlow(action.nanoflow, context, mxform, showError);
-        } else if (action.page) {
-            return openPage(action.page, context, showError);
-        }
 
-        return Promise.reject(
-            new Error(`No microflow/nanoflow/page defined for this action: ${JSON.stringify(action)}`)
+        return executeAction(
+            action,
+            showError,
+            getObjectContextFromObjects(obj, this.props.mxObject),
+            this.props.mxform
         );
     }
 

src/MxTreeTable.tsx

@@ -64,6 +64,7 @@ export class preview extends Component<MxTreeTableContainerProps> {
 
         const store: MockStore = {
             validationMessages,
+            rowObjects: [],
             rowTree: [],
             expandedKeys: [],
             isLoading: false,

src/MxTreeTable.webmodeler.tsx

@@ -423,6 +423,10 @@ It should be a non-persistent entity (persistent is not permitted) with a refere
                     <caption>Expand first level</caption>
                     <description>Only works while loading the whole tree: Automatically expand the first level of the tree. Currently it is only possible to automatically expand the first level. This will be ignored if the user has already used state management before.</description>
                 </property>
+                <property key="uiRenderExpandButton" type="boolean" defaultValue="false">
+                    <caption>Render expand button</caption>
+                    <description>Render a button to expand/collapse all</description>
+                </property>
             </propertyGroup>
         </propertyGroup>
 

src/MxTreeTable.xml

@@ -1,6 +1,7 @@
 import { Component, ReactNode, createElement } from "react";
 import { observer } from "mobx-react";
 import classNames from "classnames";
+import { FaExpandAlt, FaCompressAlt } from "react-icons/fa";
 import Table, { TableRowSelection, ColumnProps } from "antd/es/table";
 
 // Importing seperate so we don't pollute the CSS too much
@@ -38,6 +39,7 @@ export interface TreeTableProps {
     onSelect?: (ids: string[]) => void;
     buttonBar?: ReactNode;
     hideSelectBoxes?: boolean;
+    renderExpandButton?: boolean;
 }
 
 const DEBOUNCE = 250;
@@ -54,8 +56,8 @@ export class TreeTable extends Component<TreeTableProps> {
         this.onRowDblClick = this.onRowDblClick.bind(this);
         this.onExpand = this.onExpand.bind(this);
         this.setSelected = this.setSelected.bind(this);
-        // this.expandAll = this.expandAll.bind(this);
-        // this.collapseAll = this.collapseAll.bind(this);
+        this.expandAll = this.expandAll.bind(this);
+        this.collapseAll = this.collapseAll.bind(this);
         this.onSelectionChange = this.onSelectionChange.bind(this);
         this.rowClassName = this.rowClassName.bind(this);
     }
@@ -158,11 +160,20 @@ export class TreeTable extends Component<TreeTableProps> {
         }
 
         columns = columns.map((col, index) => {
-            if (!col.key) {
-                return col;
+            const newCol = { ...col };
+            if (!newCol.key) {
+                return newCol;
+            }
+            if (index === 0 && this.props.renderExpandButton) {
+                newCol.title = (
+                    <div>
+                        {this.renderExpandButton()}
+                        {col.title}
+                    </div>
+                );
             }
             return {
-                ...col,
+                ...newCol,
                 render: (text, record) => {
                     if (index === 0 && record._icon) {
                         return (
@@ -205,6 +216,23 @@ export class TreeTable extends Component<TreeTableProps> {
         );
     }
 
+    private renderExpandButton(): ReactNode {
+        const expanded = this.props.store.expandedKeys.length > 0;
+        const className = classNames("treetable-expand-button");
+        if (expanded) {
+            return (
+                <div role="button" className={className} onClick={this.collapseAll}>
+                    <FaCompressAlt />
+                </div>
+            );
+        }
+        return (
+            <div role="button" className={className} onClick={this.expandAll}>
+                <FaExpandAlt />
+            </div>
+        );
+    }
+
     private setSelected(keys: string[]): void {
         this.onSelectionChange(keys);
     }
@@ -215,18 +243,18 @@ export class TreeTable extends Component<TreeTableProps> {
         return `treetable-treelevel-${index}${className}`;
     }
 
-    // private expandAll(): void {
-    //     const parentIds = this.props.rows
-    //         .filter(row => typeof row._parent !== "undefined" && row._parent)
-    //         .map(row => row._parent) as string[];
-    //     this.setState({
-    //         expandedRowKeys: uniq(parentIds)
-    //     });
-    // }
+    private expandAll(): void {
+        const parentIds = this.props.store.rowObjects
+            .filter(row => typeof row._parent !== "undefined" && row._parent)
+            .map(row => row._parent) as string[];
+        const filtered = parentIds.filter((item, i, ar) => ar.indexOf(item) === i);
 
-    // private collapseAll(): void {
-    //     this.props.store.setExpanded([]);
-    // }
+        this.props.store.setExpanded(filtered);
+    }
+
+    private collapseAll(): void {
+        this.props.store.setExpanded([]);
+    }
 
     private onRowClick(record: TableRecord): void {
         if (this.props.onClick) {

src/components/TreeTable.tsx

@@ -49,6 +49,7 @@ const rows = (): any[] => {
 const getTableProps = (rows?: TreeRowObject[], columns?: TreeColumnProps[]): TreeTableProps => {
     const store: MockStore = {
         validationMessages: [],
+        rowObjects: [],
         rowTree: rows || [],
         expandedKeys: [],
         isLoading: false,

src/components/__tests__/TreeTable.spec.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.0.7" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="MxTreeTable" version="2.0.8" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="MxTreeTable.xml"/>
         </widgetFiles>

src/package.xml

@@ -23,6 +23,7 @@ export interface TableState {
 
 export interface MockStore {
     rowTree: Tree<TreeRowObject[]>;
+    rowObjects: RowObject[];
     setSelected: (keys?: string[]) => void;
     setExpanded: (keys?: string[]) => void;
     selectedRows: string[];

src/store/index.ts

@@ -7,6 +7,17 @@
 @import "~antd/es/pagination/style/index.css";
 
 .widget-treetable-wrapper {
+
+    .treetable-expand-button {
+        display: inline-block;
+        height: 25px;
+        width: 14px;
+        margin-right: 10px;
+        line-height: 14px;
+        margin-top: 0px;
+        padding: 6px 0 0 0;
+    }
+
     .ant-table-thead {
         .ant-table-selection-column {
             .ant-checkbox-input {