@chakra-xui/transition/dist/esm/slide.js

Common transition components for Chakra xui

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); }

import { cx, __DEV__ } from "@chakra-xui/utils";
import { AnimatePresence, motion } from "framer-motion";
import * as React from "react";
import { EASINGS } from "./__utils";
var directions = {
  bottom: {
    motion: {
      y: "100%"
    },
    baseStyle: {
      maxWidth: "100vw",
      bottom: 0,
      left: 0,
      right: 0
    }
  },
  top: {
    motion: {
      y: "-100%"
    },
    baseStyle: {
      maxWidth: "100vw",
      top: 0,
      left: 0,
      right: 0
    }
  },
  left: {
    motion: {
      x: "-100%"
    },
    baseStyle: {
      width: "100%",
      height: "100vh",
      left: 0,
      top: 0
    }
  },
  right: {
    motion: {
      x: "100%"
    },
    baseStyle: {
      width: "100%",
      right: 0,
      top: 0,
      height: "100vh"
    }
  }
};
var variants = {
  exit: direction => {
    var _directions$direction;

    var {
      motion
    } = (_directions$direction = directions[direction]) != null ? _directions$direction : {};
    return _extends({}, motion, {
      transition: {
        duration: 0.15,
        ease: EASINGS.easeInOut
      }
    });
  },
  enter: direction => {
    var _directions$direction2;

    var {
      motion
    } = (_directions$direction2 = directions[direction]) != null ? _directions$direction2 : {};
    var [axis] = motion ? Object.keys(motion) : ["x"];
    return {
      [axis]: 0,
      transition: {
        type: "spring",
        damping: 25,
        stiffness: 180
      }
    };
  }
};
export var Slide = /*#__PURE__*/React.forwardRef((props, ref) => {
  var _directions$direction3;

  var {
    direction = "right",
    style,
    unmountOnExit,
    in: isOpen,
    className
  } = props,
      rest = _objectWithoutPropertiesLoose(props, ["direction", "style", "unmountOnExit", "in", "className"]);

  var {
    baseStyle
  } = (_directions$direction3 = directions[direction]) != null ? _directions$direction3 : {};
  var shouldExpand = unmountOnExit ? isOpen && unmountOnExit : true;
  return /*#__PURE__*/React.createElement(AnimatePresence, {
    custom: direction
  }, shouldExpand && /*#__PURE__*/React.createElement(motion.div, _extends({
    ref: ref,
    initial: "exit",
    className: cx("chakra-slide", className),
    animate: isOpen || unmountOnExit ? "enter" : "exit",
    exit: "exit",
    custom: direction,
    variants: variants,
    style: _extends({
      position: "fixed"
    }, baseStyle, style)
  }, rest)));
});

if (__DEV__) {
  Slide.displayName = "Slide";
}
//# sourceMappingURL=slide.js.map