albinasoft-ui-package 1.0.20 → 1.0.21
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.
|
@@ -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
|
};
|
|
@@ -42,56 +51,112 @@ var react_checkbox_tree_1 = __importDefault(require("react-checkbox-tree"));
|
|
|
42
51
|
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"));
|
|
54
|
+
var react_bootstrap_1 = require("react-bootstrap");
|
|
45
55
|
var CustomTreeView = function (_a) {
|
|
46
56
|
var id = _a.id, name = _a.name, 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.required, required = _c === void 0 ? false : _c, errorMessage = _a.errorMessage, _d = _a.conditionalErrorVisible, conditionalErrorVisible = _d === void 0 ? false : _d, conditionalErrorMessage = _a.conditionalErrorMessage, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.readOnly, readOnly = _f === void 0 ? false : _f, description = _a.description, tooltip = _a.tooltip, style = _a.style, className = _a.className, onChange = _a.onChange, _g = _a.hasTriedToSubmit, hasTriedToSubmit = _g === void 0 ? false : _g;
|
|
47
57
|
var _h = (0, react_1.useState)(value ? [value] : []), checked = _h[0], setChecked = _h[1];
|
|
48
58
|
var _j = (0, react_1.useState)([]), expanded = _j[0], setExpanded = _j[1];
|
|
49
59
|
var _k = (0, react_1.useState)(''), filterTerm = _k[0], setFilterTerm = _k[1];
|
|
50
60
|
var _l = (0, react_1.useState)(treeData), filteredTreeData = _l[0], setFilteredTreeData = _l[1];
|
|
51
|
-
var _m = (0, react_1.useState)(
|
|
52
|
-
|
|
61
|
+
var _m = (0, react_1.useState)([]), selectedPath = _m[0], setSelectedPath = _m[1];
|
|
62
|
+
var _o = (0, react_1.useState)(false), isReadOnly = _o[0], setReadOnly = _o[1];
|
|
63
|
+
var _p = (0, react_1.useState)(false), isValid = _p[0], setIsValid = _p[1];
|
|
53
64
|
var markLeafCheckboxOnly = function (nodes) {
|
|
54
65
|
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
66
|
};
|
|
56
|
-
|
|
67
|
+
var findParentPath = function (nodes, targetValue, path) {
|
|
68
|
+
if (path === void 0) { path = []; }
|
|
69
|
+
for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
|
|
70
|
+
var node = nodes_1[_i];
|
|
71
|
+
var currentPath = __spreadArray(__spreadArray([], path, true), [node.value], false);
|
|
72
|
+
if (node.value === targetValue) {
|
|
73
|
+
return currentPath;
|
|
74
|
+
}
|
|
75
|
+
if (node.children) {
|
|
76
|
+
var result = findParentPath(node.children, targetValue, currentPath);
|
|
77
|
+
if (result)
|
|
78
|
+
return result;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
return null;
|
|
82
|
+
};
|
|
83
|
+
var findLeafLabelByValue = function (nodes, value) {
|
|
84
|
+
for (var _i = 0, nodes_2 = nodes; _i < nodes_2.length; _i++) {
|
|
85
|
+
var node = nodes_2[_i];
|
|
86
|
+
if (node.value === value)
|
|
87
|
+
return node.label;
|
|
88
|
+
if (node.children) {
|
|
89
|
+
var result = findLeafLabelByValue(node.children, value);
|
|
90
|
+
if (result)
|
|
91
|
+
return result;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
return null;
|
|
95
|
+
};
|
|
96
|
+
// 🚀 Filtreleme fonksiyonu (path'leri de genişletiyoruz)
|
|
57
97
|
var filterTreeData = function (nodes, searchTerm) {
|
|
58
|
-
|
|
98
|
+
var pathsToExpand = [];
|
|
99
|
+
var filteredNodes = nodes.map(function (node) {
|
|
59
100
|
var nodeMatches = node.label.toLowerCase().includes(searchTerm.toLowerCase());
|
|
60
|
-
var children = node.children ? filterTreeData(node.children, searchTerm) : [];
|
|
61
|
-
var childMatches = children.length > 0;
|
|
101
|
+
var children = node.children ? filterTreeData(node.children, searchTerm) : { filteredNodes: [], pathsToExpand: [] };
|
|
102
|
+
var childMatches = children.filteredNodes.length > 0;
|
|
62
103
|
if (nodeMatches || childMatches) {
|
|
63
|
-
|
|
104
|
+
pathsToExpand = __spreadArray(__spreadArray(__spreadArray([], pathsToExpand, true), [node.value], false), children.pathsToExpand, true);
|
|
105
|
+
return __assign(__assign({}, node), { children: childMatches ? children.filteredNodes : node.children });
|
|
64
106
|
}
|
|
65
107
|
return null;
|
|
66
108
|
}).filter(Boolean);
|
|
109
|
+
return { filteredNodes: filteredNodes, pathsToExpand: pathsToExpand };
|
|
67
110
|
};
|
|
68
|
-
// 🔥 Filtre güncelleme, expanded artık değişmiyor
|
|
69
111
|
(0, react_1.useEffect)(function () {
|
|
70
112
|
if (filterTerm.trim() === '') {
|
|
71
113
|
setFilteredTreeData(treeData);
|
|
114
|
+
setExpanded(__spreadArray([], selectedPath, true));
|
|
72
115
|
}
|
|
73
116
|
else {
|
|
74
|
-
var
|
|
117
|
+
var _a = filterTreeData(treeData, filterTerm), filteredNodes = _a.filteredNodes, pathsToExpand = _a.pathsToExpand;
|
|
75
118
|
setFilteredTreeData(filteredNodes);
|
|
119
|
+
setExpanded(Array.from(new Set(__spreadArray(__spreadArray([], pathsToExpand, true), selectedPath, true))));
|
|
76
120
|
}
|
|
77
|
-
}, [filterTerm, treeData]);
|
|
121
|
+
}, [filterTerm, treeData, selectedPath]);
|
|
78
122
|
var handleCheck = function (checkedNodes) {
|
|
79
123
|
var newlySelected = checkedNodes.find(function (node) { return !checked.includes(node); });
|
|
80
124
|
var selectedLeaf = newlySelected || '';
|
|
81
125
|
setChecked(selectedLeaf ? [selectedLeaf] : []);
|
|
126
|
+
if (selectedLeaf) {
|
|
127
|
+
var parentPath = findParentPath(treeData, selectedLeaf);
|
|
128
|
+
if (parentPath) {
|
|
129
|
+
setSelectedPath(parentPath);
|
|
130
|
+
setExpanded(parentPath);
|
|
131
|
+
}
|
|
132
|
+
var selectedLabel = findLeafLabelByValue(treeData, selectedLeaf);
|
|
133
|
+
if (selectedLabel) {
|
|
134
|
+
setFilterTerm(selectedLabel);
|
|
135
|
+
setReadOnly(true);
|
|
136
|
+
}
|
|
137
|
+
}
|
|
82
138
|
onChange(selectedLeaf);
|
|
83
139
|
};
|
|
84
140
|
var handleReset = function () {
|
|
85
141
|
setFilterTerm('');
|
|
86
142
|
setChecked([]);
|
|
143
|
+
setExpanded([]);
|
|
144
|
+
setReadOnly(false);
|
|
87
145
|
};
|
|
146
|
+
// 🚀 Sayfa yüklendiğinde handleReset'i bir kere çalıştır
|
|
147
|
+
(0, react_1.useEffect)(function () {
|
|
148
|
+
handleCheck(['leafCheck']);
|
|
149
|
+
handleReset();
|
|
150
|
+
}, []);
|
|
88
151
|
// 🚀 Validasyon Kontrolü
|
|
89
152
|
(0, react_1.useEffect)(function () {
|
|
153
|
+
// Kullanıcı bir leaf seçmiş VE input boş değilse valid = true
|
|
90
154
|
setIsValid(checked.length > 0 && filterTerm.trim().length > 0);
|
|
91
155
|
}, [checked, filterTerm]);
|
|
92
156
|
return (react_1.default.createElement("div", { className: className },
|
|
93
157
|
react_1.default.createElement("div", { className: "form-group" },
|
|
94
|
-
react_1.default.createElement(
|
|
158
|
+
tooltip ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "bottom", overlay: react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "tooltip-".concat(tooltip) }, tooltip) },
|
|
159
|
+
react_1.default.createElement(CustomInput_1.default, { id: id && "input-".concat(id), name: name && "input-".concat(name), label: label && label, value: filterTerm, disabled: disabled, readOnly: isReadOnly, required: required, valid: hasTriedToSubmit ? isValid : undefined, buttonIcon: react_1.default.createElement(fa_1.FaTimes, null), buttonClass: 'btn btn-danger bg-soft-danger', buttonOnClick: handleReset, inputType: CustomInput_1.InputType.TEXT, placeholder: placeholder, style: style, onChange: function (e) { return setFilterTerm(e.target.value); } }))) : (react_1.default.createElement(CustomInput_1.default, { id: id && "input-".concat(id), name: name && "input-".concat(name), label: label && label, value: filterTerm, disabled: disabled, readOnly: isReadOnly, required: required, valid: hasTriedToSubmit ? isValid : undefined, buttonIcon: react_1.default.createElement(fa_1.FaTimes, null), buttonClass: 'btn btn-danger bg-soft-danger', buttonOnClick: handleReset, inputType: CustomInput_1.InputType.TEXT, placeholder: placeholder, style: style, onChange: function (e) { return setFilterTerm(e.target.value); } })),
|
|
95
160
|
react_1.default.createElement(react_checkbox_tree_1.default, { id: id, name: name, disabled: disabled, nodes: markLeafCheckboxOnly(filteredTreeData), checked: checked, expanded: expanded, onCheck: handleCheck, onExpand: setExpanded, icons: {
|
|
96
161
|
check: react_1.default.createElement(fa_1.FaCheckSquare, { color: "#4caf50" }),
|
|
97
162
|
uncheck: react_1.default.createElement(fa_1.FaSquare, { color: "currentColor" }),
|
|
@@ -102,14 +167,20 @@ var CustomTreeView = function (_a) {
|
|
|
102
167
|
parentOpen: react_1.default.createElement(fa_1.FaFolderOpen, { color: "#ff9800" }),
|
|
103
168
|
leaf: react_1.default.createElement(fa_1.FaFile, { color: "#607d8b" }),
|
|
104
169
|
} }),
|
|
105
|
-
required &&
|
|
106
|
-
react_1.default.createElement(
|
|
107
|
-
|
|
170
|
+
required && (react_1.default.createElement("div", { className: "invalid-feedback text-danger" },
|
|
171
|
+
react_1.default.createElement("div", { className: "description-icon" },
|
|
172
|
+
react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
|
|
173
|
+
react_1.default.createElement("div", { className: "description-text" },
|
|
174
|
+
react_1.default.createElement("span", null, errorMessage || 'Bu alan boş bırakılamaz.')))),
|
|
108
175
|
conditionalErrorVisible && (react_1.default.createElement("div", { className: "conditional-error-message text-warning" },
|
|
109
|
-
react_1.default.createElement(
|
|
110
|
-
|
|
176
|
+
react_1.default.createElement("div", { className: "description-icon" },
|
|
177
|
+
react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
|
|
178
|
+
react_1.default.createElement("div", { className: "description-text" },
|
|
179
|
+
react_1.default.createElement("span", null, conditionalErrorMessage)))),
|
|
111
180
|
description && (react_1.default.createElement("div", { className: "form-description text-secondary" },
|
|
112
|
-
react_1.default.createElement(
|
|
113
|
-
|
|
181
|
+
react_1.default.createElement("div", { className: "description-icon" },
|
|
182
|
+
react_1.default.createElement(fa_1.FaInfoCircle, null)),
|
|
183
|
+
react_1.default.createElement("div", { className: "description-text" },
|
|
184
|
+
react_1.default.createElement("span", null, description)))))));
|
|
114
185
|
};
|
|
115
186
|
exports.default = CustomTreeView;
|