ar-design 0.3.7 → 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/dist/components/form/input-number/IProps.d.ts

@@ -1,4 +1,11 @@
-import { IBorder, IColors, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
-interface IProps extends IVariant, IColors, IBorder, IUpperCase, IValidation, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size" | "color" | "type"> {
+import { IBorder, IColors, IDisabled, IPlaceholder, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
+interface IProps extends IVariant, IColors, IBorder, IUpperCase, IValidation, IPlaceholder, IDisabled {
+    name: string;
+    value: string | number | readonly string[] | undefined;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    digits?: {
+        minimum?: number;
+        maximum?: number;
+    };
 }
 export default IProps;

package/dist/components/form/input-number/index.js

@@ -1,99 +1,87 @@
 "use client";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import Input from "../input";
-const InputNumber = ({ ...attributes }) => {
+const InputNumber = ({ name, value, onChange, digits, placeholder, disabled }) => {
     // refs
     const _firstLoad = useRef(false);
     const _input = useRef(null);
-    const _caretPosition = useRef(null);
-    const _isInputTouch = useRef(false);
     // states
-    const [value, setValue] = useState("");
+    const [_value, setValue] = useState("");
     // methods
+    const handleClick = () => {
+        const input = _input.current;
+        if (!input)
+            return;
+        const caret = input.selectionStart ?? 0;
+        input.setSelectionRange(caret, caret + 1);
+    };
+    const handleKeyUp = (event) => {
+        const input = _input.current;
+        if (!input)
+            return;
+        const caret = input.selectionStart ?? 0;
+        if (event.code === "ArrowRight") {
+            input.setSelectionRange(caret, caret + 1);
+        }
+        else if (event.code === "ArrowLeft" && caret > 0) {
+            input.setSelectionRange(caret - 1, caret);
+        }
+        else if (["ArrowUp", "ArrowDown"].includes(event.code)) {
+            input.setSelectionRange(caret, caret + 1);
+        }
+    };
     const handleChange = (event) => {
         let { value } = event.target;
-        const caret = _input.current?.selectionStart ?? 0;
-        _caretPosition.current = caret;
-        if (value.length === 0)
-            _isInputTouch.current = false;
         // Temizle.
         const cleanedValue = (value = value.replace(/[^0-9,]/g, ""));
         // Numara olarak çevir.
-        const normalized = value.replace(/\./g, "").replace(",", ".");
-        const parsed = parseFloat(normalized);
-        const numberValue = isNaN(parsed) ? 0 : parsed;
-        // Formatla ve Kullanıcı , (virgül) girdiyse kuruş göster.
+        const normalized = parseCurrencySmart(value);
         const isDecimals = cleanedValue.includes(",");
-        let formatted = numberValue === 0 && cleanedValue === "" ? "" : formatter(isDecimals).format(numberValue);
-        // if (isDecimals) {
-        //   const [_, digits] = formatted.split(",");
-        //   if (digits && digits.length > 2) formatted = formatted.slice(0, -1);
-        // }
+        const parsedDecimal = parseFloat(normalized);
+        const newValue = isNaN(parsedDecimal) ? 0 : parsedDecimal;
+        // Formatla ve Kullanıcı , (virgül) girdiyse kuruş göster.
+        let formatted = newValue === 0 && cleanedValue === "" ? "" : getFormatter(isDecimals).format(newValue);
         setValue(formatted);
-        setTimeout(() => {
-            requestAnimationFrame(() => {
-                if (!_input.current || _caretPosition.current == null)
-                    return;
-                if (isDecimals)
-                    _isInputTouch.current = false;
-                _caretPosition.current += formatted.length > value.length && !_isInputTouch.current ? 1 : 0;
-                _input.current?.setSelectionRange(_caretPosition.current, _caretPosition.current);
-            });
-        }, 0);
+        onChange?.({ ...event, target: { ...event.target, name: name, value: normalized } });
     };
-    const handleClick = () => {
-        const caret = _input.current?.selectionStart ?? 0;
-        _caretPosition.current = caret;
-        if (_input.current && _input.current.value.length > 3)
-            _isInputTouch.current = true;
-    };
-    const handleKeyUp = (event) => {
-        if (!["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"].includes(event.code))
-            return;
-        if (_input.current && _input.current.value.length > 3)
-            _isInputTouch.current = true;
-    };
-    const formatter = useMemo(() => {
+    const getFormatter = useMemo(() => {
         return (isDecimals) => new Intl.NumberFormat("tr-TR", {
             style: "decimal",
-            minimumFractionDigits: 0,
-            maximumFractionDigits: isDecimals ? 2 : 0,
+            minimumFractionDigits: digits?.minimum ?? 0,
+            maximumFractionDigits: isDecimals ? digits?.maximum ?? 2 : 0,
         });
-    }, []);
+    }, [digits]);
+    const parseCurrencySmart = (input) => {
+        if (input.includes(",") && input.includes(".")) {
+            // Nokta binlik, virgül ondalık (tr-TR, de-DE gibi)
+            return input.replace(/\./g, "").replace(",", ".");
+        }
+        else if (input.includes(",") && !input.includes(".")) {
+            // Virgül ondalık, binlik yok (fr-FR gibi)
+            return input.replace(",", ".");
+        }
+        else if (input.includes(".") && !input.includes(",")) {
+            // Nokta ondalık, binlik yok veya US format
+            return input.replace(/,/g, "");
+        }
+        else {
+            // Hiçbiri yok, zaten sayı
+            return input;
+        }
+    };
     // useEffects
     useEffect(() => {
-        if (_firstLoad.current)
-            return;
-        if (attributes.value !== undefined && attributes.value !== "") {
-            const isDecimals = String(attributes.value).includes(",");
-            let formatted = formatter(isDecimals).format(parseFloat(String(attributes.value)));
-            setValue(formatted == "NaN" ? "" : formatted);
+        if (!_firstLoad.current && value !== undefined && value !== "") {
+            const isDecimals = String(value).includes(".");
+            setValue(getFormatter(isDecimals).format(Number(value)));
             _firstLoad.current = true;
         }
-    }, [attributes.value]);
-    return (React.createElement(Input, { ref: _input, ...attributes, value: value ?? attributes.value ?? "", onChange: (event) => {
+    }, [value]);
+    return (React.createElement(Input, { ref: _input, name: name, value: _value ?? "", type: "text", inputMode: "decimal", onChange: (event) => {
             // Disabled gelmesi durumunda işlem yapmasına izin verme...
-            if (attributes.disabled)
+            if (disabled)
                 return;
-            (() => {
-                handleChange(event);
-            })();
-            (() => {
-                if (attributes.onChange) {
-                    const { value } = event.target;
-                    const newValue = value.replaceAll(".", "");
-                    attributes.onChange({
-                        ...event,
-                        target: {
-                            ...event.target,
-                            id: event.target.id,
-                            name: event.target.name,
-                            value: newValue,
-                            type: event.target.type,
-                        },
-                    });
-                }
-            })();
-        }, onClick: handleClick, onKeyUp: handleKeyUp, type: "text", inputMode: "decimal" }));
+            handleChange(event);
+        }, onClick: handleClick, onKeyUp: handleKeyUp, placeholder: placeholder }));
 };
 export default InputNumber;

package/dist/libs/types/IGlobalProps.d.ts

@@ -180,6 +180,18 @@ export interface IValidation {
         scrollTo?: boolean;
     };
 }
+export interface IPlaceholder {
+    /**
+     * Bileşenin ne için olduğunu belirlemek için kullanılır.
+     *
+     * ```jsx
+     * <Component placeholder="...">
+     *  Example
+     * </Component>
+     * ```
+     */
+    placeholder?: string;
+}
 export interface IDisabled {
     /**
      * Bileşenin pasif (devre dışı) olup olmadığını belirtmek için kullanılır.

package/package.json

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