@salesforcedevs/dx-components 0.26.1-alpha0.4 → 0.26.2

package/src/modules/dx/tree/__tests__/treeHandler.test.ts

@@ -0,0 +1,194 @@
+import { TreeHandler } from "../treeHandler";
+import { TreeNode, InternalTreeNode } from "typings/custom";
+import {
+    SAMPLE_TREE_MULTIPLE_LEVELS,
+    SAMPLE_TREE_ONE_LEVEL,
+    SAMPLE_TREE_WITH_LINKS
+} from "./mockProps";
+
+const assertTreeNode = (
+    internalTree: InternalTreeNode,
+    tree: TreeNode,
+    expectedLevel: number,
+    expectedKey: string
+) => {
+    expect(internalTree.label).toBe(tree.label);
+    expect(internalTree.name).toBe(tree.name);
+    expect(internalTree.isExpanded).toBe(tree.isExpanded || false);
+    expect(internalTree.link).toEqual(tree.link);
+    expect(internalTree.level).toBe(expectedLevel);
+    expect(internalTree.key).toBe(expectedKey);
+
+    if (internalTree.children) {
+        expect(internalTree.children).toHaveLength(tree.children!.length);
+        internalTree.children.forEach((child, index) => {
+            assertTreeNode(
+                child as InternalTreeNode,
+                tree.children![index],
+                expectedLevel + 1,
+                `${expectedKey}.${index}`
+            );
+        });
+    }
+};
+
+const getAllKeys = (tree: InternalTreeNode): Array<string> => {
+    if (!tree.children || tree.children.length === 0) {
+        return [tree.key];
+    }
+    const keys: Array<string> = [];
+    tree.children.forEach((child: InternalTreeNode) => {
+        keys.push(...getAllKeys(child));
+    });
+
+    return keys;
+};
+
+describe("TreeHandler", () => {
+    describe("initialize", () => {
+        it("should convert a single level tree structure into the internal structure", () => {
+            const treeHandler = new TreeHandler();
+            const result = treeHandler.initialize(SAMPLE_TREE_ONE_LEVEL);
+            expect(result).toBeTruthy();
+            assertTreeNode(result, SAMPLE_TREE_ONE_LEVEL, 0, "0");
+        });
+
+        it("should convert a multiple level tree structure into the internal structure", () => {
+            const treeHandler = new TreeHandler();
+            const result = treeHandler.initialize(SAMPLE_TREE_MULTIPLE_LEVELS);
+            expect(result).toBeTruthy();
+            assertTreeNode(result, SAMPLE_TREE_MULTIPLE_LEVELS, 0, "0");
+        });
+
+        it("should convert a tree structure with links into the internal structure", () => {
+            const treeHandler = new TreeHandler();
+            const result = treeHandler.initialize(SAMPLE_TREE_WITH_LINKS);
+            expect(result).toBeTruthy();
+            assertTreeNode(result, SAMPLE_TREE_WITH_LINKS, 0, "0");
+        });
+    });
+
+    describe("getNode", () => {
+        it("should return a node when key exist", () => {
+            const treeHandler = new TreeHandler();
+            const treeStructure = treeHandler.initialize(SAMPLE_TREE_ONE_LEVEL);
+            expect(treeHandler.getNode(treeStructure.key)).toEqual(
+                treeStructure
+            );
+
+            treeStructure.children!.forEach((child) => {
+                expect(
+                    treeHandler.getNode((child as InternalTreeNode).key)
+                ).toEqual(child);
+            });
+        });
+
+        it("should return undefined in case the key does not exist", () => {
+            const treeHandler = new TreeHandler();
+            treeHandler.initialize(SAMPLE_TREE_ONE_LEVEL);
+            expect(treeHandler.getNode("not_exist")).toBeUndefined();
+        });
+    });
+
+    describe("getKeyByName", () => {
+        it("should return the key value if name exist", () => {
+            const treeHandler = new TreeHandler();
+            const treeStructure = treeHandler.initialize(SAMPLE_TREE_ONE_LEVEL);
+            expect(treeHandler.getKeyByName(treeStructure.name)).toBe(
+                treeStructure.key
+            );
+
+            treeStructure.children!.forEach((child) => {
+                const { key, name } = child as InternalTreeNode;
+                expect(treeHandler.getKeyByName(name)).toBe(key);
+            });
+        });
+
+        it("should return undefined in case the name does not exist", () => {
+            const treeHandler = new TreeHandler();
+            treeHandler.initialize(SAMPLE_TREE_ONE_LEVEL);
+            expect(treeHandler.getKeyByName("not_exist")).toBeUndefined();
+        });
+    });
+
+    describe("expandToSelected", () => {
+        it("should mark a node as isExpanded recursively until the root", () => {
+            const expectedKeys = ["0.2.0", "0.2", "0"];
+            const treeHandler = new TreeHandler();
+            const treeStructure = treeHandler.initialize(
+                SAMPLE_TREE_MULTIPLE_LEVELS
+            );
+            treeHandler.expandToSelected(expectedKeys[0]);
+
+            expectedKeys.forEach((expectedKey) =>
+                expect(treeHandler.getNode(expectedKey)!.isExpanded).toBe(true)
+            );
+            getAllKeys(treeStructure)
+                .filter((key) =>
+                    expectedKeys.some((expectedKey) => expectedKey !== key)
+                )
+                .forEach((key) =>
+                    expect(treeHandler.getNode(key)!.isExpanded).toBeFalsy()
+                );
+        });
+
+        it("should not mark any node as isExpanded if no key is provided", () => {
+            const treeHandler = new TreeHandler();
+            const treeStructure = treeHandler.initialize(
+                SAMPLE_TREE_MULTIPLE_LEVELS
+            );
+            treeHandler.expandToSelected();
+            getAllKeys(treeStructure).forEach((key) =>
+                expect(treeHandler.getNode(key)!.isExpanded).toBeFalsy()
+            );
+        });
+
+        it("should not mark any node as isExpanded if provided key does not exist", () => {
+            const treeHandler = new TreeHandler();
+            const treeStructure = treeHandler.initialize(
+                SAMPLE_TREE_MULTIPLE_LEVELS
+            );
+            treeHandler.expandToSelected("not_exist");
+            getAllKeys(treeStructure).forEach((key) =>
+                expect(treeHandler.getNode(key)!.isExpanded).toBeFalsy()
+            );
+        });
+    });
+
+    describe("registerSetExpanded", () => {
+        it("should register a setExpanded callback if key is valid", () => {
+            const treeHandler = new TreeHandler();
+            const treeStructure = treeHandler.initialize(
+                SAMPLE_TREE_MULTIPLE_LEVELS
+            );
+
+            const { key } = treeStructure;
+            const mockSetExpanded = jest.fn();
+
+            treeHandler.registerSetExpanded({
+                key,
+                setExpanded: mockSetExpanded
+            });
+
+            treeHandler.expandToSelected(key);
+            expect(mockSetExpanded).toBeCalledTimes(1);
+            expect(mockSetExpanded).toBeCalledWith(true);
+        });
+
+        it("should not register a not valid key", () => {
+            const treeHandler = new TreeHandler();
+            treeHandler.initialize(SAMPLE_TREE_MULTIPLE_LEVELS);
+
+            const key = "not_valid";
+            const mockSetExpanded = jest.fn();
+
+            treeHandler.registerSetExpanded({
+                key,
+                setExpanded: mockSetExpanded
+            });
+
+            treeHandler.expandToSelected(key);
+            expect(mockSetExpanded).not.toBeCalled();
+        });
+    });
+});

