From 18765e7e39b9f205f47f394d26d6ecc4b53e17ef Mon Sep 17 00:00:00 2001 From: William Martin Date: Tue, 14 Sep 2021 22:52:33 -0400 Subject: [PATCH] feat(datetime): add clear button (#23920) resolves #17482 Co-authored-by: Liam DeBeasi --- angular/src/directives/proxies.ts | 4 +- core/api.txt | 4 +- core/src/components.d.ts | 20 ++++++++- core/src/components/datetime/datetime.scss | 10 +++++ core/src/components/datetime/datetime.tsx | 41 +++++++++++++++---- core/src/components/datetime/readme.md | 26 +++++++++--- .../components/datetime/test/basic/index.html | 2 +- core/src/components/datetime/usage/angular.md | 3 ++ .../components/datetime/usage/javascript.md | 3 ++ core/src/components/datetime/usage/react.md | 3 ++ core/src/components/datetime/usage/stencil.md | 3 ++ core/src/components/datetime/usage/vue.md | 3 ++ packages/vue/src/proxies.ts | 2 + 13 files changed, 105 insertions(+), 19 deletions(-) diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index 172a0c7b67..df5cf7f816 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -244,8 +244,8 @@ export class IonContent { } export declare interface IonDatetime extends Components.IonDatetime { } -@ProxyCmp({ inputs: ["cancelText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "hourCycle", "hourValues", "locale", "max", "min", "minuteValues", "mode", "monthValues", "name", "presentation", "readonly", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "value", "yearValues"], "methods": ["confirm", "reset", "cancel"] }) -@Component({ selector: "ion-datetime", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["cancelText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "hourCycle", "hourValues", "locale", "max", "min", "minuteValues", "mode", "monthValues", "name", "presentation", "readonly", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "value", "yearValues"] }) +@ProxyCmp({ inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "hourCycle", "hourValues", "locale", "max", "min", "minuteValues", "mode", "monthValues", "name", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "value", "yearValues"], "methods": ["confirm", "reset", "cancel"] }) +@Component({ selector: "ion-datetime", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "hourCycle", "hourValues", "locale", "max", "min", "minuteValues", "mode", "monthValues", "name", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "value", "yearValues"] }) export class IonDatetime { ionCancel!: EventEmitter; ionChange!: EventEmitter; diff --git a/core/api.txt b/core/api.txt index 7e39df77b0..fefad7a403 100644 --- a/core/api.txt +++ b/core/api.txt @@ -370,6 +370,7 @@ ion-content,part,scroll ion-datetime,shadow ion-datetime,prop,cancelText,string,'Cancel',false,false +ion-datetime,prop,clearText,string,'Clear',false,false ion-datetime,prop,color,string | undefined,'primary',false,false ion-datetime,prop,dayValues,number | number[] | string | undefined,undefined,false,false ion-datetime,prop,disabled,boolean,false,false,false @@ -386,6 +387,7 @@ ion-datetime,prop,monthValues,number | number[] | string | undefined,undefined,f ion-datetime,prop,name,string,this.inputId,false,false ion-datetime,prop,presentation,"date" | "date-time" | "month" | "month-year" | "time" | "time-date" | "year",'date-time',false,false ion-datetime,prop,readonly,boolean,false,false,false +ion-datetime,prop,showClearButton,boolean,false,false,false ion-datetime,prop,showDefaultButtons,boolean,false,false,false ion-datetime,prop,showDefaultTimeLabel,boolean,true,false,false ion-datetime,prop,showDefaultTitle,boolean,false,false,false @@ -394,7 +396,7 @@ ion-datetime,prop,value,null | string | undefined,undefined,false,false ion-datetime,prop,yearValues,number | number[] | string | undefined,undefined,false,false ion-datetime,method,cancel,cancel(closeOverlay?: boolean) => Promise ion-datetime,method,confirm,confirm(closeOverlay?: boolean) => Promise -ion-datetime,method,reset,reset(value?: string | undefined) => Promise +ion-datetime,method,reset,reset(startDate?: string | undefined) => Promise ion-datetime,event,ionBlur,void,true ion-datetime,event,ionCancel,void,true ion-datetime,event,ionChange,DatetimeChangeEventDetail,true diff --git a/core/src/components.d.ts b/core/src/components.d.ts index da5cdab5f4..b9c07b14e5 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -708,6 +708,10 @@ export namespace Components { * The text to display on the picker's cancel button. */ "cancelText": string; + /** + * The text to display on the picker's "Clear" button. + */ + "clearText": string; /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). */ @@ -777,9 +781,13 @@ export namespace Components { */ "readonly": boolean; /** - * Resets the internal state of the datetime but does not update the value. Passing a value ISO-8601 string will reset the state of te component to the provided date. + * Resets the internal state of the datetime but does not update the value. Passing a valid ISO-8601 string will reset the state of the component to the provided date. If no value is provided, the internal state will be reset to today. */ - "reset": (value?: string | undefined) => Promise; + "reset": (startDate?: string | undefined) => Promise; + /** + * If `true`, a "Clear" button will be rendered alongside the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered. + */ + "showClearButton": boolean; /** * If `true`, the default "Cancel" and "OK" buttons will be rendered at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered. */ @@ -4300,6 +4308,10 @@ declare namespace LocalJSX { * The text to display on the picker's cancel button. */ "cancelText"?: string; + /** + * The text to display on the picker's "Clear" button. + */ + "clearText"?: string; /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). */ @@ -4384,6 +4396,10 @@ declare namespace LocalJSX { * If `true`, the datetime appears normal but is not interactive. */ "readonly"?: boolean; + /** + * If `true`, a "Clear" button will be rendered alongside the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered. + */ + "showClearButton"?: boolean; /** * If `true`, the default "Cancel" and "OK" buttons will be rendered at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered. */ diff --git a/core/src/components/datetime/datetime.scss b/core/src/components/datetime/datetime.scss index 5446f961c6..0414184bac 100644 --- a/core/src/components/datetime/datetime.scss +++ b/core/src/components/datetime/datetime.scss @@ -112,6 +112,16 @@ // Calendar / Header / Action Buttons // ----------------------------------- +:host .datetime-action-buttons.has-clear-button { + width: 100%; +} + +:host .datetime-action-buttons ion-buttons { + display: flex; + + justify-content: space-between; +} + /** * Date/Year button should be on * the opposite side of the component diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index c163afc3e2..bdba4d3307 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -199,6 +199,11 @@ export class Datetime implements ComponentInterface { */ @Prop() doneText = 'Done'; + /** + * The text to display on the picker's "Clear" button. + */ + @Prop() clearText = 'Clear'; + /** * Values used to create the list of selectable years. By default * the year values range between the `min` and `max` datetime inputs. However, to @@ -313,6 +318,16 @@ export class Datetime implements ComponentInterface { */ @Prop() showDefaultButtons = false; + /** + * If `true`, a "Clear" button will be rendered alongside + * the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime` + * component. Developers can also use the `button` slot + * if they want to customize these buttons. If custom + * buttons are set in the `button` slot then the + * default buttons will not be rendered. + */ + @Prop() showClearButton = false; + /** * If `true`, the default "Time" label will be rendered * for the time selector of the `ion-datetime` component. @@ -388,14 +403,13 @@ export class Datetime implements ComponentInterface { } /** - * Resets the internal state of the datetime - * but does not update the value. Passing a value - * ISO-8601 string will reset the state of - * te component to the provided date. + * Resets the internal state of the datetime but does not update the value. + * Passing a valid ISO-8601 string will reset the state of the component to the provided date. + * If no value is provided, the internal state will be reset to today. */ @Method() - async reset(value?: string) { - this.processValue(value); + async reset(startDate?: string) { + this.processValue(startDate); } /** @@ -1197,6 +1211,11 @@ export class Datetime implements ComponentInterface { const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null; if (!hasSlottedButtons && !this.showDefaultButtons) { return; } + const clearButtonClick = () => { + this.reset(); + this.value = undefined; + } + /** * By default we render two buttons: * Cancel - Dismisses the datetime and @@ -1207,11 +1226,17 @@ export class Datetime implements ComponentInterface { return (
-
+
this.cancel(true)}>{this.cancelText} - this.confirm(true)}>{this.doneText} +
+ {this.showClearButton && clearButtonClick()}>{this.clearText}} + this.confirm(true)}>{this.doneText} +
diff --git a/core/src/components/datetime/readme.md b/core/src/components/datetime/readme.md index c28339aa2f..f60a0a515d 100644 --- a/core/src/components/datetime/readme.md +++ b/core/src/components/datetime/readme.md @@ -232,6 +232,9 @@ dates in JavaScript.
My Custom Title
+ + + Open Datetime Modal @@ -320,6 +323,9 @@ export class MyComponent {
My Custom Title
+ + + @@ -419,6 +425,9 @@ export const DateTimeExamples: React.FC = () => {
My Custom Title
 + + {/* Clear button */} + {/* Custom buttons */} @@ -509,6 +518,9 @@ export class DatetimeExample {
My Custom Title
, + + {/* Clear button */} + {/* Custom buttons */} this.customDatetime = el}> @@ -575,6 +587,9 @@ export class DatetimeExample {
My Custom Title
 + + + @@ -640,6 +655,7 @@ export class DatetimeExample { | Property | Attribute | Description | Type | Default | | ---------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | -------------- | | `cancelText` | `cancel-text` | The text to display on the picker's cancel button. | `string` | `'Cancel'` | +| `clearText` | `clear-text` | The text to display on the picker's "Clear" button. | `string` | `'Clear'` | | `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `'primary'` | | `dayValues` | `day-values` | Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the `dayValues` input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month. | `number \| number[] \| string \| undefined` | `undefined` | | `disabled` | `disabled` | If `true`, the user cannot interact with the datetime. | `boolean` | `false` | @@ -656,6 +672,7 @@ export class DatetimeExample { | `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` | | `presentation` | `presentation` | Which values you want to select. `'date'` will show a calendar picker to select the month, day, and year. `'time'` will show a time picker to select the hour, minute, and (optionally) AM/PM. `'date-time'` will show the date picker first and time picker second. `'time-date'` will show the time picker first and date picker second. | `"date" \| "date-time" \| "month" \| "month-year" \| "time" \| "time-date" \| "year"` | `'date-time'` | | `readonly` | `readonly` | If `true`, the datetime appears normal but is not interactive. | `boolean` | `false` | +| `showClearButton` | `show-clear-button` | If `true`, a "Clear" button will be rendered alongside the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered. | `boolean` | `false` | | `showDefaultButtons` | `show-default-buttons` | If `true`, the default "Cancel" and "OK" buttons will be rendered at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered. | `boolean` | `false` | | `showDefaultTimeLabel` | `show-default-time-label` | If `true`, the default "Time" label will be rendered for the time selector of the `ion-datetime` component. Developers can also use the `time-label` slot if they want to customize this label. If a custom label is set in the `time-label` slot then the default label will not be rendered. | `boolean` | `true` | | `showDefaultTitle` | `show-default-title` | If `true`, a header will be shown above the calendar picker. On `ios` mode this will include the slotted title, and on `md` mode this will include the slotted title and the selected date. | `boolean` | `false` | @@ -701,12 +718,11 @@ Type: `Promise` -### `reset(value?: string | undefined) => Promise` +### `reset(startDate?: string | undefined) => Promise` -Resets the internal state of the datetime -but does not update the value. Passing a value -ISO-8601 string will reset the state of -te component to the provided date. +Resets the internal state of the datetime but does not update the value. +Passing a valid ISO-8601 string will reset the state of the component to the provided date. +If no value is provided, the internal state will be reset to today. #### Returns diff --git a/core/src/components/datetime/test/basic/index.html b/core/src/components/datetime/test/basic/index.html index bb234bea47..ad0eeeee1e 100644 --- a/core/src/components/datetime/test/basic/index.html +++ b/core/src/components/datetime/test/basic/index.html @@ -279,7 +279,7 @@

Inline - Custom

- + Select Date
diff --git a/core/src/components/datetime/usage/angular.md b/core/src/components/datetime/usage/angular.md index fc1bc64d27..d3eb769521 100644 --- a/core/src/components/datetime/usage/angular.md +++ b/core/src/components/datetime/usage/angular.md @@ -40,6 +40,9 @@
My Custom Title
 + + + Open Datetime Modal diff --git a/core/src/components/datetime/usage/javascript.md b/core/src/components/datetime/usage/javascript.md index c8cfd0704b..38d6cb815a 100644 --- a/core/src/components/datetime/usage/javascript.md +++ b/core/src/components/datetime/usage/javascript.md @@ -40,6 +40,9 @@
My Custom Title
 + + + diff --git a/core/src/components/datetime/usage/react.md b/core/src/components/datetime/usage/react.md index 30f25c0e27..a77568e061 100644 --- a/core/src/components/datetime/usage/react.md +++ b/core/src/components/datetime/usage/react.md @@ -66,6 +66,9 @@ export const DateTimeExamples: React.FC = () => {
My Custom Title
 + + {/* Clear button */} + {/* Custom buttons */} diff --git a/core/src/components/datetime/usage/stencil.md b/core/src/components/datetime/usage/stencil.md index 26fee8d124..52a42b9e27 100644 --- a/core/src/components/datetime/usage/stencil.md +++ b/core/src/components/datetime/usage/stencil.md @@ -64,6 +64,9 @@ export class DatetimeExample {
My Custom Title
, + + {/* Clear button */} + {/* Custom buttons */} this.customDatetime = el}> diff --git a/core/src/components/datetime/usage/vue.md b/core/src/components/datetime/usage/vue.md index 780da2d984..c9f09612d2 100644 --- a/core/src/components/datetime/usage/vue.md +++ b/core/src/components/datetime/usage/vue.md @@ -40,6 +40,9 @@
My Custom Title
 + + + diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index ecd96d0448..2d4683a000 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -275,6 +275,7 @@ export const IonDatetime = /*@__PURE__*/ defineContainer('ion-d 'presentation', 'cancelText', 'doneText', + 'clearText', 'yearValues', 'monthValues', 'dayValues', @@ -285,6 +286,7 @@ export const IonDatetime = /*@__PURE__*/ defineContainer('ion-d 'value', 'showDefaultTitle', 'showDefaultButtons', + 'showClearButton', 'showDefaultTimeLabel', 'hourCycle', 'size',