refactor(kit): move some DateRange-specific logic from common date-…

…utils to new preprocessor (#1022)

projects/demo-integrations/src/tests/kit/date-range/date-range-separator.cy.ts

@@ -1,6 +1,6 @@
 import {DemoPath} from '@demo/constants';
 
-describe('DateRange | Separator', () => {
+describe('DateRange | dateSeparator', () => {
     describe('/', () => {
         beforeEach(() => {
             cy.visit(`/${DemoPath.DateRange}/API?dateSeparator=/`);

projects/kit/src/lib/constants/possible-dates-separator.ts

@@ -1,10 +1 @@
-import {CHAR_EM_DASH, CHAR_EN_DASH, CHAR_HYPHEN, CHAR_MINUS} from './unicode-characters';
-
-export const POSSIBLE_DATE_RANGE_SEPARATOR = [
-    CHAR_HYPHEN,
-    CHAR_EN_DASH,
-    CHAR_EM_DASH,
-    CHAR_MINUS,
-];
-
 export const POSSIBLE_DATE_TIME_SEPARATOR = [',', ' '];

projects/kit/src/lib/masks/date-range/constants.ts

@@ -0,0 +1,15 @@
+import {
+    CHAR_EM_DASH,
+    CHAR_EN_DASH,
+    CHAR_HYPHEN,
+    CHAR_JP_HYPHEN,
+    CHAR_MINUS,
+} from '../../constants';
+
+export const POSSIBLE_DATE_RANGE_SEPARATOR = [
+    CHAR_HYPHEN,
+    CHAR_EN_DASH,
+    CHAR_EM_DASH,
+    CHAR_MINUS,
+    CHAR_JP_HYPHEN,
+];

projects/kit/src/lib/masks/date-range/date-range-mask.ts

@@ -9,6 +9,7 @@ import {
 } from '../../processors';
 import {MaskitoDateMode, MaskitoDateSegments} from '../../types';
 import {createMinMaxRangeLengthPostprocessor} from './processors/min-max-range-length-postprocessor';
+import {createPseudoRangeSeparatorPreprocessor} from './processors/pseudo-range-separator-preprocessor';
 import {createSwapDatesPostprocessor} from './processors/swap-dates-postprocessor';
 
 export function maskitoDateRangeOptionsGenerator({
@@ -38,6 +39,7 @@ export function maskitoDateRangeOptionsGenerator({
         mask: [...dateMask, ...Array.from(rangeSeparator), ...dateMask],
         overwriteMode: 'replace',
         preprocessors: [
+            createPseudoRangeSeparatorPreprocessor({rangeSeparator, dateSeparator}),
             createZeroPlaceholdersPreprocessor(),
             normalizeDatePreprocessor({
                 dateModeTemplate,

projects/kit/src/lib/masks/date-range/processors/pseudo-range-separator-preprocessor.ts

@@ -0,0 +1,32 @@
+import {MaskitoPreprocessor} from '@maskito/core';
+
+import {POSSIBLE_DATE_RANGE_SEPARATOR} from '../constants';
+
+/**
+ * It replaces pseudo range separators with valid one.
+ * @example User types hyphen / en-dash / em-dash / minus => it is replaced with valid range separator.
+ */
+export function createPseudoRangeSeparatorPreprocessor({
+    rangeSeparator,
+    dateSeparator,
+}: {
+    rangeSeparator: string;
+    dateSeparator: string;
+}): MaskitoPreprocessor {
+    const pseudoRangeSeparators = POSSIBLE_DATE_RANGE_SEPARATOR.filter(
+        x => !rangeSeparator.includes(x) && x !== dateSeparator,
+    ).join('');
+    const pseudoRangeSeparatorsRE = new RegExp(`[${pseudoRangeSeparators}]`, 'gi');
+
+    return ({elementState, data}) => {
+        const {value, selection} = elementState;
+
+        return {
+            elementState: {
+                selection,
+                value: value.replace(pseudoRangeSeparatorsRE, rangeSeparator),
+            },
+            data: data.replace(pseudoRangeSeparatorsRE, rangeSeparator),
+        };
+    };
+}

projects/kit/src/lib/masks/date-range/tests/pseudo-range-separators.spec.ts

@@ -0,0 +1,43 @@
+import {MASKITO_DEFAULT_OPTIONS, MaskitoOptions, maskitoTransform} from '@maskito/core';
+import {maskitoDateRangeOptionsGenerator} from '@maskito/kit';
+
+import {CHAR_EM_DASH, CHAR_EN_DASH, CHAR_HYPHEN, CHAR_MINUS} from '../../../constants';
+
+describe('DateRange (maskitoTransform) | Pseudo range separators', () => {
+    let options: MaskitoOptions = MASKITO_DEFAULT_OPTIONS;
+
+    beforeEach(() => {
+        options = maskitoDateRangeOptionsGenerator({
+            mode: 'dd/mm/yyyy',
+            dateSeparator: '.',
+            rangeSeparator: CHAR_EN_DASH,
+        });
+    });
+
+    it('works with already valid range separator', () => {
+        expect(maskitoTransform(`01012000${CHAR_EN_DASH}10102000`, options)).toBe(
+            `01.01.2000${CHAR_EN_DASH}10.10.2000`,
+        );
+        expect(maskitoTransform(`01012000 ${CHAR_EN_DASH} 10102000`, options)).toBe(
+            `01.01.2000${CHAR_EN_DASH}10.10.2000`,
+        );
+    });
+
+    it('replaces hyphen with valid range separator', () => {
+        expect(maskitoTransform(`01012000${CHAR_HYPHEN}10102000`, options)).toBe(
+            `01.01.2000${CHAR_EN_DASH}10.10.2000`,
+        );
+    });
+
+    it('replaces em-dash with valid range separator', () => {
+        expect(maskitoTransform(`01012000${CHAR_EM_DASH}10102000`, options)).toBe(
+            `01.01.2000${CHAR_EN_DASH}10.10.2000`,
+        );
+    });
+
+    it('replaces minus with valid range separator', () => {
+        expect(maskitoTransform(`01012000${CHAR_MINUS}10102000`, options)).toBe(
+            `01.01.2000${CHAR_EN_DASH}10.10.2000`,
+        );
+    });
+});

projects/kit/src/lib/masks/date/tests/date-mask.spec.ts

@@ -0,0 +1,31 @@
+import {MASKITO_DEFAULT_OPTIONS, MaskitoOptions, maskitoTransform} from '@maskito/core';
+import {maskitoDateOptionsGenerator} from '@maskito/kit';
+
+/**
+ * If any of these tests fail,
+ * it can mean that browser autofill or composition are not working properly
+ * for Date mask
+ */
+describe('Date (maskitoTransform)', () => {
+    describe('[mode]="yyyy/mm/dd"', () => {
+        let options: MaskitoOptions = MASKITO_DEFAULT_OPTIONS;
+
+        beforeEach(() => {
+            options = maskitoDateOptionsGenerator({
+                mode: 'yyyy/mm/dd',
+                separator: '/',
+            });
+        });
+
+        // TODO: fix this bug later
+        xit('pads digit > 1 with zero for months (12345 => 1234/05)', () => {
+            expect(maskitoTransform('12345', options)).toBe('1234/05');
+        });
+
+        // TODO: https://github.com/taiga-family/maskito/pull/907
+        xit('accepts full width characters', () => {
+            expect(maskitoTransform('１２３４５', options)).toBe('1234/05');
+            expect(maskitoTransform('１２３４１２２６', options)).toBe('1234/12/26');
+        });
+    });
+});

projects/kit/src/lib/processors/valid-date-preprocessor.ts

@@ -1,6 +1,5 @@
 import {MaskitoPreprocessor} from '@maskito/core';
 
-import {POSSIBLE_DATE_RANGE_SEPARATOR} from '../constants';
 import {escapeRegExp, parseDateRangeString, validateDateString} from '../utils';
 
 export function createValidDatePreprocessor({
@@ -22,10 +21,6 @@ export function createValidDatePreprocessor({
             };
         }
 
-        if (POSSIBLE_DATE_RANGE_SEPARATOR.includes(data)) {
-            return {elementState, data: rangeSeparator};
-        }
-
         const newCharacters = data.replace(
             new RegExp(
                 `[^\\d${escapeRegExp(dateSegmentsSeparator)}${rangeSeparator}]`,
@@ -55,9 +50,7 @@ export function createValidDatePreprocessor({
             const {validatedDateString, updatedSelection} = validateDateString({
                 dateString,
                 dateModeTemplate,
-                offset: validatedValue
-                    ? validatedValue.length + rangeSeparator.length
-                    : 0,
+                offset: validatedValue.length,
                 selection: [from, to],
             });
 
@@ -68,8 +61,8 @@ export function createValidDatePreprocessor({
             to = updatedSelection[1];
 
             validatedValue +=
-                hasRangeSeparator && validatedValue
-                    ? rangeSeparator + validatedDateString
+                hasRangeSeparator && !validatedValue
+                    ? validatedDateString + rangeSeparator
                     : validatedDateString;
         }