npm - albinasoft-ui-package - Versions diffs - 1.0.21 → 1.0.22 - Mend

albinasoft-ui-package 1.0.21 → 1.0.22

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 (3) hide show

package/dist/components/CustomTreeView.d.ts +5 -19
package/dist/components/CustomTreeView.js +28 -76
package/package.json +1 -1

package/dist/components/CustomTreeView.d.ts CHANGED Viewed

@@ -1,29 +1,15 @@
 import React from 'react';
 import 'react-checkbox-tree/lib/react-checkbox-tree.css';
-export interface TreeNode {
-    label: string;
-    value: string;
-    children?: TreeNode[];
-}
 interface CustomTreeViewProps {
-    id?: string;
-    name?: string;
     label?: string;
     value: string;
     treeData: TreeNode[];
-    placeholder?: string;
-    required?: boolean;
-    errorMessage?: string;
-    conditionalErrorVisible?: boolean;
-    conditionalErrorMessage?: string;
-    disabled?: boolean;
-    readOnly?: boolean;
-    description?: string | null;
-    tooltip?: string;
-    style?: React.CSSProperties;
-    className?: string;
     onChange: (selected: string) => void;
-    hasTriedToSubmit?: boolean;
+}
+export interface TreeNode {
+    label: string;
+    value: string;
+    children?: TreeNode[];
 }
 declare const CustomTreeView: React.FC<CustomTreeViewProps>;
 export default CustomTreeView;

package/dist/components/CustomTreeView.js CHANGED Viewed

@@ -51,19 +51,18 @@ var react_checkbox_tree_1 = __importDefault(require("react-checkbox-tree"));
 require("react-checkbox-tree/lib/react-checkbox-tree.css");
 var fa_1 = require("react-icons/fa");
 var CustomInput_1 = __importStar(require("./CustomInput"));
-var react_bootstrap_1 = require("react-bootstrap");
 var CustomTreeView = function (_a) {
-    var id = _a.id, name = _a.name, 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.required, required = _c === void 0 ? false : _c, errorMessage = _a.errorMessage, _d = _a.conditionalErrorVisible, conditionalErrorVisible = _d === void 0 ? false : _d, conditionalErrorMessage = _a.conditionalErrorMessage, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.readOnly, readOnly = _f === void 0 ? false : _f, description = _a.description, tooltip = _a.tooltip, style = _a.style, className = _a.className, onChange = _a.onChange, _g = _a.hasTriedToSubmit, hasTriedToSubmit = _g === void 0 ? false : _g;
-    var _h = (0, react_1.useState)(value ? [value] : []), checked = _h[0], setChecked = _h[1];
-    var _j = (0, react_1.useState)([]), expanded = _j[0], setExpanded = _j[1];
-    var _k = (0, react_1.useState)(''), filterTerm = _k[0], setFilterTerm = _k[1];
-    var _l = (0, react_1.useState)(treeData), filteredTreeData = _l[0], setFilteredTreeData = _l[1];
-    var _m = (0, react_1.useState)([]), selectedPath = _m[0], setSelectedPath = _m[1];
-    var _o = (0, react_1.useState)(false), isReadOnly = _o[0], setReadOnly = _o[1];
-    var _p = (0, react_1.useState)(false), isValid = _p[0], setIsValid = _p[1];
+    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 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)
     var findParentPath = function (nodes, targetValue, path) {
         if (path === void 0) { path = []; }
         for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
@@ -80,19 +79,6 @@ var CustomTreeView = function (_a) {
         }
         return null;
     };
-    var findLeafLabelByValue = function (nodes, value) {
-        for (var _i = 0, nodes_2 = nodes; _i < nodes_2.length; _i++) {
-            var node = nodes_2[_i];
-            if (node.value === value)
-                return node.label;
-            if (node.children) {
-                var result = findLeafLabelByValue(node.children, value);
-                if (result)
-                    return result;
-            }
-        }
-        return null;
-    };
     // 🚀 Filtreleme fonksiyonu (path'leri de genişletiyoruz)
     var filterTreeData = function (nodes, searchTerm) {
         var pathsToExpand = [];
@@ -108,17 +94,19 @@ var CustomTreeView = function (_a) {
         }).filter(Boolean);
         return { filteredNodes: filteredNodes, pathsToExpand: pathsToExpand };
     };
