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

ActiveCollab Components

import React, { cloneElement } from "react";
import { Transition } from "react-transition-group";
const defaultStyle = {
  transitionProperty: "opacity, transform",
  transitionTimingFunction: "linear ease-out",
  transform: "translateY(-100%)",
  opacity: 0
};
const transitionStyles = {
  entering: {
    opacity: 1,
    transform: "translateY(0)",
    transitionDuration: ".3s"
  },
  entered: {
    opacity: 1,
    transform: "translateY(0)",
    transitionDuration: ".3s"
  },
  exiting: {
    opacity: 0,
    transform: "translateY(-100%)",
    transitionDuration: ".2s"
  },
  exited: {
    opacity: 0,
    transform: "translateY(-100%)",
    transitionDuration: ".2s"
  }
};
export const SlideFromTop = _ref => {
  let {
    in: inProp = false,
    onEnter,
    onExited,
    children,
    style,
    timeout = 400
  } = _ref;
  return /*#__PURE__*/React.createElement(Transition, {
    appear: true,
    in: inProp,
    timeout: timeout,
    onEnter: onEnter,
    onExited: onExited
  }, state => {
    return /*#__PURE__*/cloneElement(children, {
      style: {
        visibility: state === "exited" && !inProp ? "hidden" : undefined,
        ...defaultStyle,
        ...transitionStyles[state],
        ...style,
        ...children.props.style
      }
    });
  });
};
SlideFromTop.displayName = "SlideFromTop";
//# sourceMappingURL=SlideFromTop.js.map