pouncejs/dist/cjs/components/Collapse/Collapse.js

A collection of UI components from Panther labs

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _react = _interopRequireDefault(require("react"));

var _reactUseMeasure = _interopRequireDefault(require("react-use-measure"));

var _resizeObserver = require("@juggle/resize-observer");

var _reactSpring = require("react-spring");

var _Box = _interopRequireDefault(require("../Box"));

var AnimatedBox = (0, _reactSpring.animated)(_Box.default);

/**
 * 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 = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["open", "animateOpacity", "duration", "children"]);

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

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

var _default = /*#__PURE__*/_react.default.memo(Collapse);

exports.default = _default;