feat(kit): Number allows to enter full width numbers (#864)

projects/demo-integrations/src/tests/kit/number/number-fullwidth-to-halfwidth.cy.ts

@@ -0,0 +1,33 @@
+import {openNumberPage} from './utils';
+
+describe('Number | Accepts full width numbers used by JP, CN or others', () => {
+    beforeEach(() => {
+        openNumberPage('thousandSeparator=_&precision=2');
+    });
+
+    describe('Invalid characters', () => {
+        it('accepts full width numbers', () => {
+            cy.get('@input')
+                .type('１ ２  ３   ４    ５')
+                .should('have.value', '12_345')
+                .should('have.prop', 'selectionStart', '12_345'.length)
+                .should('have.prop', 'selectionEnd', '12_345'.length);
+        });
+
+        it('accepts full width characters with minus', () => {
+            cy.get('@input')
+                .type('ー１２３４５６')
+                .should('have.value', '−123_456')
+                .should('have.prop', 'selectionStart', '−123_456'.length)
+                .should('have.prop', 'selectionEnd', '−123_456'.length);
+        });
+
+        it('rejects full width characters, not numbers', () => {
+            cy.get('@input')
+                .type('あいうえお１２３４５こんにちは')
+                .should('have.value', '12_345')
+                .should('have.prop', 'selectionStart', '12_345'.length)
+                .should('have.prop', 'selectionEnd', '12_345'.length);
+        });
+    });
+});

projects/kit/src/lib/constants/unicode-characters.ts

@@ -35,3 +35,9 @@ export const CHAR_HYPHEN = '\u002D';
  * Can be used as `−`. Don't confuse with {@link CHAR_HYPHEN}
  */
 export const CHAR_MINUS = '\u2212';
+
+/**
+ * {@link https://symbl.cc/en/30FC/ Katakana-Hiragana Prolonged Sound Mark}
+ * is used as prolonged sounds in Japanese.
+ */
+export const CHAR_JP_HYPHEN = '\u30FC';

projects/kit/src/lib/masks/number/number-mask.ts

@@ -4,6 +4,7 @@ import {
     CHAR_EM_DASH,
     CHAR_EN_DASH,
     CHAR_HYPHEN,
+    CHAR_JP_HYPHEN,
     CHAR_MINUS,
     CHAR_NO_BREAK_SPACE,
 } from '../../constants';
@@ -18,6 +19,7 @@ import {
 } from './plugins';
 import {
     createDecimalZeroPaddingPostprocessor,
+    createFullWidthToHalfWidthPreprocessor,
     createInitializationOnlyPreprocessor,
     createMinMaxPostprocessor,
     createNonRemovableCharsDeletionPreprocessor,
@@ -50,9 +52,12 @@ export function maskitoNumberOptionsGenerator({
     prefix?: string;
     postfix?: string;
 } = {}): Required<MaskitoOptions> {
-    const pseudoMinuses = [CHAR_HYPHEN, CHAR_EN_DASH, CHAR_EM_DASH].filter(
-        char => char !== thousandSeparator && char !== decimalSeparator,
-    );
+    const pseudoMinuses = [
+        CHAR_HYPHEN,
+        CHAR_EN_DASH,
+        CHAR_EM_DASH,
+        CHAR_JP_HYPHEN,
+    ].filter(char => char !== thousandSeparator && char !== decimalSeparator);
     const validatedDecimalPseudoSeparators = validateDecimalPseudoSeparators({
         decimalSeparator,
         thousandSeparator,
@@ -75,6 +80,7 @@ export function maskitoNumberOptionsGenerator({
                 decimalPseudoSeparators: validatedDecimalPseudoSeparators,
                 pseudoMinuses,
             }),
+            createFullWidthToHalfWidthPreprocessor(),
             createPseudoCharactersPreprocessor(CHAR_MINUS, pseudoMinuses),
             createPseudoCharactersPreprocessor(
                 decimalSeparator,

projects/kit/src/lib/masks/number/processors/fullwidth-to-halfwidth-preprocessor.ts

@@ -0,0 +1,20 @@
+import {MaskitoPreprocessor} from '@maskito/core';
+
+import {toHalfWidthNumber} from '../utils/to-half-width-number';
+
+/**
+ * Convert full width numbers like １, ２ to half width numbers 1, 2
+ */
+export function createFullWidthToHalfWidthPreprocessor(): MaskitoPreprocessor {
+    return ({elementState, data}) => {
+        const {value, selection} = elementState;
+
+        return {
+            elementState: {
+                selection,
+                value: toHalfWidthNumber(value),
+            },
+            data: toHalfWidthNumber(data),
+        };
+    };
+}

projects/kit/src/lib/masks/number/processors/index.ts

@@ -1,4 +1,5 @@
 export * from './decimal-zero-padding-postprocessor';
+export * from './fullwidth-to-halfwidth-preprocessor';
 export * from './initialization-only-preprocessor';
 export * from './leading-zeroes-validation-postprocessor';
 export * from './min-max-postprocessor';

projects/kit/src/lib/masks/number/utils/tests/to-half-width-number.spec.ts

@@ -0,0 +1,30 @@
+import {toHalfWidthNumber} from '../to-half-width-number';
+
+describe('`toHalfWidthNumber` utility converts full width numbers to half width numbers', () => {
+    const tests = [
+        // [full width value, half width value]
+        ['１', '1'],
+        ['２', '2'],
+        ['３', '3'],
+        ['４', '4'],
+        ['５', '5'],
+        ['６', '6'],
+        ['７', '7'],
+        ['８', '8'],
+        ['９', '9'],
+    ] as const;
+
+    tests.forEach(([fullWidthValue, halfWidthValue]) => {
+        it(`${fullWidthValue} => ${halfWidthValue}`, () => {
+            expect(toHalfWidthNumber(fullWidthValue)).toBe(halfWidthValue);
+        });
+    });
+
+    it('１２３４５６ => 123456', () => {
+        expect(toHalfWidthNumber('１２３４５６')).toBe('123456');
+    });
+
+    it('１2３4５6 (full width + half width mix) => 123456', () => {
+        expect(toHalfWidthNumber('１2３4５6')).toBe('123456');
+    });
+});

projects/kit/src/lib/masks/number/utils/to-half-width-number.ts

@@ -0,0 +1,10 @@
+/**
+ * Replace fullwidth numbers with half width number
+ * @param fullWidthNumber full width number
+ * @returns processed half width number
+ */
+export function toHalfWidthNumber(fullWidthNumber: string): string {
+    return fullWidthNumber.replace(/[０-９]/g, s =>
+        String.fromCharCode(s.charCodeAt(0) - 0xfee0),
+    );
+}