From 6b98bc0771000bd56b629f173cfccaa285b5d76f Mon Sep 17 00:00:00 2001 From: abouhatef Date: Thu, 19 Dec 2024 13:15:56 +0330 Subject: [PATCH 1/2] added nonEnglish number foramt, Persian, Arabic --- src/number_format_base.tsx | 5 ++++- src/types.ts | 1 + src/utils.tsx | 22 ++++++++++++++++++++++ 3 files changed, 27 insertions(+), 1 deletion(-) diff --git a/src/number_format_base.tsx b/src/number_format_base.tsx index 64f12879..a86de7dd 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,7 @@ 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 +242,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 fc9ff070..2d7f31a4 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 48c8a477..0cf11350 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 +} \ No newline at end of file From 5f69a72aa037d61dfb2d1a1a6c7fee2a4e27ad34 Mon Sep 17 00:00:00 2001 From: abouhatef Date: Tue, 24 Dec 2024 17:23:12 +0330 Subject: [PATCH 2/2] build --- example/src/index.js | 14 ++++---------- src/number_format_base.tsx | 5 ++++- src/utils.tsx | 34 +++++++++++++++++----------------- 3 files changed, 25 insertions(+), 28 deletions(-) diff --git a/example/src/index.js b/example/src/index.js index 81246103..6dbe9fc5 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 a86de7dd..f9279abd 100644 --- a/src/number_format_base.tsx +++ b/src/number_format_base.tsx @@ -165,7 +165,10 @@ export default function NumberFormatBase( let caretPos; if (input) { - const inputValue = nonEnglishFormat === true ? enNumber(params.inputValue || input.value) : params.inputValue || input.value; + const inputValue = + nonEnglishFormat === true + ? enNumber(params.inputValue || input.value) + : params.inputValue || input.value; const currentCaretPosition = geInputCaretPosition(input); diff --git a/src/utils.tsx b/src/utils.tsx index 0cf11350..81de06c9 100644 --- a/src/utils.tsx +++ b/src/utils.tsx @@ -525,24 +525,24 @@ 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 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 arToEnNumber(text: string): string { + return convertPatterns('٠١٢٣٤٥٦٧٨٩'.split(''), text); } -function faToEnNumber(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 -} \ No newline at end of file +export function enNumber(text: string): string { + const langs = [faToEnNumber, arToEnNumber]; + langs.forEach((lang) => { + text = lang(text); + }); + return text; +}