Merge pull request #4 from JelteMX/feature/node_class

Feature: class name on Node

Author: JelteMX

README.md

@@ -66,6 +66,8 @@ Tested:
 
 ![settings](/assets/settings4.png)
 
+- Note: You can now also set the class name of a node with an attribute
+
 ### 5. Drag & Drop
 
 ![settings](/assets/settings5.png)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "treeview",
   "widgetName": "TreeView",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "TreeView for Mendix",
   "copyright": "Jelte Lagendijk 2019",
   "author": "Jelte Lagendijk <[email protected]>",

src/TreeView.tsx

@@ -58,6 +58,7 @@ class TreeView extends Component<TreeViewContainerProps> {
         const relationType = props.relationType;
         const rootAttr = props.nodeIsRootAttr !== "" ? props.nodeIsRootAttr : null;
         const iconAttr = props.uiNodeIconAttr !== "" ? props.uiNodeIconAttr : null;
+        const classAttr = props.uiNodeClassName !== "" ? props.uiNodeClassName : null;
         const loadFull = props.nodeLoadScenario === "all";
 
         this.searchEnabled =
@@ -79,7 +80,8 @@ class TreeView extends Component<TreeViewContainerProps> {
                 hasChildAttr,
                 relationType,
                 rootAttr,
-                iconAttr
+                iconAttr,
+                classAttr
             },
             childLoader: this.fetchChildren,
             validationMessages,

src/TreeView.xml

@@ -167,6 +167,15 @@
                     <description>When using icons, we default to Glyphicons from Bootstrap. This will prefix the value of the attribute with 'glyphicon glyphicon-'. If you want to use different icons, please switch off Glyphicon</description>
                 </property>
             </propertyGroup>
+            <propertyGroup caption="Classnames">
+                <property key="uiNodeClassName" type="attribute" entityProperty="nodeEntity" required="false">
+                    <caption>Class attr</caption>
+                    <description>If you need to set an extra class name on the node itself (for example, to add a color to it), you can use this attribute.</description>
+                    <attributeTypes>
+                         <attributeType name="String" />
+                    </attributeTypes>
+                </property>
+            </propertyGroup>
             <propertyGroup caption="Other">
                 <property key="uiTableShowLines" type="boolean" defaultValue="false">
                     <caption>Show tree lines</caption>

src/components/TreeViewComponent.tsx

@@ -135,6 +135,7 @@ export class TreeViewComponent extends Component<TreeViewComponentProps> {
             let icon: ReactNode | boolean = false;
             const isLeaf = !((item.children && item.children.length > 0) || item.hasChildren);
             const extraClass = classNames(
+                item.className,
                 item.highlight ? "highlight" : "",
                 item.selected && this.props.holdSelection ? "selected" : "",
                 item.icon ? "has-icon" : ""

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

src/store/index.ts

@@ -32,6 +32,7 @@ export interface EntryObjectAttributes {
     parentRef: string | null;
     rootAttr: string | null;
     iconAttr: string | null;
+    classAttr: string | null;
     relationType: RelationType;
 }
 

src/store/objects/entry.ts

@@ -18,13 +18,13 @@ export interface TreeObject {
     expanded: boolean;
     canExpand?: boolean;
     icon: string | null;
+    className: string | null;
     highlight?: boolean;
 }
 
 export interface EntryObjectExtraOptions {
     dynamicTitleMethod?: DynamicTitleMethod;
     staticTitleMethod?: StaticTitleMethod;
-    classMethod?: ClassMethod;
     isRoot?: boolean;
     parent?: string;
     isLoaded?: boolean;
@@ -45,11 +45,10 @@ export class EntryObject {
     public _attributes: EntryObjectAttributes;
     public _dynamicTitleMethod: DynamicTitleMethod;
     public _staticTitleMethod: StaticTitleMethod;
-    public _classMethod: ClassMethod;
 
     @observable _title: string;
     @observable _icon: string | null;
-    @observable _class: string;
+    @observable _class: string | null;
     @observable _selected: boolean;
     @observable _parent: string;
     @observable _children: string[];
@@ -67,12 +66,12 @@ export class EntryObject {
 
     constructor(opts: EntryObjectOptions, attributes: EntryObjectAttributes) {
         const { mxObject, changeHandler, extraOpts } = opts;
-        const { staticTitleMethod, dynamicTitleMethod, classMethod, isRoot, parent, isLoaded } = extraOpts;
+        const { staticTitleMethod, dynamicTitleMethod, isRoot, parent, isLoaded } = extraOpts;
         this._obj = mxObject;
 
         this._title = "";
         this._icon = null;
-        this._class = "";
+        this._class = null;
         this._selected = false;
         this._parent = typeof parent !== "undefined" ? parent : "";
         this._children = [];
@@ -82,7 +81,6 @@ export class EntryObject {
         this._isRoot = typeof isRoot !== "undefined" ? isRoot : false;
         this._dynamicTitleMethod = dynamicTitleMethod || null;
         this._staticTitleMethod = staticTitleMethod || null;
-        this._classMethod = classMethod || null;
         this._changeHandler = changeHandler || ((): void => {});
         this._subscriptions = [];
         this._attributes = attributes;
@@ -97,10 +95,6 @@ export class EntryObject {
             this._title = staticTitleMethod(mxObject) as string;
         }
 
-        if (classMethod) {
-            this.fixClass();
-        }
-
         this.resetSubscription();
         this.setAttributes();
     }
@@ -127,6 +121,10 @@ export class EntryObject {
             const icon = this._obj.get(attr.iconAttr) as string;
             this.setIcon(icon);
         }
+        if (attr.classAttr) {
+            const className = this._obj.get(attr.classAttr) as string;
+            this.setClass(className);
+        }
 
         if (attr.hasChildAttr) {
             const hasChildren = this._obj.get(attr.hasChildAttr) as boolean;
@@ -141,13 +139,6 @@ export class EntryObject {
         this._subscriptions = [];
     }
 
-    @action
-    fixClass(): void {
-        if (this._classMethod) {
-            this._class = this._classMethod(this._obj);
-        }
-    }
-
     @action
     resetSubscription(): void {
         const { subscribe } = window.mx.data;
@@ -227,7 +218,7 @@ export class EntryObject {
 
     @computed
     get className(): string {
-        return this._class;
+        return this._class !== null ? this._class : "";
     }
 
     @computed
@@ -251,7 +242,8 @@ export class EntryObject {
             root: this.isRoot,
             selected: this.selected,
             expanded: this.isExpanded,
-            icon: this.icon
+            icon: this.icon,
+            className: this.className
         };
     }
 
@@ -302,4 +294,9 @@ export class EntryObject {
     setIcon(str = ""): void {
         this._icon = str === "" ? null : str;
     }
+
+    @action
+    setClass(str = ""): void {
+        this._class = str === "" ? null : str;
+    }
 }

typings/TreeViewProps.d.ts

@@ -36,6 +36,7 @@ export interface TreeViewContainerProps extends CommonProps {
     uiNodeRenderAsHTML: boolean;
     uiNodeIconAttr: string;
     uiNodeIconIsGlyphicon: boolean;
+    uiNodeClassName: string;
     uiTableShowLines: boolean;
     uiSwitcherBg: string;