albinasoft-ui-package 1.1.44 → 1.1.45

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.
Files changed (59) hide show
  1. package/LICENSE +21 -21
  2. package/dist/assets/css/custom-autocomplete-input.css +49 -49
  3. package/dist/assets/css/custom-datatable.css +2 -2
  4. package/dist/assets/css/custom-datetime-picker.css +779 -779
  5. package/dist/assets/css/custom-progress-bar.css +37 -37
  6. package/dist/assets/css/custom-select.css +62 -62
  7. package/dist/assets/css/custom-simple-select.css +117 -117
  8. package/dist/assets/css/custom-timeline.css +43 -43
  9. package/dist/assets/css/custom-treeview.css +83 -83
  10. package/dist/assets/css/dark.css +2159 -2159
  11. package/dist/assets/css/main.css +26664 -26664
  12. package/dist/components/AlbinaForm.d.ts +28 -28
  13. package/dist/components/AlbinaForm.js +88 -88
  14. package/dist/components/CustomAutocompleteInput.d.ts +23 -23
  15. package/dist/components/CustomAutocompleteInput.js +185 -185
  16. package/dist/components/CustomButton.d.ts +14 -14
  17. package/dist/components/CustomButton.js +98 -98
  18. package/dist/components/CustomCheckbox.d.ts +20 -20
  19. package/dist/components/CustomCheckbox.js +58 -58
  20. package/dist/components/CustomDatatable.d.ts +42 -42
  21. package/dist/components/CustomDatatable.js +92 -92
  22. package/dist/components/CustomDateTimePicker.d.ts +33 -33
  23. package/dist/components/CustomDateTimePicker.js +91 -91
  24. package/dist/components/CustomDivider.d.ts +51 -51
  25. package/dist/components/CustomDivider.js +87 -87
  26. package/dist/components/CustomFileUploader.d.ts +65 -65
  27. package/dist/components/CustomFileUploader.js +460 -460
  28. package/dist/components/CustomForm.d.ts +225 -225
  29. package/dist/components/CustomForm.js +259 -259
  30. package/dist/components/CustomInput.d.ts +37 -37
  31. package/dist/components/CustomInput.js +85 -85
  32. package/dist/components/CustomModal.d.ts +15 -15
  33. package/dist/components/CustomModal.js +17 -17
  34. package/dist/components/CustomPhoneInput.d.ts +29 -29
  35. package/dist/components/CustomPhoneInput.js +251 -251
  36. package/dist/components/CustomProgressBar.d.ts +9 -9
  37. package/dist/components/CustomProgressBar.js +40 -40
  38. package/dist/components/CustomRadioButton.d.ts +25 -25
  39. package/dist/components/CustomRadioButton.js +34 -34
  40. package/dist/components/CustomRichTextbox.d.ts +14 -14
  41. package/dist/components/CustomRichTextbox.js +89 -89
  42. package/dist/components/CustomSelect.d.ts +32 -32
  43. package/dist/components/CustomSelect.js +193 -193
  44. package/dist/components/CustomSimpleSelect.d.ts +21 -21
  45. package/dist/components/CustomSimpleSelect.js +64 -64
  46. package/dist/components/CustomTab.d.ts +44 -44
  47. package/dist/components/CustomTab.js +122 -122
  48. package/dist/components/CustomText.d.ts +72 -72
  49. package/dist/components/CustomText.js +158 -158
  50. package/dist/components/CustomTextarea.d.ts +22 -22
  51. package/dist/components/CustomTextarea.js +33 -33
  52. package/dist/components/CustomTimeline.d.ts +30 -30
  53. package/dist/components/CustomTimeline.js +80 -80
  54. package/dist/components/CustomTreeView.d.ts +20 -20
  55. package/dist/components/CustomTreeView.js +197 -168
  56. package/dist/index.d.ts +22 -22
  57. package/dist/index.js +48 -48
  58. package/package.json +44 -44
  59. 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,20 +1,20 @@
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
+ 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,168 +1,197 @@
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;
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
+ // Seçili öğelerin köke kadar olan yollarını aç
81
+ (0, react_1.useEffect)(function () {
82
+ if (!value || !treeData || treeData.length === 0)
83
+ return;
84
+ var valuesArray = Array.isArray(value) ? value : [value];
85
+ 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
+ valuesArray.forEach(function (val) {
102
+ var path = findPathToNode(treeData, val);
103
+ if (path) {
104
+ path.forEach(function (p) { return pathsToExpand.add(p); });
105
+ }
106
+ });
107
+ setExpandedItems(Array.from(pathsToExpand));
108
+ }, [value, treeData]);
109
+ // Filter tree utility
110
+ var filterTree = function (nodes, term) {
111
+ var norm = term.toLocaleLowerCase("tr-TR");
112
+ var paths = [];
113
+ var filtered = nodes
114
+ .map(function (node) {
115
+ var labelNorm = node.label.toLocaleLowerCase("tr-TR");
116
+ var childResult = node.children
117
+ ? filterTree(node.children, term)
118
+ : { filteredNodes: [], pathsToExpand: [] };
119
+ if (labelNorm.includes(norm) || childResult.filteredNodes.length) {
120
+ paths.push.apply(paths, __spreadArray([node.value], childResult.pathsToExpand, false));
121
+ return __assign(__assign({}, node), { children: childResult.filteredNodes.length > 0
122
+ ? childResult.filteredNodes
123
+ : undefined });
124
+ }
125
+ return null;
126
+ })
127
+ .filter(Boolean);
128
+ return {
129
+ filteredNodes: filtered,
130
+ pathsToExpand: Array.from(new Set(paths)),
131
+ };
132
+ };
133
+ // Determine filtered nodes and which to expand
134
+ var _j = filterTerm
135
+ ? filterTree(treeData, filterTerm)
136
+ : { filteredNodes: treeData, pathsToExpand: [] }, filteredNodes = _j.filteredNodes, pathsToExpand = _j.pathsToExpand;
137
+ // Auto-expand when filtering
138
+ (0, react_1.useEffect)(function () {
139
+ if (filterTerm) {
140
+ setExpandedItems(pathsToExpand);
141
+ }
142
+ }, [filterTerm, pathsToExpand]);
143
+ // Handle selection changes
144
+ var handleSelectionChange = function (_evt, itemIds) {
145
+ var newSel = Array.isArray(itemIds) ? itemIds : itemIds ? [itemIds] : [];
146
+ setSelectedItems(newSel);
147
+ onChange(multi ? newSel : newSel[0] || null);
148
+ };
149
+ // Remove single badge
150
+ var handleBadgeRemove = function (val) {
151
+ var filtered = selectedItems.filter(function (v) { return v !== val; });
152
+ setSelectedItems(filtered);
153
+ onChange(multi ? filtered : filtered[0] || null);
154
+ };
155
+ // Clear filter only
156
+ var handleReset = function () {
157
+ setFilterTerm("");
158
+ };
159
+ // Clear all selections
160
+ var handleClearAll = function () {
161
+ setSelectedItems([]);
162
+ onChange(multi ? [] : null);
163
+ setExpandedItems([]);
164
+ };
165
+ // Render tree recursively
166
+ var renderTree = function (nodes) {
167
+ 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
+ var next = multi
169
+ ? selectedItems.includes(node.value)
170
+ ? selectedItems.filter(function (v) { return v !== node.value; })
171
+ : __spreadArray(__spreadArray([], selectedItems, true), [node.value], false)
172
+ : [node.value];
173
+ handleSelectionChange({}, next);
174
+ }, style: { cursor: "pointer" } }, node.label || "Kök") }, node.children ? renderTree(node.children) : null)); });
175
+ };
176
+ return (react_1.default.createElement("div", null,
177
+ react_1.default.createElement("div", { className: "form-group" },
178
+ label && react_1.default.createElement("label", { className: "form-label" }, label),
179
+ react_1.default.createElement("div", { className: "treeview-input-group" },
180
+ 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 }),
181
+ react_1.default.createElement("button", { type: "button", onClick: handleReset, className: "btn btn-danger bg-soft-danger", title: "Temizle" },
182
+ react_1.default.createElement(fa_1.FaTimes, null)))),
183
+ multi && selectedItems.length > 0 && (react_1.default.createElement("div", { className: "mb-2" },
184
+ selectedItems.length > 1 && (react_1.default.createElement("span", { className: "btn btn-sm btn-danger rounded-pill me-1", style: { cursor: "pointer" }, onClick: handleClearAll },
185
+ react_1.default.createElement(fa_1.FaTrash, null))),
186
+ 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); } },
187
+ findLabelByValue(treeData, val),
188
+ " \u00D7")); }))),
189
+ react_1.default.createElement(SimpleTreeView_1.SimpleTreeView, { checkboxSelection: true, multiSelect: multi, selectedItems: selectedItems, expandedItems: expandedItems, onSelectedItemsChange: handleSelectionChange, onExpandedItemsChange: function (_e, ids) {
190
+ var arr = Array.isArray(ids) ? ids : ids ? [ids] : [];
191
+ setExpandedItems(arr);
192
+ } }, renderTree(filteredNodes)),
193
+ submitted && required && selectedItems.length === 0 && (react_1.default.createElement("div", { className: "invalid-feedback d-block mt-2 text-danger" },
194
+ react_1.default.createElement(fa_1.FaExclamationTriangle, { className: "me-2" }),
195
+ errorMessage || "Lütfen en az bir seçim yapınız."))));
196
+ };
197
+ 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, };