From f2bb276715e2ef660da003aa1e17dfd45d54fb6b Mon Sep 17 00:00:00 2001 From: Stanslav Zaytsev Date: Tue, 12 Mar 2024 16:23:43 +0300 Subject: [PATCH 01/23] feat(kit): added dateTimeSeparator for DateTime --- .../date-time/date-time-mask-doc.component.ts | 3 ++- .../src/lib/masks/date-time/date-time-mask.ts | 18 ++++++++++------- .../min-max-date-time-postprocessor.ts | 20 +++++++++++++++++-- .../valid-date-time-preprocessor.ts | 11 ++++++---- .../utils/is-date-time-string-complete.ts | 5 +++-- .../date-time/utils/parse-date-time-string.ts | 5 +++-- .../processors/normalize-date-preprocessor.ts | 10 ++++++---- .../kit/src/lib/utils/date/to-date-string.ts | 3 ++- .../lib/utils/date/validate-date-string.ts | 15 ++++++++++++-- 9 files changed, 65 insertions(+), 25 deletions(-) diff --git a/projects/demo/src/pages/kit/date-time/date-time-mask-doc.component.ts b/projects/demo/src/pages/kit/date-time/date-time-mask-doc.component.ts index bb657183d..f71456261 100644 --- a/projects/demo/src/pages/kit/date-time/date-time-mask-doc.component.ts +++ b/projects/demo/src/pages/kit/date-time/date-time-mask-doc.component.ts @@ -9,7 +9,7 @@ import type {TuiDocExample} from '@taiga-ui/addon-doc'; import {TuiAddonDocModule} from '@taiga-ui/addon-doc'; import {CHAR_NO_BREAK_SPACE, tuiPure} from '@taiga-ui/cdk'; import {TuiLinkModule, TuiTextfieldControllerModule} from '@taiga-ui/core'; -import {TuiInputModule} from '@taiga-ui/kit'; +import {DATE_TIME_SEPARATOR, TuiInputModule} from '@taiga-ui/kit'; import {DateTimeMaskDocExample1} from './examples/1-date-time-localization/component'; import {DateTimeMaskDocExample2} from './examples/2-min-max/component'; @@ -71,6 +71,7 @@ export class DateTimeMaskDocComponent implements GeneratorOptions { public dateMode: MaskitoDateMode = this.dateModeOptions[0]; public timeMode: MaskitoTimeMode = this.timeModeOptions[0]; + public dateTimeSeparator = DATE_TIME_SEPARATOR; public dateSeparator = '.'; public min = new Date(this.minStr); public max = new Date(this.maxStr); diff --git a/projects/kit/src/lib/masks/date-time/date-time-mask.ts b/projects/kit/src/lib/masks/date-time/date-time-mask.ts index 2452d4061..dd76cff46 100644 --- a/projects/kit/src/lib/masks/date-time/date-time-mask.ts +++ b/projects/kit/src/lib/masks/date-time/date-time-mask.ts @@ -11,7 +11,7 @@ import { normalizeDatePreprocessor, } from '../../processors'; import type {MaskitoDateMode, MaskitoTimeMode} from '../../types'; -import {DATE_TIME_SEPARATOR, POSSIBLE_DATE_TIME_SEPARATOR} from './constants'; +import {DATE_TIME_SEPARATOR} from './constants'; import {createMinMaxDateTimePostprocessor} from './postprocessors'; import {createValidDateTimePreprocessor} from './preprocessors'; import {parseDateTimeString} from './utils'; @@ -22,12 +22,14 @@ export function maskitoDateTimeOptionsGenerator({ dateSeparator = '.', min, max, + dateTimeSeparator = DATE_TIME_SEPARATOR, }: { dateMode: MaskitoDateMode; timeMode: MaskitoTimeMode; dateSeparator?: string; max?: Date; min?: Date; + dateTimeSeparator?: string; }): Required { const dateModeTemplate = dateMode.split('/').join(dateSeparator); @@ -37,7 +39,7 @@ export function maskitoDateTimeOptionsGenerator({ ...Array.from(dateModeTemplate).map(char => char === dateSeparator ? char : /\d/, ), - ...DATE_TIME_SEPARATOR.split(''), + ...dateTimeSeparator.split(''), ...Array.from(timeMode).map(char => TIME_FIXED_CHARACTERS.includes(char) ? char : /\d/, ), @@ -49,17 +51,19 @@ export function maskitoDateTimeOptionsGenerator({ createFirstDateEndSeparatorPreprocessor({ dateModeTemplate, dateSegmentSeparator: dateSeparator, - firstDateEndSeparator: DATE_TIME_SEPARATOR, - pseudoFirstDateEndSeparators: POSSIBLE_DATE_TIME_SEPARATOR, + firstDateEndSeparator: dateTimeSeparator, + pseudoFirstDateEndSeparators: dateTimeSeparator.split(''), }), createZeroPlaceholdersPreprocessor(), normalizeDatePreprocessor({ dateModeTemplate, dateSegmentsSeparator: dateSeparator, + dateTimeSeparator, }), createValidDateTimePreprocessor({ dateModeTemplate, dateSegmentsSeparator: dateSeparator, + dateTimeSeparator, }), ], postprocessors: [ @@ -70,21 +74,21 @@ export function maskitoDateTimeOptionsGenerator({ const [dateString, timeString] = parseDateTimeString( value, dateModeTemplate, + dateTimeSeparator, ); return {dateStrings: [dateString], restPart: timeString}; }, uniteFn: ([validatedDateString], initialValue) => validatedDateString + - (initialValue.includes(DATE_TIME_SEPARATOR) - ? DATE_TIME_SEPARATOR - : ''), + (initialValue.includes(dateTimeSeparator) ? dateTimeSeparator : ''), }), createMinMaxDateTimePostprocessor({ min, max, dateModeTemplate, timeMode, + dateTimeSeparator, }), ], }; diff --git a/projects/kit/src/lib/masks/date-time/postprocessors/min-max-date-time-postprocessor.ts b/projects/kit/src/lib/masks/date-time/postprocessors/min-max-date-time-postprocessor.ts index 379587f4a..b8ec04e91 100644 --- a/projects/kit/src/lib/masks/date-time/postprocessors/min-max-date-time-postprocessor.ts +++ b/projects/kit/src/lib/masks/date-time/postprocessors/min-max-date-time-postprocessor.ts @@ -12,6 +12,7 @@ import { } from '../../../utils'; import {raiseSegmentValueToMin} from '../../../utils/date/raise-segment-value-to-min'; import {parseTimeString} from '../../../utils/time'; +import {DATE_TIME_SEPARATOR} from '../constants'; import {isDateTimeStringComplete, parseDateTimeString} from '../utils'; export function createMinMaxDateTimePostprocessor({ @@ -19,18 +20,31 @@ export function createMinMaxDateTimePostprocessor({ timeMode, min = DEFAULT_MIN_DATE, max = DEFAULT_MAX_DATE, + dateTimeSeparator = DATE_TIME_SEPARATOR, }: { dateModeTemplate: string; timeMode: MaskitoTimeMode; min?: Date; max?: Date; + dateTimeSeparator?: string; }): MaskitoPostprocessor { return ({value, selection}) => { - const [dateString, timeString] = parseDateTimeString(value, dateModeTemplate); + const [dateString, timeString] = parseDateTimeString( + value, + dateModeTemplate, + dateTimeSeparator, + ); const parsedDate = parseDateString(dateString, dateModeTemplate); const parsedTime = parseTimeString(timeString); - if (!isDateTimeStringComplete(value, dateModeTemplate, timeMode)) { + if ( + !isDateTimeStringComplete( + value, + dateModeTemplate, + timeMode, + dateTimeSeparator, + ) + ) { const fixedDate = raiseSegmentValueToMin(parsedDate, dateModeTemplate); const {year, month, day} = isDateStringComplete(dateString, dateModeTemplate) ? dateToSegments(clamp(segmentsToDate(fixedDate), min, max)) @@ -44,6 +58,7 @@ export function createMinMaxDateTimePostprocessor({ ...parsedTime, }, dateModeTemplate, + dateTimeSeparator, timeMode, ); const tail = value.slice(fixedValue.length); @@ -60,6 +75,7 @@ export function createMinMaxDateTimePostprocessor({ const validatedValue = toDateString( dateToSegments(clampedDate), dateModeTemplate, + dateTimeSeparator, timeMode, ); diff --git a/projects/kit/src/lib/masks/date-time/preprocessors/valid-date-time-preprocessor.ts b/projects/kit/src/lib/masks/date-time/preprocessors/valid-date-time-preprocessor.ts index 72db0dc25..8e1a0aa3e 100644 --- a/projects/kit/src/lib/masks/date-time/preprocessors/valid-date-time-preprocessor.ts +++ b/projects/kit/src/lib/masks/date-time/preprocessors/valid-date-time-preprocessor.ts @@ -3,15 +3,16 @@ import type {MaskitoPreprocessor} from '@maskito/core'; import {DEFAULT_TIME_SEGMENT_MAX_VALUES, TIME_FIXED_CHARACTERS} from '../../../constants'; import {escapeRegExp, validateDateString} from '../../../utils'; import {padTimeSegments, validateTimeString} from '../../../utils/time'; -import {DATE_TIME_SEPARATOR} from '../constants'; import {parseDateTimeString} from '../utils'; export function createValidDateTimePreprocessor({ dateModeTemplate, dateSegmentsSeparator, + dateTimeSeparator, }: { dateModeTemplate: string; dateSegmentsSeparator: string; + dateTimeSeparator: string; }): MaskitoPreprocessor { const invalidCharsRegExp = new RegExp( `[^\\d${TIME_FIXED_CHARACTERS.map(escapeRegExp).join('')}${escapeRegExp( @@ -42,15 +43,17 @@ export function createValidDateTimePreprocessor({ const [dateString, timeString] = parseDateTimeString( newPossibleValue, dateModeTemplate, + dateTimeSeparator, ); let validatedValue = ''; - const hasDateTimeSeparator = newPossibleValue.includes(DATE_TIME_SEPARATOR); + const hasDateTimeSeparator = newPossibleValue.includes(dateTimeSeparator); const {validatedDateString, updatedSelection} = validateDateString({ dateString, dateModeTemplate, offset: 0, selection: [from, to], + dateTimeSeparator, }); if (dateString && !validatedDateString) { @@ -66,7 +69,7 @@ export function createValidDateTimePreprocessor({ const {validatedTimeString, updatedTimeSelection} = validateTimeString({ timeString, paddedMaxValues, - offset: validatedValue.length + DATE_TIME_SEPARATOR.length, + offset: validatedValue.length + dateTimeSeparator.length, selection: [from, to], }); @@ -77,7 +80,7 @@ export function createValidDateTimePreprocessor({ to = updatedTimeSelection[1]; validatedValue += hasDateTimeSeparator - ? DATE_TIME_SEPARATOR + validatedTimeString + ? dateTimeSeparator + validatedTimeString : validatedTimeString; const newData = validatedValue.slice(from, to); diff --git a/projects/kit/src/lib/masks/date-time/utils/is-date-time-string-complete.ts b/projects/kit/src/lib/masks/date-time/utils/is-date-time-string-complete.ts index b3f57ec10..5f6306538 100644 --- a/projects/kit/src/lib/masks/date-time/utils/is-date-time-string-complete.ts +++ b/projects/kit/src/lib/masks/date-time/utils/is-date-time-string-complete.ts @@ -4,12 +4,13 @@ export function isDateTimeStringComplete( dateTimeString: string, dateMode: string, timeMode: string, + dateTimeSeparator = DATE_TIME_SEPARATOR, ): boolean { return ( dateTimeString.length >= - dateMode.length + timeMode.length + DATE_TIME_SEPARATOR.length && + dateMode.length + timeMode.length + dateTimeSeparator.length && dateTimeString - .split(DATE_TIME_SEPARATOR)[0] + .split(dateTimeSeparator)[0] .split(/\D/) .every(segment => !segment.match(/^0+$/)) ); diff --git a/projects/kit/src/lib/masks/date-time/utils/parse-date-time-string.ts b/projects/kit/src/lib/masks/date-time/utils/parse-date-time-string.ts index 2a9ef60eb..164891472 100644 --- a/projects/kit/src/lib/masks/date-time/utils/parse-date-time-string.ts +++ b/projects/kit/src/lib/masks/date-time/utils/parse-date-time-string.ts @@ -3,14 +3,15 @@ import {DATE_TIME_SEPARATOR} from '../constants'; export function parseDateTimeString( dateTime: string, dateModeTemplate: string, + dateTimeSeparator = DATE_TIME_SEPARATOR, ): string[] { - const hasSeparator = dateTime.includes(DATE_TIME_SEPARATOR); + const hasSeparator = dateTime.includes(dateTimeSeparator); return [ dateTime.slice(0, dateModeTemplate.length), dateTime.slice( hasSeparator - ? dateModeTemplate.length + DATE_TIME_SEPARATOR.length + ? dateModeTemplate.length + dateTimeSeparator.length : dateModeTemplate.length, ), ]; diff --git a/projects/kit/src/lib/processors/normalize-date-preprocessor.ts b/projects/kit/src/lib/processors/normalize-date-preprocessor.ts index 4d4af18fa..7225b80ee 100644 --- a/projects/kit/src/lib/processors/normalize-date-preprocessor.ts +++ b/projects/kit/src/lib/processors/normalize-date-preprocessor.ts @@ -6,18 +6,20 @@ export function normalizeDatePreprocessor({ dateModeTemplate, dateSegmentsSeparator, rangeSeparator = '', + dateTimeSeparator = DATE_TIME_SEPARATOR, }: { dateModeTemplate: string; dateSegmentsSeparator: string; rangeSeparator?: string; + dateTimeSeparator?: string; }): MaskitoPreprocessor { return ({elementState, data}) => { const separator = rangeSeparator ? new RegExp(`${rangeSeparator}|-`) - : DATE_TIME_SEPARATOR; + : dateTimeSeparator; const possibleDates = data.split(separator); - const dates = data.includes(DATE_TIME_SEPARATOR) + const dates = data.includes(dateTimeSeparator) ? [possibleDates[0]] : possibleDates; @@ -37,8 +39,8 @@ export function normalizeDatePreprocessor({ return { elementState, data: `${newData}${ - data.includes(DATE_TIME_SEPARATOR) - ? DATE_TIME_SEPARATOR + possibleDates[1] || '' + data.includes(dateTimeSeparator) + ? dateTimeSeparator + possibleDates[1] || '' : '' }`, }; diff --git a/projects/kit/src/lib/utils/date/to-date-string.ts b/projects/kit/src/lib/utils/date/to-date-string.ts index 9df218a7e..3f54a6b1d 100644 --- a/projects/kit/src/lib/utils/date/to-date-string.ts +++ b/projects/kit/src/lib/utils/date/to-date-string.ts @@ -12,10 +12,11 @@ export function toDateString( milliseconds, }: Partial>, dateMode: string, + dateTimeSeparator = DATE_TIME_SEPARATOR, timeMode?: string, ): string { const safeYear = dateMode.match(/y/g)?.length === 2 ? year?.slice(-2) : year; - const fullMode = dateMode + (timeMode ? DATE_TIME_SEPARATOR + timeMode : ''); + const fullMode = dateMode + (timeMode ? dateTimeSeparator + timeMode : ''); return fullMode .replaceAll(/d+/g, day ?? '') diff --git a/projects/kit/src/lib/utils/date/validate-date-string.ts b/projects/kit/src/lib/utils/date/validate-date-string.ts index 7a0d8b9cf..7287151b6 100644 --- a/projects/kit/src/lib/utils/date/validate-date-string.ts +++ b/projects/kit/src/lib/utils/date/validate-date-string.ts @@ -1,4 +1,5 @@ import {DATE_SEGMENTS_MAX_VALUES} from '../../constants'; +import {DATE_TIME_SEPARATOR} from '../../masks/date-time/constants'; import type {MaskitoDateSegments} from '../../types'; import {getDateSegmentValueLength} from './date-segment-value-length'; import {parseDateString} from './parse-date-string'; @@ -9,11 +10,13 @@ export function validateDateString({ dateModeTemplate, offset, selection: [from, to], + dateTimeSeparator = DATE_TIME_SEPARATOR, }: { dateString: string; dateModeTemplate: string; offset: number; selection: [number, number]; + dateTimeSeparator?: string; }): {validatedDateString: string; updatedSelection: [number, number]} { const parsedDate = parseDateString(dateString, dateModeTemplate); const dateSegments = Object.entries(parsedDate) as Array< @@ -22,7 +25,11 @@ export function validateDateString({ const validatedDateSegments: Partial = {}; for (const [segmentName, segmentValue] of dateSegments) { - const validatedDate = toDateString(validatedDateSegments, dateModeTemplate); + const validatedDate = toDateString( + validatedDateSegments, + dateModeTemplate, + dateTimeSeparator, + ); const maxSegmentValue = DATE_SEGMENTS_MAX_VALUES[segmentName]; const fantomSeparator = validatedDate.length && 1; @@ -48,7 +55,11 @@ export function validateDateString({ validatedDateSegments[segmentName] = segmentValue; } - const validatedDateString = toDateString(validatedDateSegments, dateModeTemplate); + const validatedDateString = toDateString( + validatedDateSegments, + dateModeTemplate, + dateTimeSeparator, + ); const addedDateSegmentSeparators = validatedDateString.length - dateString.length; return { From c4ea092505c48eb4a925a37dcdcacdaad3cdfe75 Mon Sep 17 00:00:00 2001 From: Stanslav Zaytsev Date: Fri, 22 Mar 2024 17:01:57 +0300 Subject: [PATCH 02/23] fix(demo): resolved conflict in date-time-mask-example --- .../date-time/date-time-mask-doc.component.ts | 19 ++++++--- .../date-time-mask-doc.template.html | 33 +++++++++++++++- .../2-date-time-separator/component.ts | 39 +++++++++++++++++++ .../examples/2-date-time-separator/mask.ts | 7 ++++ .../{2-min-max => 3-min-max}/component.ts | 4 +- .../examples/{2-min-max => 3-min-max}/mask.ts | 0 6 files changed, 92 insertions(+), 10 deletions(-) create mode 100644 projects/demo/src/pages/kit/date-time/examples/2-date-time-separator/component.ts create mode 100644 projects/demo/src/pages/kit/date-time/examples/2-date-time-separator/mask.ts rename projects/demo/src/pages/kit/date-time/examples/{2-min-max => 3-min-max}/component.ts (92%) rename projects/demo/src/pages/kit/date-time/examples/{2-min-max => 3-min-max}/mask.ts (100%) diff --git a/projects/demo/src/pages/kit/date-time/date-time-mask-doc.component.ts b/projects/demo/src/pages/kit/date-time/date-time-mask-doc.component.ts index f71456261..329b7b98a 100644 --- a/projects/demo/src/pages/kit/date-time/date-time-mask-doc.component.ts +++ b/projects/demo/src/pages/kit/date-time/date-time-mask-doc.component.ts @@ -7,12 +7,13 @@ import type {MaskitoDateMode, MaskitoTimeMode} from '@maskito/kit'; import {maskitoDateTimeOptionsGenerator} from '@maskito/kit'; import type {TuiDocExample} from '@taiga-ui/addon-doc'; import {TuiAddonDocModule} from '@taiga-ui/addon-doc'; -import {CHAR_NO_BREAK_SPACE, tuiPure} from '@taiga-ui/cdk'; +import {tuiPure} from '@taiga-ui/cdk'; import {TuiLinkModule, TuiTextfieldControllerModule} from '@taiga-ui/core'; import {DATE_TIME_SEPARATOR, TuiInputModule} from '@taiga-ui/kit'; import {DateTimeMaskDocExample1} from './examples/1-date-time-localization/component'; -import {DateTimeMaskDocExample2} from './examples/2-min-max/component'; +import {DateTimeMaskDocExample2} from './examples/2-date-time-separator/component'; +import {DateTimeMaskDocExample3} from './examples/3-min-max/component'; type GeneratorOptions = Required< NonNullable[0]> @@ -30,6 +31,7 @@ type GeneratorOptions = Required< TuiTextfieldControllerModule, DateTimeMaskDocExample1, DateTimeMaskDocExample2, + DateTimeMaskDocExample3, ], templateUrl: './date-time-mask-doc.template.html', changeDetection: ChangeDetectionStrategy.OnPush, @@ -41,8 +43,14 @@ export class DateTimeMaskDocComponent implements GeneratorOptions { ), }; + protected readonly dateTimeSeparatorDocExample: TuiDocExample = { + [DocExamplePrimaryTab.MaskitoOptions]: import( + './examples/2-date-time-separator/mask.ts?raw' + ), + }; + protected readonly dateTimeMinMax: TuiDocExample = { - [DocExamplePrimaryTab.MaskitoOptions]: import('./examples/2-min-max/mask.ts?raw'), + [DocExamplePrimaryTab.MaskitoOptions]: import('./examples/3-min-max/mask.ts?raw'), }; protected apiPageControl = new FormControl(''); @@ -83,10 +91,9 @@ export class DateTimeMaskDocComponent implements GeneratorOptions { dateMode: MaskitoDateMode, timeMode: MaskitoTimeMode, separator: string, + dateTimeSeparator: string, ): string { - const dateTimeSep = `,${CHAR_NO_BREAK_SPACE}`; - - return `${dateMode.replaceAll('/', separator)}${dateTimeSep}${timeMode}`; + return `${dateMode.replaceAll('/', separator)}${dateTimeSeparator}${timeMode}`; } protected updateOptions(): void { diff --git a/projects/demo/src/pages/kit/date-time/date-time-mask-doc.template.html b/projects/demo/src/pages/kit/date-time/date-time-mask-doc.template.html index e891d00a5..96f3d272c 100644 --- a/projects/demo/src/pages/kit/date-time/date-time-mask-doc.template.html +++ b/projects/demo/src/pages/kit/date-time/date-time-mask-doc.template.html @@ -25,6 +25,20 @@ + + + Use + dateTimeSeparator + to set a convenient date and time separator. + + + + . - + @@ -57,7 +71,7 @@ Enter date and time + + Date time separator + +

+ Default: + ,  +

+ + + Custom date and time separator + + + `, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class DateTimeMaskDocExample2 { + protected value = '05.02.2004; 10:10'; + protected readonly filler = 'dd.mm.yyyy; hh:mm'; + protected readonly mask = mask; +} diff --git a/projects/demo/src/pages/kit/date-time/examples/2-date-time-separator/mask.ts b/projects/demo/src/pages/kit/date-time/examples/2-date-time-separator/mask.ts new file mode 100644 index 000000000..a2daa4465 --- /dev/null +++ b/projects/demo/src/pages/kit/date-time/examples/2-date-time-separator/mask.ts @@ -0,0 +1,7 @@ +import {maskitoDateTimeOptionsGenerator} from '@maskito/kit'; + +export default maskitoDateTimeOptionsGenerator({ + dateMode: 'dd/mm/yyyy', + timeMode: 'HH:MM', + dateTimeSeparator: '; ', +}); diff --git a/projects/demo/src/pages/kit/date-time/examples/2-min-max/component.ts b/projects/demo/src/pages/kit/date-time/examples/3-min-max/component.ts similarity index 92% rename from projects/demo/src/pages/kit/date-time/examples/2-min-max/component.ts rename to projects/demo/src/pages/kit/date-time/examples/3-min-max/component.ts index 9a21b361f..e05a08a10 100644 --- a/projects/demo/src/pages/kit/date-time/examples/2-min-max/component.ts +++ b/projects/demo/src/pages/kit/date-time/examples/3-min-max/component.ts @@ -8,7 +8,7 @@ import mask from './mask'; @Component({ standalone: true, - selector: 'date-time-mask-doc-example-2', + selector: 'date-time-mask-doc-example-3', imports: [ TuiInputModule, TuiTextfieldControllerModule, @@ -32,7 +32,7 @@ import mask from './mask'; `, changeDetection: ChangeDetectionStrategy.OnPush, }) -export class DateTimeMaskDocExample2 { +export class DateTimeMaskDocExample3 { protected value = '09-01-2018, 15:30'; protected readonly filler = 'dd-mm-yyyy, hh:mm'; protected readonly mask = mask; diff --git a/projects/demo/src/pages/kit/date-time/examples/2-min-max/mask.ts b/projects/demo/src/pages/kit/date-time/examples/3-min-max/mask.ts similarity index 100% rename from projects/demo/src/pages/kit/date-time/examples/2-min-max/mask.ts rename to projects/demo/src/pages/kit/date-time/examples/3-min-max/mask.ts From f0a3a34058dc09ce89a1d8be3449c4f7d19823da Mon Sep 17 00:00:00 2001 From: Stanslav Zaytsev Date: Wed, 13 Mar 2024 13:24:26 +0300 Subject: [PATCH 03/23] test(demo-integrations): added tests for dateTimeSeparator --- .../date-time-date-time-separator.cy.ts | 78 +++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 projects/demo-integrations/src/tests/kit/date-time/date-time-date-time-separator.cy.ts diff --git a/projects/demo-integrations/src/tests/kit/date-time/date-time-date-time-separator.cy.ts b/projects/demo-integrations/src/tests/kit/date-time/date-time-date-time-separator.cy.ts new file mode 100644 index 000000000..fdfb4d82b --- /dev/null +++ b/projects/demo-integrations/src/tests/kit/date-time/date-time-date-time-separator.cy.ts @@ -0,0 +1,78 @@ +import {DemoPath} from '@demo/constants'; +import {BROWSER_SUPPORTS_REAL_EVENTS} from 'projects/demo-integrations/src/support/constants'; + +describe('DateTime | dateTimeSeparator', () => { + const dateTimeSeparators = [':', ';_', '_-_', '_at_']; + + dateTimeSeparators.forEach(dateTimeSeparator => { + const dates: Array<{ + type: string; + result: string; + date: string; + times: number; + timeMode: string; + }> = [ + { + type: '522004341', + result: `05.02.2004${dateTimeSeparator}03:41`, + date: '05.02.2004', + times: 4, + timeMode: 'HH:MM', + }, + { + type: '52200434111', + result: `05.02.2004${dateTimeSeparator}03:41:11`, + date: '05.02.2004', + times: 6, + timeMode: 'HH:MM:SS', + }, + { + type: '52200434111111', + result: `05.02.2004${dateTimeSeparator}03:41:11:111`, + date: '05.02.2004', + times: 9, + timeMode: 'HH:MM:SS:MSS', + }, + ] as const; + + describe(`correctly applies "${dateTimeSeparator}" as dateTimeSeparator`, () => { + dates.forEach(date => { + beforeEach(() => { + cy.visit( + `/${DemoPath.DateTime}/API?dateTimeSeparator=${encodeURI(dateTimeSeparator)}&timeMode=${date.timeMode}`, + ); + cy.get('#demo-content input') + .should('be.visible') + .first() + .focus() + .as('input'); + }); + + it( + `${date.type} => ${date.result} => {backspace} * ${date.times} => ${date.date}`, + BROWSER_SUPPORTS_REAL_EVENTS, + () => { + cy.get('@input') + .type(date.type) + .should('have.value', date.result) + .realPress(getBackspaces(date.times)); + + cy.get('@input') + + .should('have.value', '05.02.2004'); + }, + ); + }); + }); + }); +}); + +function getBackspaces(times: number): any[] { + const result = []; + + for (let i = 0; i < times; i += 1) { + result.push('{backspace}'); + } + + return result; +} From 1473259c96409a074e776061d353530258c5715f Mon Sep 17 00:00:00 2001 From: Stanslav Zaytsev Date: Wed, 13 Mar 2024 13:28:12 +0300 Subject: [PATCH 04/23] docs(demo): changed doc text for dateTimeSeparator --- .../src/pages/kit/date-time/date-time-mask-doc.template.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/demo/src/pages/kit/date-time/date-time-mask-doc.template.html b/projects/demo/src/pages/kit/date-time/date-time-mask-doc.template.html index 96f3d272c..f44d9b28e 100644 --- a/projects/demo/src/pages/kit/date-time/date-time-mask-doc.template.html +++ b/projects/demo/src/pages/kit/date-time/date-time-mask-doc.template.html @@ -34,7 +34,7 @@ Use dateTimeSeparator - to set a convenient date and time separator. + to separate date and time in a way that suits you. From daebbfee51949c5621fb7851e59f08bb98ac5821 Mon Sep 17 00:00:00 2001 From: Stanslav Zaytsev Date: Thu, 14 Mar 2024 15:32:07 +0300 Subject: [PATCH 05/23] docs(demo): changed name of example files in exmaple comp --- .../src/pages/kit/date-time/date-time-mask-doc.component.ts | 6 +++--- .../pages/kit/date-time/date-time-mask-doc.template.html | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/projects/demo/src/pages/kit/date-time/date-time-mask-doc.component.ts b/projects/demo/src/pages/kit/date-time/date-time-mask-doc.component.ts index 329b7b98a..ead832f3a 100644 --- a/projects/demo/src/pages/kit/date-time/date-time-mask-doc.component.ts +++ b/projects/demo/src/pages/kit/date-time/date-time-mask-doc.component.ts @@ -37,19 +37,19 @@ type GeneratorOptions = Required< changeDetection: ChangeDetectionStrategy.OnPush, }) export class DateTimeMaskDocComponent implements GeneratorOptions { - protected readonly dateTimeLocalization: TuiDocExample = { + protected readonly dateTimeLocalizationExample: TuiDocExample = { [DocExamplePrimaryTab.MaskitoOptions]: import( './examples/1-date-time-localization/mask.ts?raw' ), }; - protected readonly dateTimeSeparatorDocExample: TuiDocExample = { + protected readonly dateTimeSeparatorExample: TuiDocExample = { [DocExamplePrimaryTab.MaskitoOptions]: import( './examples/2-date-time-separator/mask.ts?raw' ), }; - protected readonly dateTimeMinMax: TuiDocExample = { + protected readonly dateTimeMinMaxExample: TuiDocExample = { [DocExamplePrimaryTab.MaskitoOptions]: import('./examples/3-min-max/mask.ts?raw'), }; diff --git a/projects/demo/src/pages/kit/date-time/date-time-mask-doc.template.html b/projects/demo/src/pages/kit/date-time/date-time-mask-doc.template.html index f44d9b28e..2d23564f3 100644 --- a/projects/demo/src/pages/kit/date-time/date-time-mask-doc.template.html +++ b/projects/demo/src/pages/kit/date-time/date-time-mask-doc.template.html @@ -10,7 +10,7 @@ @@ -28,7 +28,7 @@ @@ -42,7 +42,7 @@ From 6661ef8258269eee0c41569f72ae67eb498f2f09 Mon Sep 17 00:00:00 2001 From: Stanslav Zaytsev Date: Fri, 15 Mar 2024 10:01:17 +0300 Subject: [PATCH 06/23] refactor(demo-integrations): refactored date time separator tests --- .../date-time-date-time-separator.cy.ts | 39 +++++-------------- 1 file changed, 10 insertions(+), 29 deletions(-) diff --git a/projects/demo-integrations/src/tests/kit/date-time/date-time-date-time-separator.cy.ts b/projects/demo-integrations/src/tests/kit/date-time/date-time-date-time-separator.cy.ts index fdfb4d82b..ee2ffde6a 100644 --- a/projects/demo-integrations/src/tests/kit/date-time/date-time-date-time-separator.cy.ts +++ b/projects/demo-integrations/src/tests/kit/date-time/date-time-date-time-separator.cy.ts @@ -1,5 +1,4 @@ import {DemoPath} from '@demo/constants'; -import {BROWSER_SUPPORTS_REAL_EVENTS} from 'projects/demo-integrations/src/support/constants'; describe('DateTime | dateTimeSeparator', () => { const dateTimeSeparators = [':', ';_', '_-_', '_at_']; @@ -9,31 +8,27 @@ describe('DateTime | dateTimeSeparator', () => { type: string; result: string; date: string; - times: number; timeMode: string; }> = [ { type: '522004341', result: `05.02.2004${dateTimeSeparator}03:41`, date: '05.02.2004', - times: 4, timeMode: 'HH:MM', }, { type: '52200434111', result: `05.02.2004${dateTimeSeparator}03:41:11`, date: '05.02.2004', - times: 6, timeMode: 'HH:MM:SS', }, { type: '52200434111111', result: `05.02.2004${dateTimeSeparator}03:41:11:111`, date: '05.02.2004', - times: 9, timeMode: 'HH:MM:SS:MSS', }, - ] as const; + ]; describe(`correctly applies "${dateTimeSeparator}" as dateTimeSeparator`, () => { dates.forEach(date => { @@ -48,31 +43,17 @@ describe('DateTime | dateTimeSeparator', () => { .as('input'); }); - it( - `${date.type} => ${date.result} => {backspace} * ${date.times} => ${date.date}`, - BROWSER_SUPPORTS_REAL_EVENTS, - () => { - cy.get('@input') - .type(date.type) - .should('have.value', date.result) - .realPress(getBackspaces(date.times)); + it(`${date.type} => ${date.result} => {backspace} * ${date.timeMode.replaceAll(':', '').length} => ${date.date}`, () => { + cy.get('@input') + .type(date.type) + .should('have.value', date.result) + .type( + `${'{backspace}'.repeat(date.timeMode.replaceAll(':', '').length)}`, + ); - cy.get('@input') - - .should('have.value', '05.02.2004'); - }, - ); + cy.get('@input').should('have.value', '05.02.2004'); + }); }); }); }); }); - -function getBackspaces(times: number): any[] { - const result = []; - - for (let i = 0; i < times; i += 1) { - result.push('{backspace}'); - } - - return result; -} From fd5e11a1967f82e59b3b082549b234facd612b84 Mon Sep 17 00:00:00 2001 From: Stanslav Zaytsev Date: Fri, 15 Mar 2024 10:05:29 +0300 Subject: [PATCH 07/23] refactor(demo): changed docs text for date time separtor --- .../src/pages/kit/date-time/date-time-mask-doc.template.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/projects/demo/src/pages/kit/date-time/date-time-mask-doc.template.html b/projects/demo/src/pages/kit/date-time/date-time-mask-doc.template.html index 2d23564f3..bb3b68c01 100644 --- a/projects/demo/src/pages/kit/date-time/date-time-mask-doc.template.html +++ b/projects/demo/src/pages/kit/date-time/date-time-mask-doc.template.html @@ -34,7 +34,7 @@ Use dateTimeSeparator - to separate date and time in a way that suits you. + parameter to configure separator between date and time strings. @@ -128,11 +128,12 @@ [(documentationPropertyValue)]="dateTimeSeparator" (documentationPropertyValueChange)="updateOptions()" > - Date time separator + Separator between date and time

Default: ,  + (comma and space)

From b46337e17dadcf46d8b3b2c69343dc6b1c453e8e Mon Sep 17 00:00:00 2001 From: Stanslav Zaytsev Date: Fri, 15 Mar 2024 10:33:30 +0300 Subject: [PATCH 08/23] test(kit): added unit tests for date time separator --- .../tests/date-time-separator.spec.ts | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 projects/kit/src/lib/masks/date-time/tests/date-time-separator.spec.ts diff --git a/projects/kit/src/lib/masks/date-time/tests/date-time-separator.spec.ts b/projects/kit/src/lib/masks/date-time/tests/date-time-separator.spec.ts new file mode 100644 index 000000000..f8c370132 --- /dev/null +++ b/projects/kit/src/lib/masks/date-time/tests/date-time-separator.spec.ts @@ -0,0 +1,52 @@ +import {MASKITO_DEFAULT_OPTIONS, maskitoTransform} from '../../../../../../core/src'; +import {MaskitoTimeMode} from '../../../types'; +import {maskitoDateTimeOptionsGenerator} from '../date-time-mask'; + +describe('DateTime | dateTimeSeparator', () => { + const dateTimeSeparators = [':', ';_', '_-_', '_at_']; + let options = MASKITO_DEFAULT_OPTIONS; + + dateTimeSeparators.forEach(dateTimeSeparator => { + const dates: Array<{ + type: string; + result: string; + date: string; + timeMode: MaskitoTimeMode; + }> = [ + { + type: '050220040341', + result: `05.02.2004${dateTimeSeparator}03:41`, + date: '05.02.2004', + timeMode: 'HH:MM', + }, + { + type: '05022004034111', + result: `05.02.2004${dateTimeSeparator}03:41:11`, + date: '05.02.2004', + timeMode: 'HH:MM:SS', + }, + { + type: '05022004034111111', + result: `05.02.2004${dateTimeSeparator}03:41:11.111`, + date: '05.02.2004', + timeMode: 'HH:MM:SS.MSS', + }, + ]; + + describe(`correctly applies "${dateTimeSeparator}" as dateTimeSeparator`, () => { + dates.forEach(date => { + beforeEach(() => { + options = maskitoDateTimeOptionsGenerator({ + dateMode: 'dd/mm/yyyy', + timeMode: date.timeMode, + dateTimeSeparator, + }); + }); + + it(`${date.type} => ${date.result}`, () => { + expect(maskitoTransform(date.type, options)).toBe(date.result); + }); + }); + }); + }); +}); From 66c8f6b325a542834c73a61e62b0a5cd4019e18a Mon Sep 17 00:00:00 2001 From: Stanslav Zaytsev Date: Fri, 15 Mar 2024 13:27:26 +0300 Subject: [PATCH 09/23] refactor(demo-integrations): refactored tests for date time separator --- .../date-time/date-time-date-time-separator.cy.ts | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/projects/demo-integrations/src/tests/kit/date-time/date-time-date-time-separator.cy.ts b/projects/demo-integrations/src/tests/kit/date-time/date-time-date-time-separator.cy.ts index ee2ffde6a..d4849906a 100644 --- a/projects/demo-integrations/src/tests/kit/date-time/date-time-date-time-separator.cy.ts +++ b/projects/demo-integrations/src/tests/kit/date-time/date-time-date-time-separator.cy.ts @@ -1,4 +1,5 @@ import {DemoPath} from '@demo/constants'; +import {MaskitoTimeMode} from '@maskito/kit'; describe('DateTime | dateTimeSeparator', () => { const dateTimeSeparators = [':', ';_', '_-_', '_at_']; @@ -8,7 +9,7 @@ describe('DateTime | dateTimeSeparator', () => { type: string; result: string; date: string; - timeMode: string; + timeMode: MaskitoTimeMode; }> = [ { type: '522004341', @@ -24,9 +25,9 @@ describe('DateTime | dateTimeSeparator', () => { }, { type: '52200434111111', - result: `05.02.2004${dateTimeSeparator}03:41:11:111`, + result: `05.02.2004${dateTimeSeparator}03:41:11.111`, date: '05.02.2004', - timeMode: 'HH:MM:SS:MSS', + timeMode: 'HH:MM:SS.MSS', }, ]; @@ -34,7 +35,7 @@ describe('DateTime | dateTimeSeparator', () => { dates.forEach(date => { beforeEach(() => { cy.visit( - `/${DemoPath.DateTime}/API?dateTimeSeparator=${encodeURI(dateTimeSeparator)}&timeMode=${date.timeMode}`, + `/${DemoPath.DateTime}/API?dateTimeSeparator=${encodeURIComponent(dateTimeSeparator)}&timeMode=${encodeURIComponent(date.timeMode)}`, ); cy.get('#demo-content input') .should('be.visible') @@ -43,12 +44,12 @@ describe('DateTime | dateTimeSeparator', () => { .as('input'); }); - it(`${date.type} => ${date.result} => {backspace} * ${date.timeMode.replaceAll(':', '').length} => ${date.date}`, () => { + it(`${date.type} => ${date.result} => {backspace} * ${date.timeMode.replaceAll(/[:.]/g, '').length} => ${date.date}`, () => { cy.get('@input') .type(date.type) .should('have.value', date.result) .type( - `${'{backspace}'.repeat(date.timeMode.replaceAll(':', '').length)}`, + `${'{backspace}'.repeat(date.timeMode.replaceAll(/[:.]/g, '').length)}`, ); cy.get('@input').should('have.value', '05.02.2004'); From 4067c52d7c64b780ee7e61b2f7b14164388dacc6 Mon Sep 17 00:00:00 2001 From: Stanslav Zaytsev Date: Fri, 15 Mar 2024 13:32:50 +0300 Subject: [PATCH 10/23] refactor: dateTimeSeparator is required in min max date time postprecessor --- .../postprocessors/min-max-date-time-postprocessor.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/projects/kit/src/lib/masks/date-time/postprocessors/min-max-date-time-postprocessor.ts b/projects/kit/src/lib/masks/date-time/postprocessors/min-max-date-time-postprocessor.ts index b8ec04e91..65444ea61 100644 --- a/projects/kit/src/lib/masks/date-time/postprocessors/min-max-date-time-postprocessor.ts +++ b/projects/kit/src/lib/masks/date-time/postprocessors/min-max-date-time-postprocessor.ts @@ -12,7 +12,6 @@ import { } from '../../../utils'; import {raiseSegmentValueToMin} from '../../../utils/date/raise-segment-value-to-min'; import {parseTimeString} from '../../../utils/time'; -import {DATE_TIME_SEPARATOR} from '../constants'; import {isDateTimeStringComplete, parseDateTimeString} from '../utils'; export function createMinMaxDateTimePostprocessor({ @@ -20,13 +19,13 @@ export function createMinMaxDateTimePostprocessor({ timeMode, min = DEFAULT_MIN_DATE, max = DEFAULT_MAX_DATE, - dateTimeSeparator = DATE_TIME_SEPARATOR, + dateTimeSeparator, }: { dateModeTemplate: string; timeMode: MaskitoTimeMode; min?: Date; max?: Date; - dateTimeSeparator?: string; + dateTimeSeparator: string; }): MaskitoPostprocessor { return ({value, selection}) => { const [dateString, timeString] = parseDateTimeString( From 228e5538b4c9d7854f652ff66ea303c508c17a9d Mon Sep 17 00:00:00 2001 From: Stanslav Zaytsev Date: Fri, 15 Mar 2024 13:42:56 +0300 Subject: [PATCH 11/23] refactor: changed signature of parseDateTimeString,takes val and obj with dateMode and dateTimeSep --- .../kit/src/lib/masks/date-time/date-time-mask.ts | 5 ++--- .../min-max-date-time-postprocessor.ts | 5 ++--- .../preprocessors/valid-date-time-preprocessor.ts | 5 ++--- .../masks/date-time/utils/parse-date-time-string.ts | 13 ++++++++----- 4 files changed, 14 insertions(+), 14 deletions(-) diff --git a/projects/kit/src/lib/masks/date-time/date-time-mask.ts b/projects/kit/src/lib/masks/date-time/date-time-mask.ts index dd76cff46..2cad6759b 100644 --- a/projects/kit/src/lib/masks/date-time/date-time-mask.ts +++ b/projects/kit/src/lib/masks/date-time/date-time-mask.ts @@ -71,11 +71,10 @@ export function maskitoDateTimeOptionsGenerator({ dateModeTemplate, dateSegmentSeparator: dateSeparator, splitFn: value => { - const [dateString, timeString] = parseDateTimeString( - value, + const [dateString, timeString] = parseDateTimeString(value, { dateModeTemplate, dateTimeSeparator, - ); + }); return {dateStrings: [dateString], restPart: timeString}; }, diff --git a/projects/kit/src/lib/masks/date-time/postprocessors/min-max-date-time-postprocessor.ts b/projects/kit/src/lib/masks/date-time/postprocessors/min-max-date-time-postprocessor.ts index 65444ea61..2fe1d36b0 100644 --- a/projects/kit/src/lib/masks/date-time/postprocessors/min-max-date-time-postprocessor.ts +++ b/projects/kit/src/lib/masks/date-time/postprocessors/min-max-date-time-postprocessor.ts @@ -28,11 +28,10 @@ export function createMinMaxDateTimePostprocessor({ dateTimeSeparator: string; }): MaskitoPostprocessor { return ({value, selection}) => { - const [dateString, timeString] = parseDateTimeString( - value, + const [dateString, timeString] = parseDateTimeString(value, { dateModeTemplate, dateTimeSeparator, - ); + }); const parsedDate = parseDateString(dateString, dateModeTemplate); const parsedTime = parseTimeString(timeString); diff --git a/projects/kit/src/lib/masks/date-time/preprocessors/valid-date-time-preprocessor.ts b/projects/kit/src/lib/masks/date-time/preprocessors/valid-date-time-preprocessor.ts index 8e1a0aa3e..7476256fa 100644 --- a/projects/kit/src/lib/masks/date-time/preprocessors/valid-date-time-preprocessor.ts +++ b/projects/kit/src/lib/masks/date-time/preprocessors/valid-date-time-preprocessor.ts @@ -40,11 +40,10 @@ export function createValidDateTimePreprocessor({ let to = rawTo + data.length; const newPossibleValue = value.slice(0, from) + newCharacters + value.slice(to); - const [dateString, timeString] = parseDateTimeString( - newPossibleValue, + const [dateString, timeString] = parseDateTimeString(newPossibleValue, { dateModeTemplate, dateTimeSeparator, - ); + }); let validatedValue = ''; const hasDateTimeSeparator = newPossibleValue.includes(dateTimeSeparator); diff --git a/projects/kit/src/lib/masks/date-time/utils/parse-date-time-string.ts b/projects/kit/src/lib/masks/date-time/utils/parse-date-time-string.ts index 164891472..8981e86b6 100644 --- a/projects/kit/src/lib/masks/date-time/utils/parse-date-time-string.ts +++ b/projects/kit/src/lib/masks/date-time/utils/parse-date-time-string.ts @@ -1,10 +1,13 @@ -import {DATE_TIME_SEPARATOR} from '../constants'; - export function parseDateTimeString( dateTime: string, - dateModeTemplate: string, - dateTimeSeparator = DATE_TIME_SEPARATOR, -): string[] { + { + dateModeTemplate, + dateTimeSeparator, + }: { + dateModeTemplate: string; + dateTimeSeparator: string; + }, +): [date: string, time: string] { const hasSeparator = dateTime.includes(dateTimeSeparator); return [ From a777cd2dae5c84250346f0ca4dbb63b27476bcdb Mon Sep 17 00:00:00 2001 From: Stanslav Zaytsev Date: Fri, 15 Mar 2024 14:11:24 +0300 Subject: [PATCH 12/23] refactor(kit): changed signature of validate date string, it takes to args obj and obj --- .../min-max-range-length-postprocessor.ts | 4 +++- .../min-max-date-time-postprocessor.ts | 11 ++++------- .../valid-date-time-preprocessor.ts | 1 - ...ate-segments-zero-padding-postprocessor.ts | 2 +- .../processors/min-max-date-postprocessor.ts | 6 ++++-- .../kit/src/lib/utils/date/to-date-string.ts | 12 +++++++++--- .../lib/utils/date/validate-date-string.ts | 19 ++++++------------- 7 files changed, 27 insertions(+), 28 deletions(-) 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 2e43ed735..29e668d93 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 @@ -70,7 +70,9 @@ export function createMinMaxRangeLengthPostprocessor({ value: dateStrings[0] + rangeSeparator + - toDateString(dateToSegments(minMaxLengthClampedToDate), dateModeTemplate), + toDateString(dateToSegments(minMaxLengthClampedToDate), { + dateMode: dateModeTemplate, + }), }; }; } diff --git a/projects/kit/src/lib/masks/date-time/postprocessors/min-max-date-time-postprocessor.ts b/projects/kit/src/lib/masks/date-time/postprocessors/min-max-date-time-postprocessor.ts index 2fe1d36b0..fa3b73c96 100644 --- a/projects/kit/src/lib/masks/date-time/postprocessors/min-max-date-time-postprocessor.ts +++ b/projects/kit/src/lib/masks/date-time/postprocessors/min-max-date-time-postprocessor.ts @@ -55,9 +55,7 @@ export function createMinMaxDateTimePostprocessor({ day, ...parsedTime, }, - dateModeTemplate, - dateTimeSeparator, - timeMode, + {dateMode: dateModeTemplate, dateTimeSeparator, timeMode}, ); const tail = value.slice(fixedValue.length); @@ -70,12 +68,11 @@ export function createMinMaxDateTimePostprocessor({ const date = segmentsToDate(parsedDate, parsedTime); const clampedDate = clamp(date, min, max); - const validatedValue = toDateString( - dateToSegments(clampedDate), - dateModeTemplate, + const validatedValue = toDateString(dateToSegments(clampedDate), { + dateMode: dateModeTemplate, dateTimeSeparator, timeMode, - ); + }); return { selection, diff --git a/projects/kit/src/lib/masks/date-time/preprocessors/valid-date-time-preprocessor.ts b/projects/kit/src/lib/masks/date-time/preprocessors/valid-date-time-preprocessor.ts index 7476256fa..e504bee13 100644 --- a/projects/kit/src/lib/masks/date-time/preprocessors/valid-date-time-preprocessor.ts +++ b/projects/kit/src/lib/masks/date-time/preprocessors/valid-date-time-preprocessor.ts @@ -52,7 +52,6 @@ export function createValidDateTimePreprocessor({ dateModeTemplate, offset: 0, selection: [from, to], - dateTimeSeparator, }); if (dateString && !validatedDateString) { diff --git a/projects/kit/src/lib/processors/date-segments-zero-padding-postprocessor.ts b/projects/kit/src/lib/processors/date-segments-zero-padding-postprocessor.ts index 6622901bc..d2deae2b7 100644 --- a/projects/kit/src/lib/processors/date-segments-zero-padding-postprocessor.ts +++ b/projects/kit/src/lib/processors/date-segments-zero-padding-postprocessor.ts @@ -43,7 +43,7 @@ export function createDateSegmentsZeroPaddingPostprocessor({ ); validatedDateStrings.push( - toDateString(validatedDateSegments, dateModeTemplate), + toDateString(validatedDateSegments, {dateMode: dateModeTemplate}), ); }); 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 a9b86eaf4..55bb7fece 100644 --- a/projects/kit/src/lib/processors/min-max-date-postprocessor.ts +++ b/projects/kit/src/lib/processors/min-max-date-postprocessor.ts @@ -39,7 +39,7 @@ export function createMinMaxDatePostprocessor({ if (!isDateStringComplete(dateString, dateModeTemplate)) { const fixedDate = raiseSegmentValueToMin(parsedDate, dateModeTemplate); - const fixedValue = toDateString(fixedDate, dateModeTemplate); + const fixedValue = toDateString(fixedDate, {dateMode: dateModeTemplate}); const tail = dateString.endsWith(dateSegmentSeparator) ? dateSegmentSeparator : ''; @@ -51,7 +51,9 @@ export function createMinMaxDatePostprocessor({ const date = segmentsToDate(parsedDate); const clampedDate = clamp(date, min, max); - validatedValue += toDateString(dateToSegments(clampedDate), dateModeTemplate); + validatedValue += toDateString(dateToSegments(clampedDate), { + dateMode: dateModeTemplate, + }); } return { diff --git a/projects/kit/src/lib/utils/date/to-date-string.ts b/projects/kit/src/lib/utils/date/to-date-string.ts index 3f54a6b1d..aa5e7fab0 100644 --- a/projects/kit/src/lib/utils/date/to-date-string.ts +++ b/projects/kit/src/lib/utils/date/to-date-string.ts @@ -11,9 +11,15 @@ export function toDateString( seconds, milliseconds, }: Partial>, - dateMode: string, - dateTimeSeparator = DATE_TIME_SEPARATOR, - timeMode?: string, + { + dateMode, + dateTimeSeparator = DATE_TIME_SEPARATOR, + timeMode, + }: { + dateMode: string; + dateTimeSeparator?: string; + timeMode?: string; + }, ): string { const safeYear = dateMode.match(/y/g)?.length === 2 ? year?.slice(-2) : year; const fullMode = dateMode + (timeMode ? dateTimeSeparator + timeMode : ''); diff --git a/projects/kit/src/lib/utils/date/validate-date-string.ts b/projects/kit/src/lib/utils/date/validate-date-string.ts index 7287151b6..3387588ef 100644 --- a/projects/kit/src/lib/utils/date/validate-date-string.ts +++ b/projects/kit/src/lib/utils/date/validate-date-string.ts @@ -1,5 +1,4 @@ import {DATE_SEGMENTS_MAX_VALUES} from '../../constants'; -import {DATE_TIME_SEPARATOR} from '../../masks/date-time/constants'; import type {MaskitoDateSegments} from '../../types'; import {getDateSegmentValueLength} from './date-segment-value-length'; import {parseDateString} from './parse-date-string'; @@ -10,13 +9,11 @@ export function validateDateString({ dateModeTemplate, offset, selection: [from, to], - dateTimeSeparator = DATE_TIME_SEPARATOR, }: { dateString: string; dateModeTemplate: string; offset: number; selection: [number, number]; - dateTimeSeparator?: string; }): {validatedDateString: string; updatedSelection: [number, number]} { const parsedDate = parseDateString(dateString, dateModeTemplate); const dateSegments = Object.entries(parsedDate) as Array< @@ -25,11 +22,9 @@ export function validateDateString({ const validatedDateSegments: Partial = {}; for (const [segmentName, segmentValue] of dateSegments) { - const validatedDate = toDateString( - validatedDateSegments, - dateModeTemplate, - dateTimeSeparator, - ); + const validatedDate = toDateString(validatedDateSegments, { + dateMode: dateModeTemplate, + }); const maxSegmentValue = DATE_SEGMENTS_MAX_VALUES[segmentName]; const fantomSeparator = validatedDate.length && 1; @@ -55,11 +50,9 @@ export function validateDateString({ validatedDateSegments[segmentName] = segmentValue; } - const validatedDateString = toDateString( - validatedDateSegments, - dateModeTemplate, - dateTimeSeparator, - ); + const validatedDateString = toDateString(validatedDateSegments, { + dateMode: dateModeTemplate, + }); const addedDateSegmentSeparators = validatedDateString.length - dateString.length; return { From 9a451556880a2a5cbf39ec534aa3597100eaaf69 Mon Sep 17 00:00:00 2001 From: Stanslav Zaytsev Date: Fri, 22 Mar 2024 11:14:56 +0300 Subject: [PATCH 13/23] refactor(demo-integrations): refactored e2e tests for dateTimeSeparator --- .../date-time-date-time-separator.cy.ts | 67 ++++++++++--------- 1 file changed, 34 insertions(+), 33 deletions(-) diff --git a/projects/demo-integrations/src/tests/kit/date-time/date-time-date-time-separator.cy.ts b/projects/demo-integrations/src/tests/kit/date-time/date-time-date-time-separator.cy.ts index d4849906a..1fc387027 100644 --- a/projects/demo-integrations/src/tests/kit/date-time/date-time-date-time-separator.cy.ts +++ b/projects/demo-integrations/src/tests/kit/date-time/date-time-date-time-separator.cy.ts @@ -5,56 +5,57 @@ describe('DateTime | dateTimeSeparator', () => { const dateTimeSeparators = [':', ';_', '_-_', '_at_']; dateTimeSeparators.forEach(dateTimeSeparator => { - const dates: Array<{ - type: string; - result: string; - date: string; + const testCases: Array<{ + typedDigits: string; + formattedDate: string; + formattedValue: string; timeMode: MaskitoTimeMode; }> = [ { - type: '522004341', - result: `05.02.2004${dateTimeSeparator}03:41`, - date: '05.02.2004', + typedDigits: '522004341', + formattedDate: `05.02.2004${dateTimeSeparator}03:41`, + formattedValue: '05.02.2004', timeMode: 'HH:MM', }, { - type: '52200434111', - result: `05.02.2004${dateTimeSeparator}03:41:11`, - date: '05.02.2004', + typedDigits: '233123434111', + formattedDate: `23.03.1234${dateTimeSeparator}03:41:11`, + formattedValue: '23.03.1234', timeMode: 'HH:MM:SS', }, { - type: '52200434111111', - result: `05.02.2004${dateTimeSeparator}03:41:11.111`, - date: '05.02.2004', + typedDigits: '69200734111111', + formattedDate: `06.09.2007${dateTimeSeparator}03:41:11.111`, + formattedValue: '06.09.2007', timeMode: 'HH:MM:SS.MSS', }, ]; describe(`correctly applies "${dateTimeSeparator}" as dateTimeSeparator`, () => { - dates.forEach(date => { - beforeEach(() => { - cy.visit( - `/${DemoPath.DateTime}/API?dateTimeSeparator=${encodeURIComponent(dateTimeSeparator)}&timeMode=${encodeURIComponent(date.timeMode)}`, - ); - cy.get('#demo-content input') - .should('be.visible') - .first() - .focus() - .as('input'); - }); + testCases.forEach( + ({typedDigits, formattedDate, formattedValue, timeMode}) => { + const timeDigitsCount = timeMode.replaceAll(/[:.]/g, '').length; - it(`${date.type} => ${date.result} => {backspace} * ${date.timeMode.replaceAll(/[:.]/g, '').length} => ${date.date}`, () => { - cy.get('@input') - .type(date.type) - .should('have.value', date.result) - .type( - `${'{backspace}'.repeat(date.timeMode.replaceAll(/[:.]/g, '').length)}`, + beforeEach(() => { + cy.visit( + `/${DemoPath.DateTime}/API?dateTimeSeparator=${encodeURIComponent(dateTimeSeparator)}&timeMode=${encodeURIComponent(timeMode)}`, ); + cy.get('#demo-content input') + .should('be.visible') + .first() + .focus() + .as('input'); + }); - cy.get('@input').should('have.value', '05.02.2004'); - }); - }); + it(`${typedDigits} => ${formattedDate} => {backspace} * ${timeDigitsCount} => ${formattedValue}`, () => { + cy.get('@input') + .type(typedDigits) + .should('have.value', formattedDate) + .type(`${'{backspace}'.repeat(timeDigitsCount)}`) + .should('have.value', formattedValue); + }); + }, + ); }); }); }); From c4abfddbb450b27d56ca2eda6e3d6202644d6683 Mon Sep 17 00:00:00 2001 From: Stanslav Zaytsev Date: Fri, 22 Mar 2024 11:20:37 +0300 Subject: [PATCH 14/23] refactor(kit): refactored min max date time postptocessor --- .../min-max-date-time-postprocessor.ts | 7 +++---- .../date-time/utils/is-date-time-string-complete.ts | 13 ++++++++++--- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/projects/kit/src/lib/masks/date-time/postprocessors/min-max-date-time-postprocessor.ts b/projects/kit/src/lib/masks/date-time/postprocessors/min-max-date-time-postprocessor.ts index fa3b73c96..61a807fd5 100644 --- a/projects/kit/src/lib/masks/date-time/postprocessors/min-max-date-time-postprocessor.ts +++ b/projects/kit/src/lib/masks/date-time/postprocessors/min-max-date-time-postprocessor.ts @@ -36,12 +36,11 @@ export function createMinMaxDateTimePostprocessor({ const parsedTime = parseTimeString(timeString); if ( - !isDateTimeStringComplete( - value, - dateModeTemplate, + !isDateTimeStringComplete(value, { + dateMode: dateModeTemplate, timeMode, dateTimeSeparator, - ) + }) ) { const fixedDate = raiseSegmentValueToMin(parsedDate, dateModeTemplate); const {year, month, day} = isDateStringComplete(dateString, dateModeTemplate) diff --git a/projects/kit/src/lib/masks/date-time/utils/is-date-time-string-complete.ts b/projects/kit/src/lib/masks/date-time/utils/is-date-time-string-complete.ts index 5f6306538..2693b7df0 100644 --- a/projects/kit/src/lib/masks/date-time/utils/is-date-time-string-complete.ts +++ b/projects/kit/src/lib/masks/date-time/utils/is-date-time-string-complete.ts @@ -1,10 +1,17 @@ +import {MaskitoTimeMode} from '../../../types'; import {DATE_TIME_SEPARATOR} from '../constants'; export function isDateTimeStringComplete( dateTimeString: string, - dateMode: string, - timeMode: string, - dateTimeSeparator = DATE_TIME_SEPARATOR, + { + dateMode, + timeMode, + dateTimeSeparator = DATE_TIME_SEPARATOR, + }: { + dateMode: string; + timeMode: MaskitoTimeMode; + dateTimeSeparator?: string; + }, ): boolean { return ( dateTimeString.length >= From 0b33c6c9e165cf70fd5adffe7567344727b676fe Mon Sep 17 00:00:00 2001 From: Stanslav Zaytsev Date: Fri, 22 Mar 2024 11:21:58 +0300 Subject: [PATCH 15/23] refactor(kit): changed import for date time separator tests --- .../src/lib/masks/date-time/tests/date-time-separator.spec.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/kit/src/lib/masks/date-time/tests/date-time-separator.spec.ts b/projects/kit/src/lib/masks/date-time/tests/date-time-separator.spec.ts index f8c370132..7f683ad2c 100644 --- a/projects/kit/src/lib/masks/date-time/tests/date-time-separator.spec.ts +++ b/projects/kit/src/lib/masks/date-time/tests/date-time-separator.spec.ts @@ -1,4 +1,5 @@ -import {MASKITO_DEFAULT_OPTIONS, maskitoTransform} from '../../../../../../core/src'; +import {MASKITO_DEFAULT_OPTIONS, maskitoTransform} from '@maskito/core'; + import {MaskitoTimeMode} from '../../../types'; import {maskitoDateTimeOptionsGenerator} from '../date-time-mask'; From e3bb4f8d0f94fdb215664a2220a7402aa1128f05 Mon Sep 17 00:00:00 2001 From: Stanslav Zaytsev Date: Fri, 22 Mar 2024 11:33:11 +0300 Subject: [PATCH 16/23] refactor(kit): refactored unit tests for date time separator --- .../tests/date-time-separator.spec.ts | 30 ++++++++----------- 1 file changed, 13 insertions(+), 17 deletions(-) diff --git a/projects/kit/src/lib/masks/date-time/tests/date-time-separator.spec.ts b/projects/kit/src/lib/masks/date-time/tests/date-time-separator.spec.ts index 7f683ad2c..452e9f97b 100644 --- a/projects/kit/src/lib/masks/date-time/tests/date-time-separator.spec.ts +++ b/projects/kit/src/lib/masks/date-time/tests/date-time-separator.spec.ts @@ -8,44 +8,40 @@ describe('DateTime | dateTimeSeparator', () => { let options = MASKITO_DEFAULT_OPTIONS; dateTimeSeparators.forEach(dateTimeSeparator => { - const dates: Array<{ - type: string; - result: string; - date: string; + const testCases: Array<{ + typedDigits: string; + formattedDate: string; timeMode: MaskitoTimeMode; }> = [ { - type: '050220040341', - result: `05.02.2004${dateTimeSeparator}03:41`, - date: '05.02.2004', + typedDigits: '050220040341', + formattedDate: `05.02.2004${dateTimeSeparator}03:41`, timeMode: 'HH:MM', }, { - type: '05022004034111', - result: `05.02.2004${dateTimeSeparator}03:41:11`, - date: '05.02.2004', + typedDigits: '10062007034111', + formattedDate: `10.06.2007${dateTimeSeparator}03:41:11`, timeMode: 'HH:MM:SS', }, { - type: '05022004034111111', - result: `05.02.2004${dateTimeSeparator}03:41:11.111`, - date: '05.02.2004', + typedDigits: '15081999034111111', + formattedDate: `15.08.1999${dateTimeSeparator}03:41:11.111`, timeMode: 'HH:MM:SS.MSS', }, ]; describe(`correctly applies "${dateTimeSeparator}" as dateTimeSeparator`, () => { - dates.forEach(date => { + testCases.forEach(({typedDigits, formattedDate, timeMode}) => { beforeEach(() => { options = maskitoDateTimeOptionsGenerator({ dateMode: 'dd/mm/yyyy', - timeMode: date.timeMode, + timeMode, dateTimeSeparator, }); }); - it(`${date.type} => ${date.result}`, () => { - expect(maskitoTransform(date.type, options)).toBe(date.result); + it(`${typedDigits} => ${formattedDate}`, () => { + expect(maskitoTransform(typedDigits, options)).toBe(formattedDate); }); }); }); From 3f54f696fd99e327570bdd985c298fb71a3410ec Mon Sep 17 00:00:00 2001 From: Stanslav Zaytsev Date: Fri, 22 Mar 2024 12:36:52 +0300 Subject: [PATCH 17/23] refactor(kit): added overload for to date string method --- .../kit/src/lib/utils/date/to-date-string.ts | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/projects/kit/src/lib/utils/date/to-date-string.ts b/projects/kit/src/lib/utils/date/to-date-string.ts index aa5e7fab0..ed520a9b3 100644 --- a/projects/kit/src/lib/utils/date/to-date-string.ts +++ b/projects/kit/src/lib/utils/date/to-date-string.ts @@ -1,6 +1,42 @@ import {DATE_TIME_SEPARATOR} from '../../masks/date-time/constants'; import type {MaskitoDateSegments, MaskitoTimeSegments} from '../../types'; +export function toDateString( + { + day, + month, + year, + hours, + minutes, + seconds, + milliseconds, + }: Partial>, + { + dateMode, + }: { + dateMode: string; + }, +): string; +export function toDateString( + { + day, + month, + year, + hours, + minutes, + seconds, + milliseconds, + }: Partial>, + { + dateMode, + dateTimeSeparator, + timeMode, + }: { + dateMode: string; + dateTimeSeparator: string; + timeMode: string; + }, +): string; export function toDateString( { day, From 3cd727379a0c831d5a650c63125296e485d68f23 Mon Sep 17 00:00:00 2001 From: taiga-family-bot Date: Fri, 22 Mar 2024 14:03:59 +0000 Subject: [PATCH 18/23] chore: apply changes after linting [bot] --- .../src/tests/kit/date-time/date-time-date-time-separator.cy.ts | 2 +- .../src/lib/masks/date-time/tests/date-time-separator.spec.ts | 2 +- .../lib/masks/date-time/utils/is-date-time-string-complete.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/demo-integrations/src/tests/kit/date-time/date-time-date-time-separator.cy.ts b/projects/demo-integrations/src/tests/kit/date-time/date-time-date-time-separator.cy.ts index 1fc387027..ca6976c10 100644 --- a/projects/demo-integrations/src/tests/kit/date-time/date-time-date-time-separator.cy.ts +++ b/projects/demo-integrations/src/tests/kit/date-time/date-time-date-time-separator.cy.ts @@ -1,5 +1,5 @@ import {DemoPath} from '@demo/constants'; -import {MaskitoTimeMode} from '@maskito/kit'; +import type {MaskitoTimeMode} from '@maskito/kit'; describe('DateTime | dateTimeSeparator', () => { const dateTimeSeparators = [':', ';_', '_-_', '_at_']; diff --git a/projects/kit/src/lib/masks/date-time/tests/date-time-separator.spec.ts b/projects/kit/src/lib/masks/date-time/tests/date-time-separator.spec.ts index 452e9f97b..6019e96dc 100644 --- a/projects/kit/src/lib/masks/date-time/tests/date-time-separator.spec.ts +++ b/projects/kit/src/lib/masks/date-time/tests/date-time-separator.spec.ts @@ -1,6 +1,6 @@ import {MASKITO_DEFAULT_OPTIONS, maskitoTransform} from '@maskito/core'; -import {MaskitoTimeMode} from '../../../types'; +import type {MaskitoTimeMode} from '../../../types'; import {maskitoDateTimeOptionsGenerator} from '../date-time-mask'; describe('DateTime | dateTimeSeparator', () => { diff --git a/projects/kit/src/lib/masks/date-time/utils/is-date-time-string-complete.ts b/projects/kit/src/lib/masks/date-time/utils/is-date-time-string-complete.ts index 2693b7df0..679b799c8 100644 --- a/projects/kit/src/lib/masks/date-time/utils/is-date-time-string-complete.ts +++ b/projects/kit/src/lib/masks/date-time/utils/is-date-time-string-complete.ts @@ -1,4 +1,4 @@ -import {MaskitoTimeMode} from '../../../types'; +import type {MaskitoTimeMode} from '../../../types'; import {DATE_TIME_SEPARATOR} from '../constants'; export function isDateTimeStringComplete( From 15cc55d4f3360e3033bd4d0f9a5f616e5aabee1e Mon Sep 17 00:00:00 2001 From: Stanslav Zaytsev Date: Tue, 26 Mar 2024 16:44:56 +0300 Subject: [PATCH 19/23] test(kit): refactored tests --- .../date-time/tests/date-time-separator.spec.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/projects/kit/src/lib/masks/date-time/tests/date-time-separator.spec.ts b/projects/kit/src/lib/masks/date-time/tests/date-time-separator.spec.ts index 6019e96dc..6e5325121 100644 --- a/projects/kit/src/lib/masks/date-time/tests/date-time-separator.spec.ts +++ b/projects/kit/src/lib/masks/date-time/tests/date-time-separator.spec.ts @@ -10,28 +10,28 @@ describe('DateTime | dateTimeSeparator', () => { dateTimeSeparators.forEach(dateTimeSeparator => { const testCases: Array<{ typedDigits: string; - formattedDate: string; + formattedValue: string; timeMode: MaskitoTimeMode; }> = [ { typedDigits: '050220040341', - formattedDate: `05.02.2004${dateTimeSeparator}03:41`, + formattedValue: `05.02.2004${dateTimeSeparator}03:41`, timeMode: 'HH:MM', }, { typedDigits: '10062007034111', - formattedDate: `10.06.2007${dateTimeSeparator}03:41:11`, + formattedValue: `10.06.2007${dateTimeSeparator}03:41:11`, timeMode: 'HH:MM:SS', }, { typedDigits: '15081999034111111', - formattedDate: `15.08.1999${dateTimeSeparator}03:41:11.111`, + formattedValue: `15.08.1999${dateTimeSeparator}03:41:11.111`, timeMode: 'HH:MM:SS.MSS', }, ]; describe(`correctly applies "${dateTimeSeparator}" as dateTimeSeparator`, () => { - testCases.forEach(({typedDigits, formattedDate, timeMode}) => { + testCases.forEach(({typedDigits, formattedValue, timeMode}) => { beforeEach(() => { options = maskitoDateTimeOptionsGenerator({ dateMode: 'dd/mm/yyyy', @@ -40,8 +40,8 @@ describe('DateTime | dateTimeSeparator', () => { }); }); - it(`${typedDigits} => ${formattedDate}`, () => { - expect(maskitoTransform(typedDigits, options)).toBe(formattedDate); + it(`${typedDigits} => ${formattedValue}`, () => { + expect(maskitoTransform(typedDigits, options)).toBe(formattedValue); }); }); }); From f31a7a31a4c433cf48ae8743a5874fe17da3de17 Mon Sep 17 00:00:00 2001 From: Stanslav Zaytsev Date: Tue, 26 Mar 2024 16:45:32 +0300 Subject: [PATCH 20/23] test(demo-integrations): refactored tests --- .../date-time-date-time-separator.cy.ts | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/projects/demo-integrations/src/tests/kit/date-time/date-time-date-time-separator.cy.ts b/projects/demo-integrations/src/tests/kit/date-time/date-time-date-time-separator.cy.ts index ca6976c10..5c650f68e 100644 --- a/projects/demo-integrations/src/tests/kit/date-time/date-time-date-time-separator.cy.ts +++ b/projects/demo-integrations/src/tests/kit/date-time/date-time-date-time-separator.cy.ts @@ -13,20 +13,20 @@ describe('DateTime | dateTimeSeparator', () => { }> = [ { typedDigits: '522004341', - formattedDate: `05.02.2004${dateTimeSeparator}03:41`, - formattedValue: '05.02.2004', + formattedValue: `05.02.2004${dateTimeSeparator}03:41`, + formattedDate: '05.02.2004', timeMode: 'HH:MM', }, { typedDigits: '233123434111', - formattedDate: `23.03.1234${dateTimeSeparator}03:41:11`, - formattedValue: '23.03.1234', + formattedValue: `23.03.1234${dateTimeSeparator}03:41:11`, + formattedDate: '23.03.1234', timeMode: 'HH:MM:SS', }, { typedDigits: '69200734111111', - formattedDate: `06.09.2007${dateTimeSeparator}03:41:11.111`, - formattedValue: '06.09.2007', + formattedValue: `06.09.2007${dateTimeSeparator}03:41:11.111`, + formattedDate: '06.09.2007', timeMode: 'HH:MM:SS.MSS', }, ]; @@ -47,12 +47,12 @@ describe('DateTime | dateTimeSeparator', () => { .as('input'); }); - it(`${typedDigits} => ${formattedDate} => {backspace} * ${timeDigitsCount} => ${formattedValue}`, () => { + it(`${typedDigits} => ${formattedValue} => {backspace} * ${timeDigitsCount} => ${formattedDate}`, () => { cy.get('@input') .type(typedDigits) - .should('have.value', formattedDate) - .type(`${'{backspace}'.repeat(timeDigitsCount)}`) - .should('have.value', formattedValue); + .should('have.value', formattedValue) + .type('{backspace}'.repeat(timeDigitsCount)) + .should('have.value', formattedDate); }); }, ); From 3e65526cd48e4322ecfe9a648ba321af50e82836 Mon Sep 17 00:00:00 2001 From: Stanslav Zaytsev Date: Tue, 26 Mar 2024 16:51:00 +0300 Subject: [PATCH 21/23] refactor(kit): refactored overload at to date string function --- .../kit/src/lib/utils/date/to-date-string.ts | 30 +++---------------- 1 file changed, 4 insertions(+), 26 deletions(-) diff --git a/projects/kit/src/lib/utils/date/to-date-string.ts b/projects/kit/src/lib/utils/date/to-date-string.ts index ed520a9b3..7c7a9ec21 100644 --- a/projects/kit/src/lib/utils/date/to-date-string.ts +++ b/projects/kit/src/lib/utils/date/to-date-string.ts @@ -2,36 +2,14 @@ import {DATE_TIME_SEPARATOR} from '../../masks/date-time/constants'; import type {MaskitoDateSegments, MaskitoTimeSegments} from '../../types'; export function toDateString( - { - day, - month, - year, - hours, - minutes, - seconds, - milliseconds, - }: Partial>, - { - dateMode, - }: { + segments: Partial>, + options: { dateMode: string; }, ): string; export function toDateString( - { - day, - month, - year, - hours, - minutes, - seconds, - milliseconds, - }: Partial>, - { - dateMode, - dateTimeSeparator, - timeMode, - }: { + segments: Partial>, + options: { dateMode: string; dateTimeSeparator: string; timeMode: string; From d730b643b82cf281a8dd9251947c61984e4dd5fa Mon Sep 17 00:00:00 2001 From: Stanslav Zaytsev Date: Tue, 26 Mar 2024 16:53:15 +0300 Subject: [PATCH 22/23] refactor(kit): changed dateTimeSeparator param to be required --- .../lib/masks/date-time/utils/is-date-time-string-complete.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/kit/src/lib/masks/date-time/utils/is-date-time-string-complete.ts b/projects/kit/src/lib/masks/date-time/utils/is-date-time-string-complete.ts index 679b799c8..d3e1aa2c1 100644 --- a/projects/kit/src/lib/masks/date-time/utils/is-date-time-string-complete.ts +++ b/projects/kit/src/lib/masks/date-time/utils/is-date-time-string-complete.ts @@ -10,7 +10,7 @@ export function isDateTimeStringComplete( }: { dateMode: string; timeMode: MaskitoTimeMode; - dateTimeSeparator?: string; + dateTimeSeparator: string; }, ): boolean { return ( From de969f9a350765e49c534bc502bbef68aead8a37 Mon Sep 17 00:00:00 2001 From: Stanslav Zaytsev Date: Wed, 27 Mar 2024 10:44:36 +0300 Subject: [PATCH 23/23] refactor(kit): refactored type declaration complexity --- projects/kit/src/lib/utils/date/to-date-string.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/kit/src/lib/utils/date/to-date-string.ts b/projects/kit/src/lib/utils/date/to-date-string.ts index 7c7a9ec21..7483ad92c 100644 --- a/projects/kit/src/lib/utils/date/to-date-string.ts +++ b/projects/kit/src/lib/utils/date/to-date-string.ts @@ -2,13 +2,13 @@ import {DATE_TIME_SEPARATOR} from '../../masks/date-time/constants'; import type {MaskitoDateSegments, MaskitoTimeSegments} from '../../types'; export function toDateString( - segments: Partial>, + segments: Partial, options: { dateMode: string; }, ): string; export function toDateString( - segments: Partial>, + segments: Partial, options: { dateMode: string; dateTimeSeparator: string; @@ -24,7 +24,7 @@ export function toDateString( minutes, seconds, milliseconds, - }: Partial>, + }: Partial, { dateMode, dateTimeSeparator = DATE_TIME_SEPARATOR,