changed currency mask back to old form

Author: cnilton

README.md

@@ -71,6 +71,7 @@ yarn add [email protected]
 |         `staticLabel`         |                   boolean                    |                                                                                                                        false                                                                                                                        | Set this to true if you want the label to be always at a set position. Commonly used with hint for displaying both label and hint for your input. For changing the position of the label with this prop as true, use the **customLabelStyles** _topFocused_ and _leftFocused_ to adjust the wanted position. |
 |            `hint`             |                    string                    |                                                                                                                      undefined                                                                                                                      |                                                                                                                   Hint displayed when label is focused or `staticLabel` prop is being used                                                                                                                   |
 |        `hintTextColor`        |                    string                    |                                                                                                                       '#ccc'                                                                                                                        |                                                                                                                                             Set hint text color                                                                                                                                              |
+|          `currency`           |                    string                    |                                                                                                                      undefined                                                                                                                      |                                                                                                                                            Set currency on input                                                                                                                                             |
 |       `currencyDivider`       |                 ','<br/>'.'                  |                                                                                                                         ','                                                                                                                         |                                                                                                                                        Set currency thousands divider                                                                                                                                        |
 |      `maxDecimalPlaces`       |                    number                    |                                                                                                                          2                                                                                                                          |                                                                                                                                          Set maximum decimal places                                                                                                                                          |
 |          `isFocused`          |                   boolean                    |                                                                                                                      undefined                                                                                                                      |                                                                                                           If you override the onFocus/onBlur props, you must handle this prop as an state variable                                                                                                           |

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-floating-label-input",
   "description": "A simple and customizable React Native TextInput with it's placeholder always shown.",
-  "version": "1.3.13",
+  "version": "1.3.14",
   "author": "Caio Nilton <cnilton>",
   "main": "index.tsx",
   "private": false,

src/index.tsx

@@ -78,6 +78,8 @@ export interface Props extends Omit<TextInputProps, 'secureTextEntry'> {
   currencyDivider?: ',' | '.';
   /** Maxinum number of decimal places allowed for currency mask. */
   maxDecimalPlaces?: number;
+  /** Set currency on input value */
+  currency?: string;
   /** Changes the input from single line input to multiline input */
   multiline?: true | false;
   /** Maxinum number of characters allowed. Overriden by mask if present */
@@ -181,6 +183,7 @@ const FloatingLabelInput: React.ForwardRefRenderFunction<InputRef, Props> = (
     darkTheme,
     countdownLabel,
     currencyDivider,
+    currency,
     maskType,
     onChangeText,
     customHidePasswordComponent,
@@ -596,15 +599,31 @@ const FloatingLabelInput: React.ForwardRefRenderFunction<InputRef, Props> = (
     }
 
     if (maskType === 'currency') {
+      if (
+        currency !== undefined &&
+        !/^[0-9]+$/g.test(val.replace(/[.,]/g, '').replace(currency, '')) &&
+        val.replace(/[.,]/g, '').replace(currency, '') !== ''
+      ) {
+        return undefined;
+      } else if (
+        currency === undefined &&
+        !/^[0-9]+$/g.test(val.replace(/[.,]/g, '')) &&
+        val.replace(/[.,]/g, '') !== ''
+      ) {
+        return undefined;
+      }
+
       newValue = getValueWithCurrencyMask({
-        value,
-        newValue: val,
+        value: currency !== undefined ? value.replace(currency, '') : value,
+        newValue: currency !== undefined ? val.replace(currency, '') : val,
         currencyDivider,
         maxDecimalPlaces,
       });
     }
 
-    if (newValue !== undefined) return onChangeText(newValue);
+    if (newValue !== undefined) {
+      return onChangeText((currency !== undefined ? currency : '') + newValue);
+    }
   }
 
   function onLayout(event: LayoutChangeEvent) {

src/utils.tsx

@@ -56,41 +56,46 @@ function getCurrencyDividerAndDecimal(divider: CurrencyDivider | undefined) {
     };
 }
 
-function convertToNumber(
-  value: string,
-  divider: CurrencyDivider,
-  decimal: CurrencyDivider,
-): number {
-  // Replace decimal with a dot to allow parsing with Number default constructor
-  return Number(
-    value.replace(`/${divider}/g`, '').replace(`/${decimal}/`, '.'),
-  );
-}
-
 export function getValueWithCurrencyMask({
   value,
   newValue,
   currencyDivider,
-  maxDecimalPlaces,
 }: CurrencyMaskTypeArgs): ResultType {
   const { divider, decimal } = getCurrencyDividerAndDecimal(currencyDivider);
 
-  if (value.length >= newValue.length) return undefined;
-
-  const newValueAsNumber = convertToNumber(newValue, divider, decimal);
-
-  const decimalPlaces: number =
-    maxDecimalPlaces !== undefined ? maxDecimalPlaces : 2;
+  if (value !== undefined) {
+    if (!newValue.includes(decimal)) {
+      if (newValue?.replace(/[,.]/g, '')?.length > 3) {
+        let arr: string[] = [];
+        let unmasked = newValue.replace(/[,.]/g, '');
+        for (let i = 0; i < unmasked.length; i += 3) {
+          arr.push(
+            unmasked
+              .split('')
+              .splice(unmasked.length - i, 3)
+              .join(''),
+          );
+        }
 
-  if (divider === ',') {
-    // en-US uses dot as decimal separator and comma for thousands
-    return newValueAsNumber.toLocaleString('en-US', {
-      maximumFractionDigits: decimalPlaces,
-    });
-  } else {
-    // German uses comma as decimal separator and period for thousands
-    return newValueAsNumber.toLocaleString('de-DE', {
-      maximumFractionDigits: decimalPlaces,
-    });
+        arr = arr.reverse();
+        arr.pop();
+        const initial = arr.join('');
+        if (unmasked.includes(initial)) {
+          unmasked = unmasked.replace(initial, '');
+        }
+        newValue = unmasked + divider + arr.join(divider);
+      } else {
+        newValue = newValue?.replace(/[,.]/g, '');
+      }
+    } else {
+      if (
+        newValue?.split(decimal).length > 2 ||
+        newValue?.split(decimal)[1].includes(divider)
+      ) {
+        return value;
+      }
+    }
   }
+
+  return newValue;
 }