@blockstack/ui/dist/transition/scale-fade.esm.js

Blockstack UI components built using React and styled-components with styled-system.

import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../_virtual/_rollupPluginBabelHelpers.js';
import { createElement, useMemo } from 'react';
import { Transition } from './base.esm.js';

var getTransitionStyles = function getTransitionStyles(initialScale) {
  return {
    init: {
      opacity: 0,
      transform: "scale(" + initialScale + ")"
    },
    entered: {
      opacity: 1,
      transform: 'scale(1)'
    },
    exiting: {
      opacity: 0,
      transform: "scale(" + initialScale + ")"
    }
  };
};

var ScaleFade = function ScaleFade(_ref) {
  var _ref$initialScale = _ref.initialScale,
      initialScale = _ref$initialScale === void 0 ? 0.9 : _ref$initialScale,
      _ref$timeout = _ref.timeout,
      timeout = _ref$timeout === void 0 ? 300 : _ref$timeout,
      rest = _objectWithoutPropertiesLoose(_ref, ["initialScale", "timeout"]);

  return createElement(Transition, Object.assign({
    styles: useMemo(function () {
      return getTransitionStyles(initialScale);
    }, [initialScale]),
    transition: "all " + timeout + "ms cubic-bezier(0.45, 0, 0.40, 1)",
    timeout: {
      enter: 50,
      exit: timeout
    },
    unmountOnExit: true
  }, rest));
};

export { ScaleFade };
//# sourceMappingURL=scale-fade.esm.js.map