refactor: move stagger and animateinteraction check

razorpay · Sep 16, 2024 · a50e563 · a50e563
1 parent 0f30023
commit a50e563
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 27 deletions.
diff --git a/packages/blade/src/components/AnimateInteractions/AnimateInteractions.web.tsx b/packages/blade/src/components/AnimateInteractions/AnimateInteractions.web.tsx
@@ -8,10 +8,10 @@ export type AnimateInteractionsProps = BaseMotionEntryExitProps & {
 
 export const AnimateInteractions = ({ children }: AnimateInteractionsProps) => {
   return (
-    <BaseMotionBox motionTriggers={['hover']}>
-      <AnimateInteractionsContext.Provider value={{ isInsideAnimateInteractionsContainer: true }}>
+    <AnimateInteractionsContext.Provider value={{ isInsideAnimateInteractionsContainer: true }}>
+      <BaseMotionBox motionTriggers={['hover']} shouldRenderAnimationVariables>
         {children}
-      </AnimateInteractionsContext.Provider>
-    </BaseMotionBox>
+      </BaseMotionBox>
+    </AnimateInteractionsContext.Provider>
   );
 };
diff --git a/packages/blade/src/components/BaseMotion/BaseMotion.tsx b/packages/blade/src/components/BaseMotion/BaseMotion.tsx
@@ -19,22 +19,15 @@ const motionTriggersArrayToGesturePropsMap: Record<MotionTriggersType, Animation
 
 const useAnimationVariables = ({
   variant,
-  isInsideStaggerContainer,
-  isInsideAnimateInteractionsContainer,
+  shouldRenderAnimationVariables,
   motionTriggers,
 }: {
   variant: BaseMotionEntryExitProps['variant'];
   motionTriggers: BaseMotionEntryExitProps['motionTriggers'];
-  isInsideStaggerContainer: boolean;
-  isInsideAnimateInteractionsContainer: boolean;
+  shouldRenderAnimationVariables: BaseMotionBoxProps['shouldRenderAnimationVariables'];
 }) => {
   const animationVariables = React.useMemo(() => {
-    console.log({ isInsideStaggerContainer });
-    if (isInsideStaggerContainer) {
-      return {};
-    }
-
-    if (isInsideAnimateInteractionsContainer) {
+    if (!shouldRenderAnimationVariables) {
       return {};
     }
 
@@ -53,7 +46,7 @@ const useAnimationVariables = ({
       exit: variant === 'out' || variant === 'inout' ? 'exit' : undefined,
       ...triggerProps,
     };
-  }, [variant, isInsideStaggerContainer]);
+  }, [variant, shouldRenderAnimationVariables]);
 
   return animationVariables;
 };
@@ -63,15 +56,13 @@ const BaseMotionBox = ({
   motionVariants,
   variant = 'inout',
   motionTriggers = ['mount'],
+  shouldRenderAnimationVariables,
   speed,
   ...rest
 }: BaseMotionBoxProps) => {
-  const { isInsideStaggerContainer } = useStagger();
-  const { isInsideAnimateInteractionsContainer } = useAnimateInteractions();
   const animationVariables = useAnimationVariables({
     variant,
-    isInsideStaggerContainer,
-    isInsideAnimateInteractionsContainer,
+    shouldRenderAnimationVariables,
     motionTriggers,
   });
 
@@ -96,6 +87,9 @@ const BaseMotionEntryExit = ({
   variant = 'inout',
   motionTriggers = ['mount'],
 }: BaseMotionEntryExitProps) => {
+  const { isInsideAnimateInteractionsContainer } = useAnimateInteractions();
+  const { isInsideStaggerContainer } = useStagger();
+
   return (
     <AnimatePresence>
       {isVisible ? (
@@ -105,6 +99,9 @@ const BaseMotionEntryExit = ({
           motionVariants={motionVariants}
           motionTriggers={motionTriggers}
           variant={variant}
+          shouldRenderAnimationVariables={
+            !isInsideAnimateInteractionsContainer && !isInsideStaggerContainer
+          }
           // We pass the props of children and not pass the children itself since the `as` prop already renders the children and we don't want to re-render it inside
           {...children.props}
         />

diff --git a/packages/blade/src/components/BaseMotion/types.ts b/packages/blade/src/components/BaseMotion/types.ts
@@ -17,6 +17,7 @@ type BaseMotionBoxProps = {
    */
   motionTriggers?: MotionTriggersType[];
   motionVariants?: MotionVariantsType;
+  shouldRenderAnimationVariables?: boolean;
 } & Record<string, any>;
 
 type BaseMotionEntryExitProps = Pick<

diff --git a/packages/blade/src/components/Stagger/Stagger.web.tsx b/packages/blade/src/components/Stagger/Stagger.web.tsx
@@ -23,14 +23,18 @@ export const Stagger = ({ children, isVisible, variant = 'inout' }: StaggerProps
   };
 
   return (
-    <AnimatePresence>
-      {isVisible ? (
-        <BaseMotionBox variant={variant} motionVariants={staggerVariants}>
-          <StaggerContext.Provider value={{ isInsideStaggerContainer: true }}>
+    <StaggerContext.Provider value={{ isInsideStaggerContainer: true }}>
+      <AnimatePresence>
+        {isVisible ? (
+          <BaseMotionBox
+            shouldRenderAnimationVariables
+            variant={variant}
+            motionVariants={staggerVariants}
+          >
             {children}
-          </StaggerContext.Provider>
-        </BaseMotionBox>
-      ) : null}
-    </AnimatePresence>
+          </BaseMotionBox>
+        ) : null}
+      </AnimatePresence>
+    </StaggerContext.Provider>
   );
 };