feat: refactor + convert pl-toggle-layout to lit-element

Author: sghoweri

packages/uikit-workshop/src/scripts/lit-components/pl-toggle-layout/pl-toggle-layout.js

@@ -0,0 +1,96 @@
+import { LitElement, html, customElement } from 'lit-element';
+import { store } from '../../store.js'; // connect to the Redux store.
+import { updateLayoutMode } from '../../actions/app.js'; // redux actions
+import './pl-toggle-layout.scss?external';
+
+@customElement('pl-toggle-layout')
+class LayoutToggle extends LitElement {
+  constructor(self) {
+    self = super(self);
+    self.handleClick = self.handleClick.bind(self);
+    return self;
+  }
+
+  createRenderRoot() {
+    return this;
+  }
+
+  connectedCallback() {
+    if (super.connectedCallback) {
+      super.connectedCallback();
+    }
+
+    const state = store.getState();
+    this.layoutMode = state.app.layoutMode || 'vertical';
+
+    this.__storeUnsubscribe = store.subscribe(() =>
+      this._stateChanged(store.getState())
+    );
+    this._stateChanged(store.getState());
+
+    this.size = this.size || 'medium';
+  }
+
+  disconnectedCallback() {
+    this.__storeUnsubscribe && this.__storeUnsubscribe();
+
+    if (super.disconnectedCallback) {
+      super.disconnectedCallback();
+    }
+  }
+
+  static get properties() {
+    return {
+      layoutMode: {
+        attribute: true,
+        type: String,
+      },
+      text: {
+        attribute: true,
+        type: String,
+      },
+      size: {
+        attribute: true,
+        type: String,
+      },
+      iconOnly: {
+        attribute: 'icon-only',
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
+
+  _stateChanged(state) {
+    if (this.layoutMode !== state.app.layoutMode) {
+      this.layoutMode = state.app.layoutMode;
+    }
+  }
+
+  handleClick() {
+    const getLayoutMode =
+      this.layoutMode !== 'vertical' ? 'vertical' : 'horizontal';
+
+    this.layoutMode = getLayoutMode;
+    store.dispatch(updateLayoutMode(this.layoutMode));
+  }
+
+  render() {
+    return html`
+      <pl-button
+        title="Switch Layout"
+        @click="${this.handleClick}"
+        size="${this.size}"
+        ?icon-only="${this.iconOnly || false}"
+      >
+        ${this.text}
+        <pl-icon
+          slot="after"
+          name="${this.layoutMode === 'horizontal' ? 'layout-h' : 'layout-v'}"
+        ></pl-icon>
+      </pl-button>
+    `;
+  }
+}
+
+export { LayoutToggle };

packages/uikit-workshop/src/scripts/lit-components/pl-toggle-layout/pl-toggle-layout.scss

@@ -0,0 +1,20 @@
+@import '../../../sass/scss/core.scss';
+
+pl-toggle-layout {
+  display: none;
+  align-self: center;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+  width: 100%;
+  cursor: pointer;
+
+  @media all and (min-width: $pl-bp-med) {
+    display: flex;
+  }
+}
+
+.pl-c-toggle-layout,
+.pl-c-toggle-layout__action {
+  width: 100%;
+}