Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(elements|ino-datepicker): provide error property #429

Merged
merged 3 commits into from
Oct 18, 2021
Merged

feat(elements|ino-datepicker): provide error property #429

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1a57b08
feat(elements|ino-datepicker): provide error property
BenPag Sep 16, 2021
36ac8bc
feat(elements|ino-datepicker): change error state handling
BenPag Oct 12, 2021
106bd88
feat(elements|ino-datepicker): negation of error value
BenPag Oct 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/elements-angular/elements/src/directives/proxies.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,13 +210,13 @@ export class InoControlItem {
import { Datepicker as IDatepicker } from '@inovex.de/elements/dist/types/components/ino-datepicker/ino-datepicker';
export declare interface InoDatepicker extends Components.InoDatepicker {}
@ProxyCmp({
inputs: ['autoFocus', 'dateFormat', 'defaultDate', 'defaultHour', 'defaultMinute', 'disabled', 'helper', 'helperPersistent', 'helperValidation', 'hourStep', 'label', 'max', 'min', 'minuteStep', 'name', 'outline', 'range', 'required', 'showLabelHint', 'twelveHourTime', 'type', 'value']
inputs: ['autoFocus', 'dateFormat', 'defaultDate', 'defaultHour', 'defaultMinute', 'disabled', 'error', 'helper', 'helperPersistent', 'helperValidation', 'hourStep', 'label', 'max', 'min', 'minuteStep', 'name', 'outline', 'range', 'required', 'showLabelHint', 'twelveHourTime', 'type', 'value']
})
@Component({
selector: 'ino-datepicker',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
inputs: ['autoFocus', 'dateFormat', 'defaultDate', 'defaultHour', 'defaultMinute', 'disabled', 'helper', 'helperPersistent', 'helperValidation', 'hourStep', 'label', 'max', 'min', 'minuteStep', 'name', 'outline', 'range', 'required', 'showLabelHint', 'twelveHourTime', 'type', 'value'],
inputs: ['autoFocus', 'dateFormat', 'defaultDate', 'defaultHour', 'defaultMinute', 'disabled', 'error', 'helper', 'helperPersistent', 'helperValidation', 'hourStep', 'label', 'max', 'min', 'minuteStep', 'name', 'outline', 'range', 'required', 'showLabelHint', 'twelveHourTime', 'type', 'value'],
outputs: ['valueChange']
})
export class InoDatepicker {
Expand Down
8 changes: 8 additions & 0 deletions packages/elements/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,6 +249,10 @@ export namespace Components {
* Disables this element.
*/
"disabled"?: boolean;
/**
* Displays the datepicker as invalid if set to true. If the property is not set or set to false, the validation is handled by the default validation.
*/
"error"?: boolean;
/**
* The helper text.
*/
Expand Down Expand Up @@ -1802,6 +1806,10 @@ declare namespace LocalJSX {
* Disables this element.
*/
"disabled"?: boolean;
/**
* Displays the datepicker as invalid if set to true. If the property is not set or set to false, the validation is handled by the default validation.
*/
"error"?: boolean;
/**
* The helper text.
*/
Expand Down
26 changes: 25 additions & 1 deletion packages/elements/src/components/ino-datepicker/ino-datepicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,29 @@ export class Datepicker implements ComponentInterface {
this.flatpickr.toggle();
}

/**
* Displays the datepicker as invalid if set to true.
* If the property is not set or set to false,
* the validation is handled by the default validation.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't the error prop have three states:

  • null|undefined => use native validation
  • true => has error
  • false => has no error

If I integrate the component and manually set the error=false, I wouldn't suggest that the component still natively validates.

This may be something we should unify across all components

*/
@Prop() error?: boolean;

@Watch('error')
errorHandler(value?: boolean) {
if (this.disabled || !this.flatpickr) {
return;
}

switch (value) {
case true:
case false:
this.isValid = !value;
break;
default:
this.validate();
}
}

/**
* Emits when the value of the datepicker changes.
* The value can be found in `event.detail`
Expand All @@ -269,7 +292,7 @@ export class Datepicker implements ComponentInterface {
}

private validate(value: string = this.value) {
this.isValid = this.validator.validate(value);
this.isValid = !this.error && this.validator.validate(value);
}

private create() {
Expand Down Expand Up @@ -310,6 +333,7 @@ export class Datepicker implements ComponentInterface {
if (this.value) {
this.flatpickr?.setDate(this.value);
}
this.errorHandler(this.error);
}

private dispose() {
Expand Down
1 change: 1 addition & 0 deletions packages/elements/src/components/ino-datepicker/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,7 @@ The type of the picker is selected based on the type` property. See the example
| `defaultHour` | `default-hour` | A number containing the initial hour in the date-time picker overlay. If a `value` is given, this will be ignored. | `number` | `12` |
| `defaultMinute` | `default-minute` | A number containing the initial minute in the date-time picker overlay. If a `value` is given, this will be ignored. | `number` | `0` |
| `disabled` | `disabled` | Disables this element. | `boolean` | `undefined` |
| `error` | `error` | Displays the datepicker as invalid if set to true. If the property is not set or set to false, the validation is handled by the default validation. | `boolean` | `undefined` |
| `helper` | `helper` | The helper text. | `string` | `undefined` |
| `helperPersistent` | `helper-persistent` | Displays the helper permanently. | `boolean` | `undefined` |
| `helperValidation` | `helper-validation` | Styles the helper text as a validation message. | `boolean` | `undefined` |
Expand Down
14 changes: 13 additions & 1 deletion packages/storybook/custom-elements.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1022,6 +1022,12 @@
"description": "Disables this element.",
"required": false
},
{
"name": "error",
"type": "boolean",
"description": "Displays the datepicker as invalid if set to true.\nIf the property is not set or set to false,\nthe validation is handled by the default validation.",
"required": false
},
{
"name": "helper",
"type": "string",
Expand Down Expand Up @@ -1163,6 +1169,12 @@
"description": "Disables this element.",
"required": false
},
{
"name": "error",
"type": "boolean",
"description": "Displays the datepicker as invalid if set to true.\nIf the property is not set or set to false,\nthe validation is handled by the default validation.",
"required": false
},
{
"name": "helper",
"type": "string",
Expand Down Expand Up @@ -4186,7 +4198,7 @@
{
"name": "ino-snackbar",
"path": "./src/components/ino-snackbar/ino-snackbar.tsx",
"description": "Snackbars provide brief messages about app processes at the bottom of the screen. It functions as a wrapper around the material design's [Snackbar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar) component",
"description": "Snackbars provide brief messages about app processes. It functions as a wrapper around the material design's [Snackbar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar) component.",
"attributes": [
{
"name": "action-text",
Expand Down
2 changes: 2 additions & 0 deletions packages/storybook/src/stories/ino-datepicker/ino-datepicker.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ export const Playground: Story<Components.InoDatepicker> = (args) => html`
outline="${args.outline}"
range="${args.range}"
required="${args.required}"
error="${args.error}"
show-label-hint="${args.showLabelHint}"
twelve-hour-time="${args.twelveHourTime}"
type="${args.type}"
Expand All @@ -65,6 +66,7 @@ Playground.args = {
outline: false,
range: false,
required: false,
error: false,
showLabelHint: false,
twelveHourTime: false,
type: 'date',
Expand Down