@cimpress/react-components/dist/docs/components/drawer/drawer.js

React components to support the MCP styleguide

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const react_components_1 = require("@cimpress/react-components");
class DrawerDemo extends react_1.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_1.default.createElement("div", null,
            react_1.default.createElement(react_components_1.Checkbox, { label: "Auto-resize", checked: this.state.autoResize, onChange: this.toggleAutoResize }),
            react_1.default.createElement("h5", null, "Drawer Position"),
            react_1.default.createElement(react_components_1.RadioGroup, { onChange: this.onPositionChange, defaultSelected: "right", name: "radioTest" },
                react_1.default.createElement(react_components_1.Radio, { label: "left", value: "left" }),
                react_1.default.createElement(react_components_1.Radio, { label: "right", value: "right" }),
                react_1.default.createElement(react_components_1.Radio, { label: "top", value: "top" }),
                react_1.default.createElement(react_components_1.Radio, { label: "bottom", value: "bottom" })),
            react_1.default.createElement(react_components_1.TextField, { label: "size", value: this.state.size, onChange: this.onSizeChange, variant: "number" }),
            react_1.default.createElement("button", { className: "btn btn-default", onClick: this.openDrawer }, "Open drawer"),
            react_1.default.createElement(react_components_1.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_1.default.createElement("div", null,
                    react_1.default.createElement("button", { className: "btn btn-default", onClick: this.closeDrawer }, "Close drawer"),
                    react_1.default.createElement("button", { className: "btn btn-primary" }, "Some other button")) },
                react_1.default.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"))));
    }
}
exports.default = DrawerDemo;
//# sourceMappingURL=drawer.js.map