@codeperate/opgl-ui-library
Version:
Opengamela UI Library
67 lines (66 loc) • 2.15 kB
JavaScript
import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
export class OpglToggle {
constructor() {
this.checked = false;
}
propsChangeHandler() {
if (this.inputProps.checked)
this.checked = this.inputProps.checked;
}
componentWillLoad() {
this.propsChangeHandler();
}
changeHandler(e) {
this.checked = e.target.checked;
if (this.inputProps.onChange)
this.inputProps.onChange(e);
}
inputElHandler(el) {
this.inputEl = el;
if (this.inputProps.ref)
this.inputProps.ref(el);
}
render() {
let containerClass = 'border block shadow rounded-full w-14 h-7 relative transform transition-all ease-in' + ' ' + (this.checked ? 'bg-blue-500' : '');
let labelClass = 'absolute z-10 rounded-full h-7 w-7 border transform transition-all ease-in shadow bg-gray-100' + ' ' + (this.checked ? 'translate-x-full' : '');
return (h(Host, { class: this.inputProps.class + ' ' + containerClass, onClick: e => {
if (e.target != this.inputEl) {
this.inputEl.click();
}
} },
h("input", Object.assign({}, this.inputProps, { ref: el => this.inputElHandler(el), type: "checkbox", onChange: (e) => this.changeHandler(e), class: "hidden" })),
h("div", { class: labelClass })));
}
static get is() { return "opgl-toggle"; }
static get properties() { return {
"inputProps": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "JSXBase.InputHTMLAttributes<HTMLInputElement>",
"resolved": "InputHTMLAttributes<HTMLInputElement>",
"references": {
"JSXBase": {
"location": "global"
},
"HTMLInputElement": {
"location": "global"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
}
}
}; }
static get states() { return {
"checked": {}
}; }
static get watchers() { return [{
"propName": "inputProps",
"methodName": "propsChangeHandler"
}]; }
}