jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-23 17:26:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Allow disabling an ha-form (#10218)

Browse Source
This commit is contained in:
Paulus Schoutsen 2021-10-09 03:41:36 -07:00 committed by GitHub
parent 774f22b7e7
commit 9bf41a37b4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 85 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
gallery/src/components/demo-black-white-row.ts
View File

@ -1,6 +1,8 @@
import { Button } from "@material/mwc-button";
import { html, LitElement, css, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
import { fireEvent } from "../../../src/common/dom/fire_event";
@customElement("demo-black-white-row")
class DemoBlackWhiteRow extends LitElement {
@ -8,6 +10,8 @@ class DemoBlackWhiteRow extends LitElement {
@property() value!: any;
@property() disabled = false;
protected render(): TemplateResult {
return html`
<div class="row">
@ -17,7 +21,12 @@ class DemoBlackWhiteRow extends LitElement {
<slot name="light"></slot>
</div>
<div class="card-actions">
<mwc-button>Submit</mwc-button>
<mwc-button
.disabled=${this.disabled}
@click=${this.handleSubmit}
>
Submit
</mwc-button>
</div>
</ha-card>
</div>
@ -27,7 +36,12 @@ class DemoBlackWhiteRow extends LitElement {
<slot name="dark"></slot>
</div>
<div class="card-actions">
<mwc-button>Submit</mwc-button>
<mwc-button
.disabled=${this.disabled}
@click=${this.handleSubmit}
>
Submit
</mwc-button>
</div>
</ha-card>
<pre>${JSON.stringify(this.value, undefined, 2)}</pre>
@ -51,6 +65,13 @@ class DemoBlackWhiteRow extends LitElement {
);
}
handleSubmit(ev) {
const content = (ev.target as Button).closest(".content")!;
fireEvent(this, "submitted" as any, {
slot: content.classList.contains("light") ? "light" : "dark",
});
}
static styles = css`
.row {
display: flex;

17
gallery/src/demos/demo-ha-form.ts
View File

@ -230,12 +230,26 @@ class DemoHaForm extends LitElement {
({ schema, data }) => data || computeInitialHaFormData(schema)
);
private disabled = SCHEMAS.map(() => false);
protected render(): TemplateResult {
return html`
${SCHEMAS.map((info, idx) => {
const translations = info.translations || {};
return html`
<demo-black-white-row .title=${info.title} .value=${this.data[idx]}>
<demo-black-white-row
.title=${info.title}
.value=${this.data[idx]}
.disabled=${this.disabled[idx]}
@submitted=${() => {
this.disabled[idx] = true;
this.requestUpdate();
setTimeout(() => {
this.disabled[idx] = false;
this.requestUpdate();
}, 2000);
}}
>
${["light", "dark"].map(
(slot) => html`
<ha-form
@ -243,6 +257,7 @@ class DemoHaForm extends LitElement {
.data=${this.data[idx]}
.schema=${info.schema}
.error=${info.error}
.disabled=${this.disabled[idx]}
.computeError=${(error) => translations[error] || error}
.computeLabel=${(schema) =>
translations[schema.name] || schema.name}

27
src/auth/ha-auth-flow.ts
View File

@ -39,6 +39,8 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
@state() private _errorMessage?: string;
@state() private _submitting = false;
willUpdate(changedProps: PropertyValues) {
super.willUpdate(changedProps);
@ -135,13 +137,15 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
return html`
${this._renderStep(this._step)}
<div class="action">
<mwc-button raised @click=${this._handleSubmit}
>${this._step.type === "form"
? this.localize("ui.panel.page-authorize.form.next")
: this.localize(
"ui.panel.page-authorize.form.start_over"
)}</mwc-button
<mwc-button
raised
@click=${this._handleSubmit}
.disabled=${this._submitting}
>
${this._step.type === "form"
? this.localize("ui.panel.page-authorize.form.next")
: this.localize("ui.panel.page-authorize.form.start_over")}
</mwc-button>
</div>
`;
case "error":
@ -192,6 +196,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
.data=${this._stepData}
.schema=${step.data_schema}
.error=${step.errors}
.disabled=${this._submitting}
.computeLabel=${this._computeLabelCallback(step)}
.computeError=${this._computeErrorCallback(step)}
@value-changed=${this._stepDataChanged}
@ -317,9 +322,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
this._providerChanged(this.authProvider);
return;
}
this._state = "loading";
// To avoid a jumping UI.
this.style.setProperty("min-height", `${this.offsetHeight}px`);
this._submitting = true;
const postData = { ...this._stepData, client_id: this.clientId };
@ -344,16 +347,12 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
this._state = "error";
this._errorMessage = this._unknownError();
} finally {
this.style.setProperty("min-height", "");
this._submitting = false;
}
}
static get styles(): CSSResultGroup {
return css`
:host {
/* So we can set min-height to avoid jumping during loading */
display: block;
}
.action {
margin: 24px 0 8px;
text-align: center;

3
src/components/ha-duration-input.ts
View File

@ -20,6 +20,8 @@ class HaDurationInput extends LitElement {
@property({ type: Boolean }) public enableMillisecond?: boolean;
@property({ type: Boolean }) public disabled = false;
@query("paper-time-input", true) private _input?: HTMLElement;
public focus() {
@ -34,6 +36,7 @@ class HaDurationInput extends LitElement {
.label=${this.label}
.required=${this.required}
.autoValidate=${this.required}
.disabled=${this.disabled}
error-message="Required"
enable-second
.enableMillisecond=${this.enableMillisecond}

3
src/components/ha-form/ha-form-boolean.ts
View File

@ -18,6 +18,8 @@ export class HaFormBoolean extends LitElement implements HaFormElement {
@property() public label!: string;
@property({ type: Boolean }) public disabled = false;
@query("paper-checkbox", true) private _input?: HTMLElement;
public focus() {
@ -31,6 +33,7 @@ export class HaFormBoolean extends LitElement implements HaFormElement {
<mwc-formfield .label=${this.label}>
<ha-checkbox
.checked=${this.data}
.disabled=${this.disabled}
@change=${this._valueChanged}
></ha-checkbox>
</mwc-formfield>

3
src/components/ha-form/ha-form-float.ts
View File

@ -13,6 +13,8 @@ export class HaFormFloat extends LitElement implements HaFormElement {
@property() public label!: string;
@property({ type: Boolean }) public disabled = false;
@query("mwc-textfield") private _input?: HTMLElement;
public focus() {
@ -27,6 +29,7 @@ export class HaFormFloat extends LitElement implements HaFormElement {
inputMode="decimal"
.label=${this.label}
.value=${this.data !== undefined ? this.data : ""}
.disabled=${this.disabled}
.required=${this.schema.required}
.autoValidate=${this.schema.required}
.suffix=${this.schema.description?.suffix}

7
src/components/ha-form/ha-form-integer.ts
View File

@ -23,6 +23,8 @@ export class HaFormInteger extends LitElement implements HaFormElement {
@property() public label?: string;
@property({ type: Boolean }) public disabled = false;
@query("paper-input ha-slider") private _input?: HTMLElement;
private _lastValue?: HaFormIntegerData;
@ -44,6 +46,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
<ha-checkbox
@change=${this._handleCheckboxChange}
.checked=${this.data !== undefined}
.disabled=${this.disabled}
></ha-checkbox>
`
: ""}
@ -52,7 +55,8 @@ export class HaFormInteger extends LitElement implements HaFormElement {
.value=${this._value}
.min=${this.schema.valueMin}
.max=${this.schema.valueMax}
.disabled=${this.data === undefined && this.schema.optional}
.disabled=${this.disabled ||
(this.data === undefined && this.schema.optional)}
@change=${this._valueChanged}
></mwc-slider>
</div>
@ -66,6 +70,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
inputMode="numeric"
.label=${this.label}
.value=${this.data !== undefined ? this.data : ""}
.disabled=${this.disabled}
.required=${this.schema.required}
.autoValidate=${this.schema.required}
.suffix=${this.schema.description?.suffix}

5
src/components/ha-form/ha-form-multi_select.ts
View File

@ -39,6 +39,8 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
@property() public label!: string;
@property({ type: Boolean }) public disabled = false;
@state() private _opened = false;
@query("paper-menu-button", true) private _input?: HTMLElement;
@ -60,6 +62,7 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
<ha-checkbox
.checked=${data.includes(value)}
.value=${value}
.disabled=${this.disabled}
@change=${this._valueChanged}
></ha-checkbox>
</mwc-formfield>
@ -73,6 +76,7 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
return html`
<ha-button-menu
.disabled=${this.disabled}
fixed
corner="BOTTOM_START"
@opened=${this._handleOpen}
@ -84,6 +88,7 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
.value=${data
.map((value) => this.schema.options![value] || value)
.join(", ")}
.disabled=${this.disabled}
tabindex="-1"
></mwc-textfield>
<ha-svg-icon

3
src/components/ha-form/ha-form-positive_time_period_dict.ts
View File

@ -11,6 +11,8 @@ export class HaFormTimePeriod extends LitElement implements HaFormElement {
@property() public label!: string;
@property({ type: Boolean }) public disabled = false;
@query("ha-time-input", true) private _input?: HTMLElement;
public focus() {
@ -25,6 +27,7 @@ export class HaFormTimePeriod extends LitElement implements HaFormElement {
.label=${this.label}
.required=${this.schema.required}
.data=${this.data}
.disabled=${this.disabled}
></ha-duration-input>
`;
}

4
src/components/ha-form/ha-form-select.ts
View File

@ -19,6 +19,8 @@ export class HaFormSelect extends LitElement implements HaFormElement {
@property() public label!: string;
@property({ type: Boolean }) public disabled = false;
@query("mwc-select", true) private _input?: HTMLElement;
public focus() {
@ -38,6 +40,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
<ha-radio
.checked=${value === this.data}
.value=${value}
.disabled=${this.disabled}
@change=${this._valueChanged}
></ha-radio>
</mwc-formfield>
@ -52,6 +55,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
fixedMenuPosition
.label=${this.label}
.value=${this.data}
.disabled=${this.disabled}
@closed=${stopPropagation}
@selected=${this._valueChanged}
>

3
src/components/ha-form/ha-form-string.ts
View File

@ -28,6 +28,8 @@ export class HaFormString extends LitElement implements HaFormElement {
@property() public label!: string;
@property({ type: Boolean }) public disabled = false;
@state() private _unmaskedPassword = false;
@query("mwc-textfield") private _input?: HTMLElement;
@ -51,6 +53,7 @@ export class HaFormString extends LitElement implements HaFormElement {
: "password"}
.label=${this.label}
.value=${this.data || ""}
.disabled=${this.disabled}
.required=${this.schema.required}
.autoValidate=${this.schema.required}
.suffix=${isPassword

3
src/components/ha-form/ha-form.ts
View File

@ -23,6 +23,8 @@ export class HaForm extends LitElement implements HaFormElement {
@property() public error?: Record<string, string>;
@property({ type: Boolean }) public disabled = false;
@property() public computeError?: (schema: HaFormSchema, error) => string;
@property() public computeLabel?: (schema: HaFormSchema) => string;
@ -64,6 +66,7 @@ export class HaForm extends LitElement implements HaFormElement {
schema: item,
data: getValue(this.data, item),
label: this._computeLabel(item),
disabled: this.disabled,
})}
`;
})}