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

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

@@ -1,194 +0,0 @@
-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

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

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

@@ -1,11 +0,0 @@
-<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

@@ -1,65 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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"
-    }
-};