From 62fa3b99fcd1f3ca2fdedf8a8be57ae2081878d9 Mon Sep 17 00:00:00 2001
From: Karthik-B-06 <karthik06051996@gmail.com>
Date: Mon, 1 Nov 2021 12:20:18 +0530
Subject: [PATCH] feat: :sparkles: added typing animation to Avatar Status

---
 src/components/avatar/AvatarStatus.tsx | 130 +++++++++++++++++++++++++
 1 file changed, 130 insertions(+)

diff --git a/src/components/avatar/AvatarStatus.tsx b/src/components/avatar/AvatarStatus.tsx
index cc20173a..a1100289 100644
--- a/src/components/avatar/AvatarStatus.tsx
+++ b/src/components/avatar/AvatarStatus.tsx
@@ -1,5 +1,15 @@
 import React from 'react';
 import {
+  Easing,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+import {
+  AnimatedBox,
   AvatarSizes,
   AvatarStatusType,
   Box,
@@ -12,6 +22,120 @@ interface AvatarStatusProps {
   size?: AvatarSizes;
 }
 
+interface TypingStatusProps {
+  size: Partial<AvatarSizes>;
+}
+
+const TypingComponent: React.FC<TypingStatusProps> = ({ size }) => {
+  const tailwind = useTheme();
+  const avatarStatusTheme = useTheme('avatar');
+  const noOfDots = size === 'xl' || size === '2xl' || size === '3xl' ? 3 : 2;
+  const progressTranslate = useSharedValue(-1);
+  React.useEffect(() => {
+    progressTranslate.value = withDelay(
+      700,
+      withRepeat(
+        withTiming(1, {
+          easing: Easing.linear,
+          duration: 500,
+        }),
+        -1,
+        false
+      )
+    );
+  }, [progressTranslate]);
+  const animatedColorAnimationLG = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(progressTranslate.value, [-1, 0, 1], [0.5, 1, 1]),
+    };
+  });
+  const animatedColorAnimationLG2 = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(progressTranslate.value, [-1, 0, 1], [1, 0.5, 1]),
+    };
+  });
+  const animatedColorAnimationLG3 = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(progressTranslate.value, [-1, 0, -1], [1, 1, 0.5]),
+    };
+  });
+  const animatedColorAnimationSM = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(progressTranslate.value, [-1, 1], [0.5, 1]),
+    };
+  });
+  const animatedColorAnimationSM2 = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(progressTranslate.value, [-1, 1], [1, 0.5]),
+    };
+  });
+  return (
+    <Box
+      style={[
+        tailwind.style(
+          avatarStatusTheme.status.typing.base,
+          avatarStatusTheme.status.typing.size[size]
+        ),
+        avatarStatusTheme.status.typing.position,
+      ]}
+    >
+      {noOfDots === 2 && (
+        <>
+          <AnimatedBox
+            style={[
+              tailwind.style(
+                avatarStatusTheme.status.typing.innerDots.base,
+                avatarStatusTheme.status.typing.innerDots.size[size]
+              ),
+              animatedColorAnimationSM,
+            ]}
+          />
+          <AnimatedBox
+            style={[
+              tailwind.style(
+                avatarStatusTheme.status.typing.innerDots.base,
+                avatarStatusTheme.status.typing.innerDots.size[size]
+              ),
+              animatedColorAnimationSM2,
+            ]}
+          />
+        </>
+      )}
+      {noOfDots === 3 && (
+        <>
+          <AnimatedBox
+            style={[
+              tailwind.style(
+                avatarStatusTheme.status.typing.innerDots.base,
+                avatarStatusTheme.status.typing.innerDots.size[size]
+              ),
+              animatedColorAnimationLG,
+            ]}
+          />
+          <AnimatedBox
+            style={[
+              tailwind.style(
+                avatarStatusTheme.status.typing.innerDots.base,
+                avatarStatusTheme.status.typing.innerDots.size[size]
+              ),
+              animatedColorAnimationLG2,
+            ]}
+          />
+          <AnimatedBox
+            style={[
+              tailwind.style(
+                avatarStatusTheme.status.typing.innerDots.base,
+                avatarStatusTheme.status.typing.innerDots.size[size]
+              ),
+              animatedColorAnimationLG3,
+            ]}
+          />
+        </>
+      )}
+    </Box>
+  );
+};
+
 export const AvatarStatus: React.FC<AvatarStatusProps> = ({
   status,
   size = 'xl',
@@ -28,6 +152,7 @@ export const AvatarStatus: React.FC<AvatarStatusProps> = ({
               avatarStatusTheme.status.size[size],
             ]),
             avatarStatusTheme.status.outerBorderRadius,
+            avatarStatusTheme.status.position,
           ]}
         />
       );
@@ -41,6 +166,7 @@ export const AvatarStatus: React.FC<AvatarStatusProps> = ({
               avatarStatusTheme.status.size[size],
             ]),
             avatarStatusTheme.status.outerBorderRadius,
+            avatarStatusTheme.status.position,
           ]}
         >
           <Box
@@ -61,12 +187,16 @@ export const AvatarStatus: React.FC<AvatarStatusProps> = ({
               avatarStatusTheme.status.size[size],
             ]),
             avatarStatusTheme.status.outerBorderRadius,
+            avatarStatusTheme.status.position,
           ]}
         >
           <SleepIndicator size={size} />
         </Box>
       );
     }
+    case 'typing': {
+      return <TypingComponent size={size} />;
+    }
   }
   return null;
 };