@activecollab/components
Version:
ActiveCollab Components
49 lines • 1.32 kB
JavaScript
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",
transform: "scaleX(0)",
opacity: 0,
transformOrigin: "left"
});
const transitionStyles = {
entering: {
transform: "scaleX(1)",
opacity: 1
},
entered: {
transform: "scaleX(1)",
opacity: 1
},
exiting: {
transform: "scaleX(0)",
opacity: 0
},
exited: {
transform: "scaleX(0)",
opacity: 0
}
};
export const Reveal = _ref => {
let {
in: inProp = false,
children,
style,
timeout = 200
} = _ref,
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
return /*#__PURE__*/React.createElement(Transition, _extends({
appear: true,
in: inProp,
timeout: timeout
}, rest), state => {
return /*#__PURE__*/cloneElement(children, {
style: _extends({}, defaultStyle(inProp ? timeout : 0), transitionStyles[state], style, children.props.style)
});
});
};
Reveal.displayName = "Reveal";
//# sourceMappingURL=Reveal.js.map