@activecollab/components/dist/esm/components/Accordion/AccordionItemBody.js

ActiveCollab Components

import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useContext, useRef } from "react";
import { Transition } from "react-transition-group";
import classnames from "classnames";
import { ItemContext } from "./AccordionItem";
import { StyledAccordionItemBody } from "./Styles";
import { useHeight } from "../../hooks/useHeight";
export const AccordionItemBody = _ref => {
  let {
    children,
    className
  } = _ref;
  const itemContext = useContext(ItemContext);
  const divRef = useRef(null);
  const duration = 200;
  const height = useHeight(divRef);
  const defaultStyle = {
    transition: "max-height " + duration + "ms linear",
    maxHeight: 0
  };
  const transitionStyles = {
    entering: {
      maxHeight: height
    },
    entered: {
      maxHeight: height
    },
    exiting: {
      maxHeight: 0
    },
    exited: {
      maxHeight: 0
    }
  };
  return /*#__PURE__*/React.createElement(Transition, {
    timeout: 200,
    in: itemContext == null ? void 0 : itemContext.isItemExpanded
  }, state => /*#__PURE__*/React.createElement(StyledAccordionItemBody, {
    ref: divRef,
    className: classnames("accordionItemBody", className),
    style: _extends({}, defaultStyle, transitionStyles[state])
  }, children));
};
AccordionItemBody.displayName = "AccordionItemBody";
//# sourceMappingURL=AccordionItemBody.js.map