Add experimental selection of multiple nodes (see test-project) (#20)

Author: JelteMX

README.md

@@ -121,7 +121,7 @@ In order to get the attributes of your Node entity in your project, I encourage
 ![Misc](/assets/tab08-misc.png)
 
 - You can now save the state of your table. This only works for the whole tree, no partial trees!
-- Experimentally expose `window.__TreeTable_{guid}_select`. This will only accept 1 guid at the moment.
+- Experimentally expose `window.__TreeTable_{guid}_select`. This will accept a guid as string, or array of guids for multi selection
 
 ## Test-project
 

package.json

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

src/MxTreeTable.tsx

@@ -143,6 +143,7 @@ class MxTreeTable extends Component<MxTreeTableContainerProps> {
             getInitialTableState: this.getInitialState,
             writeTableState: this.writeTableState,
             onSelect: this.onSelectAction.bind(this),
+            selectionMode: this.props.selectMode,
             // TODO make this a check if you can reset state!
             resetState: true,
             reset: this.reset,

src/MxTreeTable.xml

@@ -587,7 +587,7 @@ Note: State management (currently) ONLY works when you load a whole tree (see Da
             <propertyGroup caption="Experimental">
                 <property key="experimentalExposeSetSelected" type="boolean" defaultValue="false">
                     <caption>Expose setSelected</caption>
-                    <description>This is an EXPERIMENTAL feature. It will expose the function to select a certain object in the Tree Table, so you can target it with a Nanoflow + Javascript Action.
+                    <description>This is an EXPERIMENTAL feature. It will expose the function to select a certain object/list of objects in the Tree Table, so you can target it with a Nanoflow + Javascript Action.
 
 Notes:
 - This is EXPERIMENTAL. Please debug in the console when having problems. No guarantees that this feature will stay in the widget.

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

src/store/index.ts

@@ -4,6 +4,7 @@ import arrayToTree, { Tree } from "array-to-tree";
 import { ValidationMessage, getObject } from "@jeltemx/mendix-react-widget-utils";
 import { TreeColumnProps, getTreeTableColumns, TableRecord } from "../util/columns";
 import { RowObject, TreeRowObject } from "./objects/row";
+import { SelectionMode } from "../../typings/MxTreeTableProps";
 
 configure({ enforceActions: "observed" });
 
@@ -52,6 +53,7 @@ export interface NodeStoreConstructorOptions {
     expandFirstLevel: boolean;
     resetState: boolean;
     rowObjectMxProperties: RowObjectMxProperties;
+    selectionMode: SelectionMode;
 
     childLoader: (guids: string[], parentKey: string, loadFromRef: boolean) => Promise<void>;
     convertMxObjectToRow: (mxObject: mendix.lib.MxObject, parentKey?: string | null) => Promise<TreeRowObject>;
@@ -89,6 +91,7 @@ export class NodeStore {
     private writeTableState: (state: TableState) => void;
     private onSelect: (ids: string[]) => void;
 
+    private selectionMode: SelectionMode;
     private dataResetOnContextChange: boolean;
     private needToCalculateInitialParents: boolean;
     private needToRestoreStateOnContextChange: boolean;
@@ -111,6 +114,7 @@ export class NodeStore {
         rowObjectMxProperties,
         validationMessages,
         getInitialTableState,
+        selectionMode,
         onSelect,
         writeTableState,
         resetState,
@@ -130,6 +134,7 @@ export class NodeStore {
         this.needToCalculateInitialParents = calculateInitialParents;
         this.validationMessages = validationMessages;
         this.rowObjectMxProperties = rowObjectMxProperties;
+        this.selectionMode = selectionMode;
         this.getInitialTableState = getInitialTableState;
         this.writeTableState = writeTableState;
         this.resetState = resetState;
@@ -521,13 +526,41 @@ export class NodeStore {
         return this.rowObjects.filter(findRow => findRow._parent && findRow._parent === row.key).length > 0;
     }
 
-    private _setSelectedFromExternal(guid: string): void {
-        const object = this.findRowObject(guid);
-        if (object) {
-            const parents = this.findParents(object);
-            this.setSelected([object.key]);
-            this.setExpanded(parents.map(p => p.key));
-            this.onSelect([object.key]);
+    private _setSelectedFromExternal(guids: string | string[]): void {
+        if (this.selectionMode === "none") {
+            return;
+        }
+
+        let selected: RowObject[] = [];
+        if (Array.isArray(guids)) {
+            selected = guids.map(guid => this.findRowObject(guid)).filter(obj => obj !== null) as RowObject[];
+        } else {
+            const object = this.findRowObject(guids);
+            if (object) {
+                selected.push(object);
+            }
+        }
+
+        if (selected.length > 0) {
+            if (this.selectionMode === "single") {
+                selected = [selected[0]];
+            }
+
+            const parentGuids: string[] = [];
+            const selectedGuids = selected.map(obj => obj.key);
+
+            selected.forEach(obj => {
+                const parents = this.findParents(obj);
+                parents.forEach(parent => {
+                    if (parentGuids.indexOf(parent.key) === -1) {
+                        parentGuids.push(parent.key);
+                    }
+                });
+            });
+
+            this.setSelected(selectedGuids);
+            this.setExpanded(parentGuids);
+            this.onSelect(selectedGuids);
         }
     }