Updates (#27)

Updating Ant.design table to latest version
Cutting down unnecessary libraries
Fix issue with child selection when onRowClick selection is enabled

Author: JelteMX

README.md

@@ -40,7 +40,7 @@ Show a tree-like structure in Mendix.
 - Dynamic columns
 - Much more...
 
-> This widget is only ~600Kb uncompressed, so in your cloud environment this would be about ~150Kb. This is light-weight for any project.
+> This widget is only ~500Kb uncompressed, so in your cloud environment this would be about ~140Kb. This is light-weight for any project.
 
 Tested:
 - IE11

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "mxtreetable",
   "widgetName": "MxTreeTable",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "TreeTable widget",
   "copyright": "Mendix 2019",
   "author": "Jelte Lagendijk <jelte.lagendijk@mendix.com>",
@@ -54,16 +54,14 @@
   },
   "dependencies": {
     "@jeltemx/mendix-react-widget-utils": "^0.7.0",
-    "@thi.ng/strings": "^1.8.3",
-    "antd": "^3.26.7",
+    "antd": "^4.8.5",
     "array-to-tree": "^3.3.2",
     "big.js": "^5.2.2",
     "classnames": "^2.2.6",
     "debounce": "^1.2.0",
-    "mobx": "^4.15.2",
-    "mobx-react": "^6.2.2",
+    "mobx": "^4.15.7",
+    "mobx-react": "^6.3.1",
     "promise-queue": "^2.2.5",
-    "react-icons": "^3.10.0",
-    "store2": "^2.11.1"
+    "store2": "^2.12.0"
   }
 }

package.json

@@ -4,10 +4,6 @@ import { findDOMNode } from "react-dom";
 import { observer } from "mobx-react";
 import store from "store2";
 
-// import * as ls from "local-storage";
-// // @ts-ignore;
-// window.ls = ls;
-
 import {
     IAction,
     getObjectContextFromObjects,
@@ -42,7 +38,7 @@ import { TreeTable } from "./components/TreeTable";
 import { TreeRowObject } from "./store/objects/row";
 import { getReferencePart } from "./util/index";
 import { TableState } from "./store/index";
-import { ColumnProps } from "antd/es/table/interface";
+import { ColumnProps } from "antd/es/table";
 
 export interface Action extends IAction {}
 export type ActionReturn = null | string | number | boolean | mendix.lib.MxObject | mendix.lib.MxObject[] | void;

src/MxTreeTable.tsx

@@ -0,0 +1,23 @@
+import { createElement } from "react";
+
+export const ExpandIcon = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 448 512">
+            <path
+                fill="currentColor"
+                d="M212.686 315.314L120 408l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C10.697 480 0 469.255 0 456V344c0-21.382 25.803-32.09 40.922-16.971L72 360l92.686-92.686c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.249 6.248 6.249 16.378 0 22.627zm22.628-118.628L328 104l-32.922-31.029C279.958 57.851 290.666 32 312.048 32h112C437.303 32 448 42.745 448 56v112c0 21.382-25.803 32.09-40.922 16.971L376 152l-92.686 92.686c-6.248 6.248-16.379 6.248-22.627 0l-25.373-25.373c-6.249-6.248-6.249-16.378 0-22.627z"
+            />
+        </svg>
+    );
+};
+
+export const CompressIcon = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 448 512">
+            <path
+                fill="currentColor"
+                d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z"
+            />
+        </svg>
+    );
+};

src/components/Icons.tsx

@@ -1,8 +1,11 @@
 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";
+
+import { ExpandIcon, CompressIcon } from "./Icons";
+
+import Table, { ColumnProps } from "antd/es/table";
+import { TableRowSelection } from "antd/es/table/interface";
 
 // Importing seperate so we don't pollute the CSS too much
 import "../ui/MxTreeTable.scss";
@@ -93,9 +96,16 @@ export class TreeTable extends Component<TreeTableProps> {
             }
         };
 
