@cimpress/react-components
Version:
React components to support the MCP styleguide
69 lines • 4.26 kB
JavaScript
import React, { Component } from 'react';
import { Drawer, Checkbox, TextField, Radio, RadioGroup } from '@cimpress/react-components';
export default class DrawerDemo extends Component {
constructor() {
super(...arguments);
Object.defineProperty(this, "state", {
enumerable: true,
configurable: true,
writable: true,
value: { open: false, autoResize: true, size: 0.3, position: 'right' }
});
Object.defineProperty(this, "closeDrawer", {
enumerable: true,
configurable: true,
writable: true,
value: () => {
this.setState({ open: false });
}
});
Object.defineProperty(this, "openDrawer", {
enumerable: true,
configurable: true,
writable: true,
value: () => {
this.setState({ open: true });
}
});
Object.defineProperty(this, "toggleAutoResize", {
enumerable: true,
configurable: true,
writable: true,
value: () => {
this.setState(prevState => {
const autoResize = !prevState.autoResize;
return { autoResize, size: autoResize ? 0.3 : 400 };
});
}
});
Object.defineProperty(this, "onSizeChange", {
enumerable: true,
configurable: true,
writable: true,
value: e => this.setState({ size: e.target.value })
});
Object.defineProperty(this, "onPositionChange", {
enumerable: true,
configurable: true,
writable: true,
value: (e, value) => this.setState({ position: value })
});
}
render() {
return (React.createElement("div", null,
React.createElement(Checkbox, { label: "Auto-resize", checked: this.state.autoResize, onChange: this.toggleAutoResize }),
React.createElement("h5", null, "Drawer Position"),
React.createElement(RadioGroup, { onChange: this.onPositionChange, defaultSelected: "right", name: "radioTest" },
React.createElement(Radio, { label: "left", value: "left" }),
React.createElement(Radio, { label: "right", value: "right" }),
React.createElement(Radio, { label: "top", value: "top" }),
React.createElement(Radio, { label: "bottom", value: "bottom" })),
React.createElement(TextField, { label: "size", value: this.state.size, onChange: this.onSizeChange, variant: "number" }),
React.createElement("button", { className: "btn btn-default", onClick: this.openDrawer }, "Open drawer"),
React.createElement(Drawer, { position: this.state.position, autoResize: this.state.autoResize, size: this.state.size, show: this.state.open, onRequestHide: this.closeDrawer, header: "The drawer header", closeOnClickOutside: true, footer: React.createElement("div", null,
React.createElement("button", { className: "btn btn-default", onClick: this.closeDrawer }, "Close drawer"),
React.createElement("button", { className: "btn btn-primary" }, "Some other button")) },
React.createElement("h1", null, "Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Dock Goose"))));
}
}
//# sourceMappingURL=drawer.js.map