feat(avatar): ✨ update avatar component to use the shorthand function from useTailwind hook

Karthik-B-06 · Karthik-B-06 · commit d7ca8d1f011b · 2022-12-26T12:44:02.000+05:30
diff --git a/src/components/avatar-group/AvatarGroup.tsx b/src/components/avatar-group/AvatarGroup.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { isUndefined } from "lodash";
 
 import { Box, BoxProps } from "../../primitives";
-import { useTheme } from "../../theme";
+import { useTailwind, useTheme } from "../../theme";
 import { createContext, getValidChildren } from "../../utils";
 import { Avatar, AvatarProps } from "../avatar";
 
@@ -48,7 +48,7 @@ export const AvatarGroup: React.FC<Partial<AvatarGroupProps>> = props => {
     ...rest
   } = props;
   const validChildren = getValidChildren(children);
-  const tailwind = useTheme();
+  const { ts } = useTailwind();
   const avatarTheme = useTheme("avatar");
   /**
    * Get the avatars within the max
@@ -67,7 +67,7 @@ export const AvatarGroup: React.FC<Partial<AvatarGroupProps>> = props => {
           <Box
             style={[
               avatarTheme.borderRadius.size[size],
-              tailwind.style([
+              ts([
                 index !== 0
                   ? avatarTheme.group.avatarWrapper.spacing[size]
                   : "",
@@ -87,7 +87,7 @@ export const AvatarGroup: React.FC<Partial<AvatarGroupProps>> = props => {
           <Box
             style={[
               avatarTheme.borderRadius.size[size],
-              tailwind.style([
+              ts([
                 avatarTheme.group.avatarWrapper.spacing[size],
                 !squared ? avatarTheme.group.avatarWrapper.circular : "",
                 showRing ? avatarTheme.group.avatarWrapper.ringStyle : "",
diff --git a/src/components/avatar-group/AvatarGroupWrapper.tsx b/src/components/avatar-group/AvatarGroupWrapper.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 import { Box, BoxProps } from "../../primitives";
-import { useTheme } from "../../theme";
+import { useTailwind, useTheme } from "../../theme";
 import { styleAdapter } from "../../utils";
 import { AvatarSizes } from "../avatar";
 
@@ -16,13 +16,10 @@ export const AvatarGroupWrapper: React.FC<AvatarGroupWrapperProps> = ({
   ...props
 }) => {
   const avatarTheme = useTheme("avatar");
-  const tailwind = useTheme();
+  const { ts } = useTailwind();
 
   return (
-    <Box
-      {...props}
-      style={[tailwind.style([avatarTheme.group.base]), styleAdapter(style)]}
-    >
+    <Box {...props} style={[ts([avatarTheme.group.base]), styleAdapter(style)]}>
       {children}
     </Box>
   );
diff --git a/src/components/avatar/Avatar.tsx b/src/components/avatar/Avatar.tsx
@@ -3,7 +3,7 @@ import { ImageProps, ImageSourcePropType } from "react-native";
 
 import { DefaultUser } from "../../icons";
 import { Box, BoxProps, Text } from "../../primitives";
-import { useTheme } from "../../theme";
+import { useTailwind, useTheme } from "../../theme";
 import { createComponent, cx, isUndefined, styleAdapter } from "../../utils";
 import { useAvatarGroup } from "../avatar-group";
 import { Icon } from "../icon";
@@ -75,7 +75,7 @@ const RNAvatar: React.FC<Partial<AvatarProps>> = forwardRef<
   typeof Box,
   Partial<AvatarProps>
 >((props, ref) => {
-  const tailwind = useTheme();
+  const { ts, gc } = useTailwind();
   const avatarTheme = useTheme("avatar");
 
   const avatarGroupProps = useAvatarGroup();
@@ -104,7 +104,7 @@ const RNAvatar: React.FC<Partial<AvatarProps>> = forwardRef<
     <Box
       style={[
         avatarTheme.borderRadius.size[size],
-        tailwind.style(
+        ts(
           cx(
             avatarTheme.base,
             avatarTheme.size[size],
@@ -126,7 +126,7 @@ const RNAvatar: React.FC<Partial<AvatarProps>> = forwardRef<
         />
       ) : name ? (
         <Text
-          style={tailwind.style(
+          style={ts(
             cx(avatarTheme.initials.base, avatarTheme.initials.size[size]),
           )}
           adjustsFontSizeToFit
@@ -137,8 +137,8 @@ const RNAvatar: React.FC<Partial<AvatarProps>> = forwardRef<
       ) : (
         <Icon
           icon={<DefaultUser />}
-          style={tailwind.style(cx(avatarTheme.defaultUserIcon[size]))}
-          color={tailwind.getColor("text-gray-800")}
+          style={ts(cx(avatarTheme.defaultUserIcon[size]))}
+          color={gc("text-gray-800")}
         />
       )}
       {status && (
diff --git a/src/components/avatar/AvatarImage.tsx b/src/components/avatar/AvatarImage.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Image } from "react-native";
 
-import { useTheme } from "../../theme";
+import { useTailwind, useTheme } from "../../theme";
 import { cx } from "../../utils";
 
 import { AvatarProps } from "./Avatar";
@@ -18,16 +18,14 @@ export const AvatarImage: React.FC<AvatarImageProps> = ({
   size,
   handleFallback,
 }) => {
-  const tailwind = useTheme();
+  const { ts } = useTailwind();
   const avatarTheme = useTheme("avatar");
   return (
     <Image
       source={src}
       style={[
         avatarTheme.borderRadius.size[size],
-        tailwind.style(
-          cx(avatarTheme.image, !squared ? avatarTheme.circular : ""),
-        ),
+        ts(cx(avatarTheme.image, !squared ? avatarTheme.circular : "")),
       ]}
       onError={handleFallback}
       {...imageProps}
diff --git a/src/components/avatar/AvatarStatus.tsx b/src/components/avatar/AvatarStatus.tsx
@@ -11,7 +11,7 @@ import {
 import Svg, { Path } from "react-native-svg";
 
 import { AnimatedBox, Box } from "../../primitives";
-import { useTheme } from "../../theme";
+import { useTailwind, useTheme } from "../../theme";
 import { cx } from "../../utils";
 
 import { AvatarProps, AvatarSizes } from "./Avatar";
@@ -27,7 +27,7 @@ interface AnimatedDotProps {
 }
 
 const AnimatedDot: React.FC<AnimatedDotProps> = ({ size, delay }) => {
-  const tailwind = useTheme();
+  const { ts } = useTailwind();
   const avatarStatusTheme = useTheme("avatar");
   const dotAnimation = useSharedValue(0);
   React.useEffect(() => {
@@ -52,7 +52,7 @@ const AnimatedDot: React.FC<AnimatedDotProps> = ({ size, delay }) => {
   return (
     <AnimatedBox
       style={[
-        tailwind.style(
+        ts(
           cx(
             avatarStatusTheme.status.typing.innerDots.base,
             avatarStatusTheme.status.typing.innerDots.size[size],
@@ -68,24 +68,24 @@ const TypingComponent: React.FC<TypingStatusProps> = ({
   size,
   parentsBackground,
 }) => {
-  const tailwind = useTheme();
+  const { ts, gc } = useTailwind();
   const avatarStatusTheme = useTheme("avatar");
 
   const delays = ["xl", "2xl", "3xl"].includes(size) ? [0, 333, 667] : [0, 500];
 
   return (
     <Box
       style={[
-        tailwind.style(cx(avatarStatusTheme.status.typing.container)),
+        ts(cx(avatarStatusTheme.status.typing.container)),
         avatarStatusTheme.status.position,
         {
-          borderColor: tailwind.getColor(parentsBackground),
-          backgroundColor: tailwind.getColor(parentsBackground),
+          borderColor: gc(parentsBackground),
+          backgroundColor: gc(parentsBackground),
         },
       ]}
     >
       <Box
-        style={tailwind.style(
+        style={ts(
           cx(
             avatarStatusTheme.status.typing.base,
             avatarStatusTheme.status.typing.size[size],
@@ -103,20 +103,21 @@ const TypingComponent: React.FC<TypingStatusProps> = ({
 export const AvatarStatus: React.FC<
   Pick<AvatarProps, "status" | "size" | "parentsBackground">
 > = ({ status, size, parentsBackground }) => {
-  const tailwind = useTheme();
+  const { ts, gc } = useTailwind();
+
   const avatarStatusTheme = useTheme("avatar");
   switch (status) {
     case "active": {
       return (
         <Box
           style={[
-            tailwind.style(cx(avatarStatusTheme.status.active.container)),
+            ts(cx(avatarStatusTheme.status.active.container)),
             avatarStatusTheme.status.position,
-            { borderColor: tailwind.getColor(parentsBackground) },
+            { borderColor: gc(parentsBackground) },
           ]}
         >
           <Box
-            style={tailwind.style(
+            style={ts(
               cx(
                 avatarStatusTheme.status.active.base,
                 avatarStatusTheme.status.active.size[size],
@@ -130,23 +131,21 @@ export const AvatarStatus: React.FC<
       return (
         <Box
           style={[
-            tailwind.style(cx(avatarStatusTheme.status.away.container)),
+            ts(cx(avatarStatusTheme.status.away.container)),
             avatarStatusTheme.status.position,
             {
-              borderColor: tailwind.getColor(parentsBackground),
-              backgroundColor: tailwind.getColor(parentsBackground),
+              borderColor: gc(parentsBackground),
+              backgroundColor: gc(parentsBackground),
             },
           ]}
         >
-          <Box
-            style={tailwind.style(cx(avatarStatusTheme.status.away.size[size]))}
-          >
+          <Box style={ts(cx(avatarStatusTheme.status.away.size[size]))}>
             <Svg width="100%" height="100%" viewBox="0 0 4 4" fill="none">
               <Path
                 fillRule="evenodd"
                 clipRule="evenodd"
                 d="M2 4C3.10457 4 4 3.10457 4 2C4 0.895431 3.10457 0 2 0C0.895431 0 0 0.895431 0 2C0 3.10457 0.895431 4 2 4ZM2 3.25C2.69036 3.25 3.25 2.69036 3.25 2C3.25 1.30964 2.69036 0.75 2 0.75C1.30964 0.75 0.75 1.30964 0.75 2C0.75 2.69036 1.30964 3.25 2 3.25Z"
-                fill={tailwind.getColor("text-gray-600")}
+                fill={gc("text-gray-600")}
               />
             </Svg>
           </Box>
@@ -157,23 +156,19 @@ export const AvatarStatus: React.FC<
       return (
         <Box
           style={[
-            tailwind.style(cx(avatarStatusTheme.status.sleep.container)),
+            ts(cx(avatarStatusTheme.status.sleep.container)),
             avatarStatusTheme.status.position,
             {
-              borderColor: tailwind.getColor(parentsBackground),
-              backgroundColor: tailwind.getColor(parentsBackground),
+              borderColor: gc(parentsBackground),
+              backgroundColor: gc(parentsBackground),
             },
           ]}
         >
-          <Box
-            style={tailwind.style(
-              cx(avatarStatusTheme.status.sleep.size[size]),
-            )}
-          >
+          <Box style={ts(cx(avatarStatusTheme.status.sleep.size[size]))}>
             <Svg width="100%" height="100%" viewBox="0 0 4 4" fill="none">
               <Path
                 d="M3.97107 2.35964C3.98707 2.27194 3.88243 2.2173 3.8072 2.26514C3.57467 2.413 3.29869 2.49864 3.00271 2.49864C2.17354 2.49864 1.50136 1.82646 1.50136 0.997285C1.50136 0.701308 1.587 0.425334 1.73486 0.192796C1.7827 0.117568 1.72806 0.0129337 1.64036 0.0289269C0.707321 0.199076 0 1.01603 0 1.99819C0 3.10376 0.896241 4 2.00181 4C2.98397 4 3.80092 3.29268 3.97107 2.35964Z"
-                fill={tailwind.getColor("text-gray-600")}
+                fill={gc("text-gray-600")}
               />
             </Svg>
           </Box>
@@ -186,5 +181,4 @@ export const AvatarStatus: React.FC<
       );
     }
   }
-  return null;
 };
