ar-design 0.3.8 → 0.3.9

package/dist/components/data-display/table/Editable.d.ts

@@ -3,7 +3,8 @@ import { TableColumnType } from "../../../libs/types";
 interface IProps<T> {
     c: TableColumnType<T>;
     item: T;
-    onEditable: (item: T) => void;
+    index: number;
+    onEditable: (item: T, index: number) => void;
 }
-declare const Editable: <T>({ c, item, onEditable }: IProps<T>) => React.JSX.Element | null;
+declare const Editable: <T>({ c, item, index, onEditable }: IProps<T>) => React.JSX.Element | null;
 export default Editable;

package/dist/components/data-display/table/Editable.js

@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import Input from "../../form/input";
 import DatePicker from "../../form/date-picker";
 import Select from "../../form/select";
-const Editable = function ({ c, item, onEditable }) {
+const Editable = function ({ c, item, index, onEditable }) {
     const key = c.key;
     const itemValue = item[c.key];
     const selectItem = c.editable?.options?.find((x) => x.value === itemValue);
@@ -12,30 +12,26 @@ const Editable = function ({ c, item, onEditable }) {
         : [];
     // states
     const [value, setValue] = useState(itemValue);
-    const [selectionItem, setSelectionItem] = useState(selectItem);
-    const [selectionItems, setSelectionItems] = useState(selectItems);
     switch (c.editable?.type) {
         case "string":
         case "number":
             return (React.createElement(Input, { variant: "borderless", value: value, onChange: (event) => {
                     const { value } = event.target;
                     setValue(value);
-                    onEditable({ ...item, [key]: c.editable?.type === "number" ? Number(value) : value });
+                    onEditable({ ...item, [key]: c.editable?.type === "number" ? Number(value) : value }, index);
                 } }));
         case "date-picker":
             return (React.createElement(DatePicker, { variant: "borderless", value: value, onChange: (value) => {
                     setValue(value);
-                    onEditable({ ...item, [key]: value });
+                    onEditable({ ...item, [key]: value }, index);
                 } }));
         case "single-select":
-            return (React.createElement(Select, { variant: "borderless", value: selectionItem, options: c.editable.options, onClick: async () => await c.editable?.method?.(), onChange: (option) => {
-                    setSelectionItem(option);
-                    onEditable({ ...item, [key]: option?.value });
+            return (React.createElement(Select, { variant: "borderless", value: selectItem, options: c.editable.options, onClick: async () => await c.editable?.method?.(), onChange: (option) => {
+                    onEditable({ ...item, [key]: option?.value }, index);
                 } }));
         case "multiple-select":
-            return (React.createElement(Select, { variant: "borderless", value: selectionItems, options: c.editable.options, onClick: async () => await c.editable?.method?.(), onChange: (options) => {
-                    setSelectionItems(options);
-                    onEditable({ ...item, [key]: options.map((option) => option.value) });
+            return (React.createElement(Select, { variant: "borderless", value: selectItems, options: c.editable.options, onClick: async () => await c.editable?.method?.(), onChange: (options) => {
+                    onEditable({ ...item, [key]: options.map((option) => option.value) }, index);
                 }, multiple: true }));
         default:
             return null;

package/dist/components/data-display/table/IProps.d.ts

@@ -142,7 +142,7 @@ interface IProps<T> extends IChildren {
      * @param operator - Kullanılan filtre operatörü.
      */
     searchedParams?: (params: SearchedParam | null, query: string, operator: FilterOperator) => void;
-    onEditable?: (item: T) => void;
+    onEditable?: (item: T, index: number) => void;
     /**
      * Sayfalama ayarları.
      */

package/dist/components/data-display/table/index.js

@@ -38,6 +38,8 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
     const _searchTimeOut = useRef(null);
     // refs -> Filter
     const _filterButton = useRef([]);
+    // refs -> Previous Selection Items
+    const _hasInitialized = useRef(false);
     // variables
     const _subrowOpenAutomatically = config.subrow?.openAutomatically ?? false;
     const _subrowSelector = config.subrow?.selector ?? "subitems";
@@ -399,7 +401,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                             return (React.createElement("div", { key: `last-before-${i}`, style: { left: `${i + 0.65}rem` }, className: "last-before" }));
                         }),
                     React.createElement("div", { className: "before" }))),
-                React.isValidElement(render) ? (render) : c.editable && onEditable ? (React.createElement(Editable, { c: c, item: item, onEditable: onEditable })) : (render),
+                React.isValidElement(render) ? (render) : c.editable && onEditable ? (React.createElement(Editable, { c: c, item: item, index: index, onEditable: onEditable })) : (render),
                 config.isTreeView && cIndex === 0 && (React.createElement("div", { className: "after" },
                     React.createElement("div", { className: "circle" }))))));
     };
@@ -426,13 +428,14 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
     };
     // useEffects
     useEffect(() => {
-        // Eğer `previousSelections` özelliğinden değer geliyorsa bu daha önce seçim yapılmış öğeleri gönderiyorum
-        // demektir ve otomatik olarak seçim yap demek anlamına gekmektedir.
+        if (_hasInitialized.current)
+            return;
         if (previousSelections && previousSelections.length > 0) {
             const validSelections = data.filter((item) => previousSelections.some((selected) => JSON.stringify(selected) === JSON.stringify(item)));
             setSelectionItems(validSelections);
+            _hasInitialized.current = true; // sadece bir kez ayarla
         }
-    }, [previousSelections]);
+    }, [previousSelections, data]);
     useEffect(() => {
         if (config?.isServerSide && searchedParams) {
             const searchRecord = {};
@@ -475,15 +478,12 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
             pagination.onChange(1);
     }, [checkboxSelectedParams]);
     useEffect(() => {
-        if (!selections)
-            return;
-        selections(selectionItems);
-    }, [selectionItems]);
-    useEffect(() => {
-        if (!selections)
-            return;
-        if (_checkboxItems.current.length > 0) {
-            setSelectAll(_checkboxItems.current.every((item) => item?.checked === true));
+        if (typeof selections === "function" && Array.isArray(selectionItems)) {
+            selections(selectionItems);
+        }
+        if (Array.isArray(_checkboxItems.current) && _checkboxItems.current.length > 0) {
+            const allChecked = _checkboxItems.current.every((item) => item?.checked === true);
+            setSelectAll(allChecked);
         }
     }, [selectionItems, currentPage]);
     useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",