feat: add css-class to tree-node

close #845

Signed-off-by: Christian Kotzbauer <christian.kotzbauer@gmail.com>

Author: ckotzbauer

dist/simple-tree-component.js

@@ -276,6 +276,9 @@
                 lineWrapperDiv.classList.add(constants.classNames.SimpleTreeNodeWrapper);
                 lineWrapperDiv.addEventListener("mouseover", () => this.hoverNode(node));
                 lineWrapperDiv.addEventListener("mouseout", () => this.hoverNode(null));
+                if (node.cssClass) {
+                    lineWrapperDiv.classList.add(node.cssClass);
+                }
                 if (hasChildren) {
                     lineWrapperDiv.classList.add(constants.classNames.SimpleTreeParentNode);
                 }
@@ -440,6 +443,7 @@
         collapsed: false,
         hidden: false,
         uid: "",
+        cssClass: "",
     };
 
     function isTreeNodeValid(treeNode) {

dist/simple-tree-component.min.js

@@ -36,7 +36,13 @@ export interface Rect {
  * @param maxOverlayHeight The maximum height of the overlay. Defaults to `300`.
  * @returns The calculated rectangle of the overlay position.
  */
-export declare function calculate(elementRect: Rect, availableHeight: number, overlayHeight: number, borderWith?: number, maxOverlayHeight?: number): Rect;
+export declare function calculate(
+    elementRect: Rect,
+    availableHeight: number,
+    overlayHeight: number,
+    borderWith?: number,
+    maxOverlayHeight?: number
+): Rect;
 /**
  * Calculates the position of the `overlay` relative to the `element` and sets the values accordingly.
  * See the docs of the `calculate` function for more details.

dist/types/rects.d.ts

@@ -24,6 +24,11 @@ export interface InitTreeNode {
      * Recursive array of child `TreeNode` objects.
      */
     children?: InitTreeNode[];
+    /**
+     * Custom css-class added to the line-wrapper element.
+     * (Default: `""`)
+     */
+    cssClass?: string;
     /**
      * Any additional property, which is available (the component-logic will respect them).
      */

dist/types/tree-node.d.ts

@@ -239,6 +239,24 @@ describe("simpleTree", () => {
             expect(tree.getNode("child2")?.hidden).toBeFalsy();
         });
 
+        it("should respect custom-node-css-classes.", () => {
+            const tree = createInstance<"singleSelectDropdown">(singleCtx, "singleSelectDropdown", {
+                nodes: [
+                    createTreeNode("Node Test 1", "node1"),
+                    createTreeNode("Node Test 2", "node2", [], false, true, "my-class"),
+                    createTreeNode("Node Test 3", "node3"),
+                ],
+            });
+
+            openDropdown(singleCtx, constants.classNames.SimpleTreeSingleSelectBox);
+            const uid = tree.getNode("node2")?.uid;
+            const lineWrapper = document
+                .getElementById(uid as string)
+                ?.querySelector(`.${constants.classNames.SimpleTreeNodeWrapper}`) as HTMLElement;
+
+            expect(lineWrapper.classList.contains("my-class")).toBeTruthy();
+        });
+
         it("should close dropdown on escape.", () => {
             createInstance<"singleSelectDropdown">(singleCtx, "singleSelectDropdown", {
                 nodes: [

src/__tests__/ui/ui-component.spec.ts

@@ -67,14 +67,16 @@ export function createTreeNode(
     value: string | null | undefined,
     children: InitTreeNode[] = [],
     selected = false,
-    selectable = true
+    selectable = true,
+    cssClass = ""
 ): InitTreeNode {
     return {
         label: label,
         value: value as string,
         selected,
         selectable,
         children,
+        cssClass,
     };
 }
 

src/test-utils.ts

@@ -29,6 +29,12 @@ export interface InitTreeNode {
      */
     children?: InitTreeNode[];
 
+    /**
+     * Custom css-class added to the line-wrapper element.
+     * (Default: `""`)
+     */
+    cssClass?: string;
+
     /**
      * Any additional property, which is available (the component-logic will respect them).
      */
@@ -84,4 +90,5 @@ export const defaults: TreeNode = {
     collapsed: false,
     hidden: false,
     uid: "",
+    cssClass: "",
 };

src/types/tree-node.ts

@@ -154,6 +154,10 @@ export class BaseTree {
             lineWrapperDiv.addEventListener("mouseover", () => this.hoverNode(node));
             lineWrapperDiv.addEventListener("mouseout", () => this.hoverNode(null));
 
+            if (node.cssClass) {
+                lineWrapperDiv.classList.add(node.cssClass);
+            }
+
             if (hasChildren) {
                 lineWrapperDiv.classList.add(constants.classNames.SimpleTreeParentNode);
             }