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

fix(field): remove CssClassMixin from InteractionStateMixin

Browse source
This commit is contained in:
Thomas Allmer 2019-07-14 16:55:35 +02:00
parent b398f407de
commit dcf8726170
2 changed files with 29 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
packages/field/src/InteractionStateMixin.js
View file

@ -1,5 +1,4 @@
import { dedupeMixin } from '@lion/core'; import { dedupeMixin } from '@lion/core';
import { CssClassMixin } from '@lion/core/src/CssClassMixin.js';
import { ObserverMixin } from '@lion/core/src/ObserverMixin.js'; import { ObserverMixin } from '@lion/core/src/ObserverMixin.js';
import { Unparseable } from '@lion/validate'; import { Unparseable } from '@lion/validate';
@ -15,7 +14,7 @@ import { Unparseable } from '@lion/validate';
export const InteractionStateMixin = dedupeMixin( export const InteractionStateMixin = dedupeMixin(
superclass => superclass =>
// eslint-disable-next-line no-unused-vars, no-shadow // eslint-disable-next-line no-unused-vars, no-shadow
class InteractionStateMixin extends CssClassMixin(ObserverMixin(superclass)) { class InteractionStateMixin extends ObserverMixin(superclass) {
static get properties() { static get properties() {
return { return {
...super.properties, ...super.properties,
@ -24,7 +23,7 @@ export const InteractionStateMixin = dedupeMixin(
*/ */
touched: { touched: {
type: Boolean, type: Boolean,
nonEmptyToClass: 'state-touched', reflect: true,
}, },
/** /**
@ -32,7 +31,7 @@ export const InteractionStateMixin = dedupeMixin(
*/ */
dirty: { dirty: {
type: Boolean, type: Boolean,
nonEmptyToClass: 'state-dirty', reflect: true,
}, },
/** /**
@ -101,6 +100,17 @@ export const InteractionStateMixin = dedupeMixin(
this.removeEventListener(this._valueChangedEvent, this._iStateOnValueChange); this.removeEventListener(this._valueChangedEvent, this._iStateOnValueChange);
} }
updated(changedProperties) {
super.updated(changedProperties);
// classes are added only for backward compatibility - they are deprecated
if (changedProperties.has('touched')) {
this.classList[this.touched ? 'add' : 'remove']('state-touched');
}
if (changedProperties.has('dirty')) {
this.classList[this.dirty ? 'add' : 'remove']('state-dirty');
}
}
/** /**
* Evaluations performed on connectedCallback. Since some components can be out of sync * Evaluations performed on connectedCallback. Since some components can be out of sync
* (due to interdependence on light children that can only be processed * (due to interdependence on light children that can only be processed

15
packages/field/test/InteractionStateMixin.test.js
View file

@ -59,6 +59,7 @@ describe('InteractionStateMixin', async () => {
expect(el.touched).to.be.true; expect(el.touched).to.be.true;
}); });
// classes are added only for backward compatibility - they are deprecated
it('sets a class "state-(touched|dirty)"', async () => { it('sets a class "state-(touched|dirty)"', async () => {
const el = await fixture(html`<${tag}></${tag}>`); const el = await fixture(html`<${tag}></${tag}>`);
el.touched = true; el.touched = true;
@ -70,6 +71,20 @@ describe('InteractionStateMixin', async () => {
expect(el.classList.contains('state-dirty')).to.equal(true, 'has class "state-dirty"'); expect(el.classList.contains('state-dirty')).to.equal(true, 'has class "state-dirty"');
}); });
it('sets an attribute "touched', async () => {
const el = await fixture(html`<${tag}></${tag}>`);
el.touched = true;
await el.updateComplete;
expect(el.hasAttribute('touched')).to.be.true;
});
it('sets an attribute "dirty', async () => {
const el = await fixture(html`<${tag}></${tag}>`);
el.dirty = true;
await el.updateComplete;
expect(el.hasAttribute('dirty')).to.be.true;
});
it('fires "(touched|dirty)-state-changed" event when state changes', async () => { it('fires "(touched|dirty)-state-changed" event when state changes', async () => {
const touchedSpy = sinon.spy(); const touchedSpy = sinon.spy();
const dirtySpy = sinon.spy(); const dirtySpy = sinon.spy();