@lotte-innovate/ui-component-test 0.2.64 → 0.2.65

package/dist/lib/components/Tree/index.d.ts

@@ -0,0 +1,19 @@
+import { VariantProps } from 'class-variance-authority';
+import { IColor } from '../../../lib/types';
+import React from 'react';
+import { StaticTreeDataProvider } from 'react-complex-tree';
+import 'react-complex-tree/lib/style-modern.css';
+export interface TreeProps extends React.InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof treeVariants> {
+    color?: IColor;
+    items: any;
+    treeId: string;
+    isSearch?: boolean;
+}
+declare const treeVariants: (props?: ({
+    color?: string | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare let treeProvider: StaticTreeDataProvider | null;
+declare const Tree: React.ForwardRefExoticComponent<Omit<Omit<import("react-complex-tree").UncontrolledTreeEnvironmentProps<unknown, string> & {
+    ref?: React.Ref<import("react-complex-tree").TreeEnvironmentRef<unknown, string>> | undefined;
+}, "ref">, "children" | "viewState" | "canSearch" | "dataProvider"> & TreeProps & React.RefAttributes<import("react-complex-tree").TreeEnvironmentRef<unknown, string>>>;
+export { Tree, treeProvider };

package/dist/lib/components/Tree/index.js

@@ -0,0 +1,190 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { primaryColorStyle } from '../../../lib/constants';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { StaticTreeDataProvider, Tree as ComplexTree, UncontrolledTreeEnvironment, } from 'react-complex-tree';
+import 'react-complex-tree/lib/style-modern.css';
+import TextField from '../TextField';
+import Button from '../Button';
+import { MAIN_COLOR } from '../../../lib/color/constants';
+import { useTheme } from '../../../lib/theme';
+var treeVariants = cva('', {
+    variants: {
+        color: primaryColorStyle(),
+    },
+});
+function findItems(arr, key) {
+    var results = [];
+    Object.values(arr).forEach(function (item) {
+        if (item[key]) {
+            results.push(item.index);
+        }
+    });
+    return results;
+}
+var treeProvider = null;
+var Tree = React.forwardRef(function (_a, ref) {
+    var _b;
+    var _c, _d;
+    var items = _a.items, treeId = _a.treeId, className = _a.className, color = _a.color, isSearch = _a.isSearch, props = __rest(_a, ["items", "treeId", "className", "color", "isSearch"]);
+    var _e = useState(''), search = _e[0], setSearch = _e[1];
+    var tree = useRef(null);
+    var _f = useState({}), treeData = _f[0], setTreeData = _f[1];
+    var focusedItem = findItems(items, 'isFocusd');
+    var expandedItems = findItems(items, 'isExpanded');
+    var selectedItems = findItems(items, 'isSelected');
+    treeProvider = new StaticTreeDataProvider(treeData, function (item, data) { return (__assign(__assign({}, item), { data: data })); });
+    var theme = useTheme().theme;
+    var contextValue = {
+        color: (_c = color !== null && color !== void 0 ? color : theme.themeColor) !== null && _c !== void 0 ? _c : MAIN_COLOR,
+    };
+    var findItemPath = useCallback(function (search_1) {
+        var args_1 = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            args_1[_i - 1] = arguments[_i];
+        }
+        return __awaiter(void 0, __spreadArray([search_1], args_1, true), void 0, function (search, searchRoot) {
+            var item, searchedItems, result;
+            var _a, _b;
+            if (searchRoot === void 0) { searchRoot = 'root'; }
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        if (!treeProvider)
+                            return [2 /*return*/];
+                        return [4 /*yield*/, treeProvider.getTreeItem(searchRoot)];
+                    case 1:
+                        item = _c.sent();
+                        if (item.data.toLowerCase().includes(search.toLowerCase())) {
+                            return [2 /*return*/, [item.index]];
+                        }
+                        return [4 /*yield*/, Promise.all((_b = (_a = item.children) === null || _a === void 0 ? void 0 : _a.map(function (child) { return findItemPath(search, child); })) !== null && _b !== void 0 ? _b : [])];
+                    case 2:
+                        searchedItems = _c.sent();
+                        result = searchedItems.find(function (item) { return item !== null; });
+                        if (!result) {
+                            return [2 /*return*/, null];
+                        }
+                        return [2 /*return*/, __spreadArray([item.index], result, true)];
+                }
+            });
+        });
+    }, [treeProvider]);
+    var find = useCallback(function (e) {
+        e.preventDefault();
+        if (search) {
+            findItemPath(search).then(function (path) {
+                var _a;
+                if (path) {
+                    // wait for full path including leaf, to make sure it loaded in
+                    (_a = tree.current) === null || _a === void 0 ? void 0 : _a.expandSubsequently(path).then(function () {
+                        var _a, _b;
+                        (_a = tree.current) === null || _a === void 0 ? void 0 : _a.selectItems([path[path.length - 1]]);
+                        (_b = tree.current) === null || _b === void 0 ? void 0 : _b.focusItem(path[path.length - 1]);
+                    });
+                }
+            });
+        }
+    }, [findItemPath, search]);
+    useEffect(function () {
+        if (items) {
+            var results_1 = [];
+            var children_1 = [];
+            items.map(function (item) {
+                children_1.push.apply(children_1, item.children);
+            });
+            items.forEach(function (item) {
+                if (!children_1.includes(item.index)) {
+                    results_1.push(item.index);
+                }
+            });
+            var t_1 = {};
+            t_1['root'] = {
+                index: 'root',
+                isFolder: true,
+                children: results_1,
+                data: 'Root item',
+            };
+            items.map(function (item) {
+                t_1[item.index] = __assign(__assign({}, item), { isFolder: item.children.length > 0 });
+            });
+            setTreeData(t_1);
+        }
+    }, [items]);
+    return (_jsxs("div", { className: "text-slate-12", children: [_jsx("style", { children: "\n        :root {\n          --rct-bar-color: \"\";\n        }\n      " }), isSearch && (_jsxs("div", { className: "flex", children: [_jsx(TextField.Root, { color: contextValue.color, value: search, onChange: function (e) { return setSearch(e.target.value); }, placeholder: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD558\uC138\uC694", className: "mr-2" }), _jsx(Button, { color: contextValue.color, onClick: find, children: "\uAC80\uC0C9" })] })), _jsx(UncontrolledTreeEnvironment, __assign({ ref: ref, dataProvider: treeProvider, viewState: (_b = {},
+                    _b[treeId] = {
+                        focusedItem: (_d = focusedItem[0]) !== null && _d !== void 0 ? _d : '',
+                        expandedItems: expandedItems,
+                        selectedItems: selectedItems,
+                    },
+                    _b), keyboardBindings: __assign({ renameItem: ['enter'], abortRenameItem: ['control+z'] }, props.keyboardBindings) }, props, { canSearch: false, children: _jsx(ComplexTree, { ref: tree, treeId: treeId, rootItem: "root", treeLabel: "Tree Example" }) }))] }));
+});
+Tree.displayName = 'Tree';
+export { Tree, treeProvider };