@activecollab/components
Version:
ActiveCollab Components
46 lines • 1.94 kB
JavaScript
import React, { useContext, useCallback, useMemo } from "react";
import classnames from "classnames";
import { AccordionContext } from "./Accordion";
import { ItemContext } from "./AccordionItem";
import { StyledAccordionItemHead, StyledAccordionItemHeadText, StyledAccordionItemHeadIcon } from "./Styles";
import CollapseExpandSingleIcon from "../Icons/collection/CollapseExpandSingle";
export const AccordionItemHead = _ref => {
let {
children,
className
} = _ref;
const accordionContext = useContext(AccordionContext);
const itemContext = useContext(ItemContext);
const {
toggleExpanded,
disableToggleIcon,
customToggleIcon
} = useMemo(() => {
return {
toggleExpanded: accordionContext ? accordionContext.toggleExpanded : null,
disableToggleIcon: accordionContext ? accordionContext.disableToggleIcon : false,
customToggleIcon: accordionContext ? accordionContext.customToggleIcon : null
};
}, [accordionContext]);
const id = useMemo(() => itemContext ? itemContext.id : "", [itemContext]);
const onClickCallback = useCallback(() => {
if (toggleExpanded) {
toggleExpanded(id);
}
}, [id, toggleExpanded]);
const toggleIcon = useMemo(() => customToggleIcon ? customToggleIcon : /*#__PURE__*/React.createElement(CollapseExpandSingleIcon, {
style: {
transform: "rotate(180deg)"
}
}), [customToggleIcon]);
return /*#__PURE__*/React.createElement(StyledAccordionItemHead, {
onClick: onClickCallback,
className: classnames("accordionItemHead", className)
}, /*#__PURE__*/React.createElement(StyledAccordionItemHeadText, {
className: "accordionItemHead__text"
}, children), /*#__PURE__*/React.createElement(StyledAccordionItemHeadIcon, {
className: "accordionItemHead__icon"
}, !disableToggleIcon ? toggleIcon : null));
};
AccordionItemHead.displayName = "AccordionItemHead";
//# sourceMappingURL=AccordionItemHead.js.map