albinasoft-ui-package 1.1.62 → 1.1.63
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.
@@ -14,6 +14,7 @@ export interface CustomTreeViewProps {
|
|
14
14
|
required?: boolean;
|
15
15
|
submitted?: boolean;
|
16
16
|
errorMessage?: string;
|
17
|
+
clearTheLineOnSelect?: boolean;
|
17
18
|
onChange: (selected: string | string[] | null) => void;
|
18
19
|
}
|
19
20
|
declare const CustomTreeView: React.FC<CustomTreeViewProps>;
|
@@ -1,5 +1,4 @@
|
|
1
1
|
"use strict";
|
2
|
-
// src/components/CustomTreeView.tsx
|
3
2
|
var __assign = (this && this.__assign) || function () {
|
4
3
|
__assign = Object.assign || function(t) {
|
5
4
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
@@ -50,11 +49,11 @@ var TreeItem_1 = require("@mui/x-tree-view/TreeItem");
|
|
50
49
|
var fa_1 = require("react-icons/fa");
|
51
50
|
require("../assets/css/custom-treeview.css");
|
52
51
|
var CustomTreeView = function (_a) {
|
53
|
-
var label = _a.label, value = _a.value, treeData = _a.treeData, _b = _a.placeholder, placeholder = _b === void 0 ? "Ağaç Yapısını Filtrele..." : _b, _c = _a.multi, multi = _c === void 0 ? false : _c, _d = _a.required, required = _d === void 0 ? false : _d, submitted = _a.submitted, errorMessage = _a.errorMessage, onChange = _a.onChange;
|
54
|
-
var
|
55
|
-
var
|
56
|
-
var
|
57
|
-
//
|
52
|
+
var label = _a.label, value = _a.value, treeData = _a.treeData, _b = _a.placeholder, placeholder = _b === void 0 ? "Ağaç Yapısını Filtrele..." : _b, _c = _a.multi, multi = _c === void 0 ? false : _c, _d = _a.required, required = _d === void 0 ? false : _d, submitted = _a.submitted, errorMessage = _a.errorMessage, _f = _a.clearTheLineOnSelect, clearTheLineOnSelect = _f === void 0 ? false : _f, onChange = _a.onChange;
|
53
|
+
var _g = (0, react_1.useState)(""), filterTerm = _g[0], setFilterTerm = _g[1];
|
54
|
+
var _h = (0, react_1.useState)([]), selectedItems = _h[0], setSelectedItems = _h[1];
|
55
|
+
var _j = (0, react_1.useState)([]), expandedItems = _j[0], setExpandedItems = _j[1];
|
56
|
+
// ---- Helpers ----
|
58
57
|
var findNodeByValue = function (nodes, val) {
|
59
58
|
for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
|
60
59
|
var node = nodes_1[_i];
|
@@ -72,7 +71,48 @@ var CustomTreeView = function (_a) {
|
|
72
71
|
var node = findNodeByValue(nodes, val);
|
73
72
|
return node ? node.label : val;
|
74
73
|
};
|
75
|
-
//
|
74
|
+
// Bir düğümün köke kadar yolunu döndür (root..target)
|
75
|
+
var findPathToNode = function (nodes, target, path) {
|
76
|
+
if (path === void 0) { path = []; }
|
77
|
+
for (var _i = 0, nodes_2 = nodes; _i < nodes_2.length; _i++) {
|
78
|
+
var node = nodes_2[_i];
|
79
|
+
var currentPath = __spreadArray(__spreadArray([], path, true), [node.value], false);
|
80
|
+
if (node.value === target)
|
81
|
+
return currentPath;
|
82
|
+
if (node.children) {
|
83
|
+
var result = findPathToNode(node.children, target, currentPath);
|
84
|
+
if (result)
|
85
|
+
return result;
|
86
|
+
}
|
87
|
+
}
|
88
|
+
return null;
|
89
|
+
};
|
90
|
+
// Bir düğümün atalarını (kök dâhil, kendisi hariç) döndür
|
91
|
+
var getAncestors = function (nodes, target) {
|
92
|
+
var path = findPathToNode(nodes, target);
|
93
|
+
if (!path)
|
94
|
+
return [];
|
95
|
+
return path.slice(0, -1);
|
96
|
+
};
|
97
|
+
// Bir düğümün tüm altlarını (çocuk/torun…) döndür
|
98
|
+
var getDescendants = function (nodes, target) {
|
99
|
+
var root = findNodeByValue(nodes, target);
|
100
|
+
if (!root)
|
101
|
+
return [];
|
102
|
+
var acc = [];
|
103
|
+
var walk = function (n) {
|
104
|
+
if (!n.children)
|
105
|
+
return;
|
106
|
+
for (var _i = 0, _a = n.children; _i < _a.length; _i++) {
|
107
|
+
var c = _a[_i];
|
108
|
+
acc.push(c.value);
|
109
|
+
walk(c);
|
110
|
+
}
|
111
|
+
};
|
112
|
+
walk(root);
|
113
|
+
return acc;
|
114
|
+
};
|
115
|
+
// ---- State <-> Prop senkronizasyonu ----
|
76
116
|
(0, react_1.useEffect)(function () {
|
77
117
|
var initial = Array.isArray(value) ? value : value ? [value] : [];
|
78
118
|
setSelectedItems(initial);
|
@@ -83,21 +123,6 @@ var CustomTreeView = function (_a) {
|
|
83
123
|
return;
|
84
124
|
var valuesArray = Array.isArray(value) ? value : [value];
|
85
125
|
var pathsToExpand = new Set();
|
86
|
-
var findPathToNode = function (nodes, target, path) {
|
87
|
-
if (path === void 0) { path = []; }
|
88
|
-
for (var _i = 0, nodes_2 = nodes; _i < nodes_2.length; _i++) {
|
89
|
-
var node = nodes_2[_i];
|
90
|
-
var currentPath = __spreadArray(__spreadArray([], path, true), [node.value], false);
|
91
|
-
if (node.value === target)
|
92
|
-
return currentPath;
|
93
|
-
if (node.children) {
|
94
|
-
var result = findPathToNode(node.children, target, currentPath);
|
95
|
-
if (result)
|
96
|
-
return result;
|
97
|
-
}
|
98
|
-
}
|
99
|
-
return null;
|
100
|
-
};
|
101
126
|
valuesArray.forEach(function (val) {
|
102
127
|
var path = findPathToNode(treeData, val);
|
103
128
|
if (path) {
|
@@ -106,7 +131,7 @@ var CustomTreeView = function (_a) {
|
|
106
131
|
});
|
107
132
|
setExpandedItems(Array.from(pathsToExpand));
|
108
133
|
}, [value, treeData]);
|
109
|
-
//
|
134
|
+
// ---- Filtreleme ----
|
110
135
|
var filterTree = function (nodes, term) {
|
111
136
|
var norm = term.toLocaleLowerCase("tr-TR");
|
112
137
|
var paths = [];
|
@@ -130,39 +155,52 @@ var CustomTreeView = function (_a) {
|
|
130
155
|
pathsToExpand: Array.from(new Set(paths)),
|
131
156
|
};
|
132
157
|
};
|
133
|
-
|
134
|
-
|
135
|
-
? filterTree(treeData, filterTerm)
|
136
|
-
: { filteredNodes: treeData, pathsToExpand: [] }, filteredNodes = _j.filteredNodes, pathsToExpand = _j.pathsToExpand;
|
137
|
-
// Auto-expand when filtering
|
158
|
+
var _k = filterTree(treeData, filterTerm), filteredNodes = _k.filteredNodes, pathsToExpand = _k.pathsToExpand;
|
159
|
+
// Filtre aktifken otomatik expand
|
138
160
|
(0, react_1.useEffect)(function () {
|
139
161
|
if (filterTerm) {
|
140
162
|
setExpandedItems(pathsToExpand);
|
141
163
|
}
|
142
164
|
}, [filterTerm, pathsToExpand]);
|
143
|
-
//
|
165
|
+
// ---- Seçim değişimi ----
|
144
166
|
var handleSelectionChange = function (_evt, itemIds) {
|
145
167
|
var newSel = Array.isArray(itemIds) ? itemIds : itemIds ? [itemIds] : [];
|
168
|
+
// Önceki ve yeni seçimler arasındaki farktan eklenen/kaldırılanı bul
|
169
|
+
var prev = new Set(selectedItems);
|
170
|
+
var curr = new Set(newSel);
|
171
|
+
var added = Array.from(curr).filter(function (id) { return !prev.has(id); });
|
172
|
+
var removed = Array.from(prev).filter(function (id) { return !curr.has(id); });
|
173
|
+
var addedId = added[0] || null;
|
174
|
+
if (clearTheLineOnSelect && addedId) {
|
175
|
+
// Sadece addedId çizgisini temizle (atalar + altlar)
|
176
|
+
var toRemove_1 = new Set();
|
177
|
+
getAncestors(treeData, addedId).forEach(function (a) { return toRemove_1.add(a); });
|
178
|
+
getDescendants(treeData, addedId).forEach(function (d) { return toRemove_1.add(d); });
|
179
|
+
// addedId'yi daima koru
|
180
|
+
newSel = newSel.filter(function (val) { return val === addedId || !toRemove_1.has(val); });
|
181
|
+
// Emniyet: addedId listede değilse ekle
|
182
|
+
if (!newSel.includes(addedId)) {
|
183
|
+
newSel = __spreadArray(__spreadArray([], newSel, true), [addedId], false);
|
184
|
+
}
|
185
|
+
}
|
146
186
|
setSelectedItems(newSel);
|
147
187
|
onChange(multi ? newSel : newSel[0] || null);
|
148
188
|
};
|
149
|
-
//
|
189
|
+
// Tek bir rozet (badge) kaldırma
|
150
190
|
var handleBadgeRemove = function (val) {
|
151
191
|
var filtered = selectedItems.filter(function (v) { return v !== val; });
|
152
192
|
setSelectedItems(filtered);
|
153
193
|
onChange(multi ? filtered : filtered[0] || null);
|
154
194
|
};
|
155
|
-
// Clear filter only
|
156
195
|
var handleReset = function () {
|
157
196
|
setFilterTerm("");
|
158
197
|
};
|
159
|
-
// Clear all selections
|
160
198
|
var handleClearAll = function () {
|
161
199
|
setSelectedItems([]);
|
162
200
|
onChange(multi ? [] : null);
|
163
201
|
setExpandedItems([]);
|
164
202
|
};
|
165
|
-
//
|
203
|
+
// Ağaç render (recursive)
|
166
204
|
var renderTree = function (nodes) {
|
167
205
|
return nodes.map(function (node) { return (react_1.default.createElement(TreeItem_1.TreeItem, { key: node.value, itemId: node.value, label: react_1.default.createElement("span", { onClick: function () {
|
168
206
|
var next = multi
|