albinasoft-ui-package 1.0.22 → 1.0.25

package/dist/assets/css/ProgressBar.css

@@ -0,0 +1,38 @@
+.progress-bar-container {
+    margin-bottom: 30px;
+    padding: 10px;
+    width: 100%;
+  }
+  
+  .step-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    position: relative;
+    z-index: 1;
+  }
+  
+  .step-circle {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+  
+  .step-label {
+    font-size: 14px;
+    font-weight: bold;
+  }
+  
+  .step-line {
+    flex: 1;
+    height: 4px;
+    margin: 0 10px;
+  }
+  

package/dist/components/CustomProgressBar.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import "@css/ProgressBar.css";
+interface ProgressBarProps {
+    activeStep: number;
+    stepLabels: string[];
+    onStepClick: (step: number) => void;
+}
+declare const ProgressBar: React.FC<ProgressBarProps>;
+export default ProgressBar;

package/dist/components/CustomProgressBar.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+require("@css/ProgressBar.css");
+var ProgressBar = function (_a) {
+    var activeStep = _a.activeStep, stepLabels = _a.stepLabels, onStepClick = _a.onStepClick;
+    return (react_1.default.createElement("div", { className: "progress-bar-container" },
+        react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", position: "relative" } }, stepLabels.map(function (label, index) {
+            var currentStep = index + 1;
+            var isActive = activeStep >= currentStep;
+            var isCompleted = activeStep > currentStep;
+            return (react_1.default.createElement(react_1.default.Fragment, { key: label },
+                react_1.default.createElement("div", { onClick: function () { return onStepClick(currentStep); }, className: "step-item", style: {
+                        cursor: activeStep === currentStep ? "default" : "pointer",
+                        zIndex: isActive ? 2 : 1,
+                    } },
+                    react_1.default.createElement("div", { className: "step-circle", style: {
+                            backgroundColor: isCompleted
+                                ? "#4caf50"
+                                : isActive
+                                    ? "#ffa500"
+                                    : "#ccc",
+                            border: isActive ? "2px solid #4caf50" : "none",
+                        } }, currentStep),
+                    react_1.default.createElement("span", { className: "step-label", style: {
+                            color: isCompleted
+                                ? "#4caf50"
+                                : isActive
+                                    ? "#ffa500"
+                                    : "#ccc",
+                        } }, label)),
+                index < stepLabels.length - 1 && (react_1.default.createElement("div", { className: "step-line", style: {
+                        backgroundColor: activeStep > currentStep ? "#4caf50" : "#ddd",
+                    } }))));
+        }))));
+};
+exports.default = ProgressBar;

package/dist/components/CustomTreeView.d.ts

@@ -4,6 +4,7 @@ interface CustomTreeViewProps {
     label?: string;
     value: string;
     treeData: TreeNode[];
+    placeholder?: string;
     onChange: (selected: string) => void;
 }
 export interface TreeNode {

package/dist/components/CustomTreeView.js

@@ -52,17 +52,19 @@ require("react-checkbox-tree/lib/react-checkbox-tree.css");
 var fa_1 = require("react-icons/fa");
 var CustomInput_1 = __importStar(require("./CustomInput"));
 var CustomTreeView = function (_a) {
-    var label = _a.label, value = _a.value, treeData = _a.treeData, onChange = _a.onChange;
-    var _b = (0, react_1.useState)(value ? [value] : []), checked = _b[0], setChecked = _b[1];
-    var _c = (0, react_1.useState)([]), expanded = _c[0], setExpanded = _c[1];
-    var _d = (0, react_1.useState)(''), filterTerm = _d[0], setFilterTerm = _d[1];
-    var _e = (0, react_1.useState)(treeData), filteredTreeData = _e[0], setFilteredTreeData = _e[1];
-    var _f = (0, react_1.useState)([]), selectedPath = _f[0], setSelectedPath = _f[1]; // 🔥 Seçilen path
-    // 🚀 Recursive function to add `showCheckbox` only for leaf nodes
+    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;
+    var _c = (0, react_1.useState)(value ? [value] : []), checked = _c[0], setChecked = _c[1];
+    var _d = (0, react_1.useState)([]), expanded = _d[0], setExpanded = _d[1];
+    var _e = (0, react_1.useState)(''), filterTerm = _e[0], setFilterTerm = _e[1];
+    var _f = (0, react_1.useState)(treeData), filteredTreeData = _f[0], setFilteredTreeData = _f[1];
+    var _g = (0, react_1.useState)([]), selectedPath = _g[0], setSelectedPath = _g[1];
+    var _h = (0, react_1.useState)(''), inputValue = _h[0], setInputValue = _h[1];
+    var _j = (0, react_1.useState)(false), isInputDisabled = _j[0], setIsInputDisabled = _j[1];
+    // Recursive function to add `showCheckbox` only for leaf nodes
     var markLeafCheckboxOnly = function (nodes) {
         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 })); });
     };
