@ntragas/pouncejstest/dist/esm/components/Collapse/Collapse.js

A collection of UI components from Panther labs

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React from 'react';
import useMeasure from 'react-use-measure';
import { ResizeObserver } from '@juggle/resize-observer';
import { animated, useTransition } from 'react-spring';
import Box from '../Box';
var AnimatedBox = animated(Box);

/**
 * A Collapse component is simply a wrapper that will slowly reveal its children by gradually
 * animating the total height until all of them are visible
 * */
var Collapse = function Collapse(_ref) {
  var open = _ref.open,
      _ref$animateOpacity = _ref.animateOpacity,
      animateOpacity = _ref$animateOpacity === void 0 ? true : _ref$animateOpacity,
      duration = _ref.duration,
      children = _ref.children,
      rest = _objectWithoutPropertiesLoose(_ref, ["open", "animateOpacity", "duration", "children"]);

  var _useMeasure = useMeasure({
    polyfill: ResizeObserver
  }),
      ref = _useMeasure[0],
      height = _useMeasure[1].height;

  var transitions = useTransition(open, null, {
    from: {
      height: 0,
      opacity: animateOpacity ? 0 : 1,
      pointerEvents: 'none',
      overflow: 'hidden'
    },
    enter: {
      height,
      opacity: 1,
      pointerEvents: 'auto',
      overflow: 'unset'
    },
    leave: {
      height: 0,
      opacity: animateOpacity ? 0 : 1,
      pointerEvents: 'none',
      overflow: 'hidden'
    },
    config: {
      duration
    },
    update: {
      height
    }
  });
  return /*#__PURE__*/React.createElement(React.Fragment, null, transitions.map(function (_ref2) {
    var item = _ref2.item,
        key = _ref2.key,
        styles = _ref2.props;
    return item && /*#__PURE__*/React.createElement(AnimatedBox, _extends({
      key: key,
      style: styles
    }, rest), /*#__PURE__*/React.createElement(Box, {
      ref: ref
    }, children));
  }));
};

export default /*#__PURE__*/React.memo(Collapse);