ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(input-datepicker): only disable dates if validator is of type error (#2076)

Browse source
This commit is contained in:
gerjanvangeest 2023-09-12 15:10:43 +02:00 committed by GitHub
parent d1f92a3ad7
commit 6ccfb27868
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/pretty-glasses-invent.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
[input-datepicker] only disable dates is the validator type is "error"

8
packages/ui/components/input-datepicker/src/LionInputDatepicker.js
View file

@ -424,14 +424,14 @@ export class LionInputDatepicker extends ScopedElementsMixin(
// we need to extract minDate, maxDate, minMaxDate and disabledDates validators
validators.forEach(v => {
const vctor = /** @type {typeof import('@lion/ui/form-core.js').Validator} */ (v.constructor);
if (vctor.validatorName === 'MinDate') {
if (vctor.validatorName === 'MinDate' && v.type === 'error') {
this.__calendarMinDate = v.param;
} else if (vctor.validatorName === 'MaxDate') {
} else if (vctor.validatorName === 'MaxDate' && v.type === 'error') {
this.__calendarMaxDate = v.param;
} else if (vctor.validatorName === 'MinMaxDate') {
} else if (vctor.validatorName === 'MinMaxDate' && v.type === 'error') {
this.__calendarMinDate = v.param.min;
this.__calendarMaxDate = v.param.max;
} else if (vctor.validatorName === 'IsDateDisabled') {
} else if (vctor.validatorName === 'IsDateDisabled' && v.type === 'error') {
this.__calendarDisableDates = v.param;
}
});

23
packages/ui/components/input-datepicker/test/lion-input-datepicker.test.js
View file

@ -323,6 +323,29 @@ describe('<lion-input-datepicker>', () => {
expect(elObj.calendarEl.maxDate).to.equal(myMaxDate);
});
it('does not converts MaxDate validator to "maxDate" property if validator type other then "error"', async () => {
const myMaxDate = new Date('2030/06/15');
const tagName = 'custom-input-datepicker';
if (!customElements.get(tagName)) {
customElements.define(
tagName,
class CustomInputDatepicker extends LionInputDatepicker {
static get validationTypes() {
return [...super.validationTypes, 'warning'];
}
},
);
}
const el = await fixture(html`
<custom-input-datepicker .validators=${[new MaxDate(myMaxDate, { type: 'warning' })]}>
</custom-input-datepicker>
`);
const elObj = new DatepickerInputObject(el);
await elObj.openCalendar();
expect(elObj.calendarEl.maxDate).to.be.undefined;
});
it('should sync MinDate validator param with Calendar MinDate', async () => {
const myMinDateValidator = new MinDate(new Date('2020/02/02'));
const el = await fixture(html`