ar-design 0.3.95 → 0.3.96

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

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

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

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import Input from "../../form/input";
 import DatePicker from "../../form/date-picker";
 import Select from "../../form/select";
-const Editable = function ({ c, item, index, onEditable, validation }) {
+const Editable = function ({ c, item, trackByValue, onEditable, validation }) {
     // variables
     const key = c.key;
     const itemValue = item[c.key];
@@ -11,7 +11,7 @@ const Editable = function ({ c, item, index, onEditable, validation }) {
     const selectItems = Array.isArray(itemValue)
         ? c.editable?.options?.filter((x) => itemValue.includes(x.value))
         : [];
-    const _vText = validation?.[`${c.key}_${index}`];
+    const _vText = validation?.[`${c.key}_${trackByValue}`];
     // states
     const [value, setValue] = useState(itemValue);
     // useEffects
@@ -22,26 +22,26 @@ const Editable = function ({ c, item, index, onEditable, validation }) {
             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 }, index);
+                    onEditable({ ...item, [key]: c.editable?.type === "number" ? Number(value) : value }, trackByValue);
                 }, validation: { text: _vText } }));
         case "input-number":
             return (React.createElement(Input.Number, { variant: "borderless", name: c.key, value: value, onChange: (event) => {
                     const { value } = event.target;
                     setValue(value);
-                    onEditable({ ...item, [key]: c.editable?.type === "number" ? Number(value) : value }, index);
+                    onEditable({ ...item, [key]: c.editable?.type === "number" ? Number(value) : value }, trackByValue);
                 }, validation: { text: _vText } }));
         case "date-picker":
             return (React.createElement(DatePicker, { variant: "borderless", value: value, onChange: (value) => {
                     setValue(value);
-                    onEditable({ ...item, [key]: value }, index);
+                    onEditable({ ...item, [key]: value }, trackByValue);
                 }, validation: { text: _vText } }));
         case "single-select":
             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);
+                    onEditable({ ...item, [key]: option?.value }, trackByValue);
                 }, validation: { text: _vText } }));
         case "multiple-select":
             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);
+                    onEditable({ ...item, [key]: options.map((option) => option.value) }, trackByValue);
                 }, validation: { text: _vText }, multiple: true }));
         default:
             return null;

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

@@ -74,7 +74,7 @@ interface IProps<T> extends IChildren {
     selections?: (selectionItems: T[]) => void;
     previousSelections?: T[];
     searchedParams?: (params: SearchedParam | null, query: string, operator: FilterOperator) => void;
-    onEditable?: (item: T, index: number) => void;
+    onEditable?: (item: T, trackByValue: string) => void;
     onDnD?: (item: T[]) => void;
     pagination?: {
         totalRecords: number;

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

@@ -419,7 +419,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                             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, index: index, onEditable: onEditable, validation: config.validation })) : (render),
+                React.isValidElement(render) ? (render) : c.editable && onEditable ? (React.createElement(Editable, { c: c, item: item, trackByValue: trackBy?.(item) ?? "", onEditable: onEditable, validation: config.validation })) : (render),
                 config.isTreeView && cIndex === 0 && (React.createElement("div", { className: "after" },
                     React.createElement("div", { className: "circle" }))))));
     };
