@lotte-innovate/ui-component-test 0.2.64 → 0.2.65
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
2
|
+
import { IColor } from '../../../lib/types';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { StaticTreeDataProvider } from 'react-complex-tree';
|
|
5
|
+
import 'react-complex-tree/lib/style-modern.css';
|
|
6
|
+
export interface TreeProps extends React.InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof treeVariants> {
|
|
7
|
+
color?: IColor;
|
|
8
|
+
items: any;
|
|
9
|
+
treeId: string;
|
|
10
|
+
isSearch?: boolean;
|
|
11
|
+
}
|
|
12
|
+
declare const treeVariants: (props?: ({
|
|
13
|
+
color?: string | null | undefined;
|
|
14
|
+
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
15
|
+
declare let treeProvider: StaticTreeDataProvider | null;
|
|
16
|
+
declare const Tree: React.ForwardRefExoticComponent<Omit<Omit<import("react-complex-tree").UncontrolledTreeEnvironmentProps<unknown, string> & {
|
|
17
|
+
ref?: React.Ref<import("react-complex-tree").TreeEnvironmentRef<unknown, string>> | undefined;
|
|
18
|
+
}, "ref">, "children" | "viewState" | "canSearch" | "dataProvider"> & TreeProps & React.RefAttributes<import("react-complex-tree").TreeEnvironmentRef<unknown, string>>>;
|
|
19
|
+
export { Tree, treeProvider };
|
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
13
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
14
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
15
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
16
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
17
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
18
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
22
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
23
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
24
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
25
|
+
function step(op) {
|
|
26
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
27
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
28
|
+
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;
|
|
29
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
30
|
+
switch (op[0]) {
|
|
31
|
+
case 0: case 1: t = op; break;
|
|
32
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
33
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
34
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
35
|
+
default:
|
|
36
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
37
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
38
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
39
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
40
|
+
if (t[2]) _.ops.pop();
|
|
41
|
+
_.trys.pop(); continue;
|
|
42
|
+
}
|
|
43
|
+
op = body.call(thisArg, _);
|
|
44
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
45
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
49
|
+
var t = {};
|
|
50
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
51
|
+
t[p] = s[p];
|
|
52
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
53
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
54
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
55
|
+
t[p[i]] = s[p[i]];
|
|
56
|
+
}
|
|
57
|
+
return t;
|
|
58
|
+
};
|
|
59
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
60
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
61
|
+
if (ar || !(i in from)) {
|
|
62
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
63
|
+
ar[i] = from[i];
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
67
|
+
};
|
|
68
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
69
|
+
import { cva } from 'class-variance-authority';
|
|
70
|
+
import { primaryColorStyle } from '../../../lib/constants';
|
|
71
|
+
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
72
|
+
import { StaticTreeDataProvider, Tree as ComplexTree, UncontrolledTreeEnvironment, } from 'react-complex-tree';
|
|
73
|
+
import 'react-complex-tree/lib/style-modern.css';
|
|
74
|
+
import TextField from '../TextField';
|
|
75
|
+
import Button from '../Button';
|
|
76
|
+
import { MAIN_COLOR } from '../../../lib/color/constants';
|
|
77
|
+
import { useTheme } from '../../../lib/theme';
|
|
78
|
+
var treeVariants = cva('', {
|
|
79
|
+
variants: {
|
|
80
|
+
color: primaryColorStyle(),
|
|
81
|
+
},
|
|
82
|
+
});
|
|
83
|
+
function findItems(arr, key) {
|
|
84
|
+
var results = [];
|
|
85
|
+
Object.values(arr).forEach(function (item) {
|
|
86
|
+
if (item[key]) {
|
|
87
|
+
results.push(item.index);
|
|
88
|
+
}
|
|
89
|
+
});
|
|
90
|
+
return results;
|
|
91
|
+
}
|
|
92
|
+
var treeProvider = null;
|
|
93
|
+
var Tree = React.forwardRef(function (_a, ref) {
|
|
94
|
+
var _b;
|
|
95
|
+
var _c, _d;
|
|
96
|
+
var items = _a.items, treeId = _a.treeId, className = _a.className, color = _a.color, isSearch = _a.isSearch, props = __rest(_a, ["items", "treeId", "className", "color", "isSearch"]);
|
|
97
|
+
var _e = useState(''), search = _e[0], setSearch = _e[1];
|
|
98
|
+
var tree = useRef(null);
|
|
99
|
+
var _f = useState({}), treeData = _f[0], setTreeData = _f[1];
|
|
100
|
+
var focusedItem = findItems(items, 'isFocusd');
|
|
101
|
+
var expandedItems = findItems(items, 'isExpanded');
|
|
102
|
+
var selectedItems = findItems(items, 'isSelected');
|
|
103
|
+
treeProvider = new StaticTreeDataProvider(treeData, function (item, data) { return (__assign(__assign({}, item), { data: data })); });
|
|
104
|
+
var theme = useTheme().theme;
|
|
105
|
+
var contextValue = {
|
|
106
|
+
color: (_c = color !== null && color !== void 0 ? color : theme.themeColor) !== null && _c !== void 0 ? _c : MAIN_COLOR,
|
|
107
|
+
};
|
|
108
|
+
var findItemPath = useCallback(function (search_1) {
|
|
109
|
+
var args_1 = [];
|
|
110
|
+
for (var _i = 1; _i < arguments.length; _i++) {
|
|
111
|
+
args_1[_i - 1] = arguments[_i];
|
|
112
|
+
}
|
|
113
|
+
return __awaiter(void 0, __spreadArray([search_1], args_1, true), void 0, function (search, searchRoot) {
|
|
114
|
+
var item, searchedItems, result;
|
|
115
|
+
var _a, _b;
|
|
116
|
+
if (searchRoot === void 0) { searchRoot = 'root'; }
|
|
117
|
+
return __generator(this, function (_c) {
|
|
118
|
+
switch (_c.label) {
|
|
119
|
+
case 0:
|
|
120
|
+
if (!treeProvider)
|
|
121
|
+
return [2 /*return*/];
|
|
122
|
+
return [4 /*yield*/, treeProvider.getTreeItem(searchRoot)];
|
|
123
|
+
case 1:
|
|
124
|
+
item = _c.sent();
|
|
125
|
+
if (item.data.toLowerCase().includes(search.toLowerCase())) {
|
|
126
|
+
return [2 /*return*/, [item.index]];
|
|
127
|
+
}
|
|
128
|
+
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 : [])];
|
|
129
|
+
case 2:
|
|
130
|
+
searchedItems = _c.sent();
|
|
131
|
+
result = searchedItems.find(function (item) { return item !== null; });
|
|
132
|
+
if (!result) {
|
|
133
|
+
return [2 /*return*/, null];
|
|
134
|
+
}
|
|
135
|
+
return [2 /*return*/, __spreadArray([item.index], result, true)];
|
|
136
|
+
}
|
|
137
|
+
});
|
|
138
|
+
});
|
|
139
|
+
}, [treeProvider]);
|
|
140
|
+
var find = useCallback(function (e) {
|
|
141
|
+
e.preventDefault();
|
|
142
|
+
if (search) {
|
|
143
|
+
findItemPath(search).then(function (path) {
|
|
144
|
+
var _a;
|
|
145
|
+
if (path) {
|
|
146
|
+
// wait for full path including leaf, to make sure it loaded in
|
|
147
|
+
(_a = tree.current) === null || _a === void 0 ? void 0 : _a.expandSubsequently(path).then(function () {
|
|
148
|
+
var _a, _b;
|
|
149
|
+
(_a = tree.current) === null || _a === void 0 ? void 0 : _a.selectItems([path[path.length - 1]]);
|
|
150
|
+
(_b = tree.current) === null || _b === void 0 ? void 0 : _b.focusItem(path[path.length - 1]);
|
|
151
|
+
});
|
|
152
|
+
}
|
|
153
|
+
});
|
|
154
|
+
}
|
|
155
|
+
}, [findItemPath, search]);
|
|
156
|
+
useEffect(function () {
|
|
157
|
+
if (items) {
|
|
158
|
+
var results_1 = [];
|
|
159
|
+
var children_1 = [];
|
|
160
|
+
items.map(function (item) {
|
|
161
|
+
children_1.push.apply(children_1, item.children);
|
|
162
|
+
});
|
|
163
|
+
items.forEach(function (item) {
|
|
164
|
+
if (!children_1.includes(item.index)) {
|
|
165
|
+
results_1.push(item.index);
|
|
166
|
+
}
|
|
167
|
+
});
|
|
168
|
+
var t_1 = {};
|
|
169
|
+
t_1['root'] = {
|
|
170
|
+
index: 'root',
|
|
171
|
+
isFolder: true,
|
|
172
|
+
children: results_1,
|
|
173
|
+
data: 'Root item',
|
|
174
|
+
};
|
|
175
|
+
items.map(function (item) {
|
|
176
|
+
t_1[item.index] = __assign(__assign({}, item), { isFolder: item.children.length > 0 });
|
|
177
|
+
});
|
|
178
|
+
setTreeData(t_1);
|
|
179
|
+
}
|
|
180
|
+
}, [items]);
|
|
181
|
+
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 = {},
|
|
182
|
+
_b[treeId] = {
|
|
183
|
+
focusedItem: (_d = focusedItem[0]) !== null && _d !== void 0 ? _d : '',
|
|
184
|
+
expandedItems: expandedItems,
|
|
185
|
+
selectedItems: selectedItems,
|
|
186
|
+
},
|
|
187
|
+
_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" }) }))] }));
|
|
188
|
+
});
|
|
189
|
+
Tree.displayName = 'Tree';
|
|
190
|
+
export { Tree, treeProvider };
|