@arkyn/components 1.3.63 → 1.3.64

package/dist/services/format.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../src/services/format.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,cAAc,WACV,MAAM,SACP,MAAM,wDAcd,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/services/format.js

@@ -0,0 +1,13 @@
+const SYMBOL_LENGTH = 3;
+const formatCurrency = (locale = "pt-BR", value, currencyType = "BRL", hideSymbol = true) => {
+    const formatter = new Intl.NumberFormat(locale, {
+        style: "currency",
+        currency: currencyType,
+        currencyDisplay: "symbol",
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    });
+    const formattedValue = formatter.format(value);
+    return formattedValue.slice(hideSymbol ? SYMBOL_LENGTH : 0);
+};
+export { formatCurrency };

package/dist/services/maskValues.d.ts

@@ -0,0 +1,3 @@
+declare const maskValues: (locale: string, inputFieldValue: string | number | undefined, currency: string) => [number, string];
+export { maskValues };
+//# sourceMappingURL=maskValues.d.ts.map

package/dist/services/maskValues.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"maskValues.d.ts","sourceRoot":"","sources":["../../src/services/maskValues.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,UAAU,WACN,MAAM,mBACG,MAAM,GAAG,MAAM,GAAG,SAAS,YAClC,MAAM,KACf,CAAC,MAAM,EAAE,MAAM,CAOjB,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/services/maskValues.js

@@ -0,0 +1,10 @@
+import { formatCurrency } from "./format";
+import { normalizeValue } from "./normalizeValue";
+const maskValues = (locale, inputFieldValue, currency) => {
+    if (!inputFieldValue)
+        return [0, ""];
+    const value = normalizeValue(inputFieldValue);
+    const maskedValue = formatCurrency(locale, value, currency);
+    return [value, maskedValue];
+};
+export { maskValues };

package/dist/services/normalizeValue.d.ts

@@ -0,0 +1,3 @@
+declare const normalizeValue: (number: string | number) => number;
+export { normalizeValue };
+//# sourceMappingURL=normalizeValue.d.ts.map

package/dist/services/normalizeValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalizeValue.d.ts","sourceRoot":"","sources":["../../src/services/normalizeValue.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,cAAc,WAAY,MAAM,GAAG,MAAM,WAe9C,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/services/normalizeValue.js

@@ -0,0 +1,18 @@
+import { MAXIMUM_FRACTION_DIGITS } from "../constants/decimals";
+import { clearNumber } from "./clearNumber";
+const normalizeValue = (number) => {
+    let safeNumber = number;
+    if (typeof number === "string") {
+        safeNumber = clearNumber(number);
+        if (safeNumber % 1 !== 0) {
+            safeNumber = safeNumber.toFixed(MAXIMUM_FRACTION_DIGITS);
+        }
+    }
+    else {
+        safeNumber = Number.isInteger(number)
+            ? Number(number) * 10 ** MAXIMUM_FRACTION_DIGITS
+            : number.toFixed(MAXIMUM_FRACTION_DIGITS);
+    }
+    return clearNumber(safeNumber) / 10 ** MAXIMUM_FRACTION_DIGITS;
+};
+export { normalizeValue };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arkyn/components",
-  "version": "1.3.63",
+  "version": "1.3.64",
   "main": "./dist/bundle.js",
   "types": "./dist/index.d.ts",
   "author": "Lucas Gonçalves",

package/src/components/Input/CurrencyInput/getConfig.tsx

@@ -20,9 +20,10 @@ function getConfig(props: CurrencyInputProps, isFocused: boolean) {
     onBlur,
     title,
     style,
-    showCents = false,
+    // showCents = false,
     max = 1000000000,
-    onChange,
+    locale = "pt-BR",
+    currency = "BRL",
     ...rest
   } = props;
 
@@ -46,14 +47,15 @@ function getConfig(props: CurrencyInputProps, isFocused: boolean) {
     LeftIcon,
     RightIcon,
     disabled,
+    locale,
+    currency,
     readOnly,
     onFocus,
     onBlur,
     title,
     style,
     max,
-    onChange,
-    showCents,
+    // showCents,
     loadingPosition,
     iconSize: iconSize,
     Spinner: <Loader2 className="spinner" size={iconSize} strokeWidth={2.5} />,

package/src/components/Input/CurrencyInput/index.tsx

@@ -1,14 +1,16 @@
 import type { CurrencyInputProps } from "@arkyn/types";
-import type { FocusEvent, KeyboardEvent } from "react";
-
-import { useRef, useState } from "react";
+import type { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { useFormController } from "../../../components/Form/FormController";
+import { maskValues } from "../../../services/maskValues";
+import { normalizeValue } from "../../../services/normalizeValue";
+
 import { getConfig } from "./getConfig";
-import { currencyInputKeyDown, valueDisplay } from "./utils";
 
 function CurrencyInput(props: CurrencyInputProps) {
   const [isFocused, setIsFocused] = useState(false);
+  const [maskedValue, setMaskedValue] = useState("");
 
   const baseRef = useRef<HTMLInputElement>(null);
 
@@ -35,15 +37,15 @@ function CurrencyInput(props: CurrencyInputProps) {
     Spinner,
     value,
     max,
-    onKeyDown,
-    onChange,
-    showCents,
+    onChangeValue,
+    onKeyPress,
+    currency,
+    locale,
+    name,
     defaultValue,
     ...rest
   } = getConfig({ ...props, id, isError }, isFocused);
 
-  const [currencyValue, setCurrencyValue] = useState(defaultValue * 100 || 0);
-
   const showLeftIcon = LeftIcon && !isLoading;
   const showRightIcon = RightIcon && !isLoading;
 
@@ -56,15 +58,9 @@ function CurrencyInput(props: CurrencyInputProps) {
     ref.current.focus();
   }
 
-  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
-    currencyInputKeyDown({ currencyValue, event, max, setCurrencyValue });
-    onChange && onChange(currencyValue / 100);
-    onKeyDown && onKeyDown(event);
-  }
-
-  function handleFocus(e: FocusEvent<HTMLInputElement>) {
+  function handleFocus(event: FocusEvent<HTMLInputElement>) {
     setIsFocused(true);
-    if (onFocus) onFocus(e);
+    if (onFocus) onFocus(event);
   }
 
   function handleBlur(e: FocusEvent<HTMLInputElement>) {
@@ -72,6 +68,37 @@ function CurrencyInput(props: CurrencyInputProps) {
     if (onBlur) onBlur(e);
   }
 
+  const updateValues = (originalValue: string | number) => {
+    const [calculatedValue, calculatedMaskedValue] = maskValues(
+      locale,
+      originalValue,
+      currency
+    );
+
+    if (!max || calculatedValue <= max) {
+      setMaskedValue(calculatedMaskedValue);
+      return [calculatedValue, calculatedMaskedValue];
+    }
+
+    return [normalizeValue(maskedValue), maskedValue];
+  };
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    event.preventDefault();
+    const [originalValue, maskedValue] = updateValues(event.target.value);
+    onChangeValue(event, String(originalValue), String(maskedValue));
+  };
+
+  const handleKeyUp = (event: KeyboardEvent<HTMLInputElement>) =>
+    onKeyPress && onKeyPress(event, event.key, event.key);
+
+  useEffect(() => {
+    const currentValue = value || defaultValue || undefined;
+    const [, maskedValue] = maskValues(locale, currentValue, currency);
+
+    setMaskedValue(maskedValue);
+  }, [currency, defaultValue, value]);
+
   return (
     <section
       title={title}
@@ -84,17 +111,19 @@ function CurrencyInput(props: CurrencyInputProps) {
       {showLeftIcon && <LeftIcon size={iconSize} strokeWidth={2.5} />}
 
       <input
-        value={valueDisplay(value || currencyValue, showCents)}
-        onKeyDown={handleKeyDown}
+        value={maskedValue}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        onKeyUp={handleKeyUp}
         disabled={disabled || isLoading}
         readOnly={readOnly}
         ref={ref}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        onChange={() => {}}
         {...rest}
       />
 
+      <input type="hidden" name={name} value={normalizeValue(maskedValue)} />
+
       {showRightSpinner && Spinner}
       {showRightIcon && <RightIcon size={iconSize} strokeWidth={2.5} />}
       {sufix}

package/src/constants/decimals.ts

@@ -0,0 +1,3 @@
+const MAXIMUM_FRACTION_DIGITS = 2;
+
+export { MAXIMUM_FRACTION_DIGITS };

package/src/services/clearNumber.ts

@@ -0,0 +1,6 @@
+const clearNumber = (number: any) => {
+  if (typeof number === "number") return number;
+  return Number(number.toString().replace(/[^0-9-]/g, ""));
+};
+
+export { clearNumber };

package/src/services/format.ts

@@ -0,0 +1,21 @@
+const SYMBOL_LENGTH = 3;
+
+const formatCurrency = (
+  locale: string = "pt-BR",
+  value: number,
+  currencyType = "BRL",
+  hideSymbol = true
+) => {
+  const formatter = new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency: currencyType,
+    currencyDisplay: "symbol",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  });
+  const formattedValue = formatter.format(value);
+
+  return formattedValue.slice(hideSymbol ? SYMBOL_LENGTH : 0);
+};
+
+export { formatCurrency };

package/src/services/maskValues.ts

@@ -0,0 +1,17 @@
+import { formatCurrency } from "./format";
+import { normalizeValue } from "./normalizeValue";
+
+const maskValues = (
+  locale: string,
+  inputFieldValue: string | number | undefined,
+  currency: string
+): [number, string] => {
+  if (!inputFieldValue) return [0, ""];
+
+  const value = normalizeValue(inputFieldValue);
+  const maskedValue = formatCurrency(locale, value, currency);
+
+  return [value, maskedValue];
+};
+
+export { maskValues };

package/src/services/normalizeValue.ts

@@ -0,0 +1,21 @@
+import { MAXIMUM_FRACTION_DIGITS } from "../constants/decimals";
+import { clearNumber } from "./clearNumber";
+
+const normalizeValue = (number: string | number) => {
+  let safeNumber = number;
+
+  if (typeof number === "string") {
+    safeNumber = clearNumber(number);
+    if (safeNumber % 1 !== 0) {
+      safeNumber = safeNumber.toFixed(MAXIMUM_FRACTION_DIGITS);
+    }
+  } else {
+    safeNumber = Number.isInteger(number)
+      ? Number(number) * 10 ** MAXIMUM_FRACTION_DIGITS
+      : number.toFixed(MAXIMUM_FRACTION_DIGITS);
+  }
+
+  return clearNumber(safeNumber) / 10 ** MAXIMUM_FRACTION_DIGITS;
+};
+
+export { normalizeValue };