Extract black/white row into component (#10212)

* Extract black/white row into component

* Remove unused import
This commit is contained in:
Paulus Schoutsen 2021-10-08 10:48:39 -07:00 committed by GitHub
parent ad031d4bda
commit 2841369d3d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 143 additions and 130 deletions

View File

@ -0,0 +1,122 @@
import { html, LitElement, css, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
@customElement("demo-black-white-row")
class DemoBlackWhiteRow extends LitElement {
@property() title!: string;
@property() value!: any;
protected render(): TemplateResult {
return html`
<div class="row">
<div class="content light">
<ha-card .header=${this.title}>
<div class="card-content">
<slot name="light"></slot>
</div>
<div class="card-actions">
<mwc-button>Submit</mwc-button>
</div>
</ha-card>
</div>
<div class="content dark">
<ha-card .header=${this.title}>
<div class="card-content">
<slot name="dark"></slot>
</div>
<div class="card-actions">
<mwc-button>Submit</mwc-button>
</div>
</ha-card>
<pre>${JSON.stringify(this.value, undefined, 2)}</pre>
</div>
</div>
`;
}
firstUpdated(changedProps) {
super.firstUpdated(changedProps);
applyThemesOnElement(
this.shadowRoot!.querySelector(".dark"),
{
default_theme: "default",
default_dark_theme: "default",
themes: {},
darkMode: false,
},
"default",
{ dark: true }
);
}
static styles = css`
.row {
display: flex;
}
.content {
padding: 50px 0;
background-color: var(--primary-background-color);
}
.light {
flex: 1;
padding-left: 50px;
padding-right: 50px;
box-sizing: border-box;
}
.light ha-card {
margin-left: auto;
}
.dark {
display: flex;
flex: 1;
padding-left: 50px;
box-sizing: border-box;
flex-wrap: wrap;
}
ha-card {
width: 400px;
}
pre {
width: 300px;
margin: 0 16px 0;
overflow: auto;
color: var(--primary-text-color);
}
.card-actions {
display: flex;
flex-direction: row-reverse;
border-top: none;
}
@media only screen and (max-width: 1500px) {
.light {
flex: initial;
}
}
@media only screen and (max-width: 1000px) {
.light,
.dark {
padding: 16px;
}
.row,
.dark {
flex-direction: column;
}
ha-card {
margin: 0 auto;
width: 100%;
max-width: 400px;
}
pre {
margin: 16px auto;
}
}
`;
}
declare global {
interface HTMLElementTagNameMap {
"demo-black-white-row": DemoBlackWhiteRow;
}
}

View File

@ -1,12 +1,11 @@
/* eslint-disable lit/no-template-arrow */ /* eslint-disable lit/no-template-arrow */
import "@material/mwc-button"; import "@material/mwc-button";
import { LitElement, TemplateResult, css, html } from "lit"; import { LitElement, TemplateResult, html } from "lit";
import { customElement } from "lit/decorators"; import { customElement } from "lit/decorators";
import { computeInitialHaFormData } from "../../../src/components/ha-form/compute-initial-ha-form-data"; import { computeInitialHaFormData } from "../../../src/components/ha-form/compute-initial-ha-form-data";
import "../../../src/components/ha-card";
import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
import type { HaFormSchema } from "../../../src/components/ha-form/types"; import type { HaFormSchema } from "../../../src/components/ha-form/types";
import "../../../src/components/ha-form/ha-form"; import "../../../src/components/ha-form/ha-form";
import "../components/demo-black-white-row";
const SCHEMAS: { const SCHEMAS: {
title: string; title: string;
@ -235,138 +234,30 @@ class DemoHaForm extends LitElement {
return html` return html`
${SCHEMAS.map((info, idx) => { ${SCHEMAS.map((info, idx) => {
const translations = info.translations || {}; const translations = info.translations || {};
const computeLabel = (schema) =>
translations[schema.name] || schema.name;
const computeError = (error) => translations[error] || error;
return html` return html`
<div class="row"> <demo-black-white-row .title=${info.title} .value=${this.data[idx]}>
<div class="content light"> ${["light", "dark"].map(
<ha-card .header=${info.title}> (slot) => html`
<div class="card-content"> <ha-form
<ha-form slot=${slot}
.data=${this.data[idx]} .data=${this.data[idx]}
.schema=${info.schema} .schema=${info.schema}
.error=${info.error} .error=${info.error}
.computeError=${computeError} .computeError=${(error) => translations[error] || error}
.computeLabel=${computeLabel} .computeLabel=${(schema) =>
@value-changed=${(e) => { translations[schema.name] || schema.name}
this.data[idx] = e.detail.value; @value-changed=${(e) => {
this.requestUpdate(); this.data[idx] = e.detail.value;
}} this.requestUpdate();
></ha-form> }}
</div> ></ha-form>
<div class="card-actions"> `
<mwc-button>Submit</mwc-button> )}
</div> </demo-black-white-row>
</ha-card>
</div>
<div class="content dark">
<ha-card .header=${info.title}>
<div class="card-content">
<ha-form
.data=${this.data[idx]}
.schema=${info.schema}
.error=${info.error}
.computeError=${computeError}
.computeLabel=${computeLabel}
@value-changed=${(e) => {
this.data[idx] = e.detail.value;
this.requestUpdate();
}}
></ha-form>
</div>
<div class="card-actions">
<mwc-button>Submit</mwc-button>
</div>
</ha-card>
<pre>${JSON.stringify(this.data[idx], undefined, 2)}</pre>
</div>
</div>
`; `;
})} })}
`; `;
} }
firstUpdated(changedProps) {
super.firstUpdated(changedProps);
this.shadowRoot!.querySelectorAll(".dark").forEach((el) => {
applyThemesOnElement(
el,
{
default_theme: "default",
default_dark_theme: "default",
themes: {},
darkMode: false,
},
"default",
{ dark: true }
);
});
}
static styles = css`
.row {
display: flex;
}
.content {
padding: 50px 0;
background-color: var(--primary-background-color);
}
.light {
flex: 1;
padding-left: 50px;
padding-right: 50px;
box-sizing: border-box;
}
.light ha-card {
margin-left: auto;
}
.dark {
display: flex;
flex: 1;
padding-left: 50px;
box-sizing: border-box;
flex-wrap: wrap;
}
ha-card {
width: 400px;
}
pre {
width: 300px;
margin: 0 16px 0;
overflow: auto;
color: var(--primary-text-color);
}
.card-actions {
display: flex;
flex-direction: row-reverse;
border-top: none;
}
@media only screen and (max-width: 1500px) {
.light {
flex: initial;
}
}
@media only screen and (max-width: 1000px) {
.light,
.dark {
padding: 16px;
}
.row,
.dark {
flex-direction: column;
}
ha-card {
margin: 0 auto;
width: 100%;
max-width: 400px;
}
pre {
margin: 16px auto;
}
}
`;
} }
declare global { declare global {