wix-style-react/dist/es/src/Collapse/Collapse.js

wix-style-react

import React, { useRef } from 'react';
import PropTypes from 'prop-types';
import { Animator } from 'wix-animations'; // Returns the height of element including vertical margin

export var getElementHeight = function getElementHeight(wrapper) {
  return function (element) {
    var offsetTop = wrapper ? element.getBoundingClientRect().y - wrapper.getBoundingClientRect().y : 0;
    var marginBottom = parseInt(window.getComputedStyle(element).getPropertyValue('margin-bottom') || 0, 10);
    return element.scrollHeight + offsetTop + marginBottom;
  };
};
/** `<Collapse/>` component is used for hideable content.
 *
 * Easily create accordions or within `<Card/>` to collapse its `<Card.Content/>`.
 */

var Collapse = function Collapse(_ref) {
  var children = _ref.children,
      open = _ref.open,
      dataHook = _ref.dataHook;
  var wrapperRef = useRef();
  return /*#__PURE__*/React.createElement("div", {
    "data-hook": dataHook,
    "data-open": open,
    ref: wrapperRef
  }, /*#__PURE__*/React.createElement(Animator, {
    show: open,
    height: getElementHeight(wrapperRef.current),
    children: children,
    skipMountTransition: true
  }));
};

Collapse.displayName = 'Collapse';
Collapse.propTypes = {
  /**
   * any node to be rendered inside
   */
  children: PropTypes.node,

  /**
   * determinants whether the element is collapsed.
   */
  open: PropTypes.bool,

  /**
   * string based data hook for testing
   */
  dataHook: PropTypes.string
};
Collapse.defaultProps = {
  open: true
};
export default Collapse;