Trees
Overview
Tree component is a nested recursive component. It means that a component contains children which have same structure as itself.
To see what we are saying, let's look at example below.
P.S: Note aside, it's important to understand that tree is a functional feature. It's up to you to design it your own way.
Installation
Notes
To use this component, you need to initialize your project first. If not done yet, run one of the following command:
npx jsxpine init or yarn jsxpine init or pnpm jsxpine init or bunx jsxpine init.
Go to the installation and usage page to learn more.
jsxpine add treeCopied !
Copied !
-------------------- Tree Component -------------------------
import clsx from "clsx";
/**
* @typedef TreeType
* @type {Record<string, unknown> & { id: string, label?: string, icon?: string | import("../common/props").HTMLTag, parent?: string, children?: TreeType[] }}
*/
/**
* @typedef TreeProps
* @property {TreeType} root
*/
/**
* @typedef MenuTreeProps
* @type {import("../common/props").HTMLTag & TreeProps}
*/
/**
*
* @type {import("../common/props").JSXComponent<MenuTreeProps>}
*/
export function MenuTree(props) {
const { children, class: className, root } = props;
return (
<div
x-data={`tree(${JSON.stringify(root)})`}
x-ref="treeNav"
class={clsx("w-full", className)}
>
{children}
</div>
);
}
-------------------- Alpine Dependencies -------------------------
/**
* @typedef {Object} TreeOutputData
* @property {import("../../../components/trees.component").TreeType}
* @property {Map<string, TreeType>} treeMap
* @property {(item: import("../../../components/trees.component").TreeType) => void} selectedItem
* @property {(parentId: string) => void} goToParent
* @property {(treeItem: import("../../../components/trees.component").TreeType) => void} recursiveTreeMap
*/
/**
* Tree alpine data
* @param {import("../../../components/trees.component").TreeType} root
* @returns {import("alpinejs").AlpineComponent<TreeOutputData>}
*/
export function treeData(root) {
return {
init() {
this.recursiveTreeMap(this.root);
},
root,
treeMap: new Map([]),
selectedItem: root,
selectItem(item) {
this.selectedItem = item;
this.items = this.selectedItem.children;
},
goToParent(parentId) {
this.selectedItem = this.treeMap.get(parentId);
},
recursiveTreeMap(treeItem) {
this.treeMap.set(treeItem.id, treeItem);
if (treeItem.children) {
[...treeItem.children].forEach((tree) => {
this.recursiveTreeMap(tree);
});
}
},
};
}