package/src/modules/dx/tree/tree.css

@@ -0,0 +1,5 @@
+@import "helpers/reset";
+
+:host {
+    display: block;
+}

package/src/modules/dx/tree/tree.html

@@ -0,0 +1,11 @@
+<template>
+    <dx-tree-item
+        if:true={treeRoot}
+        is-root
+        tree-node={treeRoot}
+        selected-key={selectedKey}
+        ontileselected={onTileSelected}
+        onexpandcollapse={onExpandCollapse}
+        onregister={onRegister}
+    ></dx-tree-item>
+</template>

package/src/modules/dx/tree/tree.stories.ts

@@ -0,0 +1,65 @@
+import {
+    SAMPLE_TREE_MULTIPLE_LEVELS,
+    SAMPLE_TREE_ONE_LEVEL,
+    SAMPLE_TREE_WITH_BADGES,
+    SAMPLE_TREE_WITH_LINKS
+} from "./__tests__/mockProps";
+
+import { html } from "lit-html";
+
+export default {
+    title: "dx/dx-tree",
+    component: "dx-tree"
+};
+
+// prettier-ignore
+const styles = (addStyles: string = "") => html `
+    <style>
+        .tree {
+            max-width: 300px;
+            background-color: var(--dx-g-gray-95);
+            ${addStyles}
+        }
+    </style>`;
+
+const oneLevelTreeRoot = JSON.stringify(SAMPLE_TREE_ONE_LEVEL);
+const multipleLevelsTreeRoot = JSON.stringify(SAMPLE_TREE_MULTIPLE_LEVELS);
+const treeLinksTreeRoot = JSON.stringify(SAMPLE_TREE_WITH_LINKS);
+const treeWithBadges = JSON.stringify(SAMPLE_TREE_WITH_BADGES);
+
+// prettier-ignore
+export const Base = () => html` ${styles()}
+    <dx-tree
+        class="tree"
+        tree-root="${oneLevelTreeRoot}"
+    ></dx-tree>`;
+
+// prettier-ignore
+export const MultilevelWithValue = () => html` ${styles()}
+    <dx-tree
+        class="tree"
+        value="scenario"
+        tree-root="${multipleLevelsTreeRoot}"
+    ></dx-tree>`;
+
+// prettier-ignore
+export const MultipleLevels = () => html` ${styles()}
+    <dx-tree
+        class="tree"
+        tree-root="${multipleLevelsTreeRoot}"
+    ></dx-tree>`;
+
+// prettier-ignore
+export const WithLinks = () => html` ${styles()}
+    <dx-tree
+        class="tree"
+        tree-root="${treeLinksTreeRoot}"
+    ></dx-tree>`;
+
+MultipleLevels.story = { parameters: { docs: { disable: true } } };
+WithLinks.story = { parameters: { docs: { disable: true } } };
+
+export const WithMethodBadges = () => html`
+    ${styles()}
+    <dx-tree class="tree" tree-root="${treeWithBadges}"></dx-tree>
+`;

