@razorpay/blade
Version:
The Design System that powers Razorpay
124 lines (118 loc) • 6.15 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import { m, AnimatePresence } from 'framer-motion';
import styled from 'styled-components';
import { mergeRefs } from '@mantine/hooks';
import { makeAnimationVariables, useMotionVariants } from './baseMotionUtils.js';
import { useAnimateInteractions } from '../AnimateInteractions/AnimateInteractionsProvider.js';
import { useStagger } from '../Stagger/StaggerProvider.js';
import { useMemoizedStyles } from '../Box/BaseBox/useMemoizedStyles.web.js';
import { jsx } from 'react/jsx-runtime';
var _excluded = ["children", "motionVariants", "type", "motionTriggers", "animateVisibility"],
_excluded2 = ["children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
// Creating empty styled component so that the final component supports `as` prop
var StyledDiv = /*#__PURE__*/styled.div.withConfig({
displayName: "BaseMotion__StyledDiv",
componentId: "sc-6hsu2h-0"
})(function (props) {
// We're turning normal div into Box here because our BaseBox does not forward the props to next component which is needed for enhancer component wrapper
var boxStyles = useMemoizedStyles(props);
return boxStyles;
});
var MotionDiv = m(StyledDiv);
var _BaseMotionBox = function _BaseMotionBox(_ref, ref) {
var children = _ref.children,
userMotionVariants = _ref.motionVariants,
_ref$type = _ref.type,
type = _ref$type === void 0 ? 'inout' : _ref$type,
_ref$motionTriggers = _ref.motionTriggers,
motionTriggers = _ref$motionTriggers === void 0 ? ['mount'] : _ref$motionTriggers,
animateVisibility = _ref.animateVisibility,
rest = _objectWithoutProperties(_ref, _excluded);
var _useAnimateInteractio = useAnimateInteractions(),
isInsideAnimateInteractionsContainer = _useAnimateInteractio.isInsideAnimateInteractionsContainer;
var _useStagger = useStagger(),
isInsideStaggerContainer = _useStagger.isInsideStaggerContainer,
staggerType = _useStagger.staggerType;
var shouldSkipAnimationVariables = isInsideAnimateInteractionsContainer && motionTriggers.includes('on-animate-interactions') || isInsideStaggerContainer;
var animationVariables = shouldSkipAnimationVariables ? {} : makeAnimationVariables(motionTriggers, {
animateVisibility: animateVisibility
});
var motionVariants = useMotionVariants(userMotionVariants, isInsideStaggerContainer ? staggerType : type);
return /*#__PURE__*/jsx(MotionDiv, _objectSpread(_objectSpread(_objectSpread({
ref: ref,
viewport: {
amount: 0.8,
once: true
},
variants: motionVariants
}, animationVariables), rest), {}, {
children: children
}));
};
/**
* Base motion component that handles animation variables, reduced motion, type and motionTriggers prop, etc
*/
var BaseMotionBox = /*#__PURE__*/React__default.forwardRef(_BaseMotionBox);
var _BaseMotionEnhancerBox = function _BaseMotionEnhancerBox(_ref2, ref) {
var children = _ref2.children,
motionBoxArgs = _objectWithoutProperties(_ref2, _excluded2);
return /*#__PURE__*/jsx(BaseMotionBox
// we need the ref of this item in AnimateInteractions to pass down ref that adds focusWithin logic
, _objectSpread(_objectSpread({
ref: mergeRefs(children.props.ref, ref),
as: children.type
}, motionBoxArgs), children.props));
};
/**
* Used in AnimateInteraction, Scale, etc
*
* Enhances the child to add motion support
*/
var BaseMotionEnhancerBox = /*#__PURE__*/React__default.forwardRef(_BaseMotionEnhancerBox);
/**
* Base component for entry / exit animations
*
* Handles states, entry exit controls, animation variables, mount / unmount, etc
*/
var BaseMotionEntryExit = function BaseMotionEntryExit(_ref3) {
var children = _ref3.children,
motionVariants = _ref3.motionVariants,
_ref3$isVisible = _ref3.isVisible,
isVisible = _ref3$isVisible === void 0 ? true : _ref3$isVisible,
_ref3$type = _ref3.type,
type = _ref3$type === void 0 ? 'inout' : _ref3$type,
_ref3$motionTriggers = _ref3.motionTriggers,
motionTriggers = _ref3$motionTriggers === void 0 ? ['mount'] : _ref3$motionTriggers,
_ref3$shouldUnmountWh = _ref3.shouldUnmountWhenHidden,
shouldUnmountWhenHidden = _ref3$shouldUnmountWh === void 0 ? false : _ref3$shouldUnmountWh;
// Only need AnimatePresence when we have to unmount the component
var AnimateWrapper = shouldUnmountWhenHidden ? AnimatePresence : React__default.Fragment;
// keep it always mounted when shouldUnmountWhenHidden is false
var isMounted = shouldUnmountWhenHidden ? isVisible : true;
var motionMeta = React__default.useMemo(function () {
return {
isEnhanced: true,
// @ts-expect-error: ref does exist on children prop
innerRef: children.ref
};
// @ts-expect-error: ref does exist on children prop
}, [children.ref]);
return /*#__PURE__*/jsx(AnimateWrapper, {
children: isMounted ? /*#__PURE__*/jsx(BaseMotionBox, _objectSpread(_objectSpread(_objectSpread({
as: children.type,
motionVariants: motionVariants,
motionTriggers: motionTriggers,
type: type
}, shouldUnmountWhenHidden ? {} : {
animateVisibility: isVisible ? 'animate' : 'exit'
}), children.props), {}, {
_motionMeta: motionMeta
})) : null
});
};
export { BaseMotionBox, BaseMotionEnhancerBox, BaseMotionEntryExit, MotionDiv };
//# sourceMappingURL=BaseMotion.js.map