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

ActiveCollab Components

import _extends from "@babel/runtime/helpers/esm/extends";
import React, { cloneElement } from "react";
import { Transition } from "react-transition-group";
const defaultStyle = duration => ({
  transition: "all " + duration + "ms ease-in-out",
  opacity: 0
});
const transitionStyles = {
  entering: {
    opacity: 1
  },
  entered: {
    opacity: 1
  },
  exiting: {
    opacity: 0
  },
  exited: {
    opacity: 0
  }
};
export const Fade = _ref => {
  let {
    in: inProp = false,
    children,
    style,
    timeout = 500,
    ...rest
  } = _ref;
  return /*#__PURE__*/React.createElement(Transition, _extends({
    appear: true,
    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
      }
    });
  });
};
Fade.displayName = "Fade";
//# sourceMappingURL=Fade.js.map