@@ -508,7 +508,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
     }, [checkboxSelectedParams]);
     useEffect(() => {
         if (typeof selections === "function" && Array.isArray(selectionItems)) {
-            selections(selectionItems);
+            selections(selectionItems.map((selectionItem) => ({ ...selectionItem, trackByValue: trackBy?.(selectionItem) })));
         }
         if (Array.isArray(_checkboxItems.current) && _checkboxItems.current.length > 0) {
             const allChecked = _checkboxItems.current.every((item) => item?.checked === true);

package/dist/components/feedback/drawer/index.js

@@ -16,6 +16,7 @@ const Drawer = function ({ title, tabs = [], activeTab, open, validation, onChan
     // states
     const [currentTab, setCurrentTab] = useState(0);
     // hooks
+    console.log(validation?.data, "validation?.data");
     const { errors, onSubmit, setSubmit } = useValidation(validation?.data, validation?.rules, currentTab + 1);
     // methods
     const handleValidationControlForClose = useCallback(() => {

package/dist/libs/core/application/hooks/index.js

@@ -71,10 +71,10 @@ export const useValidation = function (data, params, step) {
             callback(result);
         });
     };
-    const setError = (key, message, step, index) => {
+    const setError = (key, message, step, trackByValue) => {
         let _key = step ? `${step}_${key}` : key;
-        if (index !== undefined)
-            _key = `${_key}_${index}`;
+        if (trackByValue !== undefined)
+            _key = `${_key}_${trackByValue}`;
         setErrors((prev) => ({ ...prev, [_key]: message }));
         _errors.current = { ..._errors.current, [_key]: message };
     };
@@ -102,9 +102,12 @@ export const useValidation = function (data, params, step) {
                 if (Array.isArray(value)) {
                     // Eğer value bir dizi ise ve subkey sadece bir seviye ise,
                     // dizinin her bir elemanına subkey uygulanabilir.
-                    const extractedValues = value.map((item) => item?.[param.subkey]);
+                    const extractedValues = value.map((item) => ({
+                        value: item?.[param.subkey],
+                        trackByValue: item?.trackByValue,
+                    }));
                     // Elde edilen değerler topluca paramsShape'e gönderilebilir ya da başka bir şekilde işlenebilir.
-                    extractedValues.map((extractedValue, index) => paramsShape(param, extractedValue, index));
+                    extractedValues.map((extractedValue) => paramsShape(param, extractedValue.value, extractedValue.trackByValue));
                 }
                 else {
                     // Value bir obje ise, subkey doğrudan kullanılır.
@@ -117,7 +120,7 @@ export const useValidation = function (data, params, step) {
             paramsShape(param, value);
         }
     };
-    const paramsShape = (param, value, index) => {
+    const paramsShape = (param, value, trackByValue) => {
         const vLenght = value ? value.length : 0;
         const getKey = (subkey) => {
             if (!subkey)
@@ -127,13 +130,13 @@ export const useValidation = function (data, params, step) {
         };
         const handleValidation = (key, s) => {
             if (s.type === "required" && Utils.IsNullOrEmpty(value)) {
-                setError(key, s.message, param.step, index);
+                setError(key, s.message, param.step, trackByValue);
             }
             if (s.type === "minimum" && vLenght < s.value) {
-                setError(key, Utils.StringFormat(s.message, s.value), param.step, index);
+                setError(key, Utils.StringFormat(s.message, s.value), param.step, trackByValue);
             }
             if (s.type === "maximum" && vLenght > s.value) {
-                setError(key, Utils.StringFormat(s.message, s.value), param.step, index);
+                setError(key, Utils.StringFormat(s.message, s.value), param.step, trackByValue);
             }
             // Regexes
             // const phoneRegex = /^((\+90|0)?([2-5]\d{2})\d{7}|\+[1-9]\d{7,14})$/;
@@ -142,16 +145,16 @@ export const useValidation = function (data, params, step) {
             const ibanRegex = /^TR\d{24}$/;
             const accountNumberRegex = /^\d{6,16}$/;
             if (s.type === "phone" && value && !phoneRegex.test(value.replace(/\D/g, ""))) {
-                setError(key, s.message, param.step, index);
+                setError(key, s.message, param.step, trackByValue);
             }
             if (s.type === "email" && value && !emailRegex.test(value)) {
-                setError(key, s.message, param.step, index);
+                setError(key, s.message, param.step, trackByValue);
             }
             if (s.type === "iban" && value && !ibanRegex.test(value.replace(/\s/g, ""))) {
-                setError(key, s.message, param.step, index);
+                setError(key, s.message, param.step, trackByValue);
             }
             if (s.type === "account-number" && value && !accountNumberRegex.test(value)) {
-                setError(key, s.message, param.step, index);
+                setError(key, s.message, param.step, trackByValue);
             }
         };
         param.shape?.forEach((s) => {

package/package.json

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