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

ActiveCollab Components

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["in", "children", "style", "timeout"];
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 _ref$in = _ref.in,
    inProp = _ref$in === void 0 ? false : _ref$in,
    children = _ref.children,
    style = _ref.style,
    _ref$timeout = _ref.timeout,
    timeout = _ref$timeout === void 0 ? 500 : _ref$timeout,
    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
  return /*#__PURE__*/React.createElement(Transition, _extends({
    appear: true,
    in: inProp,
    timeout: timeout
  }, rest), state => {
    return /*#__PURE__*/cloneElement(children, {
      style: _extends({
        visibility: state === "exited" && !inProp ? "hidden" : undefined
      }, defaultStyle(timeout), transitionStyles[state], style, children.props.style)
    });
  });
};
Fade.displayName = "Fade";
//# sourceMappingURL=Fade.js.map