@blockstack/ui/dist/transition/slide-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 } from 'react';
import { Transition } from './base.esm.js';

function getTransitionStyles(initialOffset) {
  return {
    init: {
      opacity: 0,
      transform: "translateY(" + initialOffset + ")"
    },
    entered: {
      opacity: 1,
      transform: 'translateY(0px)'
    },
    exiting: {
      opacity: 0,
      transform: "translateY(" + initialOffset + ")"
    }
  };
}

var SlideFade = function SlideFade(props) {
  var _props$initialOffset = props.initialOffset,
      initialOffset = _props$initialOffset === void 0 ? '20px' : _props$initialOffset,
      _props$timeout = props.timeout,
      timeout = _props$timeout === void 0 ? 150 : _props$timeout,
      rest = _objectWithoutPropertiesLoose(props, ["initialOffset", "timeout"]);

  var styles = getTransitionStyles(initialOffset);
  return createElement(Transition, Object.assign({
    styles: styles,
    transition: "all " + timeout + "ms cubic-bezier(0.4, 0.14, 0.3, 1)",
    timeout: {
      enter: 50,
      exit: timeout
    }
  }, rest));
};

export { SlideFade };
//# sourceMappingURL=slide-fade.esm.js.map