@blockstack/ui/dist/transition/slide.esm.js

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

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

var createBaseStyle = function createBaseStyle(placement) {
  switch (placement) {
    case 'bottom':
      {
        return {
          maxWidth: '100vw',
          bottom: 0,
          left: 0,
          right: 0
        };
      }

    case 'top':
      {
        return {
          maxWidth: '100vw',
          top: 0,
          left: 0,
          right: 0
        };
      }

    case 'left':
      {
        return {
          width: '100%',
          height: '100vh',
          left: 0,
          top: 0
        };
      }

    case 'right':
      {
        return {
          width: '100%',
          right: 0,
          top: 0,
          height: '100vh'
        };
      }

    default:
      return undefined;
  }
};

var getTransformStyle = function getTransformStyle(placement, value) {
  var axis = '';
  if (placement === 'left' || placement === 'right') axis = 'X';
  if (placement === 'top' || placement === 'bottom') axis = 'Y';
  return "translate" + axis + "(" + value + ")";
};

var getTransitionStyles = function getTransitionStyles(placement) {
  var offset = {
    bottom: '100%',
    top: '-100%',
    left: '-100%',
    right: '100%'
  };
  return {
    init: {
      transform: getTransformStyle(placement, offset[placement])
    },
    entered: {
      transform: getTransformStyle(placement, '0%')
    },
    exiting: {
      transform: getTransformStyle(placement, offset[placement])
    }
  };
};

function Slide(props) {
  var _props$placement = props.placement,
      placement = _props$placement === void 0 ? 'left' : _props$placement,
      _props$timeout = props.timeout,
      timeout = _props$timeout === void 0 ? 250 : _props$timeout,
      children = props.children,
      rest = _objectWithoutPropertiesLoose(props, ["placement", "timeout", "children"]);

  var styles = getTransitionStyles(placement);

  var positionStyles = _objectSpread2({
    position: 'fixed',
    willChange: 'transform'
  }, createBaseStyle(placement));

  return createElement(Transition, Object.assign({
    styles: styles,
    transition: "all " + timeout + "ms cubic-bezier(0, 0, 0.2, 1)",
    timeout: {
      enter: 50,
      exit: timeout
    }
  }, rest), function (styles) {
    return children(_objectSpread2({}, positionStyles, {}, styles));
  });
}

export { Slide };
//# sourceMappingURL=slide.esm.js.map