@chakra-xui/transition/dist/cjs/collapse.js

Common transition components for Chakra xui

"use strict";

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

var _hooks = require("@chakra-xui/hooks");

var _utils = require("@chakra-xui/utils");

var _framerMotion = require("framer-motion");

var React = _interopRequireWildcard(require("react"));

var _utils2 = require("./__utils");

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var hasHeightValue = function hasHeightValue(value) {
  return value != null && parseInt(value.toString(), 10) > 0;
};

var variants = {
  exit: function exit(props) {
    return _extends({}, props.animateOpacity && {
      opacity: hasHeightValue(props.startingHeight) ? 1 : 0
    }, {
      height: props.startingHeight,
      transition: {
        height: {
          duration: 0.2,
          ease: _utils2.EASINGS.ease
        },
        opacity: {
          duration: 0.3,
          ease: _utils2.EASINGS.ease
        }
      }
    });
  },
  enter: function enter(props) {
    return _extends({}, props.animateOpacity && {
      opacity: 1
    }, {
      height: props.endingHeight,
      transition: {
        height: {
          duration: 0.3,
          ease: _utils2.EASINGS.ease
        },
        opacity: {
          duration: 0.4,
          ease: _utils2.EASINGS.ease
        }
      }
    });
  }
};
var Collapse = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var isOpen = props["in"],
      unmountOnExit = props.unmountOnExit,
      _props$animateOpacity = props.animateOpacity,
      animateOpacity = _props$animateOpacity === void 0 ? true : _props$animateOpacity,
      _props$startingHeight = props.startingHeight,
      startingHeight = _props$startingHeight === void 0 ? 0 : _props$startingHeight,
      _props$endingHeight = props.endingHeight,
      endingHeight = _props$endingHeight === void 0 ? "auto" : _props$endingHeight,
      style = props.style,
      className = props.className,
      _onAnimationComplete = props.onAnimationComplete,
      rest = _objectWithoutPropertiesLoose(props, ["in", "unmountOnExit", "animateOpacity", "startingHeight", "endingHeight", "style", "className", "onAnimationComplete"]);

  var fromZeroHeight = startingHeight === 0;

  var _React$useState = React.useState(!!isOpen),
      open = _React$useState[0],
      setOpen = _React$useState[1];

  var getInitialHidden = function getInitialHidden() {
    // If it is open by default, no need to apply `aria-hidden`
    if (isOpen) return false; // If startingHeight > 0, then content is partially visible

    if (hasHeightValue(startingHeight)) return false; // Else, the content is hidden

    return true;
  };

  var _React$useState2 = React.useState(function () {
    if (!fromZeroHeight) return "block";
    var hidden = getInitialHidden();
    return hidden ? "none" : "block";
  }),
      display = _React$useState2[0],
      setDisplay = _React$useState2[1];

  (0, _hooks.useUpdateEffect)(function () {
    setDisplay("block");
    setOpen(!!isOpen);
  }, [isOpen]);
  /**
   * Warn 🚨: `startingHeight` and `unmountOnExit` are mutually exclusive
   *
   * If you specify a starting height, the collapsed needs to be mounted
   * for the height to take effect.
   */

  if (startingHeight > 0 && unmountOnExit) {
    (0, _utils.warn)("startingHeight and unmountOnExit are mutually exclusive. You can't use them together");
  }

  var custom = {
    startingHeight: startingHeight,
    endingHeight: endingHeight,
    animateOpacity: animateOpacity
  };

  var ownProps = _extends({
    ref: ref,
    onAnimationComplete: function onAnimationComplete() {
      if (!open && fromZeroHeight) {
        setDisplay("none");
      }

      _onAnimationComplete == null ? void 0 : _onAnimationComplete();
    },
    className: (0, _utils.cx)("chakra-collapse", className)
  }, rest, {
    variants: variants,
    style: _extends({
      overflow: "hidden"
    }, style),
    custom: custom
  });

  if (unmountOnExit) {
    return /*#__PURE__*/React.createElement(_framerMotion.AnimatePresence, {
      initial: false,
      custom: custom
    }, isOpen && /*#__PURE__*/React.createElement(_framerMotion.motion.div, _extends({}, ownProps, {
      initial: "exit",
      animate: "enter",
      exit: "exit"
    })));
  }

  return /*#__PURE__*/React.createElement(_framerMotion.motion.div, _extends({}, ownProps, {
    style: _extends({}, ownProps.style, {
      display: display
    }),
    initial: false,
    animate: open ? "enter" : "exit"
  }));
});
exports.Collapse = Collapse;

if (_utils.__DEV__) {
  Collapse.displayName = "Collapse";
}
//# sourceMappingURL=collapse.js.map