From 03754697e1e9abd3a67409d4d4b4910dd3a442bd Mon Sep 17 00:00:00 2001 From: Sven Liebert Date: Wed, 18 May 2022 15:46:10 +0200 Subject: [PATCH 1/6] Dispatch event when date isn't correct --- package.json | 2 +- src/components/duet-date-picker/duet-date-picker.tsx | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index ddfe967..44d4f7b 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "@duetds/date-picker", + "name": "@svenlie/date-picker", "version": "1.4.0", "description": "Duet Date Picker is an open source version of Duet Design System’s accessible date picker.", "author": "LocalTapiola Services Ltd ", diff --git a/src/components/duet-date-picker/duet-date-picker.tsx b/src/components/duet-date-picker/duet-date-picker.tsx index ad1d811..ebadc56 100644 --- a/src/components/duet-date-picker/duet-date-picker.tsx +++ b/src/components/duet-date-picker/duet-date-picker.tsx @@ -535,6 +535,8 @@ export class DuetDatePicker implements ComponentInterface { // for consistency we should set the focused day in cases where // user has selected a day that has been specifically disallowed this.setFocusedDay(day) + const event = new CustomEvent("duetNotValidDate") + dispatchEvent(event) } } From be32ef19fe9d3d4c7862c72dc31aafb911849ccd Mon Sep 17 00:00:00 2001 From: Sven Liebert Date: Wed, 18 May 2022 15:55:06 +0200 Subject: [PATCH 2/6] Dispatch event when date isn't correct --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 44d4f7b..cee2f08 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "collection": "dist/collection/collection-manifest.json", "repository": { "type": "git", - "url": "https://github.com/duetds/date-picker.git" + "url": "https://github.com/svenlie/date-picker.git" }, "publishConfig": { "access": "public" From f0b3eb9e03ef5f64cb6ab837312de87275886861 Mon Sep 17 00:00:00 2001 From: Sven Liebert Date: Wed, 18 May 2022 15:55:23 +0200 Subject: [PATCH 3/6] Dispatch event when date isn't correct --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cee2f08..369f8ad 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@svenlie/date-picker", - "version": "1.4.0", + "version": "1.4.1", "description": "Duet Date Picker is an open source version of Duet Design System’s accessible date picker.", "author": "LocalTapiola Services Ltd ", "license": "MIT", From df9582eb68fda706025409bc78b3d54301aed5c0 Mon Sep 17 00:00:00 2001 From: Sven Liebert Date: Thu, 19 May 2022 08:04:57 +0200 Subject: [PATCH 4/6] Dispatch event when date isn't correct --- .../duet-date-picker/duet-date-picker.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/duet-date-picker/duet-date-picker.tsx b/src/components/duet-date-picker/duet-date-picker.tsx index ebadc56..cd149a4 100644 --- a/src/components/duet-date-picker/duet-date-picker.tsx +++ b/src/components/duet-date-picker/duet-date-picker.tsx @@ -88,6 +88,9 @@ export type DuetDatePickerOpenEvent = { export type DuetDatePickerCloseEvent = { component: "duet-date-picker" } +export type DuetDatePickerNotValidDateEvent = { + component: "duet-date-picker" +} export type DuetDatePickerDirection = "left" | "right" const DISALLOWED_CHARACTERS = /[^0-9\.\/\-]+/g @@ -243,6 +246,11 @@ export class DuetDatePicker implements ComponentInterface { */ @Event() duetFocus: EventEmitter + /** + * Event emitted the date picker input is not valid. + */ + @Event() duetNotValidDate: EventEmitter + /** * Event emitted the date picker modal is opened. */ @@ -535,8 +543,9 @@ export class DuetDatePicker implements ComponentInterface { // for consistency we should set the focused day in cases where // user has selected a day that has been specifically disallowed this.setFocusedDay(day) - const event = new CustomEvent("duetNotValidDate") - dispatchEvent(event) + this.duetNotValidDate.emit({ + component: "duet-date-picker", + }) } } From bc29570da784df2ed0428f9e3a7c36018e213a9e Mon Sep 17 00:00:00 2001 From: Sven Liebert Date: Mon, 23 May 2022 09:35:19 +0200 Subject: [PATCH 5/6] Dispatch event when date isn't correct --- hydrate/package.json | 2 +- package.json | 4 +- src/components/duet-date-picker/date-utils.ts | 39 ++++++++++++++++++- .../duet-date-picker/duet-date-picker.tsx | 33 ++++++++++------ src/components/duet-date-picker/readme.md | 15 +++---- 5 files changed, 69 insertions(+), 24 deletions(-) diff --git a/hydrate/package.json b/hydrate/package.json index b04196a..330e881 100644 --- a/hydrate/package.json +++ b/hydrate/package.json @@ -1,5 +1,5 @@ { - "name": "@duetds/date-picker/hydrate", + "name": "@svenlie/date-picker/hydrate", "description": "duet component hydration app.", "main": "index.js", "types": "index.d.ts" diff --git a/package.json b/package.json index 369f8ad..2059f6a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@svenlie/date-picker", - "version": "1.4.1", + "version": "1.5.8", "description": "Duet Date Picker is an open source version of Duet Design System’s accessible date picker.", "author": "LocalTapiola Services Ltd ", "license": "MIT", @@ -77,7 +77,7 @@ "prettier": "1.19.1", "prettier-stylelint": "0.4.2", "pretty-quick": "^2.0.1", - "puppeteer": "5.2.1", + "puppeteer": "5.5.0", "sass-lint": "1.13.1", "sass-lint-auto-fix": "0.21.2", "typescript": "3.9.7" diff --git a/src/components/duet-date-picker/date-utils.ts b/src/components/duet-date-picker/date-utils.ts index 4ffd781..c7d3eab 100644 --- a/src/components/duet-date-picker/date-utils.ts +++ b/src/components/duet-date-picker/date-utils.ts @@ -10,6 +10,18 @@ export enum DaysOfWeek { Saturday = 6, } +export class DateInvalidException implements Error { + constructor(message, name, date) { + this.message = message + this.name = name + this.date = date + } + + message: string + name: string + date: Date +} + export function createDate(year: string, month: string, day: string): Date { var dayInt = parseInt(day, 10) var monthInt = parseInt(month, 10) @@ -26,10 +38,31 @@ export function createDate(year: string, month: string, day: string): Date { yearInt > 0 if (isValid) { - return new Date(yearInt, monthInt - 1, dayInt) + const date = new Date(yearInt, monthInt - 1, dayInt) + + if (isDateChanged(date, dayInt, monthInt, yearInt)) { + throw new DateInvalidException("Invalid date", "Invalid date", date) + } + + return date } } +/** + * + * @param date + * @param day + * @param month + * @param year + */ +function isDateChanged(date: Date, day: number, month: number, year: number): boolean { + if (date.getDate() != day || date.getMonth() + 1 != month || date.getFullYear() != year) { + return true + } + + return false +} + /** * @param value date string in ISO format YYYY-MM-DD */ @@ -41,7 +74,9 @@ export function parseISODate(value: string): Date { const matches = value.match(ISO_DATE_FORMAT) if (matches) { - return createDate(matches[1], matches[2], matches[3]) + try { + return createDate(matches[1], matches[2], matches[3]) + } catch (e) {} } } diff --git a/src/components/duet-date-picker/duet-date-picker.tsx b/src/components/duet-date-picker/duet-date-picker.tsx index cd149a4..4d4c640 100644 --- a/src/components/duet-date-picker/duet-date-picker.tsx +++ b/src/components/duet-date-picker/duet-date-picker.tsx @@ -88,8 +88,11 @@ export type DuetDatePickerOpenEvent = { export type DuetDatePickerCloseEvent = { component: "duet-date-picker" } -export type DuetDatePickerNotValidDateEvent = { +export type DuetDatePickerDateNotValidEvent = { component: "duet-date-picker" + valueAsDate: Date + value: string + enteredValue: string } export type DuetDatePickerDirection = "left" | "right" @@ -246,11 +249,6 @@ export class DuetDatePicker implements ComponentInterface { */ @Event() duetFocus: EventEmitter - /** - * Event emitted the date picker input is not valid. - */ - @Event() duetNotValidDate: EventEmitter - /** * Event emitted the date picker modal is opened. */ @@ -261,6 +259,11 @@ export class DuetDatePicker implements ComponentInterface { */ @Event() duetClose: EventEmitter + /** + * Event emitted the date picker has an invalid date. + */ + @Event() duetNotValidDate: EventEmitter + connectedCallback() { this.createDateFormatters() } @@ -543,9 +546,6 @@ export class DuetDatePicker implements ComponentInterface { // for consistency we should set the focused day in cases where // user has selected a day that has been specifically disallowed this.setFocusedDay(day) - this.duetNotValidDate.emit({ - component: "duet-date-picker", - }) } } @@ -563,9 +563,18 @@ export class DuetDatePicker implements ComponentInterface { // clean up any invalid characters cleanValue(target, DISALLOWED_CHARACTERS) - const parsed = this.dateAdapter.parse(target.value, createDate) - if (parsed || target.value === "") { - this.setValue(parsed) + try { + const parsed = this.dateAdapter.parse(target.value, createDate) + if (parsed || target.value === "") { + this.setValue(parsed) + } + } catch (e) { + this.duetNotValidDate.emit({ + component: "duet-date-picker", + valueAsDate: e.date, + value: printISODate(e.date), + enteredValue: target.value, + }) } } diff --git a/src/components/duet-date-picker/readme.md b/src/components/duet-date-picker/readme.md index c5bd4db..f7e73cb 100644 --- a/src/components/duet-date-picker/readme.md +++ b/src/components/duet-date-picker/readme.md @@ -26,13 +26,14 @@ ## Events -| Event | Description | Type | -| ------------ | ----------------------------------------------- | ----------------------------------------------------------------------------------- | -| `duetBlur` | Event emitted the date picker input is blurred. | `CustomEvent<{ component: "duet-date-picker"; }>` | -| `duetChange` | Event emitted when a date is selected. | `CustomEvent<{ component: "duet-date-picker"; valueAsDate: Date; value: string; }>` | -| `duetClose` | Event emitted the date picker modal is closed. | `CustomEvent<{ component: "duet-date-picker"; }>` | -| `duetFocus` | Event emitted the date picker input is focused. | `CustomEvent<{ component: "duet-date-picker"; }>` | -| `duetOpen` | Event emitted the date picker modal is opened. | `CustomEvent<{ component: "duet-date-picker"; }>` | +| Event | Description | Type | +| ------------------ |----------------------------------------------------| --------------------------------------------------------------------------------------------------------- | +| `duetBlur` | Event emitted the date picker input is blurred. | `CustomEvent<{ component: "duet-date-picker"; }>` | +| `duetChange` | Event emitted when a date is selected. | `CustomEvent<{ component: "duet-date-picker"; valueAsDate: Date; value: string; }>` | +| `duetClose` | Event emitted the date picker modal is closed. | `CustomEvent<{ component: "duet-date-picker"; }>` | +| `duetFocus` | Event emitted the date picker input is focused. | `CustomEvent<{ component: "duet-date-picker"; }>` | +| `duetNotValidDate` | Event emitted the date picker has an invalid date. | `CustomEvent<{ component: "duet-date-picker"; valueAsDate: Date; value: string; enteredValue: string; }>` | +| `duetOpen` | Event emitted the date picker modal is opened. | `CustomEvent<{ component: "duet-date-picker"; }>` | ## Methods From 9ad8fd9f6357f313e052016bb7cfdeecbe45ad9a Mon Sep 17 00:00:00 2001 From: Sven Liebert Date: Mon, 23 May 2022 09:37:59 +0200 Subject: [PATCH 6/6] Revert package.json --- hydrate/package.json | 2 +- package.json | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/hydrate/package.json b/hydrate/package.json index 330e881..b04196a 100644 --- a/hydrate/package.json +++ b/hydrate/package.json @@ -1,5 +1,5 @@ { - "name": "@svenlie/date-picker/hydrate", + "name": "@duetds/date-picker/hydrate", "description": "duet component hydration app.", "main": "index.js", "types": "index.d.ts" diff --git a/package.json b/package.json index 2059f6a..ddfe967 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "@svenlie/date-picker", - "version": "1.5.8", + "name": "@duetds/date-picker", + "version": "1.4.0", "description": "Duet Date Picker is an open source version of Duet Design System’s accessible date picker.", "author": "LocalTapiola Services Ltd ", "license": "MIT", @@ -14,7 +14,7 @@ "collection": "dist/collection/collection-manifest.json", "repository": { "type": "git", - "url": "https://github.com/svenlie/date-picker.git" + "url": "https://github.com/duetds/date-picker.git" }, "publishConfig": { "access": "public" @@ -77,7 +77,7 @@ "prettier": "1.19.1", "prettier-stylelint": "0.4.2", "pretty-quick": "^2.0.1", - "puppeteer": "5.5.0", + "puppeteer": "5.2.1", "sass-lint": "1.13.1", "sass-lint-auto-fix": "0.21.2", "typescript": "3.9.7"