@activecollab/components
Version:
ActiveCollab Components
43 lines • 2.05 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 = _ref.children,
className = _ref.className;
const accordionContext = useContext(AccordionContext);
const itemContext = useContext(ItemContext);
const _useMemo = useMemo(() => {
return {
toggleExpanded: accordionContext ? accordionContext.toggleExpanded : null,
disableToggleIcon: accordionContext ? accordionContext.disableToggleIcon : false,
customToggleIcon: accordionContext ? accordionContext.customToggleIcon : null
};
}, [accordionContext]),
toggleExpanded = _useMemo.toggleExpanded,
disableToggleIcon = _useMemo.disableToggleIcon,
customToggleIcon = _useMemo.customToggleIcon;
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