feat(kit): DateRange add configurable parameter rangeSeparator (#376

)
taiga-family · Jul 20, 2023 · d904842 · d904842
1 parent b5a534c
commit d904842
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 13 deletions.
diff --git a/...ts/demo-integrations/cypress/tests/kit/date-range/date-range-custom-range-separator.cy.ts b/...ts/demo-integrations/cypress/tests/kit/date-range/date-range-custom-range-separator.cy.ts
@@ -0,0 +1,20 @@
+import {DemoPath} from '@demo/constants';
+
+describe('DateRange | CustomRangeSeparator', () => {
+    describe(' ~ ', () => {
+        beforeEach(() => {
+            cy.visit(`/${DemoPath.DateRange}/API?rangeSeparator=~`);
+            cy.get('#demo-content input')
+                .should('be.visible')
+                .first()
+                .focus()
+                .as('input');
+        });
+
+        it('14.12.1997~09.07.2015', () => {
+            cy.get('@input')
+                .type('14121997972015')
+                .should('have.value', '14.12.1997~09.07.2015');
+        });
+    });
+});
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
@@ -8,7 +8,7 @@ import {
     MaskitoDateSegments,
 } from '@maskito/kit';
 import {TuiDocExample} from '@taiga-ui/addon-doc';
-import {CHAR_EN_DASH, CHAR_NO_BREAK_SPACE, tuiPure} from '@taiga-ui/cdk';
+import {tuiPure} from '@taiga-ui/cdk';
 
 type GeneratorOptions = Required<
     NonNullable<Parameters<typeof maskitoDateRangeOptionsGenerator>[0]>
@@ -36,6 +36,12 @@ export class DateRangeMaskDocComponent implements GeneratorOptions {
         ),
     };
 
+    readonly customRangeExample4: TuiDocExample = {
+        [DocExamplePrimaryTab.MaskitoOptions]: import(
+            './examples/4-range-separator/mask.ts?raw'
+        ),
+    };
+
     apiPageControl = new FormControl('');
 
     readonly modeOptions: MaskitoDateMode[] = [`dd/mm/yyyy`, `mm/dd/yyyy`, `yyyy/mm/dd`];
