@sky-mavis/tanto-widget/dist/cjs/components/animated-containers/TransitionedView.cjs

Tanto Widget

'use strict';

var jsxRuntime = require('@emotion/react/jsx-runtime');
var react$1 = require('motion/react');
var m = require('motion/react-m');
var react = require('react');

function _interopNamespaceDefault(e) {
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var m__namespace = /*#__PURE__*/_interopNamespaceDefault(m);

const animationProps = {
  initial: {
    opacity: 0,
    scale: 0.95
  },
  animate: {
    opacity: 1,
    scale: 1
  },
  exit: {
    opacity: 0,
    scale: 0.95
  },
  transition: {
    duration: 0.2
  }
};
const TransitionedView = react.forwardRef(({
  children,
  viewKey,
  onAnimationComplete
}, ref) => jsxRuntime.jsx(react$1.AnimatePresence, {
  initial: false,
  mode: "popLayout",
  children: jsxRuntime.jsx(m__namespace.div, {
    ref: ref,
    style: {
      width: '100%'
    },
    ...animationProps,
    onAnimationComplete: onAnimationComplete,
    children: children
  }, viewKey.toString())
}));

exports.TransitionedView = TransitionedView;