lml-main
Version:
This is now a mono repository published into many standalone packages.
34 lines • 1.66 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const react_redux_1 = require("react-redux");
const React = require("react");
const cosmoui_1 = require("cosmoui");
class ToggleButtonComponent extends cosmoui_1.StylableComponent {
constructor() {
super(...arguments);
this.baseStyle = {
cursor: 'pointer',
transition: 'all 0.3s',
};
this.toggleOnStyles = () => (Object.assign({ fill: this.primary(200), secondaryFill: this.primary() }, this.baseStyle));
this.toggleOffStyles = () => (Object.assign({ fill: this.gray(200), secondaryFill: this.gray() }, this.baseStyle));
this.toggleDisabledStyles = () => (Object.assign({ fill: this.gray(100), secondaryFill: this.gray(300) }, this.baseStyle));
}
render() {
let useStyle = (this.props.on) ? this.toggleOnStyles() : this.toggleOffStyles();
const onClick = (this.props.disabled) ? null : this.props.onClick;
if (this.props.disabled) {
useStyle = this.toggleDisabledStyles();
}
return (this.props.on) ?
React.createElement(cosmoui_1.Icon, { icon: "ToggleOn", style: useStyle, size: this.props.size, onClick: onClick }) :
React.createElement(cosmoui_1.Icon, { icon: "ToggleOff", style: useStyle, size: this.props.size, onClick: onClick });
}
}
ToggleButtonComponent.defaultProps = {
size: 28,
};
const mapStateToProps = (state, ownProps) => ({});
const mapActionsToProps = {};
exports.ToggleButton = react_redux_1.connect(mapStateToProps, mapActionsToProps)(ToggleButtonComponent);
//# sourceMappingURL=toggle-button.js.map