@activecollab/components/dist/esm/components/Transitions/Slide/Slide.js

ActiveCollab Components

import _extends from "@babel/runtime/helpers/esm/extends";
import React, { cloneElement } from "react";
import { Transition } from "react-transition-group";
export const Slide = _ref => {
  let {
    in: inProp = false,
    children,
    style,
    timeout = 300,
    initialDirection = "left",
    ...rest
  } = _ref;
  let directionSign;
  switch (initialDirection) {
    case "right":
      directionSign = "100%, 0";
      break;
    case "top":
      directionSign = "0, -100%";
      break;
    case "bottom":
      directionSign = "0, 100%";
      break;
    default:
      directionSign = "-100%, 0";
  }
  const defaultStyle = timeout => ({
    transition: "all " + timeout + "ms ease"
  });
  const transitionStyles = {
    entering: {
      transform: "translate(0,0)"
    },
    entered: {
      transform: "translate(0,0)"
    },
    exiting: {
      transform: "translate(" + directionSign + ")"
    },
    exited: {
      transform: "translate(" + directionSign + ")"
    }
  };
  return /*#__PURE__*/React.createElement(Transition, _extends({
    in: inProp,
    timeout: timeout
  }, rest), state => {
    return /*#__PURE__*/cloneElement(children, {
      style: {
        visibility: state === "exited" && !inProp ? "hidden" : undefined,
        ...defaultStyle(timeout),
        ...transitionStyles[state],
        ...style,
        ...children.props.style
      }
    });
  });
};
Slide.displayName = "Slide";
//# sourceMappingURL=Slide.js.map