Skip to content

Commit 528db27

Browse files
JakobVogelsangJakobVogelsang
authored
fix(wizard-diagram, wizard-select, wizard-checkbox): disabled attribute (openscd#781)
* fix(wizard-textfield): make disabled work properly * fix(wizard-checkbox): make disabled work properly * fix(wizard-select): make disabled work properly
1 parent 7966f0f commit 528db27

File tree

6 files changed

+130
-13
lines changed

6 files changed

+130
-13
lines changed

‎src/wizard-checkbox.ts‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,9 @@ export class WizardCheckbox extends LitElement {
4040
this.checked = check === 'true' ? true : false;
4141
}
4242
}
43+
/** Disables component including null switch */
44+
@property({ type: Boolean })
45+
disabled = false;
4346

4447
private isNull = false;
4548

@@ -66,7 +69,7 @@ export class WizardCheckbox extends LitElement {
6669
}
6770

6871
@state()
69-
disabled = false;
72+
private deactivateCheckbox = false;
7073
@state()
7174
get formfieldLabel(): string {
7275
return this.helper ? `${this.helper} (${this.label})` : this.label;
@@ -81,14 +84,14 @@ export class WizardCheckbox extends LitElement {
8184
if (this.nulled === null) return;
8285
this.checked = this.nulled;
8386
this.nulled = null;
84-
this.disabled = false;
87+
this.deactivateCheckbox = false;
8588
}
8689

8790
private disable(): void {
8891
if (this.nulled !== null) return;
8992
this.nulled = this.checked;
9093
this.checked = this.defaultChecked;
91-
this.disabled = true;
94+
this.deactivateCheckbox = true;
9295
}
9396

9497
firstUpdated(): void {
@@ -100,6 +103,7 @@ export class WizardCheckbox extends LitElement {
100103
return html`<mwc-switch
101104
style="margin-left: 12px;"
102105
?checked=${!this.null}
106+
?disabled=${this.disabled}
103107
@change=${() => {
104108
this.null = !this.nullSwitch!.checked;
105109
}}
@@ -114,12 +118,12 @@ export class WizardCheckbox extends LitElement {
114118
<div style="flex: auto;">
115119
<mwc-formfield
116120
label="${this.formfieldLabel}"
117-
style="${this.disabled
121+
style="${this.deactivateCheckbox || this.disabled
118122
? `--mdc-theme-text-primary-on-background:rgba(0, 0, 0, 0.38)`
119123
: ``}"
120124
><mwc-checkbox
121125
?checked=${this.initChecked}
122-
?disabled=${this.disabled}
126+
?disabled=${this.deactivateCheckbox || this.disabled}
123127
></mwc-checkbox
124128
></mwc-formfield>
125129
</div>

‎src/wizard-select.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@ export class WizardSelect extends Select {
4949
@property({ type: Array })
5050
reservedValues: string[] = [];
5151

52+
// FIXME: workaround to allow disable of the whole component - need basic refactor
53+
private disabledSwitch = false;
54+
5255
@query('mwc-switch') nullSwitch?: Switch;
5356

5457
private nulled: string | null = null;
@@ -76,11 +79,18 @@ export class WizardSelect extends Select {
7679
return super.checkValidity();
7780
}
7881

82+
constructor() {
83+
super();
84+
85+
this.disabledSwitch = this.hasAttribute('disabled');
86+
}
87+
7988
renderSwitch(): TemplateResult {
8089
if (this.nullable) {
8190
return html`<mwc-switch
8291
style="margin-left: 12px;"
8392
?checked=${!this.null}
93+
?disabled=${this.disabledSwitch}
8494
@change=${() => {
8595
this.null = !this.nullSwitch!.checked;
8696
}}

‎src/wizard-textfield.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,9 @@ export class WizardTextField extends TextField {
7777
@property({ type: Array })
7878
reservedValues: string[] = [];
7979

80+
// FIXME: workaround to allow disable of the whole component - need basic refactor
81+
private disabledSwitch = false;
82+
8083
@query('mwc-switch') nullSwitch?: Switch;
8184
@query('mwc-menu') multiplierMenu?: Menu;
8285
@query('mwc-icon-button') multiplierButton?: IconButton;
@@ -121,13 +124,19 @@ export class WizardTextField extends TextField {
121124
return super.checkValidity();
122125
}
123126

127+
constructor() {
128+
super();
129+
130+
this.disabledSwitch = this.hasAttribute('disabled');
131+
}
132+
124133
renderUnitSelector(): TemplateResult {
125134
if (this.multipliers.length && this.unit)
126135
return html`<div style="position:relative;">
127136
<mwc-icon-button
128137
style="margin:5px;"
129138
icon="more"
130-
?disabled=${this.null}
139+
?disabled=${this.null || this.disabledSwitch}
131140
@click=${() => this.multiplierMenu?.show()}
132141
></mwc-icon-button>
133142
<mwc-menu
@@ -156,6 +165,7 @@ export class WizardTextField extends TextField {
156165
return html`<mwc-switch
157166
style="margin-left: 12px;"
158167
?checked=${!this.null}
168+
?disabled=${this.disabledSwitch}
159169
@change=${() => {
160170
this.null = !this.nullSwitch!.checked;
161171
}}

‎test/unit/wizard-checkbox.test.ts‎

Lines changed: 37 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { html, fixture, expect } from '@open-wc/testing';
33
import '../../src/wizard-checkbox.js';
44
import { WizardCheckbox } from '../../src/wizard-checkbox.js';
55

6-
describe('wizard-textfield', () => {
6+
describe('wizard-checkbox', () => {
77
let element: WizardCheckbox;
88
beforeEach(async () => {
99
element = await fixture(html`<wizard-checkbox></wizard-checkbox>`);
@@ -13,7 +13,8 @@ describe('wizard-textfield', () => {
1313
it('does not render a null value switch', () =>
1414
expect(element.nullSwitch).to.not.exist);
1515

16-
it('is enabled', () => expect(element).to.have.property('disabled', false));
16+
it('is enabled', () =>
17+
expect(element.checkbox).to.have.property('disabled', false));
1718

1819
it('is un-checked', () =>
1920
expect(element.checkbox).to.have.property('checked', false));
@@ -45,11 +46,11 @@ describe('wizard-textfield', () => {
4546

4647
it('disables itself on switch toggle', async () => {
4748
expect(element).to.have.property('maybeValue', 'false');
48-
expect(element).to.have.property('disabled', false);
49+
expect(element.checkbox).to.have.property('disabled', false);
4950
element.nullSwitch!.click();
5051
await element.updateComplete;
5152
expect(element).to.have.property('maybeValue', null);
52-
expect(element).to.have.property('disabled', true);
53+
expect(element.checkbox).to.have.property('disabled', true);
5354
});
5455

5556
it('remembers its previous value on switch toggle', async () => {
@@ -59,7 +60,7 @@ describe('wizard-textfield', () => {
5960
await element.updateComplete;
6061
element.nullSwitch!.click();
6162
await element.updateComplete;
62-
expect(element).to.have.property('disabled', false);
63+
expect(element.checkbox).to.have.property('disabled', false);
6364
expect(element).to.have.property('maybeValue', 'true');
6465
});
6566

@@ -72,11 +73,11 @@ describe('wizard-textfield', () => {
7273
it('enables itself on switch toggle', async () => {
7374
element.nullSwitch?.click();
7475
await element.updateComplete;
75-
expect(element).to.have.property('disabled', false);
76+
expect(element.checkbox).to.have.property('disabled', false);
7677
});
7778

7879
it('has a disabled checkbox', () =>
79-
expect(element).to.have.property('disabled', true));
80+
expect(element.checkbox).to.have.property('disabled', true));
8081

8182
it('is false per default', () =>
8283
expect(element.checkbox).to.have.property('checked', false));
@@ -99,4 +100,33 @@ describe('wizard-textfield', () => {
99100
expect(element).to.have.property('maybeValue', null));
100101
});
101102
});
103+
104+
describe('disabled', () => {
105+
beforeEach(async () => {
106+
element = await fixture(
107+
html`<wizard-checkbox
108+
value=${'true'}
109+
nullable
110+
disabled
111+
></wizard-checkbox>`
112+
);
113+
114+
await element.updateComplete;
115+
});
116+
117+
it('disables checkbox', () =>
118+
expect(element.checkbox).to.have.property('disabled', true));
119+
120+
it('disables null switch', () =>
121+
expect(element.nullSwitch).to.have.property('disabled', true));
122+
123+
it('turns off null switch', async () => {
124+
element.nullSwitch?.click();
125+
await element.updateComplete;
126+
element.nullSwitch?.click();
127+
await element.updateComplete;
128+
129+
expect(element.checkbox).to.have.property('disabled', true);
130+
});
131+
});
102132
});

‎test/unit/wizard-select.test.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,4 +80,34 @@ describe('wizard-select', () => {
8080
expect(element).to.have.property('maybeValue', null));
8181
});
8282
});
83+
84+
describe('disabled', () => {
85+
beforeEach(async () => {
86+
element = await fixture(html`<wizard-select
87+
.maybeValue=${'three'}
88+
nullable
89+
disabled
90+
>${items.map(
91+
item => html`<mwc-list-item value="${item}">${item}</mwc-list-item>`
92+
)}</wizard-select
93+
>`);
94+
95+
await element.updateComplete;
96+
});
97+
98+
it('disables select', () =>
99+
expect(element).to.have.property('disabled', true));
100+
101+
it('disables null switch', () =>
102+
expect(element.nullSwitch).to.have.property('disabled', true));
103+
104+
it('turns off null switch', async () => {
105+
element.nullSwitch?.click();
106+
await element.updateComplete;
107+
element.nullSwitch?.click();
108+
await element.updateComplete;
109+
110+
expect(element).to.have.property('disabled', true);
111+
});
112+
});
83113
});

‎test/unit/wizard-textfield.test.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -199,4 +199,37 @@ describe('wizard-textfield', () => {
199199
expect(element).to.have.property('maybeValue', null));
200200
});
201201
});
202+
203+
describe('disabled', () => {
204+
beforeEach(async () => {
205+
element = await fixture(html`<wizard-textfield
206+
.maybeValue=${'someValue'}
207+
.multipliers=${[null, 'G', 'M', 'k', '', 'm']}
208+
.multiplier=${'k'}
209+
.unit=${'V'}
210+
nullable
211+
disabled
212+
></wizard-textfield>`);
213+
214+
await element.updateComplete;
215+
});
216+
217+
it('disables text field', () =>
218+
expect(element).to.have.property('disabled', true));
219+
220+
it('disables null switch', () =>
221+
expect(element.nullSwitch).to.have.property('disabled', true));
222+
223+
it('disables null button', () =>
224+
expect(element.multiplierButton).to.have.property('disabled', true));
225+
226+
it('turns off null switch', async () => {
227+
element.nullSwitch?.click();
228+
await element.updateComplete;
229+
element.nullSwitch?.click();
230+
await element.updateComplete;
231+
232+
expect(element).to.have.property('disabled', true);
233+
});
234+
});
202235
});

0 commit comments

Comments
 (0)