@activecollab/components
Version:
ActiveCollab Components
59 lines • 1.9 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["in", "children", "style", "timeout", "initialDirection"];
import React, { cloneElement } from "react";
import { Transition } from "react-transition-group";
export const Slide = _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 ? 300 : _ref$timeout,
_ref$initialDirection = _ref.initialDirection,
initialDirection = _ref$initialDirection === void 0 ? "left" : _ref$initialDirection,
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
let directionSign;
switch (initialDirection) {
case "right":
directionSign = "100%, 0";
break;
case "top":
directionSign = "0, -100%";
break;
case "bottom":
directionSign = "0, 100%";
break;
default:
directionSign = "-100%, 0";
}
const defaultStyle = timeout => ({
transition: "all " + timeout + "ms ease"
});
const transitionStyles = {
entering: {
transform: "translate(0,0)"
},
entered: {
transform: "translate(0,0)"
},
exiting: {
transform: "translate(" + directionSign + ")"
},
exited: {
transform: "translate(" + directionSign + ")"
}
};
return /*#__PURE__*/React.createElement(Transition, _extends({
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)
});
});
};
Slide.displayName = "Slide";
//# sourceMappingURL=Slide.js.map