aio-tree 1.0.0

package/index.css

@@ -0,0 +1,55 @@
+.aio-input-tree-option {
+    gap: 6px;
+    position: relative;
+    padding: 0 6px;
+    height: 3em;
+
+}
+
+.aio-input-tree-option.auto-height {
+    height: fit-content;
+    min-height: 3em;
+
+}
+
+.aio-input-tree-option .aio-input-before {
+    height: -webkit-fill-available;
+
+}
+
+.aio-input-tree {
+    font-size: inherit;
+    display: flex;
+    flex-direction: column;
+}
+.aio-input-tree-row{
+    display:flex;
+    align-items: center;
+}
+.aio-input-tree-text{
+    flex:1;
+}
+.aio-input-tree-rtl {
+    direction: rtl;
+}
+
+.aio-input-tree-rtl .aio-input-toggle-icon {
+    transform: scaleX(-1);
+}
+
+.aio-input-select.aio-input-tree-options-button {
+    background: none;
+    border: none;
+}
+
+.aio-input-tree-body {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.aio-input-tree-body .aio-input-tree-option {
+    transition-timing-function: cubic-bezier(.16, 2.02, .84, .96) !important;
+    transition: height var(--aio-input-transition);
+}

package/index.d.ts

@@ -0,0 +1,92 @@
+import { FC, ReactNode } from "react";
+import './index.css';
+export type I_treeRef = React.RefObject<ReturnType<typeof useTree>>;
+export type AI_Tree = {
+    value: any[];
+    indent?: number;
+    onToggle?: (openDic: {
+        [id: string]: boolean;
+    }) => void;
+    setChilds?: (treeOptionDetail: I_treeOptionDetail, childs: undefined | any[]) => void;
+    onChange?: (v: any) => void;
+    treeOption?: I_treeOptionProp;
+    attrs?: any;
+    className?: string;
+    rtl?: boolean;
+    style?: any;
+    treeRef?: I_treeRef;
+};
+export type I_treeOptionProp = {
+    value: (detail: I_treeOptionDetail) => any;
+    text: (detail: I_treeOptionDetail) => ReactNode;
+    show?: (detail: I_treeOptionDetail) => boolean;
+    childs: (detail: I_treeOptionDetail) => any[] | undefined;
+    toggleIcon?: (detail: I_treeOptionDetail) => false | {
+        close?: ReactNode;
+        open?: ReactNode;
+        leaf?: ReactNode;
+    };
+    style?: (detail: I_treeOptionDetail) => any;
+    className?: (detail: I_treeOptionDetail) => string;
+    attrs?: (detail: I_treeOptionDetail) => any;
+    onClick?: (detail: I_treeOptionDetail) => void;
+};
+export type I_treeOptionDetail = {
+    text: ReactNode;
+    row: any;
+    value: any;
+    childs?: any[];
+    index: number;
+    isFirstChild: boolean;
+    isLastChild: boolean;
+    toggleIcon?: false | {
+        close?: ReactNode;
+        open?: ReactNode;
+        leaf?: ReactNode;
+    };
+    toggle: () => void;
+    change: (newRow: any) => void;
+    level: number;
+    parentOptions: I_treeOptionDetail[];
+    open?: boolean;
+    isRoot: boolean;
+    isLeaf: boolean;
+    values: any[];
+    attrs: any;
+};
+export declare const AITree: FC<AI_Tree>;
+export declare const useTree: (hookProps: {
+    treeOptionProp?: I_treeOptionProp;
+    onChange?: (v: any) => void;
+    mainValueRef: React.RefObject<any[]>;
+}) => {
+    toggle: (treeOptionDetail: I_treeOptionDetail, state?: boolean) => void;
+    openDic: any;
+    isOpen: (treeOptionDetail?: I_treeOptionDetail) => boolean;
+    change: (row: any, newRow: any) => void;
+    getChilds: (treeOptionDetail: I_treeOptionDetail) => undefined | any[];
+    setChilds: (treeOptionDetail: I_treeOptionDetail, childs: undefined | any[], setChilds?: AI_Tree["setChilds"]) => void;
+    getOptions: (p: {
+        rows: any[];
+        level: number;
+        parentOptions: I_treeOptionDetail[];
+    }) => I_treeOptionDetail[];
+    getTreeOptionDetailByValues: (values: any[], rows: any[]) => I_treeOptionDetail;
+};
+type AI_Indent = {
+    level: number;
+    width: number;
+    rtl: boolean;
+    isLastChild: boolean;
+    isParentLastChild: boolean;
+    isLeaf: boolean;
+    open?: boolean;
+    onToggle?: () => void;
+    toggleIcon?: false | {
+        close?: ReactNode;
+        open?: ReactNode;
+        leaf?: ReactNode;
+    };
+};
+export declare const Indent: FC<AI_Indent>;
+export {};

package/index.js

@@ -0,0 +1,334 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import './index.css';
+export const AITree = (props) => {
+    const mainValueRef = useRef(props.value);
+    mainValueRef.current = props.value;
+    const tree = useTree({ treeOptionProp: props.treeOption, onChange: props.onChange, mainValueRef });
+    if (props.treeRef) {
+        props.treeRef.current = tree;
+    }
+    let Attrs = AddToAttrs(props.attrs, { className: ['aio-input-tree', props.className, props.rtl ? 'aio-input-tree-rtl' : undefined], style: props.style });
+    useEffect(() => {
+        if (props.onToggle) {
+            props.onToggle(tree.openDic);
+        }
+    }, [tree.openDic]);
+    return (_jsx(TreeProvider, { value: { rootProps: props, tree }, children: _jsx("div", Object.assign({}, Attrs, { children: _jsx(TreeBody, { rows: props.value, level: 0, parentOptions: [] }) })) }));
+};
+const TreeContext = createContext({});
+const TreeProvider = ({ value, children }) => {
+    return _jsx(TreeContext.Provider, { value: value, children: children });
+};
+const useTreeProvider = () => useContext(TreeContext);
+const TreeBody = (props) => {
+    let { tree } = useTreeProvider();
+    let { rows, level, parentOptions } = props;
+    let list = tree.getOptions({ rows, level, parentOptions });
+    function getClassName() {
+        let className = 'aio-input-tree-body';
+        if (level === 0) {
+            className += ' aio-input-tree-root';
+        }
+        const directParent = parentOptions.length ? parentOptions[parentOptions.length - 1] : undefined;
+        if (tree.isOpen(directParent)) {
+            className += ' open';
+        }
+        className += ` aio-input-tree-body-level-${level}`;
+        return className;
+    }
+    return (_jsx("div", { className: getClassName(), children: list.map((treeOptionDetail) => {
+            return _jsx(TreeNode, { treeOptionDetail: treeOptionDetail }, treeOptionDetail.value);
+        }) }));
+};
+const TreeNode = ({ treeOptionDetail }) => {
+    let { tree } = useTreeProvider();
+    const { level, parentOptions, open } = treeOptionDetail;
+    const childs = tree.getChilds(treeOptionDetail);
+    return (_jsxs(_Fragment, { children: [_jsx(TreeRow, { treeOptionDetail: treeOptionDetail }), Array.isArray(childs) && open !== false &&
+                _jsx(TreeBody, { parentOptions: [...parentOptions, treeOptionDetail], rows: childs, level: level + 1 })] }));
+};
+const TreeRow = ({ treeOptionDetail }) => {
+    let { tree, rootProps } = useTreeProvider();
+    const { parentOptions, level, isLastChild, text, open } = treeOptionDetail;
+    let childs = tree.getChilds(treeOptionDetail);
+    const directParent = parentOptions.length ? parentOptions[parentOptions.length - 1] : undefined;
+    const indent = treeOptionDetail.toggleIcon !== false && (_jsx(Indent, { width: rootProps.indent || 24, level: level, isLastChild: isLastChild, isLeaf: !childs, isParentLastChild: !!(directParent === null || directParent === void 0 ? void 0 : directParent.isLastChild), rtl: !!rootProps.rtl, toggleIcon: treeOptionDetail.toggleIcon, open: open, onToggle: () => tree.toggle(treeOptionDetail) }));
+    return (_jsxs("div", Object.assign({}, treeOptionDetail.attrs, { children: [!!indent && indent, _jsx("div", { className: "aio-input-tree-text", children: text })] })));
+};
+export const useTree = (hookProps) => {
+    let [openDic, setOpenDic] = useState({}), openDicRef = useRef(openDic);
+    openDicRef.current = openDic;
+    const dicRef = useRef({});
+    function SetOpen(id, state) {
+        const newOpenDic = Object.assign(Object.assign({}, openDicRef.current), { [id]: state });
+        setOpenDic(newOpenDic);
+    }
+    function toggle(treeOptionDetail, state) {
+        const open = state === undefined ? treeOptionDetail.open : state;
+        const newOpen = !open;
+        SetOpen(treeOptionDetail.value, newOpen);
+    }
+    const isOpen = (treeOptionDetail) => {
+        if (!treeOptionDetail) {
+            return true;
+        }
+        const { parentOptions, value } = treeOptionDetail;
+        for (let i = 0; i < parentOptions.length; i++) {
+            const parentOption = parentOptions[i];
+            if (openDicRef.current[parentOption.value] !== true) {
+                return false;
+            }
+        }
+        return openDicRef.current[value] === true;
+    };
+    function change(row, newRow) {
+        for (let prop in newRow) {
+            row[prop] = newRow[prop];
+        }
+        if (hookProps.onChange) {
+            hookProps.onChange(hookProps.mainValueRef.current);
+        }
+    }
+    function getChilds(treeOptionDetail) {
+        var _a;
+        const { row } = treeOptionDetail;
+        try {
+            if (!!((_a = hookProps.treeOptionProp) === null || _a === void 0 ? void 0 : _a.childs)) {
+                return hookProps.treeOptionProp.childs(treeOptionDetail);
+            }
+            else {
+                return row.childs;
+            }
+        }
+        catch (_b) {
+            return;
+        }
+    }
+    function setChilds(treeOptionDetail, childs, setChilds) {
+        try {
+            if (setChilds) {
+                setChilds(treeOptionDetail, childs);
+            }
+            else {
+                treeOptionDetail.row.childs = childs;
+            }
+        }
+        catch (_a) { }
+    }
+    function getOptions(p) {
+        let { level, parentOptions, rows } = p;
+        let list = [];
+        for (let i = 0; i < rows.length; i++) {
+            let row = rows[i];
+            const treeOptionDetail = {
+                text: null,
+                row,
+                toggleIcon: undefined,
+                childs: undefined,
+                level,
+                index: i,
+                parentOptions,
+                open: false,
+                toggle: () => { },
+                change: () => { },
+                value: undefined,
+                isFirstChild: false,
+                isLastChild: false,
+                isRoot: level === 0,
+                isLeaf: false,
+                attrs: undefined,
+                values: parentOptions.map((o) => o.value)
+            };
+            const value = getOptionValue(row, 'value', treeOptionDetail);
+            treeOptionDetail.value = value;
+            treeOptionDetail.values.push(value);
+            treeOptionDetail.open = isOpen(treeOptionDetail);
+            const childs = getOptionValue(row, 'childs', treeOptionDetail);
+            treeOptionDetail.childs = childs;
+            treeOptionDetail.isLeaf = !childs;
+            treeOptionDetail.toggle = (state) => toggle(treeOptionDetail, state);
+            treeOptionDetail.change = (newRow) => change(row, newRow);
+            treeOptionDetail.toggleIcon = getOptionValue(row, 'toggleIcon', treeOptionDetail);
+            const show = getOptionValue(row, 'show', treeOptionDetail, true);
+            if (show === false) {
+                continue;
+            }
+            treeOptionDetail.text = getOptionValue(row, 'text', treeOptionDetail);
+            dicRef.current = Object.assign(Object.assign({}, dicRef.current), { [treeOptionDetail.value.toString()]: treeOptionDetail });
+            const attrs = getOptionValue(row, 'attrs', treeOptionDetail);
+            const className = getOptionValue(row, 'className', treeOptionDetail);
+            const style = getOptionValue(row, 'style', treeOptionDetail);
+            const onClick = () => {
+                var _a, _b;
+                if ((_a = hookProps.treeOptionProp) === null || _a === void 0 ? void 0 : _a.onClick) {
+                    (_b = hookProps.treeOptionProp) === null || _b === void 0 ? void 0 : _b.onClick(treeOptionDetail);
+                }
+                else if (row.onClick) {
+                    row.onClick(treeOptionDetail);
+                }
+            };
+            const Attrs = AddToAttrs(Object.assign(Object.assign({}, attrs), { onClick }), { className: [className, 'aio-input-tree-row'], style });
+            treeOptionDetail.attrs = Attrs;
+            list.push(treeOptionDetail);
+        }
+        if (list.length) {
+            list[0].isFirstChild = true;
+            list[list.length - 1].isLastChild = true;
+        }
+        return list;
+    }
+    const getOptionValue = (row, key, treeOptionDetail, def) => {
+        let res;
+        if (hookProps.treeOptionProp && hookProps.treeOptionProp[key]) {
+            res = hookProps.treeOptionProp[key](treeOptionDetail);
+        }
+        if (res !== undefined && res !== null) {
+            return res;
+        }
+        if (typeof row === 'object' && !Array.isArray(row)) {
+            res = row[key];
+        }
+        if (res !== undefined && res !== null) {
+            return res;
+        }
+        return def;
+    };
+    const getTreeOptionDetailByValue = (value, rows, level, parentOptions) => {
+        const res = getOptions({ rows, parentOptions, level });
+        return res.find((o) => o.value === value);
+    };
+    const getTreeOptionDetailByValues = (values, rows) => {
+        let res = getTreeOptionDetailByValue(values[0], rows, 0, []);
+        if (!res) {
+            return;
+        }
+        for (let i = 1; i < values.length; i++) {
+            if (!res || !res.childs) {
+                return;
+            }
+            res = getTreeOptionDetailByValue(values[i], res.childs, i, [...res.parentOptions, res]);
+        }
+        return res;
+    };
+    return {
+        toggle, openDic, isOpen,
+        change, getChilds, setChilds, getOptions, getTreeOptionDetailByValues
+    };
+};
+export const Indent = (props) => {
+    const { width, level, open, rtl, isLastChild, isParentLastChild, isLeaf } = props;
+    const [indentPathes, setIndentPathes] = useState(getIndentIcons);
+    useEffect(() => { setIndentPathes(getIndentIcons()); }, [level, isLastChild, isParentLastChild]);
+    const [toggleIcon, setToggleIcon] = useState(null);
+    useEffect(() => { setToggleIcon(getToggleIcon()); }, [open]);
+    function getIndentIcon(rowIndex) {
+        if (!level) {
+            return null;
+        }
+        let pathes = [];
+        if (rowIndex === level - 1) {
+            //horizontal line
+            pathes.push(_jsx("div", { style: { [rtl ? 'right' : 'left']: width / 2, width: width / 2, height: 0, top: '50%', borderBottom: '1px dotted', position: 'absolute' } }, 'hl'));
+            //vertical direct line
+            pathes.push(_jsx("div", { style: { left: width / 2, width: 0, height: isLastChild ? '50%' : '100%', top: 0, borderLeft: '1px dotted', position: 'absolute' } }, 'vdl'));
+        }
+        else {
+            //vertical connet line
+            if (!isParentLastChild) {
+                pathes.push(_jsx("div", { style: { left: width / 2, width: 0, height: '100%', top: 0, borderLeft: '1px dotted', position: 'absolute' } }, 'vl'));
+            }
+        }
+        return (_jsx("div", { className: 'ai-indent-line', style: { width, height: '100%' }, children: pathes }));
+    }
+    const getToggleSvg = () => {
+        const { toggleIcon = {} } = props;
+        if (toggleIcon === false) {
+            return false;
+        }
+        const getIcon = new GetSvg('em').getIcon;
+        if (isLeaf) {
+            return toggleIcon.leaf || getIcon('mdiCircleSmall', 1);
+        }
+        if (open) {
+            return toggleIcon.open || getIcon('mdiChevronDown', 1);
+        }
+        return toggleIcon.close || getIcon(rtl ? 'mdiChevronLeft' : 'mdiChevronRight', 1);
+    };
+    function getIndentIcons() {
+        const list = new Array(level).fill(0);
+        return list.map((_, i) => {
+            return _jsx("div", { className: `ai-indent`, style: { width }, children: getIndentIcon(i) }, i);
+        });
+    }
+    const getToggleIcon = () => {
+        return (_jsx("div", { className: "ai-toggle", style: { width }, onClick: (e) => { e.stopPropagation(); if (props.onToggle) {
+                props.onToggle();
+            } }, children: _jsx("div", { className: `ai-toggle-icon${isLeaf ? ' ai-leaf-icon' : ''}`, children: toggleSvg }) }));
+    };
+    const toggleSvg = getToggleSvg();
+    if (toggleSvg === false) {
+        return null;
+    }
+    return (_jsxs("div", { className: `ai-indents`, children: [indentPathes, toggleIcon] }));
+};
+function classListToString(classes) {
+    let list = [];
+    const getClasses = (cls) => {
+        if (Array.isArray(cls)) {
+            return cls.filter((o) => !!o && typeof o === 'string');
+        }
+        else if (!!cls && typeof cls === 'string') {
+            return cls.split(' ');
+        }
+        return [];
+    };
+    for (let i = 0; i < classes.length; i++) {
+        const cls = classes[i];
+        list = [...list, ...getClasses(cls)];
+    }
+    return list.length ? list.join(' ') : '';
+}
+function AddToAttrs(attrs, p) {
+    attrs = attrs || {};
+    const className = classListToString([attrs.className, p === null || p === void 0 ? void 0 : p.className]);
+    let newStyle = Object.assign(Object.assign({}, attrs.style), p === null || p === void 0 ? void 0 : p.style);
+    const res = Object.assign(Object.assign(Object.assign({}, attrs), { className, style: newStyle }), p === null || p === void 0 ? void 0 : p.attrs);
+    return res;
+}
+class GetSvg {
+    constructor(unit) {
+        this.getStyle = (color) => ({ fill: color || "currentcolor" });
+        this.getSvgStyle = (size) => {
+            size = size || 1;
+            return { width: `${size * 1.5}${this.unit}`, height: `${size * 1.5}${this.unit}` };
+        };
+        this.fixSvgContent = (content, size, p) => {
+            const { spin } = p || {};
+            let res = null;
+            if (spin) {
+                res = (_jsxs(_Fragment, { children: [_jsx("style", { children: `@keyframes spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }` }), _jsx("g", { style: { animation: `${spin}s linear 0s infinite normal none running spin`, transformOrigin: 'center center' }, children: content })] }));
+            }
+            else {
+                res = content;
+            }
+            return (_jsx("svg", { viewBox: "0 0 24 24", role: "presentation", style: this.getSvgStyle(size), children: res }));
+        };
+        this.getIcon = (path, size, p) => {
+            const { color } = p || {};
+            const fn = this[path];
+            if (!fn) {
+                alert(`${path} is not valid`);
+                return null;
+            }
+            const content = fn(color);
+            return this.fixSvgContent(content, size, p);
+        };
+        this.mdiChevronDown = (color) => (_jsx(_Fragment, { children: _jsx("path", { d: "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z", style: this.getStyle(color) }) }));
+        this.mdiChevronUp = (color) => (_jsx(_Fragment, { children: _jsx("path", { d: "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z", style: this.getStyle(color) }) }));
+        this.mdiChevronLeft = (color) => (_jsx(_Fragment, { children: _jsx("path", { d: "M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z", style: this.getStyle(color) }) }));
+        this.mdiChevronRight = (color) => (_jsx(_Fragment, { children: _jsx("path", { d: "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z", style: this.getStyle(color) }) }));
+        this.mdiCircleSmall = (color) => (_jsx(_Fragment, { children: _jsx("path", { d: "M12,10A2,2 0 0,0 10,12C10,13.11 10.9,14 12,14C13.11,14 14,13.11 14,12A2,2 0 0,0 12,10Z", style: this.getStyle(color) }) }));
+        this.unit = unit || 'rem';
+    }
+}

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "aio-tree",
+  "version": "1.0.0",
+  "description": "tree hierarchy",
+  "homepage": "https://github.com/mohammadFeiz/aio-tree#readme",
+  "types": "index.d.ts",
+  "bugs": {
+    "url": "https://github.com/mohammadFeiz/aio-tree/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mohammadFeiz/aio-tree.git"
+  },
+  "license": "ISC",
+  "author": "mohammad sharif feiz feiz.ms@gmail.com",
+  "type": "commonjs",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}