@cleartrip/ct-design-animate 4.0.0-SNAPSHOT-rnfinaltest25.0 → 4.0.0-SNAPSHOT-rnfinaltest30.0

package/dist/components/EntranceAnimation.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { EntranceAnimationProps } from '../type';
+declare const EntranceAnimation: React.FC<EntranceAnimationProps>;
+export default EntranceAnimation;
+//# sourceMappingURL=EntranceAnimation.d.ts.map

package/dist/components/EntranceAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntranceAnimation.d.ts","sourceRoot":"","sources":["../../packages/components/Animate/src/components/EntranceAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,OAAO,EAA8B,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAE7E,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA6DvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/EntranceAnimation.native.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { EntranceAnimationProps } from '../type';
+declare const EntranceAnimation: React.FC<EntranceAnimationProps>;
+export default EntranceAnimation;
+//# sourceMappingURL=EntranceAnimation.native.d.ts.map

package/dist/components/EntranceAnimation.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntranceAnimation.native.d.ts","sourceRoot":"","sources":["../../packages/components/Animate/src/components/EntranceAnimation.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,OAAO,EAA8B,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAE7E,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA6DvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/Shake.native.d.ts

@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from 'react';
+interface IShakeAnimationProps extends PropsWithChildren {
+    animate?: boolean;
+    style?: object;
+}
+declare const StyledAnimation: React.FC<IShakeAnimationProps>;
+export default StyledAnimation;
+//# sourceMappingURL=Shake.native.d.ts.map

package/dist/components/Shake.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shake.native.d.ts","sourceRoot":"","sources":["../../packages/components/Animate/src/components/Shake.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIjD,UAAU,oBAAqB,SAAQ,iBAAiB;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsBD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CASnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cleartrip/ct-design-animate",
-  "version": "4.0.0-SNAPSHOT-rnfinaltest25.0",
+  "version": "4.0.0-SNAPSHOT-rnfinaltest30.0",
   "description": "HOC component that will render animation to children",
   "types": "dist/index.d.ts",
   "main": "./dist/ct-design-animate.cjs.js",
