albinasoft-ui-package 1.1.42 → 1.1.44
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.
- package/LICENSE +21 -21
- package/dist/assets/css/custom-autocomplete-input.css +49 -49
- package/dist/assets/css/custom-datatable.css +2 -2
- package/dist/assets/css/custom-datetime-picker.css +779 -779
- package/dist/assets/css/custom-progress-bar.css +37 -37
- package/dist/assets/css/custom-select.css +62 -62
- package/dist/assets/css/custom-simple-select.css +117 -117
- package/dist/assets/css/custom-timeline.css +43 -43
- package/dist/assets/css/custom-treeview.css +84 -0
- package/dist/assets/css/dark.css +2159 -2159
- package/dist/assets/css/main.css +26664 -26664
- package/dist/components/AlbinaForm.d.ts +28 -28
- package/dist/components/AlbinaForm.js +88 -88
- package/dist/components/CustomAutocompleteInput.d.ts +23 -23
- package/dist/components/CustomAutocompleteInput.js +185 -185
- package/dist/components/CustomButton.d.ts +14 -14
- package/dist/components/CustomButton.js +98 -98
- package/dist/components/CustomCheckbox.d.ts +20 -20
- package/dist/components/CustomCheckbox.js +58 -58
- package/dist/components/CustomDatatable.d.ts +42 -42
- package/dist/components/CustomDatatable.js +92 -92
- package/dist/components/CustomDateTimePicker.d.ts +33 -33
- package/dist/components/CustomDateTimePicker.js +91 -91
- package/dist/components/CustomDivider.d.ts +51 -51
- package/dist/components/CustomDivider.js +87 -87
- package/dist/components/CustomFileUploader.d.ts +65 -65
- package/dist/components/CustomFileUploader.js +460 -460
- package/dist/components/CustomForm.d.ts +225 -225
- package/dist/components/CustomForm.js +259 -243
- package/dist/components/CustomInput.d.ts +37 -37
- package/dist/components/CustomInput.js +85 -85
- package/dist/components/CustomModal.d.ts +15 -15
- package/dist/components/CustomModal.js +17 -17
- package/dist/components/CustomPhoneInput.d.ts +29 -29
- package/dist/components/CustomPhoneInput.js +251 -251
- package/dist/components/CustomProgressBar.d.ts +9 -9
- package/dist/components/CustomProgressBar.js +40 -40
- package/dist/components/CustomRadioButton.d.ts +25 -25
- package/dist/components/CustomRadioButton.js +34 -34
- package/dist/components/CustomRichTextbox.d.ts +14 -14
- package/dist/components/CustomRichTextbox.js +89 -89
- package/dist/components/CustomSelect.d.ts +32 -32
- package/dist/components/CustomSelect.js +193 -191
- package/dist/components/CustomSimpleSelect.d.ts +21 -21
- package/dist/components/CustomSimpleSelect.js +64 -64
- package/dist/components/CustomTab.d.ts +44 -44
- package/dist/components/CustomTab.js +122 -122
- package/dist/components/CustomText.d.ts +72 -72
- package/dist/components/CustomText.js +158 -158
- package/dist/components/CustomTextarea.d.ts +22 -22
- package/dist/components/CustomTextarea.js +33 -33
- package/dist/components/CustomTimeline.d.ts +30 -30
- package/dist/components/CustomTimeline.js +80 -80
- package/dist/components/CustomTreeView.d.ts +20 -22
- package/dist/components/CustomTreeView.js +168 -157
- package/dist/index.d.ts +22 -22
- package/dist/index.js +48 -48
- package/package.json +44 -43
- package/readme.md +9 -9
@@ -1,80 +1,80 @@
|
|
1
|
-
"use strict";
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
3
|
-
if (k2 === undefined) k2 = k;
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
7
|
-
}
|
8
|
-
Object.defineProperty(o, k2, desc);
|
9
|
-
}) : (function(o, m, k, k2) {
|
10
|
-
if (k2 === undefined) k2 = k;
|
11
|
-
o[k2] = m[k];
|
12
|
-
}));
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
15
|
-
}) : function(o, v) {
|
16
|
-
o["default"] = v;
|
17
|
-
});
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
19
|
-
if (mod && mod.__esModule) return mod;
|
20
|
-
var result = {};
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
22
|
-
__setModuleDefault(result, mod);
|
23
|
-
return result;
|
24
|
-
};
|
25
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
26
|
-
exports.DotColor = exports.CustomTimeline = void 0;
|
27
|
-
var react_1 = __importStar(require("react"));
|
28
|
-
var fa_1 = require("react-icons/fa");
|
29
|
-
var CustomText_1 = __importStar(require("./CustomText"));
|
30
|
-
require("../assets/css/custom-timeline.css");
|
31
|
-
var DotColor;
|
32
|
-
(function (DotColor) {
|
33
|
-
DotColor["PRIMARY"] = "border-primary text-primary";
|
34
|
-
DotColor["SECONDARY"] = "border-secondary text-secondary";
|
35
|
-
DotColor["SUCCESS"] = "border-success text-success";
|
36
|
-
DotColor["WARNING"] = "border-warning text-warning";
|
37
|
-
DotColor["DANGER"] = "border-danger text-danger";
|
38
|
-
DotColor["INFO"] = "border-info text-info";
|
39
|
-
DotColor["DARK"] = "border-dark text-dark";
|
40
|
-
DotColor["LIGHT"] = "border-light text-light";
|
41
|
-
})(DotColor || (DotColor = {}));
|
42
|
-
exports.DotColor = DotColor;
|
43
|
-
var CustomTimeline = function (_a) {
|
44
|
-
var timelineElements = _a.timelineElements;
|
45
|
-
var _b = (0, react_1.useState)(new Set()), expandedItems = _b[0], setExpandedItems = _b[1];
|
46
|
-
var toggleItem = function (key) {
|
47
|
-
setExpandedItems(function (prev) {
|
48
|
-
var newSet = new Set(prev);
|
49
|
-
newSet.has(key) ? newSet.delete(key) : newSet.add(key);
|
50
|
-
return newSet;
|
51
|
-
});
|
52
|
-
};
|
53
|
-
var renderTimelineElements = function (elements, level, parentKey) {
|
54
|
-
if (level === void 0) { level = 0; }
|
55
|
-
if (parentKey === void 0) { parentKey = ""; }
|
56
|
-
return (react_1.default.createElement("ul", { className: "list-inline p-0 m-0 w-100 ms-".concat(level * 3) }, elements.map(function (element, index) {
|
57
|
-
var _a;
|
58
|
-
var key = parentKey ? "".concat(parentKey, ".").concat(index) : "".concat(index);
|
59
|
-
var isExpanded = expandedItems.has(key);
|
60
|
-
return (react_1.default.createElement("li", { key: key, className: "w-100 mb-3 position-relative ps-4 timeline-item" },
|
61
|
-
react_1.default.createElement("div", { className: "timeline-line" }),
|
62
|
-
react_1.default.createElement("div", { className: "timeline-dots ".concat(element.dotColor || DotColor.PRIMARY), onClick: function () { return toggleItem(key); } }, isExpanded ? react_1.default.createElement(fa_1.FaChevronDown, null) : react_1.default.createElement(fa_1.FaChevronRight, null)),
|
63
|
-
react_1.default.createElement("div", { className: "ms-3 mt-2" },
|
64
|
-
react_1.default.createElement(CustomText_1.default, { value: element.title, textType: CustomText_1.TextType.HEADING, lineHeight: CustomText_1.LineHeight.XXS })),
|
65
|
-
react_1.default.createElement("div", { className: "expandable-content ms-3 ".concat(isExpanded ? "expanded" : "collapsed") },
|
66
|
-
react_1.default.createElement(CustomText_1.default, { value: element.mainTime, textType: CustomText_1.TextType.PARAGRAPH, fontSize: CustomText_1.FontSize.XXS, lineHeight: CustomText_1.LineHeight.M, italic: true }),
|
67
|
-
element.description && (react_1.default.createElement("div", { className: "mb-2" },
|
68
|
-
react_1.default.createElement(CustomText_1.default, { value: element.description, textType: CustomText_1.TextType.PARAGRAPH, fontSize: CustomText_1.FontSize.XS, lineHeight: CustomText_1.LineHeight.XXS }))), (_a = element.additionalInfos) === null || _a === void 0 ? void 0 :
|
69
|
-
_a.map(function (info, infoIndex) { return (react_1.default.createElement("div", { key: infoIndex, className: "alert alert-secondary d-flex align-items-center gap-3 me-5" },
|
70
|
-
react_1.default.createElement(fa_1.FaInfoCircle, { size: 24, className: "flex-shrink-0" }),
|
71
|
-
react_1.default.createElement("div", { className: "flex-grow-1" },
|
72
|
-
react_1.default.createElement(CustomText_1.default, { value: info.time, textType: CustomText_1.TextType.PARAGRAPH, fontSize: CustomText_1.FontSize.XXS, lineHeight: CustomText_1.LineHeight.M, italic: true }),
|
73
|
-
typeof info.description === "string" ? (react_1.default.createElement(CustomText_1.default, { value: info.description, textType: CustomText_1.TextType.PARAGRAPH, fontSize: CustomText_1.FontSize.XS, lineHeight: CustomText_1.LineHeight.XXS })) : (info.description)))); }),
|
74
|
-
element.elements && renderTimelineElements(element.elements, level + 1, key))));
|
75
|
-
})));
|
76
|
-
};
|
77
|
-
return (react_1.default.createElement("div", { className: "iq-timeline0 m-0 d-flex align-items-center justify-content-between position-relative" }, renderTimelineElements(timelineElements)));
|
78
|
-
};
|
79
|
-
exports.CustomTimeline = CustomTimeline;
|
80
|
-
exports.default = CustomTimeline;
|
1
|
+
"use strict";
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
3
|
+
if (k2 === undefined) k2 = k;
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
7
|
+
}
|
8
|
+
Object.defineProperty(o, k2, desc);
|
9
|
+
}) : (function(o, m, k, k2) {
|
10
|
+
if (k2 === undefined) k2 = k;
|
11
|
+
o[k2] = m[k];
|
12
|
+
}));
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
15
|
+
}) : function(o, v) {
|
16
|
+
o["default"] = v;
|
17
|
+
});
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
19
|
+
if (mod && mod.__esModule) return mod;
|
20
|
+
var result = {};
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
22
|
+
__setModuleDefault(result, mod);
|
23
|
+
return result;
|
24
|
+
};
|
25
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
26
|
+
exports.DotColor = exports.CustomTimeline = void 0;
|
27
|
+
var react_1 = __importStar(require("react"));
|
28
|
+
var fa_1 = require("react-icons/fa");
|
29
|
+
var CustomText_1 = __importStar(require("./CustomText"));
|
30
|
+
require("../assets/css/custom-timeline.css");
|
31
|
+
var DotColor;
|
32
|
+
(function (DotColor) {
|
33
|
+
DotColor["PRIMARY"] = "border-primary text-primary";
|
34
|
+
DotColor["SECONDARY"] = "border-secondary text-secondary";
|
35
|
+
DotColor["SUCCESS"] = "border-success text-success";
|
36
|
+
DotColor["WARNING"] = "border-warning text-warning";
|
37
|
+
DotColor["DANGER"] = "border-danger text-danger";
|
38
|
+
DotColor["INFO"] = "border-info text-info";
|
39
|
+
DotColor["DARK"] = "border-dark text-dark";
|
40
|
+
DotColor["LIGHT"] = "border-light text-light";
|
41
|
+
})(DotColor || (DotColor = {}));
|
42
|
+
exports.DotColor = DotColor;
|
43
|
+
var CustomTimeline = function (_a) {
|
44
|
+
var timelineElements = _a.timelineElements;
|
45
|
+
var _b = (0, react_1.useState)(new Set()), expandedItems = _b[0], setExpandedItems = _b[1];
|
46
|
+
var toggleItem = function (key) {
|
47
|
+
setExpandedItems(function (prev) {
|
48
|
+
var newSet = new Set(prev);
|
49
|
+
newSet.has(key) ? newSet.delete(key) : newSet.add(key);
|
50
|
+
return newSet;
|
51
|
+
});
|
52
|
+
};
|
53
|
+
var renderTimelineElements = function (elements, level, parentKey) {
|
54
|
+
if (level === void 0) { level = 0; }
|
55
|
+
if (parentKey === void 0) { parentKey = ""; }
|
56
|
+
return (react_1.default.createElement("ul", { className: "list-inline p-0 m-0 w-100 ms-".concat(level * 3) }, elements.map(function (element, index) {
|
57
|
+
var _a;
|
58
|
+
var key = parentKey ? "".concat(parentKey, ".").concat(index) : "".concat(index);
|
59
|
+
var isExpanded = expandedItems.has(key);
|
60
|
+
return (react_1.default.createElement("li", { key: key, className: "w-100 mb-3 position-relative ps-4 timeline-item" },
|
61
|
+
react_1.default.createElement("div", { className: "timeline-line" }),
|
62
|
+
react_1.default.createElement("div", { className: "timeline-dots ".concat(element.dotColor || DotColor.PRIMARY), onClick: function () { return toggleItem(key); } }, isExpanded ? react_1.default.createElement(fa_1.FaChevronDown, null) : react_1.default.createElement(fa_1.FaChevronRight, null)),
|
63
|
+
react_1.default.createElement("div", { className: "ms-3 mt-2" },
|
64
|
+
react_1.default.createElement(CustomText_1.default, { value: element.title, textType: CustomText_1.TextType.HEADING, lineHeight: CustomText_1.LineHeight.XXS })),
|
65
|
+
react_1.default.createElement("div", { className: "expandable-content ms-3 ".concat(isExpanded ? "expanded" : "collapsed") },
|
66
|
+
react_1.default.createElement(CustomText_1.default, { value: element.mainTime, textType: CustomText_1.TextType.PARAGRAPH, fontSize: CustomText_1.FontSize.XXS, lineHeight: CustomText_1.LineHeight.M, italic: true }),
|
67
|
+
element.description && (react_1.default.createElement("div", { className: "mb-2" },
|
68
|
+
react_1.default.createElement(CustomText_1.default, { value: element.description, textType: CustomText_1.TextType.PARAGRAPH, fontSize: CustomText_1.FontSize.XS, lineHeight: CustomText_1.LineHeight.XXS }))), (_a = element.additionalInfos) === null || _a === void 0 ? void 0 :
|
69
|
+
_a.map(function (info, infoIndex) { return (react_1.default.createElement("div", { key: infoIndex, className: "alert alert-secondary d-flex align-items-center gap-3 me-5" },
|
70
|
+
react_1.default.createElement(fa_1.FaInfoCircle, { size: 24, className: "flex-shrink-0" }),
|
71
|
+
react_1.default.createElement("div", { className: "flex-grow-1" },
|
72
|
+
react_1.default.createElement(CustomText_1.default, { value: info.time, textType: CustomText_1.TextType.PARAGRAPH, fontSize: CustomText_1.FontSize.XXS, lineHeight: CustomText_1.LineHeight.M, italic: true }),
|
73
|
+
typeof info.description === "string" ? (react_1.default.createElement(CustomText_1.default, { value: info.description, textType: CustomText_1.TextType.PARAGRAPH, fontSize: CustomText_1.FontSize.XS, lineHeight: CustomText_1.LineHeight.XXS })) : (info.description)))); }),
|
74
|
+
element.elements && renderTimelineElements(element.elements, level + 1, key))));
|
75
|
+
})));
|
76
|
+
};
|
77
|
+
return (react_1.default.createElement("div", { className: "iq-timeline0 m-0 d-flex align-items-center justify-content-between position-relative" }, renderTimelineElements(timelineElements)));
|
78
|
+
};
|
79
|
+
exports.CustomTimeline = CustomTimeline;
|
80
|
+
exports.default = CustomTimeline;
|
@@ -1,22 +1,20 @@
|
|
1
|
-
import React from
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
label?: string;
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
declare const CustomTreeView: React.FC<CustomTreeViewProps>;
|
22
|
-
export default CustomTreeView;
|
1
|
+
import React from "react";
|
2
|
+
import "../assets/css/custom-treeview.css";
|
3
|
+
export interface TreeNode {
|
4
|
+
label: string;
|
5
|
+
value: string;
|
6
|
+
children?: TreeNode[];
|
7
|
+
}
|
8
|
+
export interface CustomTreeViewProps {
|
9
|
+
label?: string;
|
10
|
+
value: string | string[] | null;
|
11
|
+
treeData: TreeNode[];
|
12
|
+
placeholder?: string;
|
13
|
+
multi?: boolean;
|
14
|
+
required?: boolean;
|
15
|
+
submitted?: boolean;
|
16
|
+
errorMessage?: string;
|
17
|
+
onChange: (selected: string | string[] | null) => void;
|
18
|
+
}
|
19
|
+
declare const CustomTreeView: React.FC<CustomTreeViewProps>;
|
20
|
+
export default CustomTreeView;
|
@@ -1,157 +1,168 @@
|
|
1
|
-
"use strict";
|
2
|
-
// src/components/CustomTreeView.tsx
|
3
|
-
var __assign = (this && this.__assign) || function () {
|
4
|
-
__assign = Object.assign || function(t) {
|
5
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
6
|
-
s = arguments[i];
|
7
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
8
|
-
t[p] = s[p];
|
9
|
-
}
|
10
|
-
return t;
|
11
|
-
};
|
12
|
-
return __assign.apply(this, arguments);
|
13
|
-
};
|
14
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
15
|
-
if (k2 === undefined) k2 = k;
|
16
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
17
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
18
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
19
|
-
}
|
20
|
-
Object.defineProperty(o, k2, desc);
|
21
|
-
}) : (function(o, m, k, k2) {
|
22
|
-
if (k2 === undefined) k2 = k;
|
23
|
-
o[k2] = m[k];
|
24
|
-
}));
|
25
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
26
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
27
|
-
}) : function(o, v) {
|
28
|
-
o["default"] = v;
|
29
|
-
});
|
30
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
31
|
-
if (mod && mod.__esModule) return mod;
|
32
|
-
var result = {};
|
33
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
34
|
-
__setModuleDefault(result, mod);
|
35
|
-
return result;
|
36
|
-
};
|
37
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
38
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
39
|
-
if (ar || !(i in from)) {
|
40
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
41
|
-
ar[i] = from[i];
|
42
|
-
}
|
43
|
-
}
|
44
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
45
|
-
};
|
46
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
47
|
-
var react_1 = __importStar(require("react"));
|
48
|
-
var SimpleTreeView_1 = require("@mui/x-tree-view/SimpleTreeView");
|
49
|
-
var TreeItem_1 = require("@mui/x-tree-view/TreeItem");
|
50
|
-
var fa_1 = require("react-icons/fa");
|
51
|
-
|
52
|
-
var CustomTreeView = function (_a) {
|
53
|
-
var label = _a.label, value = _a.value, treeData = _a.treeData, _b = _a.placeholder, placeholder = _b === void 0 ?
|
54
|
-
var
|
55
|
-
var
|
56
|
-
var
|
57
|
-
// Helper to find a node by value
|
58
|
-
var findNodeByValue = function (nodes, val) {
|
59
|
-
for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
|
60
|
-
var node = nodes_1[_i];
|
61
|
-
if (node.value === val)
|
62
|
-
return node;
|
63
|
-
if (node.children) {
|
64
|
-
var found = findNodeByValue(node.children, val);
|
65
|
-
if (found)
|
66
|
-
return found;
|
67
|
-
}
|
68
|
-
}
|
69
|
-
return null;
|
70
|
-
};
|
71
|
-
var findLabelByValue = function (nodes, val) {
|
72
|
-
var node = findNodeByValue(nodes, val);
|
73
|
-
return node ? node.label : val;
|
74
|
-
};
|
75
|
-
// Reflect prop value in internal state
|
76
|
-
(0, react_1.useEffect)(function () {
|
77
|
-
var initial = Array.isArray(value) ? value : value ? [value] : [];
|
78
|
-
setSelectedItems(initial);
|
79
|
-
}, [value]);
|
80
|
-
// Filter tree utility
|
81
|
-
var filterTree = function (nodes, term) {
|
82
|
-
var norm = term.toLocaleLowerCase(
|
83
|
-
var paths = [];
|
84
|
-
var filtered = nodes
|
85
|
-
.map(function (node) {
|
86
|
-
var labelNorm = node.label.toLocaleLowerCase(
|
87
|
-
var childResult = node.children
|
88
|
-
? filterTree(node.children, term)
|
89
|
-
: { filteredNodes: [], pathsToExpand: [] };
|
90
|
-
if (labelNorm.includes(norm) || childResult.filteredNodes.length) {
|
91
|
-
paths.push.apply(paths, __spreadArray([node.value], childResult.pathsToExpand, false));
|
92
|
-
return __assign(__assign({}, node), { children: childResult.filteredNodes.length > 0
|
93
|
-
? childResult.filteredNodes
|
94
|
-
: undefined });
|
95
|
-
}
|
96
|
-
return null;
|
97
|
-
})
|
98
|
-
.filter(Boolean);
|
99
|
-
return {
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
"
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
} },
|
156
|
-
|
157
|
-
|
1
|
+
"use strict";
|
2
|
+
// src/components/CustomTreeView.tsx
|
3
|
+
var __assign = (this && this.__assign) || function () {
|
4
|
+
__assign = Object.assign || function(t) {
|
5
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
6
|
+
s = arguments[i];
|
7
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
8
|
+
t[p] = s[p];
|
9
|
+
}
|
10
|
+
return t;
|
11
|
+
};
|
12
|
+
return __assign.apply(this, arguments);
|
13
|
+
};
|
14
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
15
|
+
if (k2 === undefined) k2 = k;
|
16
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
17
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
18
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
19
|
+
}
|
20
|
+
Object.defineProperty(o, k2, desc);
|
21
|
+
}) : (function(o, m, k, k2) {
|
22
|
+
if (k2 === undefined) k2 = k;
|
23
|
+
o[k2] = m[k];
|
24
|
+
}));
|
25
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
26
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
27
|
+
}) : function(o, v) {
|
28
|
+
o["default"] = v;
|
29
|
+
});
|
30
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
31
|
+
if (mod && mod.__esModule) return mod;
|
32
|
+
var result = {};
|
33
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
34
|
+
__setModuleDefault(result, mod);
|
35
|
+
return result;
|
36
|
+
};
|
37
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
38
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
39
|
+
if (ar || !(i in from)) {
|
40
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
41
|
+
ar[i] = from[i];
|
42
|
+
}
|
43
|
+
}
|
44
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
45
|
+
};
|
46
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
47
|
+
var react_1 = __importStar(require("react"));
|
48
|
+
var SimpleTreeView_1 = require("@mui/x-tree-view/SimpleTreeView");
|
49
|
+
var TreeItem_1 = require("@mui/x-tree-view/TreeItem");
|
50
|
+
var fa_1 = require("react-icons/fa");
|
51
|
+
require("../assets/css/custom-treeview.css");
|
52
|
+
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 _f = (0, react_1.useState)(""), filterTerm = _f[0], setFilterTerm = _f[1];
|
55
|
+
var _g = (0, react_1.useState)([]), selectedItems = _g[0], setSelectedItems = _g[1];
|
56
|
+
var _h = (0, react_1.useState)([]), expandedItems = _h[0], setExpandedItems = _h[1];
|
57
|
+
// Helper to find a node by value
|
58
|
+
var findNodeByValue = function (nodes, val) {
|
59
|
+
for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
|
60
|
+
var node = nodes_1[_i];
|
61
|
+
if (node.value === val)
|
62
|
+
return node;
|
63
|
+
if (node.children) {
|
64
|
+
var found = findNodeByValue(node.children, val);
|
65
|
+
if (found)
|
66
|
+
return found;
|
67
|
+
}
|
68
|
+
}
|
69
|
+
return null;
|
70
|
+
};
|
71
|
+
var findLabelByValue = function (nodes, val) {
|
72
|
+
var node = findNodeByValue(nodes, val);
|
73
|
+
return node ? node.label : val;
|
74
|
+
};
|
75
|
+
// Reflect prop value in internal state
|
76
|
+
(0, react_1.useEffect)(function () {
|
77
|
+
var initial = Array.isArray(value) ? value : value ? [value] : [];
|
78
|
+
setSelectedItems(initial);
|
79
|
+
}, [value]);
|
80
|
+
// Filter tree utility
|
81
|
+
var filterTree = function (nodes, term) {
|
82
|
+
var norm = term.toLocaleLowerCase("tr-TR");
|
83
|
+
var paths = [];
|
84
|
+
var filtered = nodes
|
85
|
+
.map(function (node) {
|
86
|
+
var labelNorm = node.label.toLocaleLowerCase("tr-TR");
|
87
|
+
var childResult = node.children
|
88
|
+
? filterTree(node.children, term)
|
89
|
+
: { filteredNodes: [], pathsToExpand: [] };
|
90
|
+
if (labelNorm.includes(norm) || childResult.filteredNodes.length) {
|
91
|
+
paths.push.apply(paths, __spreadArray([node.value], childResult.pathsToExpand, false));
|
92
|
+
return __assign(__assign({}, node), { children: childResult.filteredNodes.length > 0
|
93
|
+
? childResult.filteredNodes
|
94
|
+
: undefined });
|
95
|
+
}
|
96
|
+
return null;
|
97
|
+
})
|
98
|
+
.filter(Boolean);
|
99
|
+
return {
|
100
|
+
filteredNodes: filtered,
|
101
|
+
pathsToExpand: Array.from(new Set(paths)),
|
102
|
+
};
|
103
|
+
};
|
104
|
+
// Determine filtered nodes and which to expand
|
105
|
+
var _j = filterTerm
|
106
|
+
? filterTree(treeData, filterTerm)
|
107
|
+
: { filteredNodes: treeData, pathsToExpand: [] }, filteredNodes = _j.filteredNodes, pathsToExpand = _j.pathsToExpand;
|
108
|
+
// Auto-expand when filtering
|
109
|
+
(0, react_1.useEffect)(function () {
|
110
|
+
if (filterTerm) {
|
111
|
+
setExpandedItems(pathsToExpand);
|
112
|
+
}
|
113
|
+
}, [filterTerm, pathsToExpand]);
|
114
|
+
// Handle selection changes
|
115
|
+
var handleSelectionChange = function (_evt, itemIds) {
|
116
|
+
var newSel = Array.isArray(itemIds) ? itemIds : itemIds ? [itemIds] : [];
|
117
|
+
setSelectedItems(newSel);
|
118
|
+
onChange(multi ? newSel : newSel[0] || null);
|
119
|
+
};
|
120
|
+
// Remove single badge
|
121
|
+
var handleBadgeRemove = function (val) {
|
122
|
+
var filtered = selectedItems.filter(function (v) { return v !== val; });
|
123
|
+
setSelectedItems(filtered);
|
124
|
+
onChange(multi ? filtered : filtered[0] || null);
|
125
|
+
};
|
126
|
+
// Clear filter only
|
127
|
+
var handleReset = function () {
|
128
|
+
setFilterTerm("");
|
129
|
+
};
|
130
|
+
// Clear all selections
|
131
|
+
var handleClearAll = function () {
|
132
|
+
setSelectedItems([]);
|
133
|
+
onChange(multi ? [] : null);
|
134
|
+
setExpandedItems([]);
|
135
|
+
};
|
136
|
+
// Render tree recursively
|
137
|
+
var renderTree = function (nodes) {
|
138
|
+
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 () {
|
139
|
+
var next = multi
|
140
|
+
? selectedItems.includes(node.value)
|
141
|
+
? selectedItems.filter(function (v) { return v !== node.value; })
|
142
|
+
: __spreadArray(__spreadArray([], selectedItems, true), [node.value], false)
|
143
|
+
: [node.value];
|
144
|
+
handleSelectionChange({}, next);
|
145
|
+
}, style: { cursor: "pointer" } }, node.label || "Kök") }, node.children ? renderTree(node.children) : null)); });
|
146
|
+
};
|
147
|
+
return (react_1.default.createElement("div", null,
|
148
|
+
react_1.default.createElement("div", { className: "form-group" },
|
149
|
+
label && react_1.default.createElement("label", { className: "form-label" }, label),
|
150
|
+
react_1.default.createElement("div", { className: "treeview-input-group" },
|
151
|
+
react_1.default.createElement("input", { type: "text", value: filterTerm, onChange: function (e) { return setFilterTerm(e.target.value); }, placeholder: placeholder, className: "form-control-unreq", autoComplete: "off", name: "tree-filter-".concat(label === null || label === void 0 ? void 0 : label.replace(/\s+/g, "-").toLowerCase()), required: false }),
|
152
|
+
react_1.default.createElement("button", { type: "button", onClick: handleReset, className: "btn btn-danger bg-soft-danger", title: "Temizle" },
|
153
|
+
react_1.default.createElement(fa_1.FaTimes, null)))),
|
154
|
+
multi && selectedItems.length > 0 && (react_1.default.createElement("div", { className: "mb-2" },
|
155
|
+
selectedItems.length > 1 && (react_1.default.createElement("span", { className: "btn btn-sm btn-danger rounded-pill me-1", style: { cursor: "pointer" }, onClick: handleClearAll },
|
156
|
+
react_1.default.createElement(fa_1.FaTrash, null))),
|
157
|
+
selectedItems.map(function (val) { return (react_1.default.createElement("span", { key: val, className: "badge bg-secondary me-1", style: { cursor: "pointer" }, onClick: function () { return handleBadgeRemove(val); } },
|
158
|
+
findLabelByValue(treeData, val),
|
159
|
+
" \u00D7")); }))),
|
160
|
+
react_1.default.createElement(SimpleTreeView_1.SimpleTreeView, { checkboxSelection: true, multiSelect: multi, selectedItems: selectedItems, expandedItems: expandedItems, onSelectedItemsChange: handleSelectionChange, onExpandedItemsChange: function (_e, ids) {
|
161
|
+
var arr = Array.isArray(ids) ? ids : ids ? [ids] : [];
|
162
|
+
setExpandedItems(arr);
|
163
|
+
} }, renderTree(filteredNodes)),
|
164
|
+
submitted && required && selectedItems.length === 0 && (react_1.default.createElement("div", { className: "invalid-feedback d-block mt-2 text-danger" },
|
165
|
+
react_1.default.createElement(fa_1.FaExclamationTriangle, { className: "me-2" }),
|
166
|
+
errorMessage || "Lütfen en az bir seçim yapınız."))));
|
167
|
+
};
|
168
|
+
exports.default = CustomTreeView;
|
package/dist/index.d.ts
CHANGED
@@ -1,22 +1,22 @@
|
|
1
|
-
import AlbinaForm from './components/AlbinaForm';
|
2
|
-
import CustomButton from './components/CustomButton';
|
3
|
-
import CustomCheckbox from './components/CustomCheckbox';
|
4
|
-
import CustomDateTimePicker from './components/CustomDateTimePicker';
|
5
|
-
import CustomDivider from './components/CustomDivider';
|
6
|
-
import CustomForm from './components/CustomForm';
|
7
|
-
import CustomInput from './components/CustomInput';
|
8
|
-
import CustomModal from './components/CustomModal';
|
9
|
-
import CustomPhoneInput from './components/CustomPhoneInput';
|
10
|
-
import CustomRadioButton from './components/CustomRadioButton';
|
11
|
-
import CustomRichTextbox from './components/CustomRichTextbox';
|
12
|
-
import CustomSelect from './components/CustomSelect';
|
13
|
-
import CustomSimpleSelect from './components/CustomSimpleSelect';
|
14
|
-
import CustomTab from './components/CustomTab';
|
15
|
-
import CustomText from './components/CustomText';
|
16
|
-
import CustomTextarea from './components/CustomTextarea';
|
17
|
-
import CustomTreeView from './components/CustomTreeView';
|
18
|
-
import CustomAutocompleteInput from './components/CustomAutocompleteInput';
|
19
|
-
import CustomProgressBar from './components/CustomProgressBar';
|
20
|
-
import CustomTimeline from './components/CustomTimeline';
|
21
|
-
import CustomDatatable from './components/CustomDatatable';
|
22
|
-
export { AlbinaForm, CustomButton, CustomCheckbox, CustomDateTimePicker, CustomDivider, CustomForm, CustomInput, CustomModal, CustomPhoneInput, CustomRadioButton, CustomRichTextbox, CustomSelect, CustomSimpleSelect, CustomTab, CustomText, CustomTextarea, CustomTreeView, CustomAutocompleteInput, CustomProgressBar, CustomTimeline, CustomDatatable, };
|
1
|
+
import AlbinaForm from './components/AlbinaForm';
|
2
|
+
import CustomButton from './components/CustomButton';
|
3
|
+
import CustomCheckbox from './components/CustomCheckbox';
|
4
|
+
import CustomDateTimePicker from './components/CustomDateTimePicker';
|
5
|
+
import CustomDivider from './components/CustomDivider';
|
6
|
+
import CustomForm from './components/CustomForm';
|
7
|
+
import CustomInput from './components/CustomInput';
|
8
|
+
import CustomModal from './components/CustomModal';
|
9
|
+
import CustomPhoneInput from './components/CustomPhoneInput';
|
10
|
+
import CustomRadioButton from './components/CustomRadioButton';
|
11
|
+
import CustomRichTextbox from './components/CustomRichTextbox';
|
12
|
+
import CustomSelect from './components/CustomSelect';
|
13
|
+
import CustomSimpleSelect from './components/CustomSimpleSelect';
|
14
|
+
import CustomTab from './components/CustomTab';
|
15
|
+
import CustomText from './components/CustomText';
|
16
|
+
import CustomTextarea from './components/CustomTextarea';
|
17
|
+
import CustomTreeView from './components/CustomTreeView';
|
18
|
+
import CustomAutocompleteInput from './components/CustomAutocompleteInput';
|
19
|
+
import CustomProgressBar from './components/CustomProgressBar';
|
20
|
+
import CustomTimeline from './components/CustomTimeline';
|
21
|
+
import CustomDatatable from './components/CustomDatatable';
|
22
|
+
export { AlbinaForm, CustomButton, CustomCheckbox, CustomDateTimePicker, CustomDivider, CustomForm, CustomInput, CustomModal, CustomPhoneInput, CustomRadioButton, CustomRichTextbox, CustomSelect, CustomSimpleSelect, CustomTab, CustomText, CustomTextarea, CustomTreeView, CustomAutocompleteInput, CustomProgressBar, CustomTimeline, CustomDatatable, };
|