Refactoring. Add grow option

thomasloven · Mar 3, 2021 · 26a2c8e · 26a2c8e
1 parent 80b6194
commit 26a2c8e
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 75 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "slider-entity-row",
   "private": true,
-  "version": "1.1.0b1",
+  "version": "1.1.0b2",
   "description": "slider-entity-row =================",
   "scripts": {
     "build": "rollup -c",

diff --git a/slider-entity-row.js b/slider-entity-row.js
diff --git a/src/controllers/controller.ts b/src/controllers/controller.ts
@@ -1,3 +1,5 @@
+import { html } from "lit-element";
+
 export interface ControllerConfig {
   entity: string;
   toggle?: boolean;
@@ -8,6 +10,7 @@ export interface ControllerConfig {
   max?: number;
   step?: number;
   attribute?: string;
+  grow?: boolean;
 }
 
 export abstract class Controller {
@@ -50,6 +53,18 @@ export abstract class Controller {
     return true;
   }
 
+  renderToggle(hass: any) {
+    return this.hasToggle
+      ? html`
+          <ha-entity-toggle
+            .stateObj=${this.stateObj}
+            .hass=${hass}
+            .class="state"
+          ></ha-entity-toggle>
+        `
+      : undefined;
+  }
+
   get isOff(): boolean {
     return this.value === 0;
   }

diff --git a/src/main.ts b/src/main.ts
@@ -46,56 +46,58 @@ class SliderEntityRow extends LitElement {
           )}
         </hui-warning>
       `;
+
     const dir = this.hass.translationMetadata.translations[
       this.hass.language || "en"
     ].isRTL
       ? "rtl"
       : "ltr";
-    const slider = html`
-      <ha-slider
-        .min=${c.min}
-        .max=${c.max}
-        .step=${c.step}
-        .value=${c.value}
-        .dir=${dir}
-        pin
-        @change=${(ev) =>
-          (c.value = (this.shadowRoot.querySelector("ha-slider") as any).value)}
-        class=${this._config.full_row ? "full" : ""}
-        ignore-bar-touch
-      ></ha-slider>
-    `;
-    const toggle = html`
-      <ha-entity-toggle
-        .stateObj=${this.hass.states[this._config.entity]}
-        .hass=${this.hass}
-        .class="state"
-      ></ha-entity-toggle>
-    `;
+
+    const showSlider =
+      c.stateObj.state !== "unavailable" &&
+      c.hasSlider &&
+      !(c.isOff && this._config.hide_when_off);
+    const showToggle = this._config.toggle && c.hasToggle;
+    const showValue = showToggle
+      ? false
+      : this._config.hide_state === false
+      ? true
+      : this._config.hide_state || this.hide_state
+      ? false
+      : c.isOff && this._config.hide_when_off
+      ? false
+      : true;
 
     const content = html`
       <div class="wrapper" @click=${(ev) => ev.stopPropagation()}>
-        ${c.stateObj.state === "unavailable"
-          ? this._config.toggle && c.hasToggle
-            ? toggle
-            : html`
-                <span class="state">
-                  ${this.hass.localize("state.default.unavailable")}
-                </span>
-              `
-          : html`
-              ${(this._config.hide_when_off && c.isOff) || !c.hasSlider
-                ? ""
-                : slider}
-              ${this._config.toggle
-                ? c.hasToggle
-                  ? toggle
-                  : ""
-                : (this._config.hide_state || this.hide_state) &&
-                  this._config.hide_state !== false
-                ? ""
-                : html` <span class="state"> ${c.string} </span> `}
-            `}
+        ${showSlider
+          ? html`
+              <ha-slider
+                .min=${c.min}
+                .max=${c.max}
+                .step=${c.step}
+                .value=${c.value}
+                .dir=${dir}
+                pin
+                @change=${(ev) =>
+                  (c.value = (this.shadowRoot.querySelector(
+                    "ha-slider"
+                  ) as any).value)}
+                class=${this._config.full_row || this._config.grow
+                  ? "full"
+                  : ""}
+                ignore-bar-touch
+              ></ha-slider>
+            `
+          : ""}
+        ${showToggle ? c.renderToggle(this.hass) : ""}
+        ${showValue
+          ? html`<span class="state">
+              ${c.stateObj.state === "unavailable"
+                ? this.hass.localize("state.default.unavailable")
+                : c.string}
+            </span>`
+          : ""}
       </div>
     `;
 
@@ -116,7 +118,7 @@ class SliderEntityRow extends LitElement {
         display: flex;
         align-items: center;
         justify-content: flex-end;
-        flex-grow: 2;
+        flex: 100;
         height: 40px;
       }
       .state {

diff --git a/test/views/2_options.yaml b/test/views/2_options.yaml
@@ -39,6 +39,9 @@ cards:
           - <<: *default
             name: hide_when_off
             hide_when_off: true
+          - <<: *default
+            name: hide_when_off + hide_state
+            hide_when_off: true
           - <<: *default
             name: hide_when_off + toggle
             hide_when_off: true
@@ -62,6 +65,9 @@ cards:
           - &default
             type: custom:slider-entity-row
             entity: light.bed_light
+          - <<: *default
+            name: grow
+            grow: true
           - <<: *default
             name: toggle
             toggle: true
@@ -71,6 +77,10 @@ cards:
           - <<: *default
             name: hide_when_off
             hide_when_off: true
+          - <<: *default
+            name: hide_when_off + hide_state
+            hide_when_off: true
+            hide_state: true
           - <<: *default
             name: hide_when_off + toggle
             hide_when_off: true

diff --git a/test/views/4_width.yaml b/test/views/4_width.yaml
@@ -11,12 +11,19 @@ cards:
           - &row
             type: custom:slider-entity-row
             entity: light.bed_light
+            name: Default
           - <<: *row
             hide_state: false
+            name: "!Hide state"
           - <<: *row
             toggle: true
+            name: Toggle
+          - <<: *row
+            grow: true
+            name: Grow
           - <<: *row
             hide_state: true
+            name: Hide state
           - <<: *row
             full_row: true
           - <<: *row