From 57fa02891e0d81a44a470a4e3c17fe116af36925 Mon Sep 17 00:00:00 2001 From: Lukas Maurer Date: Wed, 8 May 2024 10:17:25 +0200 Subject: [PATCH] feat(core/date-dropdown): add disabled property (#1264) Co-authored-by: Daniel Leroux --- .changeset/dry-avocados-sneeze.md | 5 ++++ packages/angular/src/components.ts | 4 +-- packages/core/component-doc.json | 27 +++++++++++++++++++ packages/core/src/components.d.ts | 10 +++++++ .../date-dropdown/date-dropdown.tsx | 14 ++++++++++ .../date-dropdown/test/date-dropdown.ct.ts | 27 +++++++++++++++++++ packages/vue/src/components.ts | 1 + 7 files changed, 86 insertions(+), 2 deletions(-) create mode 100644 .changeset/dry-avocados-sneeze.md diff --git a/.changeset/dry-avocados-sneeze.md b/.changeset/dry-avocados-sneeze.md new file mode 100644 index 0000000000..41b44f0c6a --- /dev/null +++ b/.changeset/dry-avocados-sneeze.md @@ -0,0 +1,5 @@ +--- +'@siemens/ix': minor +--- + +feat(core/date-dropdown): add disabled property diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts index 964f1e9ba4..e11111c66b 100644 --- a/packages/angular/src/components.ts +++ b/packages/angular/src/components.ts @@ -482,7 +482,7 @@ export declare interface IxContentHeader extends Components.IxContentHeader { @ProxyCmp({ - inputs: ['customRangeAllowed', 'dateRangeId', 'dateRangeOptions', 'format', 'from', 'i18nCustomItem', 'i18nDone', 'i18nNoRange', 'maxDate', 'minDate', 'range', 'to'], + inputs: ['customRangeAllowed', 'dateRangeId', 'dateRangeOptions', 'disabled', 'format', 'from', 'i18nCustomItem', 'i18nDone', 'i18nNoRange', 'maxDate', 'minDate', 'range', 'to'], methods: ['getDateRange'] }) @Component({ @@ -490,7 +490,7 @@ export declare interface IxContentHeader extends Components.IxContentHeader { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['customRangeAllowed', 'dateRangeId', 'dateRangeOptions', 'format', 'from', 'i18nCustomItem', 'i18nDone', 'i18nNoRange', 'maxDate', 'minDate', 'range', 'to'], + inputs: ['customRangeAllowed', 'dateRangeId', 'dateRangeOptions', 'disabled', 'format', 'from', 'i18nCustomItem', 'i18nDone', 'i18nNoRange', 'maxDate', 'minDate', 'range', 'to'], }) export class IxDateDropdown { protected el: HTMLElement; diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index f23cb421b0..637b0b308c 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -3333,6 +3333,33 @@ "optional": false, "required": false }, + { + "name": "disabled", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "disabled", + "reflectToAttr": false, + "docs": "Disable the button that opens the dropdown containing the date picker.", + "docsTags": [ + { + "name": "since", + "text": "2.3.0" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, { "name": "format", "type": "string", diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 31d4e8c389..5d08dfd27a 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -531,6 +531,11 @@ export namespace Components { * An array of predefined date range options for the date picker. Each option is an object with a label describing the range and a function that returns the start and end dates of the range as a DateRangeOption object. Example format: { id: 'some unique id', label: 'Name of the range', from: undefined, to: '2023/03/29' }, // ... other predefined date range options ... */ "dateRangeOptions": DateDropdownOption[]; + /** + * Disable the button that opens the dropdown containing the date picker. + * @since 2.3.0 + */ + "disabled": boolean; /** * Date format string. See * @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens. @@ -4591,6 +4596,11 @@ declare namespace LocalJSX { * An array of predefined date range options for the date picker. Each option is an object with a label describing the range and a function that returns the start and end dates of the range as a DateRangeOption object. Example format: { id: 'some unique id', label: 'Name of the range', from: undefined, to: '2023/03/29' }, // ... other predefined date range options ... */ "dateRangeOptions"?: DateDropdownOption[]; + /** + * Disable the button that opens the dropdown containing the date picker. + * @since 2.3.0 + */ + "disabled"?: boolean; /** * Date format string. See * @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens. diff --git a/packages/core/src/components/date-dropdown/date-dropdown.tsx b/packages/core/src/components/date-dropdown/date-dropdown.tsx index 6eb5e12842..9df4717b36 100644 --- a/packages/core/src/components/date-dropdown/date-dropdown.tsx +++ b/packages/core/src/components/date-dropdown/date-dropdown.tsx @@ -46,6 +46,13 @@ export type DateRangeChangeEvent = { export class DateDropdown { @Element() hostElement: HTMLIxDateDropdownElement; + /** + * Disable the button that opens the dropdown containing the date picker. + * + * @since 2.3.0 + */ + @Prop() disabled = false; + /** * Date format string. * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens. @@ -166,6 +173,12 @@ export class DateDropdown { }; @State() private triggerRef: HTMLElement; + @Watch('disabled') + onDisabledChange() { + if (this.disabled) { + this.closeDropdown(); + } + } private datePickerTouched = false; componentWillLoad() { @@ -289,6 +302,7 @@ export class DateDropdown { variant="primary" icon="history" ref={(ref) => (this.triggerRef = ref)} + disabled={this.disabled} > {this.getButtonLabel()} diff --git a/packages/core/src/components/date-dropdown/test/date-dropdown.ct.ts b/packages/core/src/components/date-dropdown/test/date-dropdown.ct.ts index 9e4b0c9982..d6f71c6630 100644 --- a/packages/core/src/components/date-dropdown/test/date-dropdown.ct.ts +++ b/packages/core/src/components/date-dropdown/test/date-dropdown.ct.ts @@ -215,3 +215,30 @@ test('set date from a button', async ({ mount, page }) => { const button = dateDropdown.locator('[data-date-dropdown-trigger]'); await expect(button).toHaveText(/2024\/02\/17 \- 2024\/02\/27/); }); + +test('disable', async ({ mount, page }) => { + await mount(``); + const dateDropdown = page.locator('ix-date-dropdown'); + + const trigger = page.locator('[data-date-dropdown-trigger]'); + await expect(trigger).toHaveAttribute('disabled'); + + await dateDropdown.click(); + + const dropdown = dateDropdown.locator('[data-date-dropdown]'); + await expect(dropdown).not.toBeVisible(); +}); + +test('close dropdown after disabled property = true', async ({ + mount, + page, +}) => { + await mount(``); + const dateDropdown = page.locator('ix-date-dropdown'); + await dateDropdown.click(); + await dateDropdown.evaluate((dd: HTMLIxDateDropdownElement) => { + dd.disabled = true; + }); + const dropdown = dateDropdown.locator('[data-date-dropdown]'); + await expect(dropdown).not.toBeVisible(); +}); diff --git a/packages/vue/src/components.ts b/packages/vue/src/components.ts index 08e88decf9..93e807741a 100644 --- a/packages/vue/src/components.ts +++ b/packages/vue/src/components.ts @@ -273,6 +273,7 @@ export const IxContentHeader = /*@__PURE__*/ defineContainer('ix-date-dropdown', defineIxDateDropdown, [ + 'disabled', 'format', 'range', 'from',