+    // 🚀 Filtreleme işlemi
     (0, react_1.useEffect)(function () {
         if (filterTerm.trim() === '') {
             setFilteredTreeData(treeData);
-            setExpanded(__spreadArray([], selectedPath, true));
+            setExpanded(__spreadArray([], selectedPath, true)); // 🔥 Seçim yapılmış path açık kalsın
         }
         else {
             var _a = filterTreeData(treeData, filterTerm), filteredNodes = _a.filteredNodes, pathsToExpand = _a.pathsToExpand;
             setFilteredTreeData(filteredNodes);
-            setExpanded(Array.from(new Set(__spreadArray(__spreadArray([], pathsToExpand, true), selectedPath, true))));
+            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
     var handleCheck = function (checkedNodes) {
         var newlySelected = checkedNodes.find(function (node) { return !checked.includes(node); });
         var selectedLeaf = newlySelected || '';
@@ -126,61 +114,25 @@ var CustomTreeView = function (_a) {
         if (selectedLeaf) {
             var parentPath = findParentPath(treeData, selectedLeaf);
             if (parentPath) {
-                setSelectedPath(parentPath);
-                setExpanded(parentPath);
-            }
-            var selectedLabel = findLeafLabelByValue(treeData, selectedLeaf);
-            if (selectedLabel) {
-                setFilterTerm(selectedLabel);
-                setReadOnly(true);
+                setSelectedPath(parentPath); // 🔥 Kalıcı olarak bu path'i hatırla
+                setExpanded(parentPath); // 🔥 Yalnızca bu leaf'in parent path'i açık kalacak
             }
         }
+        setFilterTerm(''); // 🔥 Arama kutusunu temizle
         onChange(selectedLeaf);
     };
-    var handleReset = function () {
-        setFilterTerm('');
-        setChecked([]);
-        setExpanded([]);
-        setReadOnly(false);
-    };
-    // 🚀 Sayfa yüklendiğinde handleReset'i bir kere çalıştır
-    (0, react_1.useEffect)(function () {
-        handleCheck(['leafCheck']);
-        handleReset();
-    }, []);
-    // 🚀 Validasyon Kontrolü
-    (0, react_1.useEffect)(function () {
-        // Kullanıcı bir leaf seçmiş VE input boş değilse valid = true
-        setIsValid(checked.length > 0 && filterTerm.trim().length > 0);
-    }, [checked, filterTerm]);
-    return (react_1.default.createElement("div", { className: className },
-        react_1.default.createElement("div", { className: "form-group" },
-            tooltip ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "bottom", overlay: react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "tooltip-".concat(tooltip) }, tooltip) },
-                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); } })),
-            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: {
-                    check: react_1.default.createElement(fa_1.FaCheckSquare, { color: "#4caf50" }),
-                    uncheck: react_1.default.createElement(fa_1.FaSquare, { color: "currentColor" }),
-                    halfCheck: react_1.default.createElement(fa_1.FaMinusSquare, { color: "#ff9800" }),
-                    expandClose: react_1.default.createElement(fa_1.FaChevronRight, { color: "#3f51b5" }),
-                    expandOpen: react_1.default.createElement(fa_1.FaChevronDown, { color: "#3f51b5" }),
-                    parentClose: react_1.default.createElement(fa_1.FaFolder, { color: "#ff9800" }),
-                    parentOpen: react_1.default.createElement(fa_1.FaFolderOpen, { color: "#ff9800" }),
-                    leaf: react_1.default.createElement(fa_1.FaFile, { color: "#607d8b" }),
-                } }),
-            required && (react_1.default.createElement("div", { className: "invalid-feedback text-danger" },
-                react_1.default.createElement("div", { className: "description-icon" },
-                    react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
-                react_1.default.createElement("div", { className: "description-text" },
-                    react_1.default.createElement("span", null, errorMessage || 'Bu alan boş bırakılamaz.')))),
-            conditionalErrorVisible && (react_1.default.createElement("div", { className: "conditional-error-message text-warning" },
-                react_1.default.createElement("div", { className: "description-icon" },
-                    react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
-                react_1.default.createElement("div", { className: "description-text" },
-                    react_1.default.createElement("span", null, conditionalErrorMessage)))),
-            description && (react_1.default.createElement("div", { className: "form-description text-secondary" },
-                react_1.default.createElement("div", { className: "description-icon" },
-                    react_1.default.createElement(fa_1.FaInfoCircle, null)),
-                react_1.default.createElement("div", { className: "description-text" },
-                    react_1.default.createElement("span", null, description)))))));
+    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(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" }),
+                halfCheck: react_1.default.createElement(fa_1.FaMinusSquare, { color: "#ff9800" }),
+                expandClose: react_1.default.createElement(fa_1.FaChevronRight, { color: "#3f51b5" }),
+                expandOpen: react_1.default.createElement(fa_1.FaChevronDown, { color: "#3f51b5" }),
+                parentClose: react_1.default.createElement(fa_1.FaFolder, { color: "#ff9800" }),
+                parentOpen: react_1.default.createElement(fa_1.FaFolderOpen, { color: "#ff9800" }),
+                leaf: react_1.default.createElement(fa_1.FaFile, { color: "#607d8b" }),
+            } })));
 };
 exports.default = CustomTreeView;

package/package.json CHANGED Viewed

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