package/src/modules/dx/tree/tree.ts

@@ -0,0 +1,72 @@
+import { LightningElement, api } from "lwc";
+import { TreeNode, InternalTreeNode } from "typings/custom";
+import { toJson } from "utils/normalizers";
+import { TreeHandler } from "./treeHandler";
+
+export default class Tree extends LightningElement {
+    @api
+    get treeRoot() {
+        return this._treeRoot!;
+    }
+
+    set treeRoot(value: TreeNode | string) {
+        value = toJson(value);
+        this._treeHandler = new TreeHandler();
+        this._treeRoot = this._treeHandler.initialize(value as TreeNode);
+        if (this._value) {
+            this.selectedKey = this._treeHandler.getKeyByName(this._value);
+            this._treeHandler.expandToSelected(this.selectedKey);
+        }
+    }
+
+    @api
+    get value() {
+        return this._value!;
+    }
+
+    set value(value: string) {
+        if (this._value === value) {
+            return;
+        }
+
+        this._value = value;
+        if (this._treeHandler) {
+            this.selectedKey = this._treeHandler.getKeyByName(value);
+            this._treeHandler.expandToSelected(this.selectedKey);
+        }
+    }
+
+    private _treeRoot?: InternalTreeNode = undefined;
+    private _treeHandler!: TreeHandler;
+    private _value?: string = undefined;
+    private selectedKey?: string = undefined;
+
+    onTileSelected(event: CustomEvent) {
+        event.stopPropagation();
+
+        const { key, name } = event.detail;
+        this._value = name;
+        this.selectedKey = key;
+        this.dispatchEvent(
+            new CustomEvent("select", {
+                detail: { name },
+                composed: true,
+                bubbles: true
+            })
+        );
+    }
+
+    onExpandCollapse(event: CustomEvent) {
+        event.stopPropagation();
+
+        const node = this._treeHandler.getNode(event.detail.key);
+        if (node) {
+            node.isExpanded = !node.isExpanded;
+        }
+    }
+
+    onRegister(event: CustomEvent<{ key: string; setExpanded: Function }>) {
+        event.stopPropagation();
+        this._treeHandler.registerSetExpanded(event.detail);
+    }
+}

