From d5c363877e4f9ea0be4a367b6e96f2d8b983e56c Mon Sep 17 00:00:00 2001 From: Nikita Barsukov Date: Mon, 24 Jul 2023 14:20:06 +0300 Subject: [PATCH] deprecate(kit): use `dateSeparator` instead of deprecated `separator` for `DateRange` (#378) --- .../kit/date-range/date-range-separator.cy.ts | 6 +-- .../date-range-mask-doc.component.ts | 11 ++--- .../date-range-mask-doc.template.html | 41 ++++++++++++++----- .../examples/1-date-localization/mask.ts | 2 +- .../lib/constants/possible-dates-separator.ts | 2 +- .../lib/masks/date-range/date-range-mask.ts | 22 ++++++---- .../min-max-range-length-postprocessor.ts | 8 ++-- .../processors/swap-dates-postprocessor.ts | 8 ++-- .../processors/min-max-date-postprocessor.ts | 12 +++--- .../tests/valid-date-preprocessor.spec.ts | 2 +- .../lib/processors/valid-date-preprocessor.ts | 20 ++++----- .../lib/utils/date/parse-date-range-string.ts | 4 +- 12 files changed, 83 insertions(+), 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 index 990091c35..f90e78646 100644 --- 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 index 5d49f7c9a..086a25e0f 100644 --- 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,6 +58,7 @@ export class DateRangeMaskDocComponent implements GeneratorOptions { ]; mode: MaskitoDateMode = this.modeOptions[0]; + // TODO: drop in v2.0 separator = '.'; minStr = this.minMaxOptions[0]; maxStr = this.minMaxOptions[1]; @@ -65,6 +66,7 @@ export class DateRangeMaskDocComponent implements GeneratorOptions { max = new Date(this.maxStr); minLength: Partial> = {}; maxLength: Partial> = {}; + dateSeparator = '.'; rangeSeparator = ' – '; maskitoOptions: MaskitoOptions = maskitoDateRangeOptionsGenerator(this); @@ -72,13 +74,12 @@ export class DateRangeMaskDocComponent implements GeneratorOptions { @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 index d826cf611..04a664a47 100644 --- 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 @@ @@ -113,13 +113,13 @@ - Separator + Separator between date segments (days, months and years).

Default: @@ -127,6 +127,21 @@ (dot).

+ + + Separator between dates of the date range. +

+ Default: +  –  +

+ + Earliest date + Latest date + Minimal length of the range + Maximal length of the range + - Separator between dates of the date range. + Use + dateSeparator + instead. +

Default: -  –  + . + (dot).

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 index 25dd3491e..8fed2beb8 100644 --- 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 index cf58d881e..1c7ac7ec4 100644 --- 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 index 6e02dee2c..af0149502 100644 --- 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>; maxLength?: Partial>; + dateSeparator?: string; rangeSeparator?: string; }): Required { - 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,8 +46,8 @@ export function maskitoDateRangeOptionsGenerator({ createZeroPlaceholdersPreprocessor(), createValidDatePreprocessor({ dateModeTemplate, - dateSegmentsSeparator: separator, - datesSeparator: rangeSeparator, + rangeSeparator, + dateSegmentsSeparator: dateSeparator, }), ], postprocessors: [ @@ -49,19 +55,19 @@ export function maskitoDateRangeOptionsGenerator({ 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 index c028c51c0..6165c7f09 100644 --- 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>; maxLength?: Partial>; @@ -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 index af7ab1f5a..826bb3d6c 100644 --- 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 index 078346b70..701412a71 100644 --- 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 index e967ed983..aabaf8617 100644 --- 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]}; diff --git a/projects/kit/src/lib/processors/valid-date-preprocessor.ts b/projects/kit/src/lib/processors/valid-date-preprocessor.ts index 1b4d06f46..be27430e2 100644 --- a/projects/kit/src/lib/processors/valid-date-preprocessor.ts +++ b/projects/kit/src/lib/processors/valid-date-preprocessor.ts @@ -1,16 +1,16 @@ import {MaskitoPreprocessor} from '@maskito/core'; -import {POSSIBLE_DATES_SEPARATOR} from '../constants'; +import {POSSIBLE_DATE_RANGE_SEPARATOR} from '../constants'; import {escapeRegExp, parseDateRangeString, validateDateString} from '../utils'; export function createValidDatePreprocessor({ dateModeTemplate, dateSegmentsSeparator, - datesSeparator = '', + rangeSeparator = '', }: { dateModeTemplate: string; dateSegmentsSeparator: string; - datesSeparator?: string; + rangeSeparator?: string; }): MaskitoPreprocessor { return ({elementState, data}) => { const {value, selection} = elementState; @@ -22,13 +22,13 @@ export function createValidDatePreprocessor({ }; } - if (POSSIBLE_DATES_SEPARATOR.includes(data)) { - return {elementState, data: datesSeparator}; + if (POSSIBLE_DATE_RANGE_SEPARATOR.includes(data)) { + return {elementState, data: rangeSeparator}; } const newCharacters = data.replace( new RegExp( - `[^\\d${escapeRegExp(dateSegmentsSeparator)}${datesSeparator}]`, + `[^\\d${escapeRegExp(dateSegmentsSeparator)}${rangeSeparator}]`, 'g', ), '', @@ -44,19 +44,19 @@ export function createValidDatePreprocessor({ const dateStrings = parseDateRangeString( newPossibleValue, dateModeTemplate, - datesSeparator, + rangeSeparator, ); let validatedValue = ''; const hasRangeSeparator = - Boolean(datesSeparator) && newPossibleValue.includes(datesSeparator); + Boolean(rangeSeparator) && newPossibleValue.includes(rangeSeparator); for (const dateString of dateStrings) { const {validatedDateString, updatedSelection} = validateDateString({ dateString, dateModeTemplate, offset: validatedValue - ? validatedValue.length + datesSeparator.length + ? validatedValue.length + rangeSeparator.length : 0, selection: [from, to], }); @@ -69,7 +69,7 @@ export function createValidDatePreprocessor({ validatedValue += hasRangeSeparator && validatedValue - ? datesSeparator + validatedDateString + ? rangeSeparator + validatedDateString : validatedDateString; } diff --git a/projects/kit/src/lib/utils/date/parse-date-range-string.ts b/projects/kit/src/lib/utils/date/parse-date-range-string.ts index 23c0f4937..601e26d43 100644 --- a/projects/kit/src/lib/utils/date/parse-date-range-string.ts +++ b/projects/kit/src/lib/utils/date/parse-date-range-string.ts @@ -1,13 +1,13 @@ export function parseDateRangeString( dateRange: string, dateModeTemplate: string, - datesSeparator: string, + rangeSeparator: string, ): string[] { const digitsInDate = dateModeTemplate.replace(/\W/g, '').length; return ( dateRange - .replace(datesSeparator, '') + .replace(rangeSeparator, '') .match(new RegExp(`(\\D*\\d[^\\d\\s]*){1,${digitsInDate}}`, 'g')) || [] ); }