feat: add slideFromOffset prop

razorpay · Nov 28, 2024 · 15161fb · 15161fb
1 parent c4a3d8b
commit 15161fb
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/packages/blade/src/components/Slide/Slide.web.tsx b/packages/blade/src/components/Slide/Slide.web.tsx
@@ -6,20 +6,23 @@ import { cssBezierToMotionFn } from '~utils/cssBezierToMotionFn';
 import { castWebType, useTheme } from '~utils';
 import type { SlideProps } from './types';
 
-const getFromTransform = (direction: SlideProps['direction']): `translate${string}` => {
+const getFromTransform = (
+  direction: SlideProps['direction'],
+  fromOffset: SlideProps['fromOffset'],
+): `translate${string}` => {
   if (direction === 'top') {
-    return 'translateY(-100vh)';
+    return `translateY(-${fromOffset})`;
   }
 
   if (direction === 'left') {
-    return 'translateX(-100vw)';
+    return `translateX(-${fromOffset})`;
   }
 
   if (direction === 'right') {
-    return 'translateX(100vw)';
+    return `translateX(${fromOffset})`;
   }
 
-  return 'translateY(100vh)';
+  return `translateY(${fromOffset})`;
 };
 
 export const Slide = ({
@@ -29,6 +32,7 @@ export const Slide = ({
   isVisible,
   motionTriggers,
   shouldUnmountWhenHidden,
+  fromOffset,
 }: SlideProps) => {
   const { theme } = useTheme();
 
@@ -41,19 +45,21 @@ export const Slide = ({
     const enterDirection = typeof direction === 'object' ? direction.enter : direction;
     const exitDirection = typeof direction === 'object' ? direction.exit : direction;
 
-    const enterTransform = getFromTransform(enterDirection);
-    const exitTransform = getFromTransform(exitDirection);
-
     const isEnterDirectionHorizontal = ['left', 'right'].includes(enterDirection);
     const isExitDirectionHorizontal = ['left', 'right'].includes(exitDirection);
 
+    const defaultOffset: SlideProps['fromOffset'] = isEnterDirectionHorizontal ? '100vw' : '100vh';
+
+    const enterTransform = getFromTransform(enterDirection, fromOffset ?? defaultOffset);
+    const exitTransform = getFromTransform(exitDirection, fromOffset ?? defaultOffset);
+
     return {
       enterTransform,
       exitTransform,
       isEnterDirectionHorizontal,
       isExitDirectionHorizontal,
     };
-  }, [direction]);
+  }, [direction, fromOffset]);
 
   const moveVariants: MotionVariantsType = {
     initial: {

diff --git a/packages/blade/src/components/Slide/types.ts b/packages/blade/src/components/Slide/types.ts
@@ -9,4 +9,6 @@ export type SlideProps = BaseMotionEntryExitProps & {
         enter: SlideDirections;
         exit: SlideDirections;
       };
+
+  fromOffset?: `100vh` | `100vw` | `${number}%`;
 };