albinasoft-ui-package 1.1.5 → 1.1.7

package/dist/components/CustomTreeView.d.ts

@@ -4,12 +4,18 @@ export interface TreeNode {
     value: string;
     children?: TreeNode[];
 }
-interface CustomTreeViewProps {
+export interface CustomTreeViewProps {
+    /** Eğer başlık göstermek isterseniz */
     label?: string;
+    /** Seçili değerin (veya çokluysa dizi halinde) prop’u */
     value: string | string[] | null;
+    /** Gösterilecek ağaç verisi */
     treeData: TreeNode[];
+    /** Input placeholder’ı */
     placeholder?: string;
+    /** Çoklu seçim modu */
     multi?: boolean;
+    /** Seçim değiştiğinde çağrılır */
     onChange: (selected: string | string[] | null) => void;
 }
 declare const CustomTreeView: React.FC<CustomTreeViewProps>;

package/dist/components/CustomTreeView.js

@@ -1,4 +1,5 @@
 "use strict";
+// src/components/CustomTreeView.tsx
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -51,10 +52,9 @@ var CustomInput_1 = __importStar(require("./CustomInput"));
 var CustomTreeView = function (_a) {
     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, onChange = _a.onChange;
     var _d = (0, react_1.useState)(''), filterTerm = _d[0], setFilterTerm = _d[1];
-    var _e = (0, react_1.useState)([]), selectedItems = _e[0], setSelectedItems = _e[1];
-    var _f = (0, react_1.useState)([]), expandedItems = _f[0], setExpandedItems = _f[1];
-    var _g = (0, react_1.useState)(''), inputValue = _g[0], setInputValue = _g[1];
-    var _h = (0, react_1.useState)(false), isInputDisabled = _h[0], setIsInputDisabled = _h[1];
+    var _f = (0, react_1.useState)([]), selectedItems = _f[0], setSelectedItems = _f[1];
+    var _g = (0, react_1.useState)([]), expandedItems = _g[0], setExpandedItems = _g[1];
+    // Ağacın tüm node ID’lerini toplar
     var getAllNodeIds = function (nodes) {
         return nodes.reduce(function (acc, node) {
             acc.push(node.value);
@@ -63,6 +63,7 @@ var CustomTreeView = function (_a) {
             return acc;
         }, []);
     };
+    // Value’dan başlık bulmak için yardımcı
     var findNodeByValue = function (nodes, val) {
         for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
             var node = nodes_1[_i];
@@ -78,114 +79,96 @@ var CustomTreeView = function (_a) {
     };
     var findLabelByValue = function (nodes, val) {
         var node = findNodeByValue(nodes, val);
-        return node ? node.label : '';
+        return node ? node.label : val;
     };
+    // Props value’dan selectedItems’e yansıt
     (0, react_1.useEffect)(function () {
-        var initialSelected = Array.isArray(value)
+        var initial = Array.isArray(value)
             ? value
             : value
                 ? [value]
                 : [];
-        setSelectedItems(initialSelected);
-        if (initialSelected.length) {
-            var labels = initialSelected.map(function (val) { return findLabelByValue(treeData, val); });
-            setInputValue(labels.join(', '));
-            setIsInputDisabled(true);
-            setExpandedItems(getAllNodeIds(treeData));
-        }
-        else {
-            setExpandedItems(getAllNodeIds(treeData));
-            setInputValue('');
-            setIsInputDisabled(false);
-        }
-    }, [value, treeData]);
+        setSelectedItems(initial);
+    }, [value]);
+    // Filtre ve expand mantığı
     var filterTree = function (nodes, term) {
-        var normalizedTerm = term.toLocaleLowerCase('tr-TR');
-        var pathsToExpand = [];
-        var filteredNodes = nodes
+        var norm = term.toLocaleLowerCase('tr-TR');
+        var paths = [];
+        var filtered = nodes
             .map(function (node) {
-            var normalizedLabel = node.label.toLocaleLowerCase('tr-TR');
-            var matches = normalizedLabel.includes(normalizedTerm);
-            var childrenResult = node.children
+            var labelNorm = node.label.toLocaleLowerCase('tr-TR');
+            var childResult = node.children
                 ? filterTree(node.children, term)
                 : { filteredNodes: [], pathsToExpand: [] };
-            if (matches || childrenResult.filteredNodes.length) {
-                pathsToExpand = __spreadArray(__spreadArray(__spreadArray([], pathsToExpand, true), [
-                    node.value
-                ], false), childrenResult.pathsToExpand, true);
-                return __assign(__assign({}, node), { children: childrenResult.filteredNodes.length > 0
-                        ? childrenResult.filteredNodes
+            if (labelNorm.includes(norm) || childResult.filteredNodes.length) {
+                paths.push.apply(paths, __spreadArray([node.value], childResult.pathsToExpand, false));
+                return __assign(__assign({}, node), { children: childResult.filteredNodes.length > 0
+                        ? childResult.filteredNodes
                         : undefined });
             }
             return null;
         })
             .filter(Boolean);
-        return { filteredNodes: filteredNodes, pathsToExpand: pathsToExpand };
+        return { filteredNodes: filtered, pathsToExpand: Array.from(new Set(paths)) };
     };
-    var _j = filterTerm
+    var _h = filterTerm
         ? filterTree(treeData, filterTerm)
-        : { filteredNodes: treeData, pathsToExpand: [] }, filteredNodes = _j.filteredNodes, pathsToExpand = _j.pathsToExpand;
+        : { filteredNodes: treeData, pathsToExpand: [] }, filteredNodes = _h.filteredNodes, pathsToExpand = _h.pathsToExpand;
+    // Yalnızca filtre yaptığımızda aç
     (0, react_1.useEffect)(function () {
         if (filterTerm) {
             setExpandedItems(pathsToExpand);
         }
     }, [filterTerm, pathsToExpand]);
-    var handleSelectionChange = function (_event, itemIds) {
-        var newSelected = Array.isArray(itemIds)
+    // Seçim değiştiğinde hem iç state’e hem de parent’a bildir
+    var handleSelectionChange = function (_evt, itemIds) {
+        var newSel = Array.isArray(itemIds)
             ? itemIds
             : itemIds
                 ? [itemIds]
                 : [];
-        setSelectedItems(newSelected);
+        setSelectedItems(newSel);
         if (multi) {
-            onChange(newSelected);
-            var labels = newSelected.map(function (val) { return findLabelByValue(treeData, val); });
-            setInputValue(labels.join(', '));
-            setIsInputDisabled(!!labels.length);
+            onChange(newSel);
         }
         else {
-            var single = newSelected[0] || null;
-            onChange(single);
-            if (single) {
-                setInputValue(findLabelByValue(treeData, single));
-                setIsInputDisabled(true);
-            }
-            else {
-                setInputValue('');
-                setIsInputDisabled(false);
-            }
+            onChange(newSel[0] || null);
         }
     };
-    var handleLabelClick = function (val) {
-        var newSelected;
-        if (multi) {
-            newSelected = selectedItems.includes(val)
-                ? selectedItems.filter(function (v) { return v !== val; })
-                : __spreadArray(__spreadArray([], selectedItems, true), [val], false);
-        }
-        else {
-            newSelected = [val];
-        }
-        // simulate SyntheticEvent
-        handleSelectionChange({}, newSelected);
+    // Badge’e tıklayıp seçimi kaldır
+    var handleBadgeRemove = function (val) {
+        var filtered = selectedItems.filter(function (v) { return v !== val; });
+        setSelectedItems(filtered);
+        onChange(multi ? filtered : filtered[0] || null);
     };
+    // Filtreyi sıfırla
     var handleReset = function () {
         setFilterTerm('');
         setSelectedItems([]);
         onChange(multi ? [] : null);
-        setInputValue('');
-        setIsInputDisabled(false);
-        setExpandedItems(getAllNodeIds(treeData));
+        setExpandedItems([]);
     };
+    // Ağaç elemanlarını render et
     var renderTree = function (nodes) {
-        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 () { return handleLabelClick(node.value); }, style: { cursor: 'pointer' } }, node.label.trim() === '' ? 'Kök' : node.label) }, node.children ? renderTree(node.children) : null)); });
+        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 () {
+                    // TreeItem label’ına tıklayınca da seçilsin
+                    var next = multi
+                        ? selectedItems.includes(node.value)
+                            ? selectedItems.filter(function (v) { return v !== node.value; })
+                            : __spreadArray(__spreadArray([], selectedItems, true), [node.value], false)
+                        : [node.value];
+                    handleSelectionChange({}, next);
+                }, style: { cursor: 'pointer' } }, node.label || 'Kök') }, node.children ? renderTree(node.children) : null)); });
     };
     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: 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(SimpleTreeView_1.SimpleTreeView, { checkboxSelection: true, multiSelect: multi, selectedItems: selectedItems, expandedItems: expandedItems, onSelectedItemsChange: handleSelectionChange, onExpandedItemsChange: function (event, itemIds) {
-                var ids = Array.isArray(itemIds) ? itemIds : itemIds ? [itemIds] : [];
-                setExpandedItems(ids);
+        react_1.default.createElement(CustomInput_1.default, { id: "tree-search", value: filterTerm, inputType: CustomInput_1.InputType.TEXT, 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); } }),
+        selectedItems.length > 0 && (react_1.default.createElement("div", { className: "mt-1" }, 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); } },
+            findLabelByValue(treeData, val),
+            " \u00D7")); }))),
+        react_1.default.createElement(SimpleTreeView_1.SimpleTreeView, { checkboxSelection: true, multiSelect: multi, selectedItems: selectedItems, expandedItems: expandedItems, onSelectedItemsChange: handleSelectionChange, onExpandedItemsChange: function (_e, ids) {
+                var arr = Array.isArray(ids) ? ids : ids ? [ids] : [];
+                setExpandedItems(arr);
             } }, renderTree(filteredNodes))));
 };
 exports.default = CustomTreeView;

package/package.json

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