ar-design 0.3.0 → 0.3.2

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

@@ -64,8 +64,8 @@ const Input = forwardRef(({ variant = "outlined", color = "light", size = "norma
                     (() => {
                         if (attributes.onChange) {
                             // Mevcut değeri alın
-                            const _target = event.target;
-                            const currentValue = upperCase ? convertToUpperCase(_target.value) : _target.value;
+                            const { value } = event.target;
+                            const currentValue = upperCase ? convertToUpperCase(value) : value;
                             // Yeni değeri oluşturun ve onChange fonksiyonunu çağırın
                             const newValue = `${addon?.before ?? ""}${currentValue}${addon?.after ?? ""}`;
                             attributes.onChange({

package/dist/components/form/input-number/IProps.d.ts

@@ -1,4 +1,4 @@
-import { IBorder, IColors, ISize, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
-interface IProps extends IVariant, IColors, IBorder, ISize, IUpperCase, IValidation, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size" | "color" | "type"> {
+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"> {
 }
 export default IProps;

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

@@ -1,15 +1,20 @@
 "use client";
-import React, { useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import Input from "../input";
 const InputNumber = ({ ...attributes }) => {
     // refs
     const _input = useRef(null);
     const _caretPosition = useRef(null);
+    const _isInputTouch = useRef(false);
     // states
-    const [value, setValue] = useState(null);
+    const [value, setValue] = useState("");
     // methods
     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.
@@ -18,21 +23,70 @@ const InputNumber = ({ ...attributes }) => {
         const numberValue = isNaN(parsed) ? 0 : parsed;
         // Formatla ve Kullanıcı , (virgül) girdiyse kuruş göster.
         const isDecimals = cleanedValue.includes(",");
-        const formatted = numberValue === 0 && cleanedValue === "" ? "" : formatter(isDecimals).format(numberValue);
+        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);
+        // }
         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);
+    };
+    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) => {
-        const caretPosition = event.currentTarget.selectionStart ?? 0;
-        _caretPosition.current = caretPosition;
+        if (!["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"].includes(event.code))
+            return;
+        if (_input.current && _input.current.value.length > 3)
+            _isInputTouch.current = true;
     };
     const formatter = useMemo(() => {
         return (isDecimals) => new Intl.NumberFormat("tr-TR", {
-            style: "currency",
-            currency: "TRY",
-            minimumFractionDigits: isDecimals ? 2 : 0,
-            maximumFractionDigits: 2,
+            style: "decimal",
+            minimumFractionDigits: 0,
+            maximumFractionDigits: isDecimals ? 2 : 0,
         });
     }, []);
-    return (React.createElement(Input, { ref: _input, ...attributes, value: value ?? "", onChange: handleChange, onKeyUp: handleKeyUp, type: "text", inputMode: "decimal" }));
+    // useEffects
+    useEffect(() => {
+        if (attributes.value !== undefined)
+            setValue(attributes.value ?? "");
+    }, [attributes.value]);
+    return (React.createElement(Input, { ref: _input, ...attributes, value: value ?? attributes.value, onChange: (event) => {
+            // Disabled gelmesi durumunda işlem yapmasına izin verme...
+            if (attributes.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" }));
 };
 export default InputNumber;

package/package.json

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