albinasoft-ui-package 1.0.20 → 1.0.22
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.
|
@@ -1,29 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import 'react-checkbox-tree/lib/react-checkbox-tree.css';
|
|
3
|
-
export interface TreeNode {
|
|
4
|
-
label: string;
|
|
5
|
-
value: string;
|
|
6
|
-
children?: TreeNode[];
|
|
7
|
-
}
|
|
8
3
|
interface CustomTreeViewProps {
|
|
9
|
-
id?: string;
|
|
10
|
-
name?: string;
|
|
11
4
|
label?: string;
|
|
12
5
|
value: string;
|
|
13
6
|
treeData: TreeNode[];
|
|
14
|
-
placeholder?: string;
|
|
15
|
-
required?: boolean;
|
|
16
|
-
errorMessage?: string;
|
|
17
|
-
conditionalErrorVisible?: boolean;
|
|
18
|
-
conditionalErrorMessage?: string;
|
|
19
|
-
disabled?: boolean;
|
|
20
|
-
readOnly?: boolean;
|
|
21
|
-
description?: string | null;
|
|
22
|
-
tooltip?: string;
|
|
23
|
-
style?: React.CSSProperties;
|
|
24
|
-
className?: string;
|
|
25
7
|
onChange: (selected: string) => void;
|
|
26
|
-
|
|
8
|
+
}
|
|
9
|
+
export interface TreeNode {
|
|
10
|
+
label: string;
|
|
11
|
+
value: string;
|
|
12
|
+
children?: TreeNode[];
|
|
27
13
|
}
|
|
28
14
|
declare const CustomTreeView: React.FC<CustomTreeViewProps>;
|
|
29
15
|
export default CustomTreeView;
|
|
@@ -33,6 +33,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
33
33
|
__setModuleDefault(result, mod);
|
|
34
34
|
return result;
|
|
35
35
|
};
|
|
36
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
37
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
38
|
+
if (ar || !(i in from)) {
|
|
39
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
40
|
+
ar[i] = from[i];
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
44
|
+
};
|
|
36
45
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
37
46
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
38
47
|
};
|
|
@@ -43,73 +52,87 @@ require("react-checkbox-tree/lib/react-checkbox-tree.css");
|
|
|
43
52
|
var fa_1 = require("react-icons/fa");
|
|
44
53
|
var CustomInput_1 = __importStar(require("./CustomInput"));
|
|
45
54
|
var CustomTreeView = function (_a) {
|
|
46
|
-
var
|
|
47
|
-
var
|
|
48
|
-
var
|
|
49
|
-
var
|
|
50
|
-
var
|
|
51
|
-
var
|
|
52
|
-
//
|
|
55
|
+
var label = _a.label, value = _a.value, treeData = _a.treeData, onChange = _a.onChange;
|
|
56
|
+
var _b = (0, react_1.useState)(value ? [value] : []), checked = _b[0], setChecked = _b[1];
|
|
57
|
+
var _c = (0, react_1.useState)([]), expanded = _c[0], setExpanded = _c[1];
|
|
58
|
+
var _d = (0, react_1.useState)(''), filterTerm = _d[0], setFilterTerm = _d[1];
|
|
59
|
+
var _e = (0, react_1.useState)(treeData), filteredTreeData = _e[0], setFilteredTreeData = _e[1];
|
|
60
|
+
var _f = (0, react_1.useState)([]), selectedPath = _f[0], setSelectedPath = _f[1]; // 🔥 Seçilen path
|
|
61
|
+
// 🚀 Recursive function to add `showCheckbox` only for leaf nodes
|
|
53
62
|
var markLeafCheckboxOnly = function (nodes) {
|
|
54
63
|
return nodes.map(function (node) { return (__assign(__assign({}, node), { showCheckbox: !(Array.isArray(node.children) && node.children.length > 0), children: node.children ? markLeafCheckboxOnly(node.children) : undefined })); });
|
|
55
64
|
};
|
|
56
|
-
// 🚀
|
|
65
|
+
// 🚀 Parent Path'i Bulma (recursive)
|
|
66
|
+
var findParentPath = function (nodes, targetValue, path) {
|
|
67
|
+
if (path === void 0) { path = []; }
|
|
68
|
+
for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
|
|
69
|
+
var node = nodes_1[_i];
|
|
70
|
+
var currentPath = __spreadArray(__spreadArray([], path, true), [node.value], false);
|
|
71
|
+
if (node.value === targetValue) {
|
|
72
|
+
return currentPath;
|
|
73
|
+
}
|
|
74
|
+
if (node.children) {
|
|
75
|
+
var result = findParentPath(node.children, targetValue, currentPath);
|
|
76
|
+
if (result)
|
|
77
|
+
return result;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
return null;
|
|
81
|
+
};
|
|
82
|
+
// 🚀 Filtreleme fonksiyonu (path'leri de genişletiyoruz)
|
|
57
83
|
var filterTreeData = function (nodes, searchTerm) {
|
|
58
|
-
|
|
84
|
+
var pathsToExpand = [];
|
|
85
|
+
var filteredNodes = nodes.map(function (node) {
|
|
59
86
|
var nodeMatches = node.label.toLowerCase().includes(searchTerm.toLowerCase());
|
|
60
|
-
var children = node.children ? filterTreeData(node.children, searchTerm) : [];
|
|
61
|
-
var childMatches = children.length > 0;
|
|
87
|
+
var children = node.children ? filterTreeData(node.children, searchTerm) : { filteredNodes: [], pathsToExpand: [] };
|
|
88
|
+
var childMatches = children.filteredNodes.length > 0;
|
|
62
89
|
if (nodeMatches || childMatches) {
|
|
63
|
-
|
|
90
|
+
pathsToExpand = __spreadArray(__spreadArray(__spreadArray([], pathsToExpand, true), [node.value], false), children.pathsToExpand, true);
|
|
91
|
+
return __assign(__assign({}, node), { children: childMatches ? children.filteredNodes : node.children });
|
|
64
92
|
}
|
|
65
93
|
return null;
|
|
66
94
|
}).filter(Boolean);
|
|
95
|
+
return { filteredNodes: filteredNodes, pathsToExpand: pathsToExpand };
|
|
67
96
|
};
|
|
68
|
-
//
|
|
97
|
+
// 🚀 Filtreleme işlemi
|
|
69
98
|
(0, react_1.useEffect)(function () {
|
|
70
99
|
if (filterTerm.trim() === '') {
|
|
71
100
|
setFilteredTreeData(treeData);
|
|
101
|
+
setExpanded(__spreadArray([], selectedPath, true)); // 🔥 Seçim yapılmış path açık kalsın
|
|
72
102
|
}
|
|
73
103
|
else {
|
|
74
|
-
var
|
|
104
|
+
var _a = filterTreeData(treeData, filterTerm), filteredNodes = _a.filteredNodes, pathsToExpand = _a.pathsToExpand;
|
|
75
105
|
setFilteredTreeData(filteredNodes);
|
|
106
|
+
setExpanded(Array.from(new Set(__spreadArray(__spreadArray([], pathsToExpand, true), selectedPath, true)))); // 🔥 Genişletilecek tüm path'leri belirle
|
|
76
107
|
}
|
|
77
|
-
}, [filterTerm, treeData]);
|
|
108
|
+
}, [filterTerm, treeData, selectedPath]);
|
|
109
|
+
// 🚀 Kullanıcı bir leaf seçtiğinde, o leaf'in parent'larını genişlet
|
|
78
110
|
var handleCheck = function (checkedNodes) {
|
|
79
111
|
var newlySelected = checkedNodes.find(function (node) { return !checked.includes(node); });
|
|
80
112
|
var selectedLeaf = newlySelected || '';
|
|
81
113
|
setChecked(selectedLeaf ? [selectedLeaf] : []);
|
|
114
|
+
if (selectedLeaf) {
|
|
115
|
+
var parentPath = findParentPath(treeData, selectedLeaf);
|
|
116
|
+
if (parentPath) {
|
|
117
|
+
setSelectedPath(parentPath); // 🔥 Kalıcı olarak bu path'i hatırla
|
|
118
|
+
setExpanded(parentPath); // 🔥 Yalnızca bu leaf'in parent path'i açık kalacak
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
setFilterTerm(''); // 🔥 Arama kutusunu temizle
|
|
82
122
|
onChange(selectedLeaf);
|
|
83
123
|
};
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
uncheck: react_1.default.createElement(fa_1.FaSquare, { color: "currentColor" }),
|
|
98
|
-
halfCheck: react_1.default.createElement(fa_1.FaMinusSquare, { color: "#ff9800" }),
|
|
99
|
-
expandClose: react_1.default.createElement(fa_1.FaChevronRight, { color: "#3f51b5" }),
|
|
100
|
-
expandOpen: react_1.default.createElement(fa_1.FaChevronDown, { color: "#3f51b5" }),
|
|
101
|
-
parentClose: react_1.default.createElement(fa_1.FaFolder, { color: "#ff9800" }),
|
|
102
|
-
parentOpen: react_1.default.createElement(fa_1.FaFolderOpen, { color: "#ff9800" }),
|
|
103
|
-
leaf: react_1.default.createElement(fa_1.FaFile, { color: "#607d8b" }),
|
|
104
|
-
} }),
|
|
105
|
-
required && !isValid && (react_1.default.createElement("div", { className: "invalid-feedback text-danger" },
|
|
106
|
-
react_1.default.createElement(fa_1.FaExclamationTriangle, null),
|
|
107
|
-
errorMessage || 'Bu alan boş bırakılamaz.')),
|
|
108
|
-
conditionalErrorVisible && (react_1.default.createElement("div", { className: "conditional-error-message text-warning" },
|
|
109
|
-
react_1.default.createElement(fa_1.FaExclamationTriangle, null),
|
|
110
|
-
conditionalErrorMessage)),
|
|
111
|
-
description && (react_1.default.createElement("div", { className: "form-description text-secondary" },
|
|
112
|
-
react_1.default.createElement(fa_1.FaInfoCircle, null),
|
|
113
|
-
description)))));
|
|
124
|
+
return (react_1.default.createElement("div", null,
|
|
125
|
+
label && react_1.default.createElement("label", null, label),
|
|
126
|
+
react_1.default.createElement(CustomInput_1.default, { id: "tree-search", value: filterTerm, inputType: CustomInput_1.InputType.TEXT, placeholder: "Ara...", onChange: function (e) { return setFilterTerm(e.target.value); } }),
|
|
127
|
+
react_1.default.createElement(react_checkbox_tree_1.default, { nodes: markLeafCheckboxOnly(filteredTreeData), checked: checked, expanded: expanded, onCheck: handleCheck, onExpand: setExpanded, icons: {
|
|
128
|
+
check: react_1.default.createElement(fa_1.FaCheckSquare, { color: "#4caf50" }),
|
|
129
|
+
uncheck: react_1.default.createElement(fa_1.FaSquare, { color: "currentColor" }),
|
|
130
|
+
halfCheck: react_1.default.createElement(fa_1.FaMinusSquare, { color: "#ff9800" }),
|
|
131
|
+
expandClose: react_1.default.createElement(fa_1.FaChevronRight, { color: "#3f51b5" }),
|
|
132
|
+
expandOpen: react_1.default.createElement(fa_1.FaChevronDown, { color: "#3f51b5" }),
|
|
133
|
+
parentClose: react_1.default.createElement(fa_1.FaFolder, { color: "#ff9800" }),
|
|
134
|
+
parentOpen: react_1.default.createElement(fa_1.FaFolderOpen, { color: "#ff9800" }),
|
|
135
|
+
leaf: react_1.default.createElement(fa_1.FaFile, { color: "#607d8b" }),
|
|
136
|
+
} })));
|
|
114
137
|
};
|
|
115
138
|
exports.default = CustomTreeView;
|