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

chore(field): replaced CssClassMixin by DisabledMixin

Browse source
This commit is contained in:
gerjanvangeest 2019-08-02 13:13:50 +02:00 committed by Joren Broekema
parent b90d89ccf0
commit 5432f5913f
2 changed files with 25 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
packages/field/src/LionField.js
View file

@ -1,6 +1,6 @@
import { DelegateMixin, SlotMixin, LitElement } from '@lion/core';
import { ElementMixin } from '@lion/core/src/ElementMixin.js';
import { CssClassMixin } from '@lion/core/src/CssClassMixin.js';
import { DisabledMixin } from '@lion/core/src/DisabledMixin.js';
import { ObserverMixin } from '@lion/core/src/ObserverMixin.js';
import { ValidateMixin } from '@lion/validate';
import { FormControlMixin } from './FormControlMixin.js';
@ -37,7 +37,7 @@ export class LionField extends FormControlMixin(
FocusMixin(
FormatMixin(
ValidateMixin(
CssClassMixin(ElementMixin(DelegateMixin(SlotMixin(ObserverMixin(LitElement))))),
DisabledMixin(ElementMixin(DelegateMixin(SlotMixin(ObserverMixin(LitElement))))),
),
),
),
@ -51,17 +51,15 @@ export class LionField extends FormControlMixin(
...super.delegations.properties,
'name',
'type',
'disabled',
'selectionStart',
'selectionEnd',
],
attributes: [...super.delegations.attributes, 'name', 'type', 'disabled'],
attributes: [...super.delegations.attributes, 'name', 'type'],
};
}
static get properties() {
return {
...super.properties,
submitted: {
// make sure validation can be triggered based on observer
type: Boolean,
@ -82,20 +80,12 @@ export class LionField extends FormControlMixin(
return (this.inputElement && this.inputElement.value) || '';
}
static get asyncObservers() {
return {
...super.asyncObservers,
_setDisabledClass: ['disabled'],
};
}
connectedCallback() {
super.connectedCallback();
this._onChange = this._onChange.bind(this);
this.inputElement.addEventListener('change', this._onChange);
this._delegateInitialValueAttr();
this._setDisabledClass();
this.classList.add('form-field'); // eslint-disable-line
}
@ -112,8 +102,18 @@ export class LionField extends FormControlMixin(
this.inputElement.removeEventListener('change', this._onChange);
}
_setDisabledClass() {
this.classList[this.disabled ? 'add' : 'remove']('state-disabled');
updated(changedProps) {
super.updated(changedProps);
if (changedProps.has('disabled')) {
if (this.disabled) {
this.inputElement.disabled = true;
this.classList.add('state-disabled'); // eslint-disable-line wc/no-self-class
} else {
this.inputElement.disabled = false;
this.classList.remove('state-disabled'); // eslint-disable-line wc/no-self-class
}
}
}
/**

10
packages/field/test/lion-field.test.js
View file

@ -101,6 +101,16 @@ describe('<lion-field>', () => {
expect(lionField.inputElement.disabled).to.equal(true);
});
// classes are added only for backward compatibility - they are deprecated
it('sets a state-disabled class when disabled', async () => {
const el = await fixture(`<${tagString} disabled>${inputSlotString}</${tagString}>`);
await el.updateComplete;
expect(el.classList.contains('state-disabled')).to.equal(true);
el.disabled = false;
await el.updateComplete;
expect(el.classList.contains('state-disabled')).to.equal(false);
});
it('can be cleared which erases value, validation and interaction states', async () => {
const lionField = await fixture(
`<${tagString} value="Some value from attribute">${inputSlotString}</${tagString}>`,