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