react-component-transition
Version:
Easy animations between react component transitions.
54 lines (53 loc) • 5.87 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TransitionRotateY = exports.TransitionRotateX = exports.TransitionRotate = exports.TransitionScale = exports.TransitionFade = exports.TransitionSlideRight = exports.TransitionSlideLeft = exports.TransitionSlideDown = exports.TransitionSlideUp = exports.TransitionExpandHorizontal = exports.TransitionExpandVertical = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var index_1 = require("../index");
var AnimationTypes = tslib_1.__importStar(require("../animations"));
var getAnimations = function (enterAnimation, exitAnimation, _a) {
var duration = _a.duration;
var enterDuration = duration || enterAnimation.options.duration;
var exitDuration = duration || exitAnimation.options.duration;
return {
enterAnimation: tslib_1.__assign(tslib_1.__assign({}, enterAnimation), { options: tslib_1.__assign(tslib_1.__assign({}, enterAnimation.options), { duration: enterDuration }) }),
exitAnimation: tslib_1.__assign(tslib_1.__assign({}, exitAnimation), { options: tslib_1.__assign(tslib_1.__assign({}, exitAnimation.options), { duration: exitDuration }) }),
};
};
var TransitionExpandVertical = function (props) { return (react_1.default.createElement(index_1.ComponentTransition, tslib_1.__assign({}, props, getAnimations(AnimationTypes.expand.vertical, AnimationTypes.collapse.vertical, props), { style: tslib_1.__assign({ overflow: "hidden" }, props.style) }), props.children)); };
exports.TransitionExpandVertical = TransitionExpandVertical;
exports.TransitionExpandVertical.displayName = "TransitionExpandVertical";
var TransitionExpandHorizontal = function (props) { return (react_1.default.createElement(index_1.ComponentTransition, tslib_1.__assign({}, props, getAnimations(AnimationTypes.expand.horizontal, AnimationTypes.collapse.horizontal, props), { style: tslib_1.__assign({ overflow: "hidden" }, props.style) }), props.children)); };
exports.TransitionExpandHorizontal = TransitionExpandHorizontal;
exports.TransitionExpandVertical.displayName = "TransitionExpandHorizontal";
var TransitionSlideUp = function (props) { return (react_1.default.createElement(index_1.ComponentTransition, tslib_1.__assign({ animateContainer: true }, props, getAnimations(AnimationTypes.slideUp.enter, AnimationTypes.slideUp.exit, props)), props.children)); };
exports.TransitionSlideUp = TransitionSlideUp;
exports.TransitionExpandVertical.displayName = "TransitionSlideUp";
var TransitionSlideDown = function (props) { return (react_1.default.createElement(index_1.ComponentTransition, tslib_1.__assign({ animateContainer: true }, props, getAnimations(AnimationTypes.slideDown.enter, AnimationTypes.slideDown.exit, props)), props.children)); };
exports.TransitionSlideDown = TransitionSlideDown;
exports.TransitionExpandVertical.displayName = "TransitionSlideDown";
var TransitionSlideLeft = function (props) { return (react_1.default.createElement(index_1.ComponentTransition, tslib_1.__assign({ animateContainer: true }, props, getAnimations(AnimationTypes.slideLeft.enter, AnimationTypes.slideLeft.exit, props)), props.children)); };
exports.TransitionSlideLeft = TransitionSlideLeft;
exports.TransitionExpandVertical.displayName = "TransitionSlideLeft";
var TransitionSlideRight = function (props) { return (react_1.default.createElement(index_1.ComponentTransition, tslib_1.__assign({ animateContainer: true }, props, getAnimations(AnimationTypes.slideRight.enter, AnimationTypes.slideRight.exit, props)), props.children)); };
exports.TransitionSlideRight = TransitionSlideRight;
exports.TransitionExpandVertical.displayName = "TransitionSlideRight";
var TransitionFade = function (props) { return (react_1.default.createElement(index_1.ComponentTransition, tslib_1.__assign({ animateContainer: true }, props, getAnimations(AnimationTypes.fade.enter, AnimationTypes.fade.exit, props)), props.children)); };
exports.TransitionFade = TransitionFade;
exports.TransitionExpandVertical.displayName = "TransitionFade";
var TransitionScale = function (props) { return (react_1.default.createElement(index_1.ComponentTransition, tslib_1.__assign({ animateContainer: true }, props, getAnimations(AnimationTypes.scale.enter, AnimationTypes.scale.exit, props)), props.children)); };
exports.TransitionScale = TransitionScale;
exports.TransitionExpandVertical.displayName = "TransitionScale";
var TransitionRotate = function (props) {
var rotate = getAnimations(AnimationTypes.rotate.enter, AnimationTypes.rotate.exit, props);
var fade = getAnimations(AnimationTypes.fade.enter, AnimationTypes.fade.exit, props);
return (react_1.default.createElement(index_1.ComponentTransition, tslib_1.__assign({ animateContainer: true }, props, { enterAnimation: [rotate.enterAnimation, fade.enterAnimation], exitAnimation: [rotate.exitAnimation, fade.exitAnimation] }), props.children));
};
exports.TransitionRotate = TransitionRotate;
exports.TransitionExpandVertical.displayName = "TransitionRotate";
var TransitionRotateX = function (props) { return (react_1.default.createElement(index_1.ComponentTransition, tslib_1.__assign({ animateContainer: true }, props, getAnimations(AnimationTypes.rotateX.enter, AnimationTypes.rotateX.exit, props)), props.children)); };
exports.TransitionRotateX = TransitionRotateX;
exports.TransitionExpandVertical.displayName = "TransitionRotateX";
var TransitionRotateY = function (props) { return (react_1.default.createElement(index_1.ComponentTransition, tslib_1.__assign({ animateContainer: true }, props, getAnimations(AnimationTypes.rotateY.enter, AnimationTypes.rotateY.exit, props)), props.children)); };
exports.TransitionRotateY = TransitionRotateY;
exports.TransitionExpandVertical.displayName = "TransitionRotateY";