Merge pull request #854 from mhl98/master

Fix Number Formatting Order in Customization
s-yadav · Sep 5, 2024 · 69a5ed7 · 69a5ed7
2 parents a1fab6d + 763c894
commit 69a5ed7
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 12 deletions.
diff --git a/documentation/v5/docs/customization.md b/documentation/v5/docs/customization.md
@@ -186,30 +186,38 @@ Another example for NumericFormat could be support for custom numerals.
 const persianNumeral = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
 
 function CustomNumeralNumericFormat(props) {
-  const { format, removeFormatting, isCharacterSame, ...rest } = useNumericFormat(props);
+
+   const { format, removeFormatting, isCharacterSame, ...rest } =
+    useNumericFormat(props);
 
   const _format = (val) => {
     const _val = format(val);
+
     return _val.replace(/\d/g, ($1) => persianNumeral[Number($1)]);
   };
 
   const _removeFormatting = (val) => {
-    const _val = val.replace(new RegExp(persianNumeral.join('|'), 'g'), ($1) =>
-      persianNumeral.indexOf($1),
+    const _val = val.replace(new RegExp(persianNumeral.join("|"), "g"), ($1) =>
+      persianNumeral.indexOf($1)
     );
 
     return removeFormatting(_val);
   };
 
   const _isCharacterSame = (compareMeta) => {
     const isCharSame = isCharacterSame(compareMeta);
-    const { formattedValue, currentValue, formattedValueIndex, currentValueIndex } = compareMeta;
+    const {
+      formattedValue,
+      currentValue,
+      formattedValueIndex,
+      currentValueIndex,
+    } = compareMeta;
     const curChar = currentValue[currentValueIndex];
     const newChar = formattedValue[formattedValueIndex];
     const curPersianChar = persianNumeral[Number(curChar)] ?? curChar;
     const newPersianChar = persianNumeral[Number(newChar)] ?? newChar;
 
-    return isCharSame || curPersianChar || newPersianChar;
+    return isCharSame || curPersianChar === newPersianChar;
   };
 
   return (

diff --git a/example/src/index.js b/example/src/index.js
@@ -10,30 +10,37 @@ import { cardExpiry } from '../../custom_formatters/card_expiry';
 const persianNumeral = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
 
 function CustomNumeralNumericFormat(props) {
-  const { format, removeFormatting, isCharacterSame, ...rest } = useNumericFormat(props);
+  const { format, removeFormatting, isCharacterSame, ...rest } =
+    useNumericFormat(props);
 
   const _format = (val) => {
     const _val = format(val);
+
     return _val.replace(/\d/g, ($1) => persianNumeral[Number($1)]);
   };
 
-  const _removeFormatting = (val, ...rest) => {
-    const _val = val.replace(new RegExp(persianNumeral.join('|'), 'g'), ($1) =>
-      persianNumeral.indexOf($1),
+  const _removeFormatting = (val) => {
+    const _val = val.replace(new RegExp(persianNumeral.join("|"), "g"), ($1) =>
+      persianNumeral.indexOf($1)
     );
 
-    return removeFormatting(_val, ...rest);
+    return removeFormatting(_val);
   };
 
   const _isCharacterSame = (compareMeta) => {
     const isCharSame = isCharacterSame(compareMeta);
-    const { formattedValue, currentValue, formattedValueIndex, currentValueIndex } = compareMeta;
+    const {
+      formattedValue,
+      currentValue,
+      formattedValueIndex,
+      currentValueIndex,
+    } = compareMeta;
     const curChar = currentValue[currentValueIndex];
     const newChar = formattedValue[formattedValueIndex];
     const curPersianChar = persianNumeral[Number(curChar)] ?? curChar;
     const newPersianChar = persianNumeral[Number(newChar)] ?? newChar;
 
-    return isCharSame || curPersianChar || newPersianChar;
+    return isCharSame || curPersianChar === newPersianChar;
   };
 
   return (