@activecollab/components
Version:
ActiveCollab Components
55 lines • 1.36 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",
transitionDuration: ".15s, .10s, .15s",
transitionTimingFunction: "ease, ease, cubic-bezier(0.39, 0.575, 0.565, 1)",
transformOrigin: "50% 0",
transform: "scale(.85)",
opacity: 0
};
const transitionStyles = {
entering: {
opacity: 1,
transform: "scale(1)",
transitionDelay: ".6s"
},
entered: {
opacity: 1,
transform: "scale(1)"
},
exiting: {
opacity: 0,
transform: "scale(.85)"
},
exited: {
opacity: 0,
transform: "scale(.85)"
}
};
export const FromElement = _ref => {
let {
in: inProp = false,
onEnter,
onExited,
children,
style,
timeout = 1000
} = _ref;
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)
});
});
};
FromElement.displayName = "FromElement";
//# sourceMappingURL=FromElement.js.map