@grafana/ui/dist/cjs/components/transitions/SlideOutTransition.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var reactTransitionGroup = require('react-transition-group');
var ThemeContext = require('../../themes/ThemeContext.cjs');

function _interopNamespaceCompat(e) {
  if (e && typeof e === 'object' && 'default' in e) return 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 React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);

"use strict";
function SlideOutTransition(props) {
  const { visible, children, duration = 250, horizontal, size } = props;
  const styles = ThemeContext.useStyles2(getStyles, duration, horizontal ? "width" : "height", size);
  const transitionRef = React.useRef(null);
  return /* @__PURE__ */ jsxRuntime.jsx(
    reactTransitionGroup.CSSTransition,
    {
      in: visible,
      mountOnEnter: true,
      unmountOnExit: true,
      timeout: duration,
      classNames: styles,
      nodeRef: transitionRef,
      children: React__namespace.cloneElement(children, { ref: transitionRef })
    }
  );
}
const getStyles = (theme, duration, measurement, size) => ({
  enter: css.css({
    label: "enter",
    [`${measurement}`]: 0,
    opacity: 0
  }),
  enterActive: css.css({
    label: "enterActive",
    [`${measurement}`]: `${size}px`,
    opacity: 1,
    [theme.transitions.handleMotion("no-preference")]: {
      transition: `opacity ${duration}ms ease-out, ${measurement} ${duration}ms ease-out`
    },
    [theme.transitions.handleMotion("reduce")]: {
      transition: `opacity ${duration}ms ease-out`
    }
  }),
  exit: css.css({
    label: "exit",
    [`${measurement}`]: `${size}px`,
    opacity: 1
  }),
  exitActive: css.css({
    label: "exitActive",
    opacity: 0,
    [`${measurement}`]: 0,
    [theme.transitions.handleMotion("no-preference")]: {
      transition: `opacity ${duration}ms ease-out, ${measurement} ${duration}ms ease-out`
    },
    [theme.transitions.handleMotion("reduce")]: {
      transition: `opacity ${duration}ms ease-out`
    }
  })
});

exports.SlideOutTransition = SlideOutTransition;
//# sourceMappingURL=SlideOutTransition.cjs.map