Add option to automatically select/deselect children on multiselect (#25)

JelteMX · web-flow · commit 92b303c2d557 · 2020-11-26T17:16:27.000+01:00
diff --git a/.travis.yml b/.travis.yml
@@ -1,7 +1,7 @@
 dist: xenial
 language: node_js
 node_js:
-  - 10
+  - 14
 cache: npm
 branches:
     only:
diff --git a/assets/tab07-selection.png b/assets/tab07-selection.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mxtreetable",
   "widgetName": "MxTreeTable",
-  "version": "2.0.8",
+  "version": "2.1.0",
   "description": "TreeTable widget",
   "copyright": "Mendix 2019",
   "author": "Jelte Lagendijk <jelte.lagendijk@mendix.com>",
diff --git a/src/MxTreeTable.tsx b/src/MxTreeTable.tsx
@@ -703,18 +703,47 @@ Your context object is of type "${contextEntity}". Please check the configuratio
         }
     }
 
-    private onSelect(ids: string[]): void {
-        const { selectMode, mxObject } = this.props;
+    private onSelect(ids: string[], childChange?: { record: TableRecord; selected: boolean }): void {
+        const { selectMode, selectMultiChildren, mxObject } = this.props;
+
+        let selectedIDS = ids;
+
         if (selectMode === "none") {
             return;
         }
         if (mxObject) {
+            let additions: string[] = [];
+            let removals: string[] = [];
+
+            if (selectMode === "multi" && selectMultiChildren && childChange) {
+                const row = this.store.findRowObject(childChange.record.key);
+                if (row) {
+                    const children = this.store.findChildren(row);
+                    if (children.length > 0) {
+                        const ids = children.map(c => c.key);
+                        if (childChange.selected) {
+                            additions = ids;
+                        } else {
+                            removals = ids;
+                        }
+                    }
+                }
+            }
+
             try {
                 const { selectedRows } = this.store;
-                const unTouched = selectedRows.filter(row => ids.indexOf(row) !== -1);
-                const newIds = ids.filter(id => selectedRows.indexOf(id) === -1);
 
-                if (ids.length === 0 || newIds.length === 0) {
+                if (additions.length) {
+                    selectedIDS = [...selectedIDS, ...additions.filter(a => !selectedIDS.includes(a))];
+                }
+                if (removals.length) {
+                    selectedIDS = selectedIDS.filter(id => !removals.includes(id));
+                }
+
+                const unTouched = selectedRows.filter(row => selectedIDS.indexOf(row) !== -1);
+                const newIds = selectedIDS.filter(id => selectedRows.indexOf(id) === -1);
+
+                if (selectedIDS.length === 0 || newIds.length === 0) {
                     this.store.setSelected(unTouched);
                     this.onSelectAction();
                 } else {
diff --git a/src/MxTreeTable.xml b/src/MxTreeTable.xml
@@ -460,6 +460,15 @@ It should be a non-persistent entity (persistent is not permitted) with a refere
                 </property>
             </propertyGroup>
 
+            <propertyGroup caption="Multi select">
+                <property key="selectMultiChildren" type="boolean" defaultValue="false">
+                    <caption>Select children</caption>
+                    <description>When selecting an element in Multi select mode, you might want to automatically select the children. This is disabled by default.
+
+Note: This only works properly when the whole tree is loaded (Data -> Scenario). If you apply this to a partial tree, it will obviously only send the child nodes that have been loaded.</description>
+                </property>
+            </propertyGroup>
+
             <propertyGroup caption="Selection onChange">
                 <property key="selectOnChangeAction" type="enumeration" defaultValue="nothing">
                     <caption>On Change action</caption>
diff --git a/src/components/TreeTable.tsx b/src/components/TreeTable.tsx
@@ -36,7 +36,7 @@ export interface TreeTableProps {
     showHeader: boolean;
     clickToSelect: boolean;
     selectMode: SelectionMode;
-    onSelect?: (ids: string[]) => void;
+    onSelect?: (ids: string[], childChange?: { record: TableRecord; selected: boolean }) => void;
     buttonBar?: ReactNode;
     hideSelectBoxes?: boolean;
     renderExpandButton?: boolean;
@@ -131,23 +131,29 @@ export class TreeTable extends Component<TreeTableProps> {
             rowSelection = {
                 type: "checkbox",
                 selectedRowKeys: selectedRows,
-                onChange: (keys: string[]) => {
-                    if (selectMode === "multi") {
-                        this.setSelected(keys);
-                    }
-                },
-                onSelectAll: () => {
+                // onChange: (_keys: string[]) => {
+                //     if (selectMode === "multi") {
+                //         this.setSelected(keys);
+                //     }
+                // },
+                onSelectAll: (selected: boolean, selectedRows: TableRecord[]) => {
+                    const keys = selectedRows.map(row => row.key);
                     if (selectMode === "single" && selectedRows.length > 0) {
                         this.setSelected([]);
+                    } else if (selectMode === "multi") {
+                        this.setSelected(selected ? keys : []);
                     }
                 },
                 onSelect: (record: TableRecord, selected: boolean, selectedRows: TableRecord[]) => {
+                    const keys = selectedRows.map(row => row.key);
                     if (selectMode === "single") {
                         if (selected) {
                             this.setSelected([record.key]);
                         } else {
-                            this.setSelected(selectedRows.map(row => row.key));
+                            this.setSelected(keys);
                         }
+                    } else {
+                        this.setSelected(keys, { record, selected });
                     }
                 }
             };
@@ -233,8 +239,8 @@ export class TreeTable extends Component<TreeTableProps> {
         );
     }
 
-    private setSelected(keys: string[]): void {
-        this.onSelectionChange(keys);
+    private setSelected(keys: string[], childChange?: { record: TableRecord; selected: boolean }): void {
+        this.onSelectionChange(keys, childChange);
     }
 
     private rowClassName(record: TableRecord, index: number): string {
@@ -268,9 +274,9 @@ export class TreeTable extends Component<TreeTableProps> {
         }
     }
 
-    private onSelectionChange(ids: string[]): void {
+    private onSelectionChange(ids: string[], childChange?: { record: TableRecord; selected: boolean }): void {
         if (this.props.onSelect) {
-            this.props.onSelect(ids);
+            this.props.onSelect(ids, childChange);
         }
     }
 
diff --git a/src/package.xml b/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.8" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="MxTreeTable" version="2.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="MxTreeTable.xml"/>
         </widgetFiles>
diff --git a/src/store/index.ts b/src/store/index.ts
@@ -71,6 +71,7 @@ export class NodeStore {
     public hasChildren = this._hasChildren.bind(this);
     public rowChangeHandler = this._rowChangeHandler.bind(this);
     public findParents = this._findParents.bind(this);
+    public findChildren = this._findChildren.bind(this);
     public setSelectedFromExternal = this._setSelectedFromExternal.bind(this);
 
     @observable public contextObject: mendix.lib.MxObject | null;
@@ -585,6 +586,24 @@ export class NodeStore {
         return returnArray;
     }
 
+    private _findChildren(rowObject: RowObject): RowObject[] {
+        let returnArray: RowObject[] = [];
+
+        const directChildren = this.rowObjects.filter(row => row._parent === rowObject.key);
+
+        if (directChildren.length > 0) {
+            directChildren.forEach(child => {
+                returnArray.push(child);
+                const childChild = this._findChildren(child);
+                returnArray = returnArray.concat(childChild);
+            });
+        } else {
+            return [];
+        }
+
+        return returnArray;
+    }
+
     private _rowChangeHandler(): (guid: string, removedCB: (removed: boolean) => void) => Promise<void> {
         return async (guid: string, removedCB: (removed: boolean) => void): Promise<void> => {
             this.debug("store: rowChangeHandler", guid);
diff --git a/typings/MxTreeTableProps.d.ts b/typings/MxTreeTableProps.d.ts
@@ -108,6 +108,7 @@ export interface MxTreeTableContainerProps extends CommonProps {
     selectClickSelect: boolean;
     selectHideCheckboxes: boolean;
     selectSelectFirstOnSingle: boolean;
+    selectMultiChildren: boolean;
     selectOnChangeAction: OnChangeAction;
     selectOnChangeMicroflow: string;
     selectOnChangeNanoflow: Nanoflow;
diff --git a/webpack.config.prod.js b/webpack.config.prod.js
@@ -86,7 +86,37 @@ if (args.length === 5 && args[4] === "--analyze") {
 
 const previewConfig = {
     // Custom configuration goes here
-    // devtool: "source-map"
+    devtool: false,
+    optimization: {
+        minimizer: [
+            new TerserPlugin({
+                cache: true,
+                parallel: true,
+                terserOptions: {
+                    ecma: undefined,
+                    warnings: false,
+                    parse: {},
+                    compress: {
+                        passes: 2
+                    },
+                    mangle: true, // Note `mangle.properties` is `false` by default.
+                    module: false,
+                    output: {
+                        comments: false,
+                        beautify: false,
+                        preamble: `/* TreeTable Widget (preview) || Version ${pkg.version} || Apache 2 LICENSE || Developer: ${pkg.author} || Please report any issues here: https://github.com/JelteMX/mendix-tree-table/issues */\n`
+                        // comments: false
+                    },
+                    toplevel: false,
+                    nameCache: null,
+                    ie8: false,
+                    keep_classnames: undefined,
+                    keep_fnames: false,
+                    safari10: false,
+                },
+            }),
+          ]
+    },
     plugins: [
         // new BundleAnalyzerPlugin(),
         // We only include the moment locale for en-gb, as this is not used in a lot of places and we don't need all the locales

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "mxtreetable",`
`3`	`3`	`"widgetName": "MxTreeTable",`
`4`		`- "version": "2.0.8",`
	`4`	`+ "version": "2.1.0",`
`5`	`5`	`"description": "TreeTable widget",`
`6`	`6`	`"copyright": "Mendix 2019",`
`7`	`7`	`"author": "Jelte Lagendijk <jelte.lagendijk@mendix.com>",`