deprecate(kit): use dateSeparator instead of deprecated separator…

… for `DateRange` (#378)
taiga-family · Jul 24, 2023 · d5c3638 · d5c3638
1 parent 8210896
commit d5c3638
Show file tree

Hide file tree

Showing 12 changed files with 83 additions and 55 deletions.
diff --git a/projects/demo-integrations/cypress/tests/kit/date-range/date-range-separator.cy.ts b/projects/demo-integrations/cypress/tests/kit/date-range/date-range-separator.cy.ts
@@ -3,7 +3,7 @@ import {DemoPath} from '@demo/constants';
 describe('DateRange | Separator', () => {
     describe('/', () => {
         beforeEach(() => {
-            cy.visit(`/${DemoPath.DateRange}/API?separator=/`);
+            cy.visit(`/${DemoPath.DateRange}/API?dateSeparator=/`);
             cy.get('#demo-content input')
                 .should('be.visible')
                 .first()
@@ -28,7 +28,7 @@ describe('DateRange | Separator', () => {
 
     describe('-', () => {
         beforeEach(() => {
-            cy.visit(`/${DemoPath.DateRange}/API?separator=-`);
+            cy.visit(`/${DemoPath.DateRange}/API?dateSeparator=-`);
             cy.get('#demo-content input')
                 .should('be.visible')
                 .first()
@@ -53,7 +53,7 @@ describe('DateRange | Separator', () => {
 
     describe('dates separator', () => {
         beforeEach(() => {
-            cy.visit(`/${DemoPath.DateRange}/API?separator=/`);
+            cy.visit(`/${DemoPath.DateRange}/API?dateSeparator=/`);
             cy.get('#demo-content input')
                 .should('be.visible')
                 .first()

diff --git a/projects/demo/src/pages/kit/date-range/date-range-mask-doc.component.ts b/projects/demo/src/pages/kit/date-range/date-range-mask-doc.component.ts
@@ -58,27 +58,28 @@ export class DateRangeMaskDocComponent implements GeneratorOptions {
     ];
 
     mode: MaskitoDateMode = this.modeOptions[0];
+    // TODO: drop in v2.0
     separator = '.';
     minStr = this.minMaxOptions[0];
     maxStr = this.minMaxOptions[1];
     min = new Date(this.minStr);
     max = new Date(this.maxStr);
     minLength: Partial<MaskitoDateSegments<number>> = {};
     maxLength: Partial<MaskitoDateSegments<number>> = {};
+    dateSeparator = '.';
     rangeSeparator = ' – ';
 
     maskitoOptions: MaskitoOptions = maskitoDateRangeOptionsGenerator(this);
 
     @tuiPure
     getPlaceholder(
         mode: MaskitoDateMode,
-        separator: string,
+        dateSeparator: string,
         rangeSeparator: string,
     ): string {
-        return `${mode.replace(/\//g, separator)}${rangeSeparator}${mode.replace(
-            /\//g,
-            separator,
-        )}`;
+        const datePlaceholder = mode.replace(/\//g, dateSeparator);
+
+        return `${datePlaceholder}${rangeSeparator}${datePlaceholder}`;
     }
 
     updateOptions(): void {

diff --git a/projects/demo/src/pages/kit/date-range/date-range-mask-doc.template.html b/projects/demo/src/pages/kit/date-range/date-range-mask-doc.template.html
@@ -87,7 +87,7 @@
                 <tui-input
                     tuiTextfieldCustomContent="tuiIconCalendarLarge"
                     [tuiTextfieldFiller]="
-                        getPlaceholder(mode, separator, rangeSeparator)
+                        getPlaceholder(mode, dateSeparator, rangeSeparator)
                     "
                     [formControl]="apiPageControl"
                 >
@@ -113,20 +113,35 @@
             </ng-template>
 
             <ng-template
-                documentationPropertyName="separator"
+                documentationPropertyName="dateSeparator"
                 documentationPropertyMode="input"
                 documentationPropertyType="string"
-                [(documentationPropertyValue)]="separator"
+                [(documentationPropertyValue)]="dateSeparator"
                 (documentationPropertyValueChange)="updateOptions()"
             >
-                Separator
+                Separator between date segments (days, months and years).
 
                 <p>
                     <strong>Default:</strong>
                     <code>.</code>
                     (dot).
                 </p>
             </ng-template>
+
+            <ng-template
+                documentationPropertyName="rangeSeparator"
+                documentationPropertyMode="input"
+                documentationPropertyType="string"
+                [(documentationPropertyValue)]="rangeSeparator"
+                (documentationPropertyValueChange)="updateOptions()"
+            >
+                Separator between dates of the date range.
+                <p>
+                    <strong>Default:</strong>
+                    <code> – </code>
+                </p>
+            </ng-template>
+
             <ng-template
                 documentationPropertyName="min"
                 documentationPropertyMode="input"
@@ -137,6 +152,7 @@
             >
                 Earliest date
             </ng-template>
+
             <ng-template
                 documentationPropertyName="max"
                 documentationPropertyMode="input"
@@ -147,6 +163,7 @@
             >
                 Latest date
             </ng-template>
+
             <ng-template
                 documentationPropertyName="minLength"
                 documentationPropertyMode="input"
@@ -157,6 +174,7 @@
             >
                 Minimal length of the range
             </ng-template>
+
             <ng-template
                 documentationPropertyName="maxLength"
                 documentationPropertyMode="input"
@@ -167,17 +185,20 @@
             >
                 Maximal length of the range
             </ng-template>
+
             <ng-template
-                documentationPropertyName="rangeSeparator"
+                documentationPropertyName="separator"
                 documentationPropertyMode="input"
-                documentationPropertyType="string"
-                [(documentationPropertyValue)]="rangeSeparator"
-                (documentationPropertyValueChange)="updateOptions()"
+                [documentationPropertyDeprecated]="true"
             >
-                Separator between dates of the date range.
+                Use
+                <code>dateSeparator</code>
+                instead.
+
                 <p>
                     <strong>Default:</strong>
-                    <code> – </code>
+                    <code>.</code>
+                    (dot).
                 </p>
             </ng-template>
         </tui-doc-documentation>

diff --git a/projects/demo/src/pages/kit/date-range/examples/1-date-localization/mask.ts b/projects/demo/src/pages/kit/date-range/examples/1-date-localization/mask.ts
@@ -2,5 +2,5 @@ import {maskitoDateRangeOptionsGenerator} from '@maskito/kit';
 
 export default maskitoDateRangeOptionsGenerator({
     mode: 'mm/dd/yyyy',
-    separator: '/',
+    dateSeparator: '/',
 });
diff --git a/projects/kit/src/lib/constants/possible-dates-separator.ts b/projects/kit/src/lib/constants/possible-dates-separator.ts
@@ -1,6 +1,6 @@
 import {CHAR_EM_DASH, CHAR_EN_DASH, CHAR_HYPHEN, CHAR_MINUS} from './unicode-characters';
 
-export const POSSIBLE_DATES_SEPARATOR = [
+export const POSSIBLE_DATE_RANGE_SEPARATOR = [
     CHAR_HYPHEN,
     CHAR_EN_DASH,
     CHAR_EM_DASH,

diff --git a/projects/kit/src/lib/masks/date-range/date-range-mask.ts b/projects/kit/src/lib/masks/date-range/date-range-mask.ts
@@ -17,19 +17,25 @@ export function maskitoDateRangeOptionsGenerator({
     max,
     minLength,
     maxLength,
+    dateSeparator = separator,
     rangeSeparator = `${CHAR_NO_BREAK_SPACE}${CHAR_EN_DASH}${CHAR_NO_BREAK_SPACE}`,
 }: {
     mode: MaskitoDateMode;
+    /**
+     * @deprecated use `dateSeparator` instead
+     * TODO: drop in v2.0
+     */
     separator?: string;
     min?: Date;
     max?: Date;
     minLength?: Partial<MaskitoDateSegments<number>>;
     maxLength?: Partial<MaskitoDateSegments<number>>;
+    dateSeparator?: string;
     rangeSeparator?: string;
 }): Required<MaskitoOptions> {
-    const dateModeTemplate = mode.split('/').join(separator);
+    const dateModeTemplate = mode.split('/').join(dateSeparator);
     const dateMask = Array.from(dateModeTemplate).map(char =>
-        char === separator ? char : /\d/,
+        char === dateSeparator ? char : /\d/,
     );
 
     return {
@@ -40,28 +46,28 @@ export function maskitoDateRangeOptionsGenerator({
             createZeroPlaceholdersPreprocessor(),
             createValidDatePreprocessor({
                 dateModeTemplate,
-                dateSegmentsSeparator: separator,
-                datesSeparator: rangeSeparator,
+                rangeSeparator,
+                dateSegmentsSeparator: dateSeparator,
             }),
         ],
         postprocessors: [
             createMinMaxDatePostprocessor({
                 min,
                 max,
                 dateModeTemplate,
-                datesSeparator: rangeSeparator,
-                dateSegmentSeparator: separator,
+                rangeSeparator,
+                dateSegmentSeparator: dateSeparator,
             }),
             createMinMaxRangeLengthPostprocessor({
                 dateModeTemplate,
                 minLength,
                 maxLength,
                 max,
-                datesSeparator: rangeSeparator,
+                rangeSeparator,
             }),
             createSwapDatesPostprocessor({
                 dateModeTemplate,
-                datesSeparator: rangeSeparator,
+                rangeSeparator,
             }),
         ],
     };

diff --git a/projects/kit/src/lib/masks/date-range/processors/min-max-range-length-postprocessor.ts b/projects/kit/src/lib/masks/date-range/processors/min-max-range-length-postprocessor.ts
@@ -17,13 +17,13 @@ import {
 
 export function createMinMaxRangeLengthPostprocessor({
     dateModeTemplate,
-    datesSeparator,
+    rangeSeparator,
     minLength,
     maxLength,
     max = DEFAULT_MAX_DATE,
 }: {
     dateModeTemplate: string;
-    datesSeparator: string;
+    rangeSeparator: string;
     max?: Date;
     minLength?: Partial<MaskitoDateSegments<number>>;
     maxLength?: Partial<MaskitoDateSegments<number>>;
@@ -33,7 +33,7 @@ export function createMinMaxRangeLengthPostprocessor({
     }
 
     return ({value, selection}) => {
-        const dateStrings = parseDateRangeString(value, dateModeTemplate, datesSeparator);
+        const dateStrings = parseDateRangeString(value, dateModeTemplate, rangeSeparator);
 
         if (
             dateStrings.length !== 2 ||
@@ -69,7 +69,7 @@ export function createMinMaxRangeLengthPostprocessor({
             selection,
             value:
                 dateStrings[0] +
-                datesSeparator +
+                rangeSeparator +
                 toDateString(dateToSegments(minMaxLengthClampedToDate), dateModeTemplate),
         };
     };

diff --git a/projects/kit/src/lib/masks/date-range/processors/swap-dates-postprocessor.ts b/projects/kit/src/lib/masks/date-range/processors/swap-dates-postprocessor.ts
@@ -9,13 +9,13 @@ import {
 
 export function createSwapDatesPostprocessor({
     dateModeTemplate,
-    datesSeparator,
+    rangeSeparator,
 }: {
     dateModeTemplate: string;
-    datesSeparator: string;
+    rangeSeparator: string;
 }): MaskitoPostprocessor {
     return ({value, selection}) => {
-        const dateStrings = parseDateRangeString(value, dateModeTemplate, datesSeparator);
+        const dateStrings = parseDateRangeString(value, dateModeTemplate, rangeSeparator);
         const isDateRangeComplete =
             dateStrings.length === 2 &&
             dateStrings.every(date => isDateStringComplete(date, dateModeTemplate));
@@ -33,7 +33,7 @@ export function createSwapDatesPostprocessor({
 
         return {
             selection,
-            value: fromDate > toDate ? dateStrings.reverse().join(datesSeparator) : value,
+            value: fromDate > toDate ? dateStrings.reverse().join(rangeSeparator) : value,
         };
     };
 }
diff --git a/projects/kit/src/lib/processors/min-max-date-postprocessor.ts b/projects/kit/src/lib/processors/min-max-date-postprocessor.ts
@@ -16,23 +16,23 @@ export function createMinMaxDatePostprocessor({
     dateModeTemplate,
     min = DEFAULT_MIN_DATE,
     max = DEFAULT_MAX_DATE,
-    datesSeparator = '',
+    rangeSeparator = '',
     dateSegmentSeparator = '.',
 }: {
     dateModeTemplate: string;
     min?: Date;
     max?: Date;
-    datesSeparator?: string;
+    rangeSeparator?: string;
     dateSegmentSeparator?: string;
 }): MaskitoPostprocessor {
     return ({value, selection}) => {
-        const endsWithDatesSeparator = datesSeparator && value.endsWith(datesSeparator);
-        const dateStrings = parseDateRangeString(value, dateModeTemplate, datesSeparator);
+        const endsWithRangeSeparator = rangeSeparator && value.endsWith(rangeSeparator);
+        const dateStrings = parseDateRangeString(value, dateModeTemplate, rangeSeparator);
 
         let validatedValue = '';
 
         for (const dateString of dateStrings) {
-            validatedValue += validatedValue ? datesSeparator : '';
+            validatedValue += validatedValue ? rangeSeparator : '';
 
             const parsedDate = parseDateString(dateString, dateModeTemplate);
 
@@ -56,7 +56,7 @@ export function createMinMaxDatePostprocessor({
 
         return {
             selection,
-            value: validatedValue + (endsWithDatesSeparator ? datesSeparator : ''),
+            value: validatedValue + (endsWithRangeSeparator ? rangeSeparator : ''),
         };
     };
 }
diff --git a/projects/kit/src/lib/processors/tests/valid-date-preprocessor.spec.ts b/projects/kit/src/lib/processors/tests/valid-date-preprocessor.spec.ts
@@ -5,7 +5,7 @@ describe('createValidDatePreprocessor', () => {
         const preprocessor = createValidDatePreprocessor({
             dateModeTemplate: 'dd.mm.yyyy',
             dateSegmentsSeparator: '.',
-            datesSeparator: ' – ',
+            rangeSeparator: ' – ',
         });
         const EMPTY_INPUT = {value: '', selection: [0, 0] as [number, number]};