Skip to content

Commit

Permalink
feat: refactor + convert pl-toggle-info to lit-element
Browse files Browse the repository at this point in the history
  • Loading branch information
sghoweri committed Oct 20, 2019
1 parent 95a3b21 commit 85cd9c5
Showing 2 changed files with 96 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import { LitElement, html, customElement } from 'lit-element';
import { store } from '../../store.js'; // connect to the Redux store.
import { updateDrawerState } from '../../actions/app.js'; // redux actions
import styles from './pl-toggle-info.scss?external';

@customElement('pl-toggle-info')
class InfoToggle extends LitElement {
constructor(self) {
self = super(self);
self.handleClick = self.handleClick.bind(self);
return self;
}

createRenderRoot() {
return this;
}

static get properties() {
return {
isDrawerOpen: {
attribute: true,
type: Boolean,
},
isViewallPage: {
attribute: true,
type: Boolean,
},
};
}

connectedCallback() {
if (super.connectedCallback) {
super.connectedCallback();
}

const state = store.getState();
this.isDrawerOpen = state.app.drawerOpened;
this.isViewallPage = state.app.isViewallPage;

this.__storeUnsubscribe = store.subscribe(() =>
this._stateChanged(store.getState())
);
this._stateChanged(store.getState());
}

disconnectedCallback() {
this.__storeUnsubscribe && this.__storeUnsubscribe();

if (super.disconnectedCallback) {
super.disconnectedCallback();
}
}

_stateChanged(state) {
this.isDrawerOpen = state.app.drawerOpened;
this.isViewallPage = state.app.isViewallPage;
}

handleClick() {
this.isDrawerOpen = !this.isDrawerOpen;
store.dispatch(updateDrawerState(this.isDrawerOpen));
}

render() {
return html`
<pl-button @click="${this.handleClick}">
<span slot="default"
>${this.isDrawerOpen ? 'Hide' : 'Show'}
${this.isViewallPage ? 'all' : ''} Pattern Info</span
>
<pl-icon
name="${this.isDrawerOpen ? 'hide' : 'show'}"
slot="after"
></pl-icon>
</pl-button>
`;
}
}

export { InfoToggle };
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
@import '../../../sass/scss/core.scss';

pl-toggle-info {
display: flex;
align-self: center;
justify-content: center;
align-items: center;
z-index: 10;
width: 100%;
cursor: pointer;
}

.pl-c-toggle-info,
.pl-c-toggle-info__action {
width: 100%;
}

0 comments on commit 85cd9c5

Please sign in to comment.