Merge pull request #1 from JelteMX/feature/selection-indicator

Add Selection indicator

Author: JelteMX

package.json

@@ -1,7 +1,7 @@
 {
   "name": "treeview",
   "widgetName": "TreeView",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "TreeView for Mendix",
   "copyright": "Jelte Lagendijk 2019",
   "author": "Jelte Lagendijk <jelte.lagendijk@mendix.com>",

src/TreeView.tsx

@@ -57,6 +57,7 @@ class TreeView extends Component<TreeViewContainerProps> {
         const validationMessages = validateProps(props);
 
         const storeOpts: NodeStoreConstructorOptions = {
+            holdSelection: props.selectionSelectOnClick,
             loadFull,
             entryObjectAttributes: {
                 childRef,
@@ -100,12 +101,13 @@ class TreeView extends Component<TreeViewContainerProps> {
     }
 
     render(): ReactNode {
-        const { dragIsDraggable, uiNodeIconIsGlyphicon, uiNodeIconAttr } = this.props;
+        const { dragIsDraggable, uiNodeIconIsGlyphicon, uiNodeIconAttr, selectionSelectOnClick } = this.props;
         const showIcon = uiNodeIconAttr !== "";
         return (
             <TreeViewComponent
                 className={this.props.class}
                 searchEnabled={this.searchEnabled}
+                holdSelection={selectionSelectOnClick}
                 store={this.store}
                 showIcon={showIcon}
                 iconIsGlyphicon={uiNodeIconIsGlyphicon}

src/TreeView.xml

@@ -262,6 +262,12 @@ Note:
                     </enumerationValues>
                 </property>
             </propertyGroup>
+            <propertyGroup caption="Selection">
+                <property key="selectionSelectOnClick" type="boolean" defaultValue="true">
+                    <caption>Enable selection class</caption>
+                    <description>When clicking a Node, you might want to indicate that this is the selected Node. The widget will add a .selected class to the selected node.</description>
+                </property>
+            </propertyGroup>
         </propertyGroup>
     </properties>
 </widget>

src/components/TreeViewComponent.tsx

@@ -20,6 +20,7 @@ import classNames from "classnames";
 export interface TreeViewComponentProps {
     store: NodeStore;
     draggable: boolean;
+    holdSelection: boolean;
     searchEnabled: boolean;
     showIcon: boolean;
     iconIsGlyphicon: boolean;
@@ -120,7 +121,10 @@ export class TreeViewComponent extends Component<TreeViewComponentProps> {
         return data.map(item => {
             let icon: ReactNode | boolean = false;
             const isLeaf = !((item.children && item.children.length > 0) || item.hasChildren);
-            const extraClass = classNames(item.highlight ? "highlight" : "");
+            const extraClass = classNames(
+                item.highlight ? "highlight" : "",
+                item.selected && this.props.holdSelection ? "selected" : ""
+            );
 
             if (item.icon) {
                 icon = <span className={iconIsGlyphicon ? "glyphicon glyphicon-" + item.icon : item.icon} />;
@@ -153,6 +157,9 @@ export class TreeViewComponent extends Component<TreeViewComponentProps> {
             const entryObject = this.props.store.findEntry(node.props.eventKey);
             if (entryObject && entryObject.mxObject) {
                 this.props.onClickHandler(entryObject.mxObject, clickType);
+                if (this.props.holdSelection) {
+                    this.props.store.selectEntry(entryObject.guid);
+                }
             }
         };
     }

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

src/store/index.ts

@@ -17,6 +17,7 @@ export interface TreeGuids {
 export interface NodeStoreConstructorOptions {
     contextObject?: mendix.lib.MxObject;
     loadFull: boolean;
+    holdSelection?: boolean;
     subscriptionHandler?: (guids: TreeGuids) => void;
     onSelectionChange?: (guids: TreeGuids) => void;
     validationMessages: ValidationMessage[];
@@ -61,12 +62,14 @@ export class NodeStore {
     @observable public validationMessages: ValidationMessage[] = [];
 
     private loadFull = false;
+    private holdSelection = false;
     private expandedMapping: { [key: string]: string[] } = {};
 
     constructor(opts: NodeStoreConstructorOptions) {
         const {
             contextObject,
             loadFull,
+            holdSelection,
             subscriptionHandler,
             onSelectionChange,
             validationMessages,
@@ -78,6 +81,7 @@ export class NodeStore {
 
         this.isLoading = false;
         this.loadFull = typeof loadFull !== "undefined" ? loadFull : false;
+        this.holdSelection = typeof holdSelection !== "undefined" ? holdSelection : false;
         this.contextObject = contextObject || null;
         this.subscriptionHandler = subscriptionHandler || ((): void => {});
         this.onSelectionChangeHandler = onSelectionChange || ((): void => {});
@@ -240,6 +244,27 @@ export class NodeStore {
         return this.entries.filter(entry => entry.selected).map(entry => entry.guid);
     }
 
+    @action
+    selectEntry(guid: string) {
+        if (!this.holdSelection) {
+            return;
+        }
+        let selectedFound = false;
+        this.selectedEntries.forEach(entry => {
+            if (entry.guid !== guid) {
+                entry.setSelected(false);
+            } else {
+                selectedFound = true;
+            }
+        });
+        if (!selectedFound) {
+            const entry = this.findEntry(guid);
+            if (entry) {
+                entry.setSelected(true);
+            }
+        }
+    }
+
     // Expanded
 
     get expandedKeys(): string[] {

typings/TreeViewProps.d.ts

@@ -58,6 +58,8 @@ export interface TreeViewContainerProps extends CommonProps {
     eventNodeOnClickForm: string;
     eventNodeOnClickOpenPageAs: OpenPageAs;
 
+    selectionSelectOnClick: boolean;
+
     searchEnabled: boolean;
     searchHelperEntity: string;
     searchStringAttribute: string;