@cimpress/react-components
Version:
React components to support the MCP styleguide
51 lines • 2.02 kB
JavaScript
import React, { Component } from 'react';
import { Toggle } from '@cimpress/react-components';
export default class ToggleDemo extends Component {
constructor() {
super(...arguments);
Object.defineProperty(this, "state", {
enumerable: true,
configurable: true,
writable: true,
value: {
on: true,
onSm: true,
disabled: false,
}
});
Object.defineProperty(this, "toggle", {
enumerable: true,
configurable: true,
writable: true,
value: () => {
this.setState(prevState => ({ on: !prevState.on }));
}
});
Object.defineProperty(this, "toggleSm", {
enumerable: true,
configurable: true,
writable: true,
value: () => {
this.setState(prevState => ({ onSm: !prevState.onSm }));
}
});
Object.defineProperty(this, "toggleDisabled", {
enumerable: true,
configurable: true,
writable: true,
value: () => {
this.setState(prevState => ({ disabled: !prevState.disabled }));
}
});
}
render() {
return (React.createElement("div", { className: "row" },
React.createElement("div", { className: "col-md-4" },
React.createElement(Toggle, { on: this.state.on, onClick: this.toggle, disabled: this.state.disabled })),
React.createElement("div", { className: "col-md-4" },
React.createElement(Toggle, { on: this.state.onSm, onClick: this.toggleSm, size: "sm", disabled: this.state.disabled })),
React.createElement("div", { className: "col-md-4" },
React.createElement("button", { className: "btn btn-default", onClick: this.toggleDisabled }, this.state.disabled ? 'Enable' : 'Disable'))));
}
}
//# sourceMappingURL=toggle.js.map