ar-design 0.3.7 → 0.3.8

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.8",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",