@activecollab/components
Version:
ActiveCollab Components
53 lines • 2.02 kB
JavaScript
import React, { useState, useCallback } from "react";
import classnames from "classnames";
import { StyledAccordion } from "./Styles";
export const AccordionContext = /*#__PURE__*/React.createContext(null);
export const Accordion = _ref => {
let children = _ref.children,
className = _ref.className,
_ref$allowMultipleExp = _ref.allowMultipleExpanded,
allowMultipleExpanded = _ref$allowMultipleExp === void 0 ? false : _ref$allowMultipleExp,
_ref$allowZeroExpande = _ref.allowZeroExpanded,
allowZeroExpanded = _ref$allowZeroExpande === void 0 ? false : _ref$allowZeroExpande,
onChange = _ref.onChange,
_ref$preExpanded = _ref.preExpanded,
preExpanded = _ref$preExpanded === void 0 ? [] : _ref$preExpanded,
_ref$disableToggleIco = _ref.disableToggleIcon,
disableToggleIcon = _ref$disableToggleIco === void 0 ? false : _ref$disableToggleIco,
customToggleIcon = _ref.customToggleIcon;
const _useState = useState(preExpanded),
expandedItems = _useState[0],
setExpandedItems = _useState[1];
const toggleExpandedCallback = useCallback(id => {
setExpandedItems(prevExpanded => {
if (prevExpanded.indexOf(id) > -1) {
if (!allowZeroExpanded && prevExpanded.length === 1) {
return prevExpanded;
}
return prevExpanded.filter(item => {
return item !== id;
});
} else {
if (!allowMultipleExpanded) {
return [id];
}
return [...prevExpanded, id];
}
});
if (onChange) {
onChange(id);
}
}, [allowMultipleExpanded, allowZeroExpanded, onChange]);
return /*#__PURE__*/React.createElement(AccordionContext.Provider, {
value: {
expandedItems,
toggleExpanded: toggleExpandedCallback,
disableToggleIcon,
customToggleIcon
}
}, /*#__PURE__*/React.createElement(StyledAccordion, {
className: classnames("accordion", className)
}, children));
};
Accordion.displayName = "Accordion";
//# sourceMappingURL=Accordion.js.map