albinasoft-ui-package 1.1.1 → 1.1.3
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.
|
@@ -129,13 +129,13 @@ interface TreeViewElement {
|
|
|
129
129
|
id?: string;
|
|
130
130
|
type: ElementType;
|
|
131
131
|
label?: string;
|
|
132
|
-
value: string | null;
|
|
132
|
+
value: string | string[] | null;
|
|
133
133
|
treeData: TreeNode[];
|
|
134
134
|
rowId?: number;
|
|
135
135
|
colId?: number;
|
|
136
136
|
innerRowId?: number;
|
|
137
137
|
colClass?: string;
|
|
138
|
-
onChange: (selected: string | null) => void;
|
|
138
|
+
onChange: (selected: string | string[] | null) => void;
|
|
139
139
|
}
|
|
140
140
|
interface ButtonElement {
|
|
141
141
|
id?: string;
|
|
@@ -23,7 +23,7 @@ var CustomRichTextbox = function (_a) {
|
|
|
23
23
|
]
|
|
24
24
|
};
|
|
25
25
|
var formats = [
|
|
26
|
-
'align', 'bold', 'italic', 'underline', 'strike', 'header', 'list'
|
|
26
|
+
'align', 'bold', 'italic', 'underline', 'strike', 'header', 'list'
|
|
27
27
|
];
|
|
28
28
|
return (react_1.default.createElement("div", { className: className },
|
|
29
29
|
react_1.default.createElement("div", { className: "form-group" },
|
|
@@ -6,10 +6,11 @@ export interface TreeNode {
|
|
|
6
6
|
}
|
|
7
7
|
interface CustomTreeViewProps {
|
|
8
8
|
label?: string;
|
|
9
|
-
value: string | null;
|
|
9
|
+
value: string | string[] | null;
|
|
10
10
|
treeData: TreeNode[];
|
|
11
11
|
placeholder?: string;
|
|
12
|
-
|
|
12
|
+
multi?: boolean;
|
|
13
|
+
onChange: (selected: string | string[] | null) => void;
|
|
13
14
|
}
|
|
14
15
|
declare const CustomTreeView: React.FC<CustomTreeViewProps>;
|
|
15
16
|
export default CustomTreeView;
|
|
@@ -49,23 +49,54 @@ var TreeItem_1 = require("@mui/x-tree-view/TreeItem");
|
|
|
49
49
|
var fa_1 = require("react-icons/fa");
|
|
50
50
|
var CustomInput_1 = __importStar(require("./CustomInput"));
|
|
51
51
|
var CustomTreeView = function (_a) {
|
|
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, onChange = _a.onChange;
|
|
53
|
-
var
|
|
54
|
-
|
|
55
|
-
var
|
|
56
|
-
var
|
|
57
|
-
var
|
|
58
|
-
var
|
|
59
|
-
|
|
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, onChange = _a.onChange;
|
|
53
|
+
var _d = (0, react_1.useState)(''), filterTerm = _d[0], setFilterTerm = _d[1];
|
|
54
|
+
var _e = (0, react_1.useState)([]), selectedItems = _e[0], setSelectedItems = _e[1];
|
|
55
|
+
var _f = (0, react_1.useState)([]), expandedItems = _f[0], setExpandedItems = _f[1];
|
|
56
|
+
var _g = (0, react_1.useState)(''), inputValue = _g[0], setInputValue = _g[1];
|
|
57
|
+
var _h = (0, react_1.useState)(false), isInputDisabled = _h[0], setIsInputDisabled = _h[1];
|
|
58
|
+
var getAllNodeIds = function (nodes) {
|
|
59
|
+
return nodes.reduce(function (acc, node) {
|
|
60
|
+
acc.push(node.value);
|
|
61
|
+
if (node.children)
|
|
62
|
+
acc.push.apply(acc, getAllNodeIds(node.children));
|
|
63
|
+
return acc;
|
|
64
|
+
}, []);
|
|
65
|
+
};
|
|
66
|
+
var findNodeByValue = function (nodes, val) {
|
|
67
|
+
for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
|
|
68
|
+
var node = nodes_1[_i];
|
|
69
|
+
if (node.value === val)
|
|
70
|
+
return node;
|
|
71
|
+
if (node.children) {
|
|
72
|
+
var found = findNodeByValue(node.children, val);
|
|
73
|
+
if (found)
|
|
74
|
+
return found;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
return null;
|
|
78
|
+
};
|
|
79
|
+
var findLabelByValue = function (nodes, val) {
|
|
80
|
+
var node = findNodeByValue(nodes, val);
|
|
81
|
+
return node ? node.label : '';
|
|
82
|
+
};
|
|
60
83
|
(0, react_1.useEffect)(function () {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
84
|
+
var initialSelected = Array.isArray(value)
|
|
85
|
+
? value
|
|
86
|
+
: value
|
|
87
|
+
? [value]
|
|
88
|
+
: [];
|
|
89
|
+
setSelectedItems(initialSelected);
|
|
90
|
+
if (initialSelected.length) {
|
|
91
|
+
var labels = initialSelected.map(function (val) { return findLabelByValue(treeData, val); });
|
|
92
|
+
setInputValue(labels.join(', '));
|
|
64
93
|
setIsInputDisabled(true);
|
|
65
|
-
|
|
94
|
+
setExpandedItems(getAllNodeIds(treeData));
|
|
66
95
|
}
|
|
67
96
|
else {
|
|
68
|
-
|
|
97
|
+
setExpandedItems(getAllNodeIds(treeData));
|
|
98
|
+
setInputValue('');
|
|
99
|
+
setIsInputDisabled(false);
|
|
69
100
|
}
|
|
70
101
|
}, [value, treeData]);
|
|
71
102
|
var filterTree = function (nodes, term) {
|
|
@@ -75,80 +106,86 @@ var CustomTreeView = function (_a) {
|
|
|
75
106
|
.map(function (node) {
|
|
76
107
|
var normalizedLabel = node.label.toLocaleLowerCase('tr-TR');
|
|
77
108
|
var matches = normalizedLabel.includes(normalizedTerm);
|
|
78
|
-
var childrenResult = node.children
|
|
109
|
+
var childrenResult = node.children
|
|
79
110
|
? filterTree(node.children, term)
|
|
80
111
|
: { filteredNodes: [], pathsToExpand: [] };
|
|
81
|
-
if (matches || childrenResult.filteredNodes.length
|
|
82
|
-
pathsToExpand = __spreadArray(__spreadArray(__spreadArray([], pathsToExpand, true), [
|
|
83
|
-
|
|
112
|
+
if (matches || childrenResult.filteredNodes.length) {
|
|
113
|
+
pathsToExpand = __spreadArray(__spreadArray(__spreadArray([], pathsToExpand, true), [
|
|
114
|
+
node.value
|
|
115
|
+
], false), childrenResult.pathsToExpand, true);
|
|
116
|
+
return __assign(__assign({}, node), { children: childrenResult.filteredNodes.length > 0
|
|
117
|
+
? childrenResult.filteredNodes
|
|
118
|
+
: undefined });
|
|
84
119
|
}
|
|
85
120
|
return null;
|
|
86
121
|
})
|
|
87
122
|
.filter(Boolean);
|
|
88
123
|
return { filteredNodes: filteredNodes, pathsToExpand: pathsToExpand };
|
|
89
124
|
};
|
|
90
|
-
var
|
|
125
|
+
var _j = filterTerm
|
|
91
126
|
? filterTree(treeData, filterTerm)
|
|
92
|
-
: { filteredNodes: treeData, pathsToExpand: [] }, filteredNodes =
|
|
127
|
+
: { filteredNodes: treeData, pathsToExpand: [] }, filteredNodes = _j.filteredNodes, pathsToExpand = _j.pathsToExpand;
|
|
93
128
|
(0, react_1.useEffect)(function () {
|
|
94
129
|
if (filterTerm) {
|
|
95
130
|
setExpandedItems(pathsToExpand);
|
|
96
131
|
}
|
|
97
132
|
}, [filterTerm, pathsToExpand]);
|
|
98
|
-
var
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
if (
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
var handleLabelClick = function (nodeValue) {
|
|
111
|
-
setSelectedItem(nodeValue);
|
|
112
|
-
onChange(nodeValue);
|
|
113
|
-
var selectedNode = findNodeByValue(treeData, nodeValue);
|
|
114
|
-
if (selectedNode) {
|
|
115
|
-
setInputValue(selectedNode.label);
|
|
116
|
-
setIsInputDisabled(true);
|
|
133
|
+
var handleSelectionChange = function (_event, itemIds) {
|
|
134
|
+
var newSelected = Array.isArray(itemIds)
|
|
135
|
+
? itemIds
|
|
136
|
+
: itemIds
|
|
137
|
+
? [itemIds]
|
|
138
|
+
: [];
|
|
139
|
+
setSelectedItems(newSelected);
|
|
140
|
+
if (multi) {
|
|
141
|
+
onChange(newSelected);
|
|
142
|
+
var labels = newSelected.map(function (val) { return findLabelByValue(treeData, val); });
|
|
143
|
+
setInputValue(labels.join(', '));
|
|
144
|
+
setIsInputDisabled(!!labels.length);
|
|
117
145
|
}
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
146
|
+
else {
|
|
147
|
+
var single = newSelected[0] || null;
|
|
148
|
+
onChange(single);
|
|
149
|
+
if (single) {
|
|
150
|
+
setInputValue(findLabelByValue(treeData, single));
|
|
151
|
+
setIsInputDisabled(true);
|
|
152
|
+
}
|
|
153
|
+
else {
|
|
154
|
+
setInputValue('');
|
|
155
|
+
setIsInputDisabled(false);
|
|
128
156
|
}
|
|
129
157
|
}
|
|
130
|
-
return null;
|
|
131
|
-
};
|
|
132
|
-
var findLabelByValue = function (nodes, val) {
|
|
133
|
-
var node = findNodeByValue(nodes, val);
|
|
134
|
-
return node ? node.label : '';
|
|
135
158
|
};
|
|
136
|
-
var
|
|
137
|
-
|
|
159
|
+
var handleLabelClick = function (val) {
|
|
160
|
+
var newSelected;
|
|
161
|
+
if (multi) {
|
|
162
|
+
newSelected = selectedItems.includes(val)
|
|
163
|
+
? selectedItems.filter(function (v) { return v !== val; })
|
|
164
|
+
: __spreadArray(__spreadArray([], selectedItems, true), [val], false);
|
|
165
|
+
}
|
|
166
|
+
else {
|
|
167
|
+
newSelected = [val];
|
|
168
|
+
}
|
|
169
|
+
// simulate SyntheticEvent
|
|
170
|
+
handleSelectionChange({}, newSelected);
|
|
138
171
|
};
|
|
139
172
|
var handleReset = function () {
|
|
140
173
|
setFilterTerm('');
|
|
141
|
-
|
|
142
|
-
|
|
174
|
+
setSelectedItems([]);
|
|
175
|
+
onChange(multi ? [] : null);
|
|
143
176
|
setInputValue('');
|
|
144
177
|
setIsInputDisabled(false);
|
|
145
|
-
|
|
178
|
+
setExpandedItems(getAllNodeIds(treeData));
|
|
179
|
+
};
|
|
180
|
+
var renderTree = function (nodes) {
|
|
181
|
+
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 () { return handleLabelClick(node.value); }, style: { cursor: 'pointer' } }, node.label.trim() === '' ? 'Kök' : node.label) }, node.children ? renderTree(node.children) : null)); });
|
|
146
182
|
};
|
|
147
183
|
return (react_1.default.createElement("div", null,
|
|
148
184
|
label && react_1.default.createElement("label", null, label),
|
|
149
185
|
react_1.default.createElement(CustomInput_1.default, { id: "tree-search", value: inputValue || filterTerm, inputType: CustomInput_1.InputType.TEXT, disabled: isInputDisabled, placeholder: placeholder, buttonIcon: react_1.default.createElement(fa_1.FaTimes, null), buttonClass: "btn btn-danger bg-soft-danger", buttonOnClick: handleReset, onChange: function (e) { return setFilterTerm(e.target.value); } }),
|
|
150
|
-
react_1.default.createElement(SimpleTreeView_1.SimpleTreeView, { checkboxSelection: true,
|
|
151
|
-
|
|
152
|
-
|
|
186
|
+
react_1.default.createElement(SimpleTreeView_1.SimpleTreeView, { checkboxSelection: true, multiSelect: multi, selectedItems: selectedItems, expandedItems: expandedItems, onSelectedItemsChange: handleSelectionChange, onExpandedItemsChange: function (event, itemIds) {
|
|
187
|
+
var ids = Array.isArray(itemIds) ? itemIds : itemIds ? [itemIds] : [];
|
|
188
|
+
setExpandedItems(ids);
|
|
189
|
+
} }, renderTree(filteredNodes))));
|
|
153
190
|
};
|
|
154
191
|
exports.default = CustomTreeView;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import AlbinaForm from './components/AlbinaForm';
|
|
2
1
|
import CustomButton from './components/CustomButton';
|
|
3
2
|
import CustomCheckbox from './components/CustomCheckbox';
|
|
4
3
|
import CustomDateTimePicker from './components/CustomDateTimePicker';
|
|
@@ -17,4 +16,4 @@ import CustomAutocompleteInput from './components/CustomAutocompleteInput';
|
|
|
17
16
|
import CustomProgressBar from './components/CustomProgressBar';
|
|
18
17
|
import CustomTimeline from './components/CustomTimeline';
|
|
19
18
|
import CustomDatatable from './components/CustomDatatable';
|
|
20
|
-
export {
|
|
19
|
+
export { CustomButton, CustomCheckbox, CustomDateTimePicker, CustomDivider, CustomForm, CustomInput, CustomModal, CustomRadioButton, CustomRichTextbox, CustomSelect, CustomTab, CustomText, CustomTextarea, CustomTreeView, CustomAutocompleteInput, CustomProgressBar, CustomTimeline, CustomDatatable, };
|
package/dist/index.js
CHANGED
|
@@ -3,9 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.CustomDatatable = exports.CustomTimeline = exports.CustomProgressBar = exports.CustomAutocompleteInput = exports.CustomTreeView = exports.CustomTextarea = exports.CustomText = exports.CustomTab = exports.CustomSelect = exports.CustomRichTextbox = exports.CustomRadioButton = exports.CustomModal = exports.CustomInput = exports.CustomForm = exports.CustomDivider = exports.CustomDateTimePicker = exports.CustomCheckbox = exports.CustomButton =
|
|
7
|
-
var AlbinaForm_1 = __importDefault(require("./components/AlbinaForm"));
|
|
8
|
-
exports.AlbinaForm = AlbinaForm_1.default;
|
|
6
|
+
exports.CustomDatatable = exports.CustomTimeline = exports.CustomProgressBar = exports.CustomAutocompleteInput = exports.CustomTreeView = exports.CustomTextarea = exports.CustomText = exports.CustomTab = exports.CustomSelect = exports.CustomRichTextbox = exports.CustomRadioButton = exports.CustomModal = exports.CustomInput = exports.CustomForm = exports.CustomDivider = exports.CustomDateTimePicker = exports.CustomCheckbox = exports.CustomButton = void 0;
|
|
9
7
|
var CustomButton_1 = __importDefault(require("./components/CustomButton"));
|
|
10
8
|
exports.CustomButton = CustomButton_1.default;
|
|
11
9
|
var CustomCheckbox_1 = __importDefault(require("./components/CustomCheckbox"));
|