@cimpress/react-components
Version:
React components to support the MCP styleguide
69 lines • 3.37 kB
JavaScript
import React, { Component } from 'react';
import { Drawer, Checkbox, TextField, Radio, RadioGroup, Button } 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, { variant: "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, { variant: "default", onClick: this.closeDrawer }, "Close drawer"),
React.createElement(Button, { variant: "default" }, "Some other button")) },
React.createElement("h1", null, "Dock Dock Goose"))));
}
}
//# sourceMappingURL=drawer.js.map