-    // 🚀 Parent Path'i Bulma (recursive)
+    // Parent Path'i Bulma (recursive)
     var findParentPath = function (nodes, targetValue, path) {
         if (path === void 0) { path = []; }
         for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
@@ -79,11 +81,11 @@ var CustomTreeView = function (_a) {
         }
         return null;
     };
-    // 🚀 Filtreleme fonksiyonu (path'leri de genişletiyoruz)
+    // Filtreleme fonksiyonu (path'leri de genişletiyoruz)
     var filterTreeData = function (nodes, searchTerm) {
         var pathsToExpand = [];
         var filteredNodes = nodes.map(function (node) {
-            var nodeMatches = node.label.toLowerCase().includes(searchTerm.toLowerCase());
+            var nodeMatches = node.label.toLocaleLowerCase('tr-TR').includes(searchTerm.toLocaleLowerCase('tr-TR'));
             var children = node.children ? filterTreeData(node.children, searchTerm) : { filteredNodes: [], pathsToExpand: [] };
             var childMatches = children.filteredNodes.length > 0;
             if (nodeMatches || childMatches) {
@@ -94,7 +96,21 @@ var CustomTreeView = function (_a) {
         }).filter(Boolean);
         return { filteredNodes: filteredNodes, pathsToExpand: pathsToExpand };
     };
-    // 🚀 Filtreleme işlemi
+    // Belirtilen value'ya karşılık gelen leaf'in label'ını bulur (recursive)
+    var findLeafLabel = function (nodes, targetValue) {
+        for (var _i = 0, nodes_2 = nodes; _i < nodes_2.length; _i++) {
+            var node = nodes_2[_i];
+            if (node.value === targetValue)
+                return node.label;
+            if (node.children) {
+                var result = findLeafLabel(node.children, targetValue);
+                if (result)
+                    return result;
+            }
+        }
+        return null;
+    };
+    // Filtreleme işlemi
     (0, react_1.useEffect)(function () {
         if (filterTerm.trim() === '') {
             setFilteredTreeData(treeData);
@@ -106,7 +122,7 @@ var CustomTreeView = function (_a) {
             setExpanded(Array.from(new Set(__spreadArray(__spreadArray([], pathsToExpand, true), selectedPath, true)))); // 🔥 Genişletilecek tüm path'leri belirle
         }
     }, [filterTerm, treeData, selectedPath]);
-    // 🚀 Kullanıcı bir leaf seçtiğinde, o leaf'in parent'larını genişlet
+    // Kullanıcı bir leaf seçtiğinde, o leaf'in parent'larını genişlet
     var handleCheck = function (checkedNodes) {
         var newlySelected = checkedNodes.find(function (node) { return !checked.includes(node); });
         var selectedLeaf = newlySelected || '';
@@ -117,13 +133,23 @@ var CustomTreeView = function (_a) {
                 setSelectedPath(parentPath); // 🔥 Kalıcı olarak bu path'i hatırla
                 setExpanded(parentPath); // 🔥 Yalnızca bu leaf'in parent path'i açık kalacak
             }
+            var selectedLabel = findLeafLabel(treeData, selectedLeaf) || '';
+            setInputValue(selectedLabel);
+            setIsInputDisabled(true);
         }
-        setFilterTerm(''); // 🔥 Arama kutusunu temizle
+        setFilterTerm('');
         onChange(selectedLeaf);
     };
+    var handleReset = function () {
+        setFilterTerm('');
+        setChecked([]);
+        setExpanded([]);
+        setInputValue('');
+        setIsInputDisabled(false);
+    };
     return (react_1.default.createElement("div", null,
         label && react_1.default.createElement("label", null, label),
-        react_1.default.createElement(CustomInput_1.default, { id: "tree-search", value: filterTerm, inputType: CustomInput_1.InputType.TEXT, placeholder: "Ara...", onChange: function (e) { return setFilterTerm(e.target.value); } }),
+        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); } }),
         react_1.default.createElement(react_checkbox_tree_1.default, { nodes: markLeafCheckboxOnly(filteredTreeData), checked: checked, expanded: expanded, onCheck: handleCheck, onExpand: setExpanded, icons: {
                 check: react_1.default.createElement(fa_1.FaCheckSquare, { color: "#4caf50" }),
                 uncheck: react_1.default.createElement(fa_1.FaSquare, { color: "currentColor" }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "albinasoft-ui-package",
-  "version": "1.0.22",
+  "version": "1.0.25",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {