diff --git a/example/src/index.js b/example/src/index.js index 8124610..6dbe9fc 100644 --- a/example/src/index.js +++ b/example/src/index.js @@ -10,8 +10,7 @@ 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); @@ -20,8 +19,8 @@ function CustomNumeralNumericFormat(props) { }; 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); @@ -29,12 +28,7 @@ function CustomNumeralNumericFormat(props) { 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; diff --git a/src/number_format_base.tsx b/src/number_format_base.tsx index 64f1287..f9279ab 100644 --- a/src/number_format_base.tsx +++ b/src/number_format_base.tsx @@ -18,6 +18,7 @@ import { caretUnknownFormatBoundary, getCaretPosInBoundary, findChangedRangeFromCaretPositions, + enNumber, } from './utils'; function defaultRemoveFormatting(value: string) { @@ -52,6 +53,7 @@ export default function NumberFormatBase( getCaretBoundary = caretUnknownFormatBoundary, isValidInputCharacter = charIsNumber, isCharacterSame, + nonEnglishFormat, ...otherProps } = props; @@ -163,7 +165,10 @@ export default function NumberFormatBase( let caretPos; if (input) { - const inputValue = params.inputValue || input.value; + const inputValue = + nonEnglishFormat === true + ? enNumber(params.inputValue || input.value) + : params.inputValue || input.value; const currentCaretPosition = geInputCaretPosition(input); @@ -240,6 +245,7 @@ export default function NumberFormatBase( | React.KeyboardEvent, source: SourceType, ) => { + inputValue = nonEnglishFormat === true ? enNumber(inputValue) : inputValue; const input = event.target as HTMLInputElement; const changeRange = caretPositionBeforeChange.current diff --git a/src/types.ts b/src/types.ts index fc9ff07..2d7f31a 100644 --- a/src/types.ts +++ b/src/types.ts @@ -86,6 +86,7 @@ type NumberFormatBase = { getCaretBoundary?: (formattedValue: string) => boolean[]; isValidInputCharacter?: (character: string) => boolean; isCharacterSame?: IsCharacterSame; + nonEnglishFormat?: boolean; }; export type NumberFormatBaseProps = NumberFormatProps< diff --git a/src/utils.tsx b/src/utils.tsx index 48c8a47..81de06c 100644 --- a/src/utils.tsx +++ b/src/utils.tsx @@ -524,3 +524,25 @@ export function useInternalValues( return [values, _onValueChange]; } + +function convertPatterns(nonEglish: string[], text: string): string { + const regExp = new RegExp(`[${nonEglish.join('')}]`, 'gi'); + return text.replace(regExp, (char: string): string => { + const index = nonEglish.indexOf(char); + return index.toString(); + }); +} +function arToEnNumber(text: string): string { + return convertPatterns('٠١٢٣٤٥٦٧٨٩'.split(''), text); +} +function faToEnNumber(text: string): string { + return convertPatterns('۰۱۲۳۴۵۶۷۸۹'.split(''), text); +} + +export function enNumber(text: string): string { + const langs = [faToEnNumber, arToEnNumber]; + langs.forEach((lang) => { + text = lang(text); + }); + return text; +}