@activecollab/components
Version:
ActiveCollab Components
56 lines • 1.56 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
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 _ref$in = _ref.in,
inProp = _ref$in === void 0 ? false : _ref$in,
onEnter = _ref.onEnter,
onExited = _ref.onExited,
children = _ref.children,
style = _ref.style,
_ref$timeout = _ref.timeout,
timeout = _ref$timeout === void 0 ? 400 : _ref$timeout;
return /*#__PURE__*/React.createElement(Transition, {
appear: true,
in: inProp,
timeout: timeout,
onEnter: onEnter,
onExited: onExited
}, state => {
return /*#__PURE__*/cloneElement(children, {
style: _extends({
visibility: state === "exited" && !inProp ? "hidden" : undefined
}, defaultStyle, transitionStyles[state], style, children.props.style)
});
});
};
SlideFromTop.displayName = "SlideFromTop";
//# sourceMappingURL=SlideFromTop.js.map