@dnanpm/styleguide/build/cjs/components/Accordion/Accordion.js

DNA Styleguide repository provides the set of components and theme object used in various DNA projects.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var React = require('react');
var styledComponents = require('styled-components');
var theme = require('../../themes/theme.js');
var styledUtils = require('../../utils/styledUtils.js');
var AccordionItem = require('../AccordionItem/AccordionItem.js');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefaultCompat(React);

const AccordionContainer = styledComponents.styled.div `
    ${p => p.type === 'box' &&
    styledComponents.css `
            & > * {
                margin: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)} 0;
            }

            & > *:first-of-type {
                margin-top: 0;
            }

            & > *:last-of-type {
                margin-bottom: 0;
            }
        `}
`;
/** @visibleName Accordion */
const Accordion = (_a) => {
    var { type = 'box', autoCollapsible = false, highlightSelected = type === 'panel', hasCloseButton = false } = _a, props = tslib.__rest(_a, ["type", "autoCollapsible", "highlightSelected", "hasCloseButton"]);
    const initialItemList = {};
    const getAccordionItemId = (index, title) => `${title.replace(/\s+/g, '')}-${index}`;
    if (props.isExpanded) {
        React.Children.map(props.children, (child, index) => {
            if (React.isValidElement(child) && child.type === AccordionItem.default) {
                initialItemList[getAccordionItemId(index, child.props.title)] = Boolean(props.isExpanded);
            }
        });
    }
    const [itemList, setItemList] = React.useState(initialItemList);
    const toggleExpanded = (currentItemId) => {
        if (currentItemId) {
            const currentItemState = itemList[currentItemId];
            setItemList(Object.assign(Object.assign({}, (autoCollapsible ? {} : itemList)), { [currentItemId]: !currentItemState }));
        }
    };
    const handleClick = (e) => {
        var _a, _b;
        toggleExpanded((_b = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id);
    };
    const handleKeyDown = (e) => {
        var _a, _b;
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            toggleExpanded((_b = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id);
        }
    };
    const accordionItems = React.Children.map(props.children, (child, index) => {
        if (React.isValidElement(child) && child.type === AccordionItem.default) {
            const id = getAccordionItemId(index, child.props.title);
            return (React__default.default.createElement(AccordionItem.default, { id: id, key: id, type: type, title: child.props.title, isExpanded: itemList[id], highlightSelected: highlightSelected, hasCloseButton: hasCloseButton, openLabel: props.openLabel, closeLabel: props.closeLabel, onClick: handleClick, onKeyDown: handleKeyDown, className: child.props.className }, child.props.children));
        }
        return null;
    });
    if (!accordionItems) {
        return null;
    }
    return (React__default.default.createElement(AccordionContainer, { type: type, className: props.className }, accordionItems));
};

exports.default = Accordion;