@veracity/vui/dist/tree/treeItem.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { isArray, isReactText } from "../utils/assertion.js";
import { filterUndefined } from "../utils/object.js";
import { cs, vuiColorToRGBA } from "../utils/styles.js";
import { useStyleConfig } from "../core/theme.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import { Box } from "../box/box.js";
import { List } from "../list/list.js";
import { useTreeContext } from "./context.js";
import { TreeIcon } from "./treeIcon.js";
import { TreeText } from "./treeText.js";
import { useEffect, useState } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

//#region src/tree/treeItem.tsx
const TreeItemBase = styled.liBox`
  display: flex;
  flex-direction: column;
  transition-duration: fast;
  width: 100%;
`;
/**
* Displays a tree item with text and optional icons. Can be shown as selected.
*/
const TreeItem = vui((props, ref) => {
	const { activeItemId, activeItemIndex, children, center, centerH, centerV = true, className, iconCollapse = "falMinus", isCollapsed, disabled, iconExpand = "falPlus", id, items, isActive, isFirstLevel, isTruncated, key, onClickTreeItem, onToggle, propagatedPL, plUnit = 26, text, ...rest } = {
		...useTreeContext(),
		...props
	};
	const styles = useStyleConfig("Tree", useTreeContext());
	const { activeBg, bg, color, h, hoverBg, hoverColor, p, px, py, selectedBg, ...itemStyles } = styles.item;
	const [isCollapsedInternal, setIsCollapsedInternal] = useState(false);
	const innerBoxPl = propagatedPL || 0;
	const innerListPl = innerBoxPl + (plUnit || 0);
	useEffect(() => {
		setIsCollapsedInternal(!!isCollapsed);
	}, [isCollapsed]);
	const toggle = (e) => {
		if (!disabled) {
			onToggle?.({
				id,
				collapsed: !isCollapsedInternal
			});
			setIsCollapsedInternal(!isCollapsedInternal);
		}
		const active = e.target?.closest(".vui-tree")?.getElementsByClassName("vui-treeItem-active")[0];
		active && (active.style.backgroundColor = "transparent");
		onClickTreeItem?.(id);
		e.stopPropagation();
	};
	const hoverTreeItem = (e, type) => {
		const target = e.target;
		let parentDiv = void 0;
		if (target.classList.contains("vui-treeItem-permanent")) parentDiv = target;
		else parentDiv = target.closest(".vui-treeItem")?.getElementsByClassName("vui-treeItem-permanent")[0];
		const isDivActive = parentDiv?.classList.contains("vui-treeItem-active") ? true : false;
		if (parentDiv?.classList.contains("vui-treeItem-permanent")) {
			if (parentDiv?.classList.contains("vui-treeItem-firstLevel")) {
				if (type === "over") parentDiv.style.backgroundColor = vuiColorToRGBA(styles?.firstLevelItem?.hoverBg || "transparent");
				if (type === "out") parentDiv.style.backgroundColor = isDivActive ? vuiColorToRGBA(styles?.firstLevelItem?.activeBg || "transparent") : vuiColorToRGBA(styles?.firstLevelItem?.bg || "transparent");
			} else {
				if (type === "over") parentDiv.style.backgroundColor = vuiColorToRGBA(styles?.item?.hoverBg || "transparent");
				if (type === "out") parentDiv.style.backgroundColor = isDivActive ? vuiColorToRGBA(styles?.item?.activeBg || "transparent") : vuiColorToRGBA(styles?.item?.bg || "transparent");
			}
		} else e.preventDefault();
		e.stopPropagation();
	};
	const isCollapsable = isArray(children) && children.length > 0 || isArray(items) && items.length > 0;
	const isActiveInternal = !activeItemIndex && isActive || activeItemIndex === id;
	let textMl = items && items?.length > 0 ? 0 : 1.5;
	if (!isCollapsable) textMl += 3.8;
	const aliasedProps = filterUndefined({
		"aria-expanded": isCollapsable ? !isCollapsedInternal : void 0,
		role: "treeitem"
	});
	return /* @__PURE__ */ jsx(TreeItemBase, {
		className: cs("vui-treeItem", isFirstLevel ? "vui-treeItem-firstLevel" : "", className),
		color: isFirstLevel ? styles?.firstLevelItem?.color : color,
		h: isCollapsedInternal ? h : isCollapsable ? "auto" : h,
		id: id.toString(),
		m: 0,
		onClick: !disabled ? (e) => toggle(e) : void 0,
		onMouseOut: !disabled ? (e) => hoverTreeItem(e, "out") : void 0,
		onMouseOver: !disabled ? (e) => hoverTreeItem(e, "over") : void 0,
		p: 0,
		propagatedPL,
		ref,
		w: 1,
		...itemStyles,
		bg: isFirstLevel ? isActiveInternal ? styles?.firstLevelItem?.activeBg : styles?.firstLevelItem?.bg : isActiveInternal ? styles?.item?.activeBg : bg,
		hoverBg: void 0,
		...aliasedProps,
		...rest,
		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Box, {
			centerV: true,
			className: cs("vui-treeItem-permanent", isActiveInternal ? "vui-treeItem-active" : "", isFirstLevel ? "vui-treeItem-firstLevel" : ""),
			fontWeight: isActiveInternal ? "600" : "500",
			pl: `${innerBoxPl}px`,
			children: [items && items?.length > 0 && /* @__PURE__ */ jsx(Fragment$1, { children: isCollapsedInternal ? /* @__PURE__ */ jsx(TreeIcon, {
				mx: 1.5,
				name: iconExpand
			}) : /* @__PURE__ */ jsx(TreeIcon, {
				mx: 1.5,
				name: iconCollapse
			}) }), isReactText(text) ? /* @__PURE__ */ jsx(TreeText, {
				ml: textMl,
				isTruncated,
				text
			}) : text]
		}), isCollapsable && !isCollapsedInternal && /* @__PURE__ */ jsx(List, {
			role: "tree",
			w: 1,
			children: children ?? (isArray(items) ? items.map(({ key, propagatedPL, ...props }, index) => {
				return /* @__PURE__ */ jsx(TreeItem, {
					activeItemIndex,
					iconCollapse,
					iconExpand,
					onClickTreeItem,
					propagatedPL: innerListPl,
					...props
				}, key ?? index);
			}) : items)
		})] })
	});
});
TreeItem.displayName = "TreeItem";

//#endregion
export { TreeItem, TreeItem as default, TreeItemBase };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=treeItem.js.map