albinasoft-ui-package 1.0.21 → 1.0.24
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.
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
.progress-bar-container {
|
|
2
|
+
margin-bottom: 30px;
|
|
3
|
+
padding: 10px;
|
|
4
|
+
width: 100%;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.step-item {
|
|
8
|
+
cursor: pointer;
|
|
9
|
+
display: flex;
|
|
10
|
+
align-items: center;
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
position: relative;
|
|
13
|
+
z-index: 1;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.step-circle {
|
|
17
|
+
width: 30px;
|
|
18
|
+
height: 30px;
|
|
19
|
+
border-radius: 50%;
|
|
20
|
+
color: #fff;
|
|
21
|
+
display: flex;
|
|
22
|
+
justify-content: center;
|
|
23
|
+
align-items: center;
|
|
24
|
+
font-weight: bold;
|
|
25
|
+
margin-bottom: 10px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.step-label {
|
|
29
|
+
font-size: 14px;
|
|
30
|
+
font-weight: bold;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.step-line {
|
|
34
|
+
flex: 1;
|
|
35
|
+
height: 4px;
|
|
36
|
+
margin: 0 10px;
|
|
37
|
+
}
|
|
38
|
+
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "@css/ProgressBar.css";
|
|
3
|
+
interface ProgressBarProps {
|
|
4
|
+
activeStep: number;
|
|
5
|
+
stepLabels: string[];
|
|
6
|
+
onStepClick: (step: number) => void;
|
|
7
|
+
}
|
|
8
|
+
declare const ProgressBar: React.FC<ProgressBarProps>;
|
|
9
|
+
export default ProgressBar;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
var react_1 = __importDefault(require("react"));
|
|
7
|
+
require("@css/ProgressBar.css");
|
|
8
|
+
var ProgressBar = function (_a) {
|
|
9
|
+
var activeStep = _a.activeStep, stepLabels = _a.stepLabels, onStepClick = _a.onStepClick;
|
|
10
|
+
return (react_1.default.createElement("div", { className: "progress-bar-container" },
|
|
11
|
+
react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", position: "relative" } }, stepLabels.map(function (label, index) {
|
|
12
|
+
var currentStep = index + 1;
|
|
13
|
+
var isActive = activeStep >= currentStep;
|
|
14
|
+
var isCompleted = activeStep > currentStep;
|
|
15
|
+
return (react_1.default.createElement(react_1.default.Fragment, { key: label },
|
|
16
|
+
react_1.default.createElement("div", { onClick: function () { return onStepClick(currentStep); }, className: "step-item", style: {
|
|
17
|
+
cursor: activeStep === currentStep ? "default" : "pointer",
|
|
18
|
+
zIndex: isActive ? 2 : 1,
|
|
19
|
+
} },
|
|
20
|
+
react_1.default.createElement("div", { className: "step-circle", style: {
|
|
21
|
+
backgroundColor: isCompleted
|
|
22
|
+
? "#4caf50"
|
|
23
|
+
: isActive
|
|
24
|
+
? "#ffa500"
|
|
25
|
+
: "#ccc",
|
|
26
|
+
border: isActive ? "2px solid #4caf50" : "none",
|
|
27
|
+
} }, currentStep),
|
|
28
|
+
react_1.default.createElement("span", { className: "step-label", style: {
|
|
29
|
+
color: isCompleted
|
|
30
|
+
? "#4caf50"
|
|
31
|
+
: isActive
|
|
32
|
+
? "#ffa500"
|
|
33
|
+
: "#ccc",
|
|
34
|
+
} }, label)),
|
|
35
|
+
index < stepLabels.length - 1 && (react_1.default.createElement("div", { className: "step-line", style: {
|
|
36
|
+
backgroundColor: activeStep > currentStep ? "#4caf50" : "#ddd",
|
|
37
|
+
} }))));
|
|
38
|
+
}))));
|
|
39
|
+
};
|
|
40
|
+
exports.default = ProgressBar;
|
|
@@ -1,29 +1,16 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import 'react-checkbox-tree/lib/react-checkbox-tree.css';
|
|
3
|
-
export interface TreeNode {
|
|
4
|
-
label: string;
|
|
5
|
-
value: string;
|
|
6
|
-
children?: TreeNode[];
|
|
7
|
-
}
|
|
8
3
|
interface CustomTreeViewProps {
|
|
9
|
-
id?: string;
|
|
10
|
-
name?: string;
|
|
11
4
|
label?: string;
|
|
12
5
|
value: string;
|
|
13
6
|
treeData: TreeNode[];
|
|
14
7
|
placeholder?: string;
|
|
15
|
-
required?: boolean;
|
|
16
|
-
errorMessage?: string;
|
|
17
|
-
conditionalErrorVisible?: boolean;
|
|
18
|
-
conditionalErrorMessage?: string;
|
|
19
|
-
disabled?: boolean;
|
|
20
|
-
readOnly?: boolean;
|
|
21
|
-
description?: string | null;
|
|
22
|
-
tooltip?: string;
|
|
23
|
-
style?: React.CSSProperties;
|
|
24
|
-
className?: string;
|
|
25
8
|
onChange: (selected: string) => void;
|
|
26
|
-
|
|
9
|
+
}
|
|
10
|
+
export interface TreeNode {
|
|
11
|
+
label: string;
|
|
12
|
+
value: string;
|
|
13
|
+
children?: TreeNode[];
|
|
27
14
|
}
|
|
28
15
|
declare const CustomTreeView: React.FC<CustomTreeViewProps>;
|
|
29
16
|
export default CustomTreeView;
|
|
@@ -51,19 +51,20 @@ var react_checkbox_tree_1 = __importDefault(require("react-checkbox-tree"));
|
|
|
51
51
|
require("react-checkbox-tree/lib/react-checkbox-tree.css");
|
|
52
52
|
var fa_1 = require("react-icons/fa");
|
|
53
53
|
var CustomInput_1 = __importStar(require("./CustomInput"));
|
|
54
|
-
var react_bootstrap_1 = require("react-bootstrap");
|
|
55
54
|
var CustomTreeView = function (_a) {
|
|
56
|
-
var
|
|
57
|
-
var
|
|
58
|
-
var
|
|
59
|
-
var
|
|
60
|
-
var
|
|
61
|
-
var
|
|
62
|
-
var
|
|
63
|
-
var
|
|
55
|
+
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;
|
|
56
|
+
var _c = (0, react_1.useState)(value ? [value] : []), checked = _c[0], setChecked = _c[1];
|
|
57
|
+
var _d = (0, react_1.useState)([]), expanded = _d[0], setExpanded = _d[1];
|
|
58
|
+
var _e = (0, react_1.useState)(''), filterTerm = _e[0], setFilterTerm = _e[1];
|
|
59
|
+
var _f = (0, react_1.useState)(treeData), filteredTreeData = _f[0], setFilteredTreeData = _f[1];
|
|
60
|
+
var _g = (0, react_1.useState)([]), selectedPath = _g[0], setSelectedPath = _g[1];
|
|
61
|
+
var _h = (0, react_1.useState)(''), inputValue = _h[0], setInputValue = _h[1];
|
|
62
|
+
var _j = (0, react_1.useState)(false), isInputDisabled = _j[0], setIsInputDisabled = _j[1];
|
|
63
|
+
// Recursive function to add `showCheckbox` only for leaf nodes
|
|
64
64
|
var markLeafCheckboxOnly = function (nodes) {
|
|
65
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 })); });
|
|
66
66
|
};
|
|
67
|
+
// Parent Path'i Bulma (recursive)
|
|
67
68
|
var findParentPath = function (nodes, targetValue, path) {
|
|
68
69
|
if (path === void 0) { path = []; }
|
|
69
70
|
for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
|
|
@@ -80,24 +81,11 @@ var CustomTreeView = function (_a) {
|
|
|
80
81
|
}
|
|
81
82
|
return null;
|
|
82
83
|
};
|
|
83
|
-
|
|
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)
|
|
84
|
+
// Filtreleme fonksiyonu (path'leri de genişletiyoruz)
|
|
97
85
|
var filterTreeData = function (nodes, searchTerm) {
|
|
98
86
|
var pathsToExpand = [];
|
|
99
87
|
var filteredNodes = nodes.map(function (node) {
|
|
100
|
-
var nodeMatches = node.label.toLowerCase().includes(searchTerm.
|
|
88
|
+
var nodeMatches = node.label.toLowerCase().includes(searchTerm.toLocaleLowerCase('tr-TR'));
|
|
101
89
|
var children = node.children ? filterTreeData(node.children, searchTerm) : { filteredNodes: [], pathsToExpand: [] };
|
|
102
90
|
var childMatches = children.filteredNodes.length > 0;
|
|
103
91
|
if (nodeMatches || childMatches) {
|
|
@@ -108,17 +96,33 @@ var CustomTreeView = function (_a) {
|
|
|
108
96
|
}).filter(Boolean);
|
|
109
97
|
return { filteredNodes: filteredNodes, pathsToExpand: pathsToExpand };
|
|
110
98
|
};
|
|
99
|
+
// Belirtilen value'ya karşılık gelen leaf'in label'ını bulur (recursive)
|
|
100
|
+
var findLeafLabel = function (nodes, targetValue) {
|
|
101
|
+
for (var _i = 0, nodes_2 = nodes; _i < nodes_2.length; _i++) {
|
|
102
|
+
var node = nodes_2[_i];
|
|
103
|
+
if (node.value === targetValue)
|
|
104
|
+
return node.label;
|
|
105
|
+
if (node.children) {
|
|
106
|
+
var result = findLeafLabel(node.children, targetValue);
|
|
107
|
+
if (result)
|
|
108
|
+
return result;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
return null;
|
|
112
|
+
};
|
|
113
|
+
// Filtreleme işlemi
|
|
111
114
|
(0, react_1.useEffect)(function () {
|
|
112
115
|
if (filterTerm.trim() === '') {
|
|
113
116
|
setFilteredTreeData(treeData);
|
|
114
|
-
setExpanded(__spreadArray([], selectedPath, true));
|
|
117
|
+
setExpanded(__spreadArray([], selectedPath, true)); // 🔥 Seçim yapılmış path açık kalsın
|
|
115
118
|
}
|
|
116
119
|
else {
|
|
117
120
|
var _a = filterTreeData(treeData, filterTerm), filteredNodes = _a.filteredNodes, pathsToExpand = _a.pathsToExpand;
|
|
118
121
|
setFilteredTreeData(filteredNodes);
|
|
119
|
-
setExpanded(Array.from(new Set(__spreadArray(__spreadArray([], pathsToExpand, true), selectedPath, true))));
|
|
122
|
+
setExpanded(Array.from(new Set(__spreadArray(__spreadArray([], pathsToExpand, true), selectedPath, true)))); // 🔥 Genişletilecek tüm path'leri belirle
|
|
120
123
|
}
|
|
121
124
|
}, [filterTerm, treeData, selectedPath]);
|
|
125
|
+
// Kullanıcı bir leaf seçtiğinde, o leaf'in parent'larını genişlet
|
|
122
126
|
var handleCheck = function (checkedNodes) {
|
|
123
127
|
var newlySelected = checkedNodes.find(function (node) { return !checked.includes(node); });
|
|
124
128
|
var selectedLeaf = newlySelected || '';
|
|
@@ -126,61 +130,35 @@ var CustomTreeView = function (_a) {
|
|
|
126
130
|
if (selectedLeaf) {
|
|
127
131
|
var parentPath = findParentPath(treeData, selectedLeaf);
|
|
128
132
|
if (parentPath) {
|
|
129
|
-
setSelectedPath(parentPath);
|
|
130
|
-
setExpanded(parentPath);
|
|
131
|
-
}
|
|
132
|
-
var selectedLabel = findLeafLabelByValue(treeData, selectedLeaf);
|
|
133
|
-
if (selectedLabel) {
|
|
134
|
-
setFilterTerm(selectedLabel);
|
|
135
|
-
setReadOnly(true);
|
|
133
|
+
setSelectedPath(parentPath); // 🔥 Kalıcı olarak bu path'i hatırla
|
|
134
|
+
setExpanded(parentPath); // 🔥 Yalnızca bu leaf'in parent path'i açık kalacak
|
|
136
135
|
}
|
|
136
|
+
var selectedLabel = findLeafLabel(treeData, selectedLeaf) || '';
|
|
137
|
+
setInputValue(selectedLabel);
|
|
138
|
+
setIsInputDisabled(true);
|
|
137
139
|
}
|
|
140
|
+
setFilterTerm('');
|
|
138
141
|
onChange(selectedLeaf);
|
|
139
142
|
};
|
|
140
143
|
var handleReset = function () {
|
|
141
144
|
setFilterTerm('');
|
|
142
145
|
setChecked([]);
|
|
143
146
|
setExpanded([]);
|
|
144
|
-
|
|
147
|
+
setInputValue('');
|
|
148
|
+
setIsInputDisabled(false);
|
|
145
149
|
};
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
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); } })),
|
|
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: {
|
|
161
|
-
check: react_1.default.createElement(fa_1.FaCheckSquare, { color: "#4caf50" }),
|
|
162
|
-
uncheck: react_1.default.createElement(fa_1.FaSquare, { color: "currentColor" }),
|
|
163
|
-
halfCheck: react_1.default.createElement(fa_1.FaMinusSquare, { color: "#ff9800" }),
|
|
164
|
-
expandClose: react_1.default.createElement(fa_1.FaChevronRight, { color: "#3f51b5" }),
|
|
165
|
-
expandOpen: react_1.default.createElement(fa_1.FaChevronDown, { color: "#3f51b5" }),
|
|
166
|
-
parentClose: react_1.default.createElement(fa_1.FaFolder, { color: "#ff9800" }),
|
|
167
|
-
parentOpen: react_1.default.createElement(fa_1.FaFolderOpen, { color: "#ff9800" }),
|
|
168
|
-
leaf: react_1.default.createElement(fa_1.FaFile, { color: "#607d8b" }),
|
|
169
|
-
} }),
|
|
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.')))),
|
|
175
|
-
conditionalErrorVisible && (react_1.default.createElement("div", { className: "conditional-error-message text-warning" },
|
|
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)))),
|
|
180
|
-
description && (react_1.default.createElement("div", { className: "form-description text-secondary" },
|
|
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)))))));
|
|
150
|
+
return (react_1.default.createElement("div", null,
|
|
151
|
+
label && react_1.default.createElement("label", null, label),
|
|
152
|
+
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); } }),
|
|
153
|
+
react_1.default.createElement(react_checkbox_tree_1.default, { nodes: markLeafCheckboxOnly(filteredTreeData), checked: checked, expanded: expanded, onCheck: handleCheck, onExpand: setExpanded, icons: {
|
|
154
|
+
check: react_1.default.createElement(fa_1.FaCheckSquare, { color: "#4caf50" }),
|
|
155
|
+
uncheck: react_1.default.createElement(fa_1.FaSquare, { color: "currentColor" }),
|
|
156
|
+
halfCheck: react_1.default.createElement(fa_1.FaMinusSquare, { color: "#ff9800" }),
|
|
157
|
+
expandClose: react_1.default.createElement(fa_1.FaChevronRight, { color: "#3f51b5" }),
|
|
158
|
+
expandOpen: react_1.default.createElement(fa_1.FaChevronDown, { color: "#3f51b5" }),
|
|
159
|
+
parentClose: react_1.default.createElement(fa_1.FaFolder, { color: "#ff9800" }),
|
|
160
|
+
parentOpen: react_1.default.createElement(fa_1.FaFolderOpen, { color: "#ff9800" }),
|
|
161
|
+
leaf: react_1.default.createElement(fa_1.FaFile, { color: "#607d8b" }),
|
|
162
|
+
} })));
|
|
185
163
|
};
|
|
186
164
|
exports.default = CustomTreeView;
|