ar-design 0.4.25 → 0.4.26

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

@@ -21,6 +21,7 @@ export type SearchedParam = {
     [key: string]: FilterValue | FilterValue[];
 };
 export type Config<T> = {
+    locale?: string;
     isServerSide?: boolean;
     isProperties?: boolean;
     isSearchable?: boolean;

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

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

package/dist/components/data-display/table/body/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, trackByValue, onEditable, validation }) {
+const Editable = function ({ c, item, trackByValue, onEditable, validation, config }) {
     // variables
     const key = c.key;
     const itemValue = item[c.key];
@@ -29,13 +29,13 @@ const Editable = function ({ c, item, trackByValue, onEditable, validation }) {
                     const { value } = event.target;
                     setValue(value);
                     onEditable({ ...item, [key]: value }, trackByValue);
-                }, validation: { text: _vText } }));
+                }, validation: { text: _vText }, locale: config.locale }));
         case "input-formatted-decimal":
             return (React.createElement(Input.FormattedDecimal, { variant: "borderless", name: c.key, value: _value, onChange: (event) => {
                     const { value } = event.target;
                     setValue(value);
                     onEditable({ ...item, [key]: value }, trackByValue);
-                }, validation: { text: _vText } }));
+                }, validation: { text: _vText }, locale: config.locale }));
         case "date-picker":
             return (React.createElement(DatePicker, { variant: "borderless", value: _value, onChange: (value) => {
                     setValue(value);

package/dist/components/data-display/table/body/TBody.js

@@ -4,6 +4,7 @@ import Checkbox from "../../../form/checkbox";
 import Editable from "./Editable";
 function TBody({ data, columns, refs, methods, states, config }) {
     // refs
+    const _hasMeasured = useRef(false);
     const _tBodyTR = useRef([]);
     // states
     const [triggerForRender, setTriggerForRender] = useState(false);
@@ -88,7 +89,7 @@ function TBody({ data, columns, refs, methods, states, config }) {
                             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) : column.editable && methods.onEditable ? (React.createElement(Editable, { c: column, item: item, trackByValue: methods.trackBy?.(item) ?? "", onEditable: methods.onEditable, validation: config.validation })) : (React.createElement("span", null, render)),
+                React.isValidElement(render) ? (render) : column.editable && methods.onEditable ? (React.createElement(Editable, { c: column, item: item, trackByValue: methods.trackBy?.(item) ?? "", onEditable: methods.onEditable, validation: config.validation, config: config })) : (React.createElement("span", null, render)),
                 config.isTreeView && cIndex === 0 && (React.createElement("div", { className: "after" },
                     React.createElement("div", { className: "circle" }))))));
     };
@@ -128,9 +129,14 @@ function TBody({ data, columns, refs, methods, states, config }) {
     };
     // useEffects
     useEffect(() => {
+        if (_hasMeasured.current)
+            return;
+        if (!data || data.length === 0)
+            return;
         const heights = _tBodyTR.current.map((el) => (el ? el.getBoundingClientRect().height : 0));
         setRowHeights(heights);
         setTriggerForRender((prev) => !prev);
+        _hasMeasured.current = true;
     }, [data]);
     useEffect(() => {
         if (Array.isArray(refs._checkboxItems.current) && refs._checkboxItems.current.length > 0) {

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

@@ -383,7 +383,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
             _data = _data.slice(indexOfFirstRow, indexOfLastRow);
         }
         return _data;
-    }, [data, searchedText, currentPage, selectedPerPage, sortConfig]);
+    }, [data, searchedText, currentPage, selectedPerPage, sortConfig, config.isServerSide]);
     // useEffects
     useEffect(() => {
         if (!previousSelections || previousSelections.length === 0) {

package/dist/components/form/input/decimal/Decimal.js

@@ -1,38 +1,50 @@
 "use client";
-import React, { useRef, useState, useEffect } from "react";
+import React, { useRef, useState, useEffect, useMemo } from "react";
 import Input from "..";
-const Decimal = ({ variant, color, name, value, onChange, placeholder, validation, disabled }) => {
-    // refs
+const Decimal = ({ variant, color, name, value, onChange, placeholder, validation, disabled, locale = "tr-TR", }) => {
     const _input = useRef(null);
-    // states
     const [_value, setValue] = useState("");
     // methods
+    const decimalSeparator = useMemo(() => {
+        const parts = new Intl.NumberFormat(locale).formatToParts(1.1);
+        return parts.find((p) => p.type === "decimal")?.value ?? ".";
+    }, [locale]);
     const handleChange = (event) => {
         let inputValue = event.target.value;
-        inputValue = inputValue.replace(/[^0-9.]/g, "");
-        const parts = inputValue.split(".");
+        // Locale’a göre izin verilen karakterler. (rakam, decimal, -)
+        const regex = new RegExp(`[^0-9\\${decimalSeparator}-]`, "g");
+        inputValue = inputValue.replace(regex, "");
+        // Sadece başta negatif işarete izin ver.
+        if (inputValue.includes("-")) {
+            inputValue = (inputValue.startsWith("-") ? "-" : "") + inputValue.replace(/-/g, "");
+        }
+        // Tek decimal separator’a izin ver.
+        const parts = inputValue.split(decimalSeparator);
         if (parts.length > 2) {
-            inputValue = parts[0] + "." + parts.slice(1).join("");
+            inputValue = parts[0] + decimalSeparator + parts.slice(1).join("");
         }
         setValue(inputValue);
+        // Parent’a normalize edilmiş "." decimal gönder.
+        const normalized = inputValue.replace(decimalSeparator, ".");
         onChange?.({
             ...event,
             target: {
                 ...event.target,
                 name,
-                value: inputValue,
+                value: normalized,
             },
         });
     };
     // useEffects
     useEffect(() => {
-        if (value === undefined || value === null) {
+        if (value === undefined || value === null || value === "") {
             setValue("");
+            return;
         }
-        else {
-            setValue(String(value));
-        }
-    }, [value]);
+        const stringValue = String(value);
+        const localized = stringValue.replace(".", decimalSeparator);
+        setValue(localized);
+    }, [value, decimalSeparator]);
     return (React.createElement(Input, { ref: _input, name: name, variant: variant, color: color, type: "text", inputMode: "decimal", value: _value, onChange: (e) => {
             if (disabled)
                 return;

package/dist/components/form/input/decimal/IProps.d.ts

@@ -3,5 +3,6 @@ interface IProps extends IVariant, IColors, IBorder, IUpperCase, IValidation, IP
     name: string;
     value: string | number | readonly string[] | undefined;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    locale?: Intl.LocalesArgument;
 }
 export default IProps;

package/dist/components/form/input/formatted-decimal/FormattedDecimal.js

@@ -3,12 +3,16 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import Input from "..";
 import { NUMBER } from "../../../../libs/infrastructure/shared";
 const FormattedDecimal = ({ variant, color, name, value, onChange, locale = "tr-TR", digits, placeholder, validation, disabled, }) => {
-    // refs
-    // const _firstLoad = useRef<boolean>(false);
     const _input = useRef(null);
-    // states
     const [_value, setValue] = useState("");
     // methods
+    const getSeparators = (locale) => {
+        const parts = new Intl.NumberFormat(locale).formatToParts(1000.1);
+        const group = parts.find((p) => p.type === "group")?.value ?? ",";
+        const decimal = parts.find((p) => p.type === "decimal")?.value ?? ".";
+        return { group, decimal };
+    };
+    const getFormatter = useMemo(() => NUMBER.Decimal(locale, digits), [locale, digits]);
     const handleClick = () => {
         const input = _input.current;
         if (!input)
@@ -33,48 +37,34 @@ const FormattedDecimal = ({ variant, color, name, value, onChange, locale = "tr-
     };
     const handleChange = (event) => {
         let { value } = event.target;
-        // Temizle.
-        const cleanedValue = (value = value.replace(/[^0-9,]/g, ""));
-        // Numara olarak çevir.
-        const normalized = parseCurrencySmart(value);
-        // const isDecimals = cleanedValue.includes(",");
-        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.format(newValue);
+        const { group, decimal } = getSeparators(locale);
+        // Locale’a göre izin verilen karakterleri temizle.
+        const regex = new RegExp(`[^0-9\\${group}\\${decimal}]`, "g");
+        value = value.replace(regex, "");
+        // Normalize et (decimal her zaman "." olacak şekilde)
+        let normalized = value.replace(new RegExp(`\\${group}`, "g"), "").replace(decimal, ".");
+        const parsed = parseFloat(normalized);
+        const numericValue = isNaN(parsed) ? 0 : parsed;
+        const formatted = value === "" ? "" : getFormatter.format(numericValue);
         setValue(formatted);
-        onChange?.({ ...event, target: { ...event.target, name: name, value: normalized } });
-    };
-    const getFormatter = useMemo(() => NUMBER.Decimal(locale, digits), [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;
-        }
+        onChange?.({
+            ...event,
+            target: {
+                ...event.target,
+                name,
+                value: normalized,
+            },
+        });
     };
     // useEffects
     useEffect(() => {
-        // if (!_firstLoad.current && value !== undefined && value !== "") {
-        //   // const isDecimals = String(value).includes(".");
-        //   setValue(getFormatter.format(Number(value)));
-        //   _firstLoad.current = true;
-        // }
+        if (value === undefined || value === null || value === "") {
+            setValue("");
+            return;
+        }
         setValue(getFormatter.format(Number(value)));
-    }, [value]);
-    return (React.createElement(Input, { ref: _input, name: name, variant: variant, color: color, value: _value ?? "", type: "text", inputMode: "decimal", onChange: (event) => {
-            // Disabled gelmesi durumunda işlem yapmasına izin verme...
+    }, [value, getFormatter]);
+    return (React.createElement(Input, { ref: _input, name: name, variant: variant, color: color, value: _value, type: "text", inputMode: "decimal", onChange: (event) => {
             if (disabled)
                 return;
             handleChange(event);

package/package.json

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