Skip to content

Commit

Permalink
deprecate(kit): use dateSeparator instead of deprecated separator
Browse files Browse the repository at this point in the history
… for `DateRange` (#378)
  • Loading branch information
nsbarsukov authored Jul 24, 2023
1 parent 8210896 commit d5c3638
Show file tree
Hide file tree
Showing 12 changed files with 83 additions and 55 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand All @@ -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()
Expand All @@ -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()
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@
<tui-input
tuiTextfieldCustomContent="tuiIconCalendarLarge"
[tuiTextfieldFiller]="
getPlaceholder(mode, separator, rangeSeparator)
getPlaceholder(mode, dateSeparator, rangeSeparator)
"
[formControl]="apiPageControl"
>
Expand All @@ -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"
Expand All @@ -137,6 +152,7 @@
>
Earliest date
</ng-template>

<ng-template
documentationPropertyName="max"
documentationPropertyMode="input"
Expand All @@ -147,6 +163,7 @@
>
Latest date
</ng-template>

<ng-template
documentationPropertyName="minLength"
documentationPropertyMode="input"
Expand All @@ -157,6 +174,7 @@
>
Minimal length of the range
</ng-template>

<ng-template
documentationPropertyName="maxLength"
documentationPropertyMode="input"
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,5 @@ import {maskitoDateRangeOptionsGenerator} from '@maskito/kit';

export default maskitoDateRangeOptionsGenerator({
mode: 'mm/dd/yyyy',
separator: '/',
dateSeparator: '/',
});
2 changes: 1 addition & 1 deletion projects/kit/src/lib/constants/possible-dates-separator.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
22 changes: 14 additions & 8 deletions projects/kit/src/lib/masks/date-range/date-range-mask.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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,
}),
],
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>>;
Expand All @@ -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 ||
Expand Down Expand Up @@ -69,7 +69,7 @@ export function createMinMaxRangeLengthPostprocessor({
selection,
value:
dateStrings[0] +
datesSeparator +
rangeSeparator +
toDateString(dateToSegments(minMaxLengthClampedToDate), dateModeTemplate),
};
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand All @@ -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,
};
};
}
12 changes: 6 additions & 6 deletions projects/kit/src/lib/processors/min-max-date-postprocessor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -56,7 +56,7 @@ export function createMinMaxDatePostprocessor({

return {
selection,
value: validatedValue + (endsWithDatesSeparator ? datesSeparator : ''),
value: validatedValue + (endsWithRangeSeparator ? rangeSeparator : ''),
};
};
}
Original file line number Diff line number Diff line change
Expand Up @@ -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]};

Expand Down
Loading

0 comments on commit d5c3638

Please sign in to comment.