package/src/modules/dx/tree/treeHandler.ts

@@ -0,0 +1,100 @@
+import type { InternalTreeNode, TreeNode } from "typings/custom";
+type MapItem = {
+    node: InternalTreeNode;
+    parent?: MapItem;
+    setExpanded?: Function;
+};
+
+const ROOT_KEY = "0";
+
+export class TreeHandler {
+    private _nodeMap: { [key: string]: MapItem };
+    private _nameKeyMap: { [key: string]: string };
+
+    constructor() {
+        this._nodeMap = {};
+        this._nameKeyMap = {};
+    }
+
+    getNode(key: string): InternalTreeNode | undefined {
+        return this._nodeMap[key] && this._nodeMap[key].node;
+    }
+
+    getKeyByName(name: string): string | undefined {
+        return name && this._nameKeyMap[name];
+    }
+
+    initialize(treeRoot: TreeNode): InternalTreeNode {
+        return this.convert(treeRoot);
+    }
+
+    expandToSelected(selectedKey?: string) {
+        if (selectedKey) {
+            this.expandParents(this._nodeMap[selectedKey]);
+        }
+    }
+
+    registerSetExpanded({
+        key,
+        setExpanded
+    }: {
+        key: string;
+        setExpanded: Function;
+    }) {
+        const item = this._nodeMap[key];
+        if (item) {
+            item.setExpanded = setExpanded;
+        }
+    }
+
+    private convert(
+        node: TreeNode,
+        level: number = 0,
+        parent?: MapItem,
+        position?: number
+    ): InternalTreeNode {
+        const convertedNode: InternalTreeNode = {
+            label: node.label,
+            name: node.name,
+            key: this.calculateKey(
+                (parent && parent.node.key) || ROOT_KEY,
+                position
+            ),
+            level: level,
+            isExpanded: node.isExpanded || false,
+            link: node.link,
+            method: node.method
+        };
+
+        const mapItem = { node: convertedNode, parent };
+        if (node.children && node.children.length > 0) {
+            convertedNode.children = node.children.map((child, index) =>
+                this.convert(child, level + 1, mapItem, index)
+            );
+        }
+
+        this._nodeMap[convertedNode.key] = mapItem;
+        this._nameKeyMap[convertedNode.name] = convertedNode.key;
+        return convertedNode;
+    }
+
+    private calculateKey(parentKey: string, position?: number): string {
+        if (position === undefined) {
+            return parentKey;
+        }
+        return `${parentKey}.${position}`;
+    }
+
+    private expandParents(treeNode?: MapItem) {
+        if (!treeNode) {
+            return;
+        }
+
+        treeNode.node.isExpanded = true;
+        if (treeNode.setExpanded) {
+            treeNode.setExpanded(true);
+        }
+
+        this.expandParents(treeNode.parent);
+    }
+}

package/src/modules/dx/treeItem/__tests__/mockProps.ts

@@ -0,0 +1,46 @@
+import { InternalTreeNode } from "typings/custom";
+
+export const SINGLE_NODE: InternalTreeNode = {
+    label: "Test label",
+    name: "test-name",
+    key: "0.1",
+    level: 1
+};
+
+export const NODE_WITH_CHILDREN: InternalTreeNode = {
+    label: "Test label",
+    name: "test-name",
+    key: "0.1",
+    level: 1,
+    children: [
+        {
+            label: "First Child",
+            name: "first-child",
+            key: "0.1.0",
+            level: 2
+        },
+        {
+            label: "Second Child",
+            name: "second-child",
+            key: "0.1.1",
+            level: 2
+        },
+        {
+            label: "Third Child",
+            name: "third-child",
+            key: "0.1.2",
+            level: 2
+        }
+    ]
+};
+
+export const SINGLE_NODE_WITH_LINK: InternalTreeNode = {
+    label: "Test label",
+    name: "test-name",
+    key: "0.1",
+    level: 1,
+    link: {
+        href: "https://salesforce.com",
+        target: "_parent"
+    }
+};