@cimpress/react-components
Version:
React components to support the MCP styleguide
144 lines • 6.52 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.Accordion = void 0;
const react_1 = __importStar(require("react"));
const react_smooth_collapse_1 = __importDefault(require("react-smooth-collapse"));
const css_1 = require("@emotion/css");
const internal_1 = require("../internal");
const cvar_1 = __importDefault(require("../theme/cvar"));
const ArrowAlt_1 = require("./ArrowAlt");
const accordionBase = (0, css_1.css)({
border: `1px solid ${(0, cvar_1.default)('color-border-light')}`,
borderRadius: '2px',
marginBottom: (0, cvar_1.default)('spacing-16'),
});
const accordionGhostBase = (0, css_1.css)({
border: 'none',
});
const accordionMinimalBase = (0, css_1.css)({
border: 'none',
padding: `${(0, cvar_1.default)('spacing-8')} 0px`,
});
const accordionHeader = (0, css_1.css)({
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
background: (0, cvar_1.default)('color-background-light'),
padding: (0, cvar_1.default)('spacing-16'),
cursor: 'pointer',
borderRadius: '2px',
});
const accordionGhostHeader = (0, css_1.css)({
background: (0, cvar_1.default)('color-background'),
border: `1px solid ${(0, cvar_1.default)('color-border-light')}`,
});
const accordionMinimalHeader = (0, css_1.css)({
background: (0, cvar_1.default)('color-background'),
});
// TODO: Check whether or not .list-group and table rules below are still necessary
const accordionBody = (0, css_1.css) `
padding: ${(0, cvar_1.default)('spacing-16')};
.list-group {
margin: -${(0, cvar_1.default)('spacing-16')};
box-shadow: none;
.list-group-item {
border-color: ${(0, cvar_1.default)('color-border-light')};
padding-left: ${(0, cvar_1.default)('spacing-16')};
padding-right: ${(0, cvar_1.default)('spacing-16')};
border-left: none;
border-right: none;
&:last-child {
border-bottom: none;
}
&:first-child {
border-top: none;
}
}
}
table {
margin: -${(0, cvar_1.default)('spacing-16')};
}
`;
const accordionMinimalBody = (0, css_1.css)({
paddingTop: (0, cvar_1.default)('spacing-8'),
background: (0, cvar_1.default)('color-background'),
});
function Accordion(props) {
const { actions, bodyStyle, children, className = '', customOpen, defaultOpen = false, headerStyle, onClose, onHeaderClick, style = {}, title, variant = 'default' } = props, rest = __rest(props, ["actions", "bodyStyle", "children", "className", "customOpen", "defaultOpen", "headerStyle", "onClose", "onHeaderClick", "style", "title", "variant"]);
const initialOpen = customOpen || defaultOpen;
const [open, setOpen] = (0, react_1.useState)(initialOpen);
(0, react_1.useEffect)(() => {
if (!open) {
onClose && onClose();
}
}, [onClose, open]);
const onLocalHeaderClick = (event) => {
setOpen(prevOpen => {
onHeaderClick && onHeaderClick(event, !prevOpen);
return !prevOpen;
});
};
const onActionContainerClick = (event) => {
event.stopPropagation();
};
(0, react_1.useEffect)(() => {
setOpen(customOpen || defaultOpen);
}, [customOpen, defaultOpen]);
const ghostVariant = variant === 'ghost';
const minimalVariant = variant === 'minimal';
const headerButton = (0, css_1.cx)(accordionHeader, {
[accordionGhostHeader]: ghostVariant,
[accordionMinimalHeader]: minimalVariant,
});
return (react_1.default.createElement("div", Object.assign({ className: (0, css_1.cx)('crc-accordion', accordionBase, className, {
'accordion-open': open,
[accordionGhostBase]: ghostVariant,
[accordionMinimalBase]: minimalVariant,
}), style: style }, rest),
react_1.default.createElement(internal_1.BlockButton, { className: headerButton, onClick: onLocalHeaderClick, style: headerStyle },
react_1.default.createElement("div", { className: (0, css_1.css)({ display: 'flex', alignItems: 'center', flexGrow: 1, marginRight: (0, cvar_1.default)('spacing-16') }) },
react_1.default.createElement(ArrowAlt_1.ArrowAlt, { className: (0, css_1.css)({ marginRight: (0, cvar_1.default)('spacing-16') }), color: (0, cvar_1.default)('color-button-primary'), direction: open ? 'down' : 'right', size: 14 }),
title),
actions && react_1.default.createElement(internal_1.BlockButton, { onClick: onActionContainerClick }, actions)),
react_1.default.createElement(react_smooth_collapse_1.default, { expanded: open },
react_1.default.createElement("div", { className: (0, css_1.cx)(accordionBody, { [accordionMinimalBody]: minimalVariant }), style: bodyStyle }, children))));
}
exports.Accordion = Accordion;
//# sourceMappingURL=Accordion.js.map