@@ -59,14 +65,17 @@ export class DateRangeMaskDocComponent implements GeneratorOptions {
     max = new Date(this.maxStr);
     minLength: Partial<MaskitoDateSegments<number>> = {};
     maxLength: Partial<MaskitoDateSegments<number>> = {};
+    rangeSeparator = ' – ';
 
     maskitoOptions: MaskitoOptions = maskitoDateRangeOptionsGenerator(this);
 
     @tuiPure
-    getPlaceholder(mode: MaskitoDateMode, separator: string): string {
-        const datesSep = `${CHAR_NO_BREAK_SPACE}${CHAR_EN_DASH}${CHAR_NO_BREAK_SPACE}`;
-
-        return `${mode.replace(/\//g, separator)}${datesSep}${mode.replace(
+    getPlaceholder(
+        mode: MaskitoDateMode,
+        separator: string,
+        rangeSeparator: string,
+    ): string {
+        return `${mode.replace(/\//g, separator)}${rangeSeparator}${mode.replace(
             /\//g,
             separator,
         )}`;

diff --git a/projects/demo/src/pages/kit/date-range/date-range-mask-doc.module.ts b/projects/demo/src/pages/kit/date-range/date-range-mask-doc.module.ts
@@ -11,6 +11,7 @@ import {DateRangeMaskDocComponent} from './date-range-mask-doc.component';
 import {DateRangeMaskDocExample1} from './examples/1-date-localization/component';
 import {DateRangeMaskDocExample2} from './examples/2-min-max/component';
 import {DateRangeMaskDocExample3} from './examples/3-min-max-length/component';
+import {DateRangeMaskDocExample4} from './examples/4-range-separator/component';
 
 @NgModule({
     imports: [
@@ -30,6 +31,7 @@ import {DateRangeMaskDocExample3} from './examples/3-min-max-length/component';
         DateRangeMaskDocExample1,
         DateRangeMaskDocExample2,
         DateRangeMaskDocExample3,
+        DateRangeMaskDocExample4,
     ],
     exports: [DateRangeMaskDocComponent],
 })

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
@@ -64,14 +64,31 @@
             </ng-template>
             <date-range-mask-doc-example-3></date-range-mask-doc-example-3>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="custom-range-separator"
+            heading="Custom range separator"
+            [description]="customRangeSeparatorDescription"
+            [content]="customRangeExample4"
+        >
+            <ng-template #customRangeSeparatorDescription>
+                Use
+                <code>rangeSeparator</code>
+                parameter to customize separator between dates of the date
+                range.
+            </ng-template>
+            <date-range-mask-doc-example-4></date-range-mask-doc-example-4>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>
         <tui-doc-demo [control]="apiPageControl">
             <ng-template>
                 <tui-input
                     tuiTextfieldCustomContent="tuiIconCalendarLarge"
-                    [tuiTextfieldFiller]="getPlaceholder(mode, separator)"
+                    [tuiTextfieldFiller]="
+                        getPlaceholder(mode, separator, rangeSeparator)
+                    "
                     [formControl]="apiPageControl"
                 >
                     Enter dates
@@ -150,6 +167,19 @@
             >
                 Maximal length of the range
             </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>
         </tui-doc-documentation>
     </ng-template>
 </tui-doc-page>
diff --git a/projects/demo/src/pages/kit/date-range/examples/4-range-separator/component.ts b/projects/demo/src/pages/kit/date-range/examples/4-range-separator/component.ts
@@ -0,0 +1,28 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+
+import mask from './mask';
+
+@Component({
+    selector: 'date-range-mask-doc-example-4',
+    template: `
+        <tui-input
+            tuiTextfieldCustomContent="tuiIconCalendarLarge"
+            [tuiTextfieldLabelOutside]="true"
+            [tuiTextfieldFiller]="filler"
+            [style.max-width.rem]="30"
+            [(ngModel)]="value"
+        >
+            <input
+                tuiTextfield
+                inputmode="decimal"
+                [maskito]="mask"
+            />
+        </tui-input>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DateRangeMaskDocExample4 {
+    value = '01.01.2023 ~ 05.01.2023';
+    readonly filler = 'dd.mm.yyyy ~ dd.mm.yyyy';
+    readonly mask = mask;
+}
diff --git a/projects/demo/src/pages/kit/date-range/examples/4-range-separator/mask.ts b/projects/demo/src/pages/kit/date-range/examples/4-range-separator/mask.ts
@@ -0,0 +1,6 @@
+import {maskitoDateRangeOptionsGenerator} from '@maskito/kit';
+
+export default maskitoDateRangeOptionsGenerator({
+    mode: 'dd/mm/yyyy',
+    rangeSeparator: ' ~ ',
+});
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
@@ -10,22 +10,22 @@ import {MaskitoDateMode, MaskitoDateSegments} from '../../types';
 import {createMinMaxRangeLengthPostprocessor} from './processors/min-max-range-length-postprocessor';
 import {createSwapDatesPostprocessor} from './processors/swap-dates-postprocessor';
 
-const DATE_RANGE_SEPARATOR = `${CHAR_NO_BREAK_SPACE}${CHAR_EN_DASH}${CHAR_NO_BREAK_SPACE}`;
-
 export function maskitoDateRangeOptionsGenerator({
     mode,
     separator = '.',
     min,
     max,
     minLength,
     maxLength,
+    rangeSeparator = `${CHAR_NO_BREAK_SPACE}${CHAR_EN_DASH}${CHAR_NO_BREAK_SPACE}`,
 }: {
     mode: MaskitoDateMode;
     separator?: string;
     min?: Date;
     max?: Date;
     minLength?: Partial<MaskitoDateSegments<number>>;
     maxLength?: Partial<MaskitoDateSegments<number>>;
+    rangeSeparator?: string;
 }): Required<MaskitoOptions> {
     const dateModeTemplate = mode.split('/').join(separator);
     const dateMask = Array.from(dateModeTemplate).map(char =>
@@ -34,34 +34,34 @@ export function maskitoDateRangeOptionsGenerator({
 
     return {
         ...MASKITO_DEFAULT_OPTIONS,
-        mask: [...dateMask, ...Array.from(DATE_RANGE_SEPARATOR), ...dateMask],
+        mask: [...dateMask, ...Array.from(rangeSeparator), ...dateMask],
         overwriteMode: 'replace',
         preprocessors: [
             createZeroPlaceholdersPreprocessor(),
             createValidDatePreprocessor({
                 dateModeTemplate,
                 dateSegmentsSeparator: separator,
-                datesSeparator: DATE_RANGE_SEPARATOR,
+                datesSeparator: rangeSeparator,
             }),
         ],
         postprocessors: [
             createMinMaxDatePostprocessor({
                 min,
                 max,
                 dateModeTemplate,
-                datesSeparator: DATE_RANGE_SEPARATOR,
+                datesSeparator: rangeSeparator,
                 dateSegmentSeparator: separator,
             }),
             createMinMaxRangeLengthPostprocessor({
                 dateModeTemplate,
                 minLength,
                 maxLength,
                 max,
-                datesSeparator: DATE_RANGE_SEPARATOR,
+                datesSeparator: rangeSeparator,
             }),
             createSwapDatesPostprocessor({
                 dateModeTemplate,
-                datesSeparator: DATE_RANGE_SEPARATOR,
+                datesSeparator: rangeSeparator,
             }),
         ],
     };