@razorpay/blade
Version:
The Design System that powers Razorpay
52 lines (48 loc) • 2.21 kB
JavaScript
import 'react';
import styled, { keyframes, css } from 'styled-components';
import usePresence from 'use-presence';
import '../../BladeProvider/index.js';
import '../../../utils/makeMotionTime/index.web.js';
import { jsx, Fragment } from 'react/jsx-runtime';
import useTheme from '../../BladeProvider/useTheme.js';
import { makeMotionTime } from '../../../utils/makeMotionTime/makeMotionTime.web.js';
/* eslint-disable react/jsx-no-useless-fragment */
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
/* eslint-disable @typescript-eslint/explicit-function-return-type */
var scaleIn = /*#__PURE__*/keyframes(["from{transform:scale(.3);opacity:0;}to{transform:scale(1);opacity:1;}"]);
var fadeOut = /*#__PURE__*/keyframes(["from{transform:scale(1);opacity:1;}to{transform:scale(1);opacity:0;}"]);
var AnimatedFade = /*#__PURE__*/styled.div.withConfig({
displayName: "Fadeweb__AnimatedFade",
componentId: "sc-1m8w7h7-0"
})(function (_ref) {
var animationType = _ref.animationType;
return animationType === null ? '' : css(["", ""], animationType);
});
var Fade = function Fade(_ref2) {
var show = _ref2.show,
children = _ref2.children,
styles = _ref2.styles;
var _useTheme = useTheme(),
theme = _useTheme.theme;
var duration = theme.motion.duration.xquick;
var enter = /*#__PURE__*/css(["animation:", " ", " ", ";"], scaleIn, makeMotionTime(duration), theme.motion.easing.entrance);
var exit = /*#__PURE__*/css(["animation:", " ", " ", ";"], fadeOut, makeMotionTime(duration), theme.motion.easing.exit);
// usePresence hook waits for the animation to finish before unmounting the component
// It's similar to motion/react's usePresence hook
// https://www.framer.com/docs/animate-presence/#usepresence
var _usePresence = usePresence(!!show, {
transitionDuration: duration,
initialEnter: true
}),
isMounted = _usePresence.isMounted,
isVisible = _usePresence.isVisible;
return /*#__PURE__*/jsx(Fragment, {
children: isMounted && /*#__PURE__*/jsx(AnimatedFade, {
animationType: isVisible ? enter : exit,
style: styles,
children: children
})
});
};
export { Fade };
//# sourceMappingURL=Fade.web.js.map