-        const onRow = (record: TableRecord): { [name: string]: () => void } => {
+        const onRow = (record: TableRecord): { [name: string]: (event: MouseEvent) => void } => {
             return {
-                onClick: () => {
+                onClick: (event: MouseEvent) => {
+                    // When we click the checkbox, we also fire onClick. We check if it is the checkbox, if so, stop this
+                    if (event.target !== null) {
+                        const className = (event.target as HTMLElement).className;
+                        if (className.includes("ant-checkbox")) {
+                            return;
+                        }
+                    }
                     clearDebounce();
                     this.debounce = window.setTimeout(() => {
                         this.onRowClick(record);
@@ -117,7 +127,14 @@ export class TreeTable extends Component<TreeTableProps> {
                         }
                     }, DEBOUNCE);
                 },
-                onDoubleClick: () => {
+                onDoubleClick: (event: MouseEvent) => {
+                    // When we click the checkbox, we also fire onClick. We check if it is the checkbox, if so, stop this
+                    if (event.target !== null) {
+                        const className = (event.target as HTMLElement).className;
+                        if (className.includes("ant-checkbox")) {
+                            return;
+                        }
+                    }
                     clearDebounce();
                     this.debounce = window.setTimeout(() => {
                         this.onRowDblClick(record); // double click row
@@ -228,13 +245,13 @@ export class TreeTable extends Component<TreeTableProps> {
         if (expanded) {
             return (
                 <div role="button" className={className} onClick={this.collapseAll}>
-                    <FaCompressAlt />
+                    <CompressIcon />
                 </div>
             );
         }
         return (
             <div role="button" className={className} onClick={this.expandAll}>
-                <FaExpandAlt />
+                <ExpandIcon />
             </div>
         );
     }

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

src/components/icons.js

@@ -1,4 +1,7 @@
-import { camel } from "@thi.ng/strings";
+const lower = (x: string) => x.toLowerCase();
+const upper = (x: string) => x.toUpperCase();
+const camel = (x: string, delim = "-") =>
+    lower(x).replace(new RegExp(`\\${delim}+(\\w)`, "g"), (_, c: string) => upper(c));
 
 export const createCamelcaseId = (str: string): string => {
     const camelCased = camel(str);

src/package.xml

@@ -10,8 +10,6 @@ const baseConfig = require("./node_modules/@mendix/pluggable-widgets-tools/confi
 const TerserPlugin = require("terser-webpack-plugin");
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
-// We're doing dirty hacking, because our camel case stuff doesn't transpile nicely to ES5. Need another solution, but this works in IE11
-baseConfig[0].module.rules[1].exclude = /node_modules\/(?!(@thi.ng)\/).*/
 baseConfig[0].module.rules[1].use.options.presets[0] = [
     '@babel/preset-env',
     {
@@ -22,7 +20,6 @@ baseConfig[0].module.rules[1].use.options.presets[0] = [
         "corejs": "2"
     }
 ]
-baseConfig[1].module.rules[1].exclude = /node_modules\/(?!(@thi.ng)\/).*/
 baseConfig[1].module.rules[1].use.options.presets[0] = [
     '@babel/preset-env',
     {
@@ -68,16 +65,9 @@ const customConfig = {
           ]
     },
     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
         new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en-gb/)
-    ],
-    // We add this to further slim down the package
-    resolve: {
-        alias: {
-            '@ant-design/icons/lib/dist$': path.join(__dirname, 'src/components/icons.js')
-        }
-    }
+    ]
 };
 
 if (args.length === 5 && args[4] === "--analyze") {
@@ -118,15 +108,9 @@ const previewConfig = {
           ]
     },
     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
         new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en-gb/)
-    ],
-    resolve: {
-        alias: {
-            '@ant-design/icons/lib/dist$': path.join(__dirname, 'src/components/icons.js')
-        }
-    }
+    ]
 };
 
 module.exports = [merge(baseConfig[0], customConfig), merge(baseConfig[1], previewConfig)];