@cimpress/react-components/dist/esm/src/Drawer.js

React components to support the MCP styleguide

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Dock } from 'react-dock';
import { css, cx } from '@emotion/css';
import { Close } from './internal';
import { granite } from './colors';
import cvar from './theme/cvar';
const drawerHeaderCss = css({
    padding: cvar('spacing-24'),
    borderBottom: 'none',
    borderTopLeftRadius: cvar('spacing-4'),
    borderTopRightRadius: cvar('spacing-4'),
    h2: {
        marginTop: '18px',
        marginBottom: '9px',
    },
});
const drawerCrossBtn = css({
    color: cvar('color-icon-secondary'),
    fontSize: '30px',
    fontWeight: 100,
    lineHeight: '18px',
    textShadow: 'none',
    opacity: 1,
    cursor: 'pointer',
    marginTop: 0,
    padding: 0,
    backgroundColor: 'transparent',
    border: 0,
    float: 'right',
    '&:hover, &:active': {
        color: cvar('color-icon-secondary-active'),
        opacity: 1,
    },
});
const drawerContentCss = css({
    border: 0,
    boxShadow: '0 4px 4px 0 rgba(0, 0, 0, 0.1)',
    display: 'flex',
    flexDirection: 'column',
    height: '100vh',
});
const drawerFooterCss = css({
    textAlign: 'right',
    padding: cvar('spacing-24'),
    borderTop: 'none',
});
const drawerBodyCss = css({
    position: 'static',
    padding: cvar('spacing-24'),
    overflowY: 'auto',
    flexGrow: 1,
});
export const Drawer = (_a) => {
    var { autoResize = true, bodyStyle, children, className, closeOnClickOutside, footer, footerStyle, header, headerStyle, onRequestHide, position = 'right', show, size = 0.3, style, zIndex = 1040 } = _a, rest = __rest(_a, ["autoResize", "bodyStyle", "children", "className", "closeOnClickOutside", "footer", "footerStyle", "header", "headerStyle", "onRequestHide", "position", "show", "size", "style", "zIndex"]);
    useEffect(() => {
        const drawerOpen = css `
      overflow: hidden;
    `;
        if (show)
            document.body.className = cx(document.body.className, drawerOpen);
        return () => {
            document.body.className = document.body.className.replace(`${drawerOpen}`, '');
        };
    }, [show]);
    const hideDrawer = () => {
        onRequestHide && onRequestHide();
    };
    // this is only called when clicking outside the drawer
    const handleVisibleChange = () => {
        if (closeOnClickOutside) {
            hideDrawer();
        }
    };
    let customHeader;
    if (header) {
        customHeader = React.isValidElement(header) ? header : React.createElement("h2", null, header);
    }
    const drawerHeader = (React.createElement("div", { className: drawerHeaderCss, style: headerStyle },
        React.createElement("button", { className: drawerCrossBtn, onClick: hideDrawer },
            React.createElement(Close, { width: "18px", color: granite.base, cropped: true, "aria-label": "Close drawer" })),
        customHeader));
    const drawerFooter = footer && (React.createElement("div", { className: drawerFooterCss, style: footerStyle }, footer));
    // don't allow any other values
    const drawerPosition = position || 'right';
    const drawerNode = (React.createElement(Dock, Object.assign({ fluid: autoResize, size: size, position: drawerPosition, isVisible: show, dimMode: "opaque", zIndex: zIndex, dimStyle: { background: 'rgba(0, 0, 0, 0.5)' }, onVisibleChange: handleVisibleChange }, rest),
        React.createElement("div", { className: cx('crc-drawer', drawerContentCss, className), style: style },
            drawerHeader,
            React.createElement("div", { className: drawerBodyCss, style: bodyStyle }, children),
            drawerFooter)));
    return ReactDOM.createPortal(drawerNode, document.body);
};
//# sourceMappingURL=Drawer.js.map