@@ -25,12 +25,12 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@cleartrip/ct-design-style-manager": "4.0.0-SNAPSHOT-rnfinaltest25.0",
-    "@cleartrip/ct-design-theme": "4.0.0-SNAPSHOT-rnfinaltest25.0"
+    "@cleartrip/ct-design-style-manager": "4.0.0-SNAPSHOT-rnfinaltest30.0",
+    "@cleartrip/ct-design-theme": "4.0.0-SNAPSHOT-rnfinaltest30.0"
   },
   "devDependencies": {
     "@emotion/babel-plugin": "^11.12.0",
-    "@cleartrip/ct-design-types": "4.0.0-SNAPSHOT-rnfinaltest25.0"
+    "@cleartrip/ct-design-types": "4.0.0-SNAPSHOT-rnfinaltest30.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/src/components/EntranceAnimation.native.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect, useRef } from 'react';
+
+import Animated, { useAnimatedStyle, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
+
+import { EntranceAnimationDirection, EntranceAnimationProps } from '../type';
+
+const EntranceAnimation: React.FC<EntranceAnimationProps> = ({
+  direction,
+  index = 0,
+  children,
+  staggerDelay = 80,
+  maxStaggerIndex = 5,
+  initialOffset = 200,
+  duration = 200,
+  containerStyle,
+  fillContainer = false,
+  opacityAnimation = true,
+  startAnimation = true,
+  onAnimationComplete = () => void 0,
+}) => {
+  // Wrap index for staggered effect
+  const wrappedIndex = index % (maxStaggerIndex + 1);
+
+  // Track if animation has already been executed
+  const hasAnimated = useRef(false);
+
+  const translate = useSharedValue(initialOffset);
+  const opacity = useSharedValue(opacityAnimation ? 0.5 : 1);
+
+  // Callback to emit animation complete event
+  useEffect(() => {
+    if (!hasAnimated.current && startAnimation) {
+      hasAnimated.current = true;
+      translate.value = withDelay(wrappedIndex * staggerDelay, withTiming(0, { duration }));
+      opacity.value = withDelay(wrappedIndex * staggerDelay + duration, withTiming(1, { duration: duration * 0.5 }));
+
+      // Emit animation complete event after animation duration
+      const totalDelay = wrappedIndex * staggerDelay + duration + duration * 0.5;
+      setTimeout(() => {
+        onAnimationComplete();
+      }, totalDelay);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [wrappedIndex, staggerDelay, duration, direction, startAnimation, onAnimationComplete]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const transform =
+      direction === EntranceAnimationDirection.B2T
+        ? [{ translateY: translate.value }]
+        : [{ translateX: translate.value }];
+
+    const baseStyle = {
+      transform: transform,
+      opacity: opacity.value,
+    };
+
+    // Add flex: 1 if fillContainer is true
+    const layoutStyle = fillContainer ? { flex: 1 } : {};
+
+    return {
+      ...baseStyle,
+      ...layoutStyle,
+      ...containerStyle,
+    };
+  });
+
+  return <Animated.View style={animatedStyle}>{children}</Animated.View>;
+};
+
+export default EntranceAnimation;

package/src/components/EntranceAnimation.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect, useRef } from 'react';
+
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
+
+import { EntranceAnimationDirection, EntranceAnimationProps } from '../type';
+
+const EntranceAnimation: React.FC<EntranceAnimationProps> = ({
+  direction,
+  index = 0,
+  children,
+  staggerDelay = 80,
+  maxStaggerIndex = 5,
+  initialOffset = 200,
+  duration = 200,
+  containerStyle,
+  fillContainer = false,
+  opacityAnimation = true,
+  startAnimation = true,
+  onAnimationComplete = () => void 0,
+}) => {
+  // Wrap index for staggered effect
+  const wrappedIndex = index % (maxStaggerIndex + 1);
+
+  // Track if animation has already been executed
+  const hasAnimated = useRef(false);
+
+  const translate = useSharedValue(initialOffset);
+  const opacity = useSharedValue(opacityAnimation ? 0.5 : 1);
+
+  // Callback to emit animation complete event
+  useEffect(() => {
+    if (!hasAnimated.current && startAnimation) {
+      hasAnimated.current = true;
+      translate.value = withDelay(wrappedIndex * staggerDelay, withTiming(0, { duration }));
+      opacity.value = withDelay(wrappedIndex * staggerDelay + duration, withTiming(1, { duration: duration * 0.5 }));
+
+      // Emit animation complete event after animation duration
+      const totalDelay = wrappedIndex * staggerDelay + duration + duration * 0.5;
+      setTimeout(() => {
+        runOnJS(onAnimationComplete)();
+      }, totalDelay);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [wrappedIndex, staggerDelay, duration, direction, startAnimation, onAnimationComplete]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const transform =
+      direction === EntranceAnimationDirection.B2T
+        ? [{ translateY: translate.value }]
+        : [{ translateX: translate.value }];
+
+    const baseStyle = {
+      transform: transform,
+      opacity: opacity.value,
+    };
+
+    // Add flex: 1 if fillContainer is true
+    const layoutStyle = fillContainer ? { flex: 1 } : {};
+
+    return {
+      ...baseStyle,
+      ...layoutStyle,
+      ...containerStyle,
+    };
+  });
+
+  return <Animated.View style={animatedStyle}>{children}</Animated.View>;
+};
+
+export default EntranceAnimation;

package/src/components/Shake.native.tsx

@@ -0,0 +1,41 @@
+import React, { PropsWithChildren } from 'react';
+
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withSequence, withTiming } from 'react-native-reanimated';
+
+interface IShakeAnimationProps extends PropsWithChildren {
+  animate?: boolean;
+  style?: object;
+}
+
+const useShakeAnimation = (show: boolean) => {
+  const translateX = useSharedValue(0);
+
+  React.useEffect(() => {
+    if (show) {
+      translateX.value = withSequence(
+        withTiming(-1, { duration: 100, easing: Easing.bezier(0.36, 0.07, 0.19, 0.97) }),
+        withTiming(2, { duration: 100, easing: Easing.bezier(0.36, 0.07, 0.19, 0.97) }),
+        withTiming(-4, { duration: 100, easing: Easing.bezier(0.36, 0.07, 0.19, 0.97) }),
+        withTiming(4, { duration: 100, easing: Easing.bezier(0.36, 0.07, 0.19, 0.97) }),
+        withTiming(0, { duration: 100, easing: Easing.bezier(0.36, 0.07, 0.19, 0.97) }),
+      );
+    } else {
+      translateX.value = withTiming(0, { duration: 200 });
+    }
+  }, [show, translateX]);
+
+  return translateX;
+};
+
+const StyledAnimation: React.FC<IShakeAnimationProps> = ({ children, animate = false, style = {} }) => {
+  const translateX = useShakeAnimation(animate);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: translateX.value }],
+    backfaceVisibility: 'hidden',
+    perspective: 1000,
+  }));
+  return <Animated.View style={[style, animatedStyle]}>{children}</Animated.View>;
+};
+
+export default StyledAnimation;