@cimpress/react-components
Version:
React components to support the MCP styleguide
134 lines • 5.89 kB
JavaScript
;
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;
};
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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Drawer = void 0;
const react_1 = __importStar(require("react"));
const react_dom_1 = __importDefault(require("react-dom"));
const react_dock_1 = require("react-dock");
const css_1 = require("@emotion/css");
const internal_1 = require("./internal");
const colors_1 = require("./colors");
const cvar_1 = __importDefault(require("./theme/cvar"));
const drawerHeaderCss = (0, css_1.css)({
padding: (0, cvar_1.default)('spacing-24'),
borderBottom: 'none',
borderTopLeftRadius: (0, cvar_1.default)('spacing-4'),
borderTopRightRadius: (0, cvar_1.default)('spacing-4'),
h2: {
marginTop: '18px',
marginBottom: '9px',
},
});
const drawerCrossBtn = (0, css_1.css)({
color: (0, cvar_1.default)('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: (0, cvar_1.default)('color-icon-secondary-active'),
opacity: 1,
},
});
const drawerContentCss = (0, css_1.css)({
border: 0,
boxShadow: '0 4px 4px 0 rgba(0, 0, 0, 0.1)',
display: 'flex',
flexDirection: 'column',
height: '100vh',
});
const drawerFooterCss = (0, css_1.css)({
textAlign: 'right',
padding: (0, cvar_1.default)('spacing-24'),
borderTop: 'none',
});
const drawerBodyCss = (0, css_1.css)({
position: 'static',
padding: (0, cvar_1.default)('spacing-24'),
overflowY: 'auto',
flexGrow: 1,
});
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"]);
(0, react_1.useEffect)(() => {
const drawerOpen = (0, css_1.css) `
overflow: hidden;
`;
if (show)
document.body.className = (0, css_1.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_1.default.isValidElement(header) ? header : react_1.default.createElement("h2", null, header);
}
const drawerHeader = (react_1.default.createElement("div", { className: drawerHeaderCss, style: headerStyle },
react_1.default.createElement("button", { className: drawerCrossBtn, onClick: hideDrawer },
react_1.default.createElement(internal_1.Close, { width: "18px", color: colors_1.granite.base, cropped: true, "aria-label": "Close drawer" })),
customHeader));
const drawerFooter = footer && (react_1.default.createElement("div", { className: drawerFooterCss, style: footerStyle }, footer));
// don't allow any other values
const drawerPosition = position || 'right';
const drawerNode = (react_1.default.createElement(react_dock_1.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_1.default.createElement("div", { className: (0, css_1.cx)('crc-drawer', drawerContentCss, className), style: style },
drawerHeader,
react_1.default.createElement("div", { className: drawerBodyCss, style: bodyStyle }, children),
drawerFooter)));
return react_dom_1.default.createPortal(drawerNode, document.body);
};
exports.Drawer = Drawer;
//# sourceMappingURL=Drawer.js.map