albinasoft-ui-package 1.0.16 → 1.0.18

package/dist/components/CustomInput.d.ts

@@ -10,7 +10,7 @@ declare enum InputType {
 interface CustomInputProps {
     id?: string;
     name?: string;
-    label: string;
+    label?: string;
     inputType?: InputType;
     value: string;
     placeholder?: string;
@@ -21,11 +21,14 @@ interface CustomInputProps {
     disabled?: boolean;
     readOnly?: boolean;
     buttonIcon?: React.ReactNode;
+    buttonClass?: string;
     buttonTooltip?: string;
     description?: string | null;
     tooltip?: string;
     style?: React.CSSProperties;
+    inputClass?: string;
     className?: string;
+    valid?: boolean;
     buttonOnClick?: () => void;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }

package/dist/components/CustomInput.js

@@ -38,9 +38,10 @@ var InputType;
 })(InputType || (InputType = {}));
 exports.InputType = InputType;
 var CustomInput = function (_a) {
-    var id = _a.id, name = _a.name, label = _a.label, _b = _a.inputType, inputType = _b === void 0 ? InputType.TEXT : _b, value = _a.value, placeholder = _a.placeholder, _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, buttonIcon = _a.buttonIcon, buttonTooltip = _a.buttonTooltip, description = _a.description, tooltip = _a.tooltip, style = _a.style, className = _a.className, buttonOnClick = _a.buttonOnClick, onChange = _a.onChange;
-    var _g = (0, react_1.useState)(false), showPassword = _g[0], setShowPassword = _g[1];
+    var id = _a.id, name = _a.name, label = _a.label, _b = _a.inputType, inputType = _b === void 0 ? InputType.TEXT : _b, value = _a.value, placeholder = _a.placeholder, _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, buttonIcon = _a.buttonIcon, buttonClass = _a.buttonClass, buttonTooltip = _a.buttonTooltip, description = _a.description, tooltip = _a.tooltip, style = _a.style, className = _a.className, _g = _a.valid, valid = _g === void 0 ? undefined : _g, buttonOnClick = _a.buttonOnClick, onChange = _a.onChange;
+    var _h = (0, react_1.useState)(false), showPassword = _h[0], setShowPassword = _h[1];
     var handleType = inputType === InputType.PASSWORD && showPassword ? InputType.TEXT : inputType;
+    var inputClass = "form-control ".concat(valid === true ? 'is-valid' : '', " ").concat(valid === false ? 'is-invalid' : '');
     var togglePasswordVisibility = function () {
         setShowPassword(function (prev) { return !prev; });
     };
@@ -49,11 +50,11 @@ var CustomInput = function (_a) {
             react_1.default.createElement("label", { htmlFor: id, className: "form-label" }, label),
             react_1.default.createElement("div", { className: "input-group position-relative" },
                 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("input", { id: id, name: name, type: handleType, value: value, placeholder: placeholder, onChange: onChange, className: "form-control", style: style, required: required, disabled: disabled, autoComplete: "new-password" // Modern tarayıcılarda autocomplete autofill engellemek için
-                     }))) : (react_1.default.createElement("input", { id: id, name: name, type: handleType, value: value, placeholder: placeholder, onChange: onChange, className: "form-control", style: style, required: required, disabled: disabled, autoComplete: "new-password" // Modern tarayıcılarda autocomplete autofill engellemek için
+                    react_1.default.createElement("input", { id: id, name: name, type: handleType, value: value, placeholder: placeholder, onChange: onChange, className: inputClass, style: style, required: required, disabled: disabled, readOnly: readOnly, autoComplete: "new-password" // Modern tarayıcılarda autocomplete autofill engellemek için
+                     }))) : (react_1.default.createElement("input", { id: id, name: name, type: handleType, value: value, placeholder: placeholder, onChange: onChange, className: inputClass, style: style, required: required, disabled: disabled, readOnly: readOnly, autoComplete: "new-password" // Modern tarayıcılarda autocomplete autofill engellemek için
                  })),
                 inputType === InputType.PASSWORD && (react_1.default.createElement("button", { type: "button", onClick: togglePasswordVisibility, className: "btn btn-outline-secondary", title: showPassword ? "Parolayı Gizle" : "Parolayı Göster" }, showPassword ? react_1.default.createElement(fa_1.FaEyeSlash, null) : react_1.default.createElement(fa_1.FaEye, null))),
-                buttonIcon && buttonOnClick && (react_1.default.createElement("button", { type: "button", onClick: buttonOnClick, className: "btn btn-outline-secondary", title: buttonTooltip || "" }, buttonIcon)),
+                buttonIcon && buttonOnClick && (react_1.default.createElement("button", { type: "button", onClick: buttonOnClick, className: buttonClass || "btn btn-outline-secondary", title: buttonTooltip || "" }, buttonIcon)),
                 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)),

package/dist/components/CustomTreeView.d.ts

@@ -1,15 +1,29 @@
 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;
-}
-export interface TreeNode {
-    label: string;
-    value: string;
-    children?: TreeNode[];
+    hasTriedToSubmit?: boolean;
 }
 declare const CustomTreeView: React.FC<CustomTreeViewProps>;
 export default CustomTreeView;

package/dist/components/CustomTreeView.js

@@ -51,18 +51,19 @@ 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 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 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 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++) {
@@ -79,6 +80,19 @@ 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 = [];
@@ -94,19 +108,17 @@ 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)); // 🔥 Seçim yapılmış path açık kalsın
+            setExpanded(__spreadArray([], selectedPath, true));
         }
         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)))); // 🔥 Genişletilecek tüm path'leri belirle
+            setExpanded(Array.from(new Set(__spreadArray(__spreadArray([], pathsToExpand, true), selectedPath, true))));
         }
     }, [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 || '';
@@ -114,25 +126,61 @@ var CustomTreeView = function (_a) {
         if (selectedLeaf) {
             var parentPath = findParentPath(treeData, selectedLeaf);
             if (parentPath) {
-                setSelectedPath(parentPath); // 🔥 Kalıcı olarak bu path'i hatırla
-                setExpanded(parentPath); // 🔥 Yalnızca bu leaf'in parent path'i açık kalacak
+                setSelectedPath(parentPath);
+                setExpanded(parentPath);
+            }
+            var selectedLabel = findLeafLabelByValue(treeData, selectedLeaf);
+            if (selectedLabel) {
+                setFilterTerm(selectedLabel);
+                setReadOnly(true);
             }
         }
-        setFilterTerm(''); // 🔥 Arama kutusunu temizle
         onChange(selectedLeaf);
     };
-    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", label: "Ara", 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" }),
-            } })));
+    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)))))));
 };
 exports.default = CustomTreeView;

package/package.json

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