Merge pull request #2038 from gluestack/fix/nativewind-components-fixes

fix: nativewind components
gluestack · Apr 4, 2024 · 7730753 · 7730753
2 parents e125d9c + 7704592
commit 7730753
Show file tree

Hide file tree

Showing 12 changed files with 318 additions and 239 deletions.
diff --git a/example/storybook-nativewind/src/core-components/nativewind/alert/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/alert/index.tsx
@@ -178,53 +178,61 @@ const defaultColors: DefaultColors = {
 };
 type IAlertIconProps = React.ComponentProps<typeof UIAlert.Icon> &
   VariantProps<typeof alertIconStyle>;
-const AlertIcon = ({
-  className,
-  size = 'md',
-  fill = 'none',
-  as: AsComp,
-  ...props
-}: {
-  className?: string;
-  as?: any;
-  fill?: string;
-  color?: any;
-} & IAlertIconProps) => {
-  const { action: parentAction } = useStyleContext(SCOPE);
-  const { color = defaultColors[parentAction as keyof DefaultColors] } = props;
+const AlertIcon = React.forwardRef(
+  (
+    {
+      className,
+      size,
+      fill = 'none',
+      as: AsComp,
+      ...props
+    }: {
+      className?: string;
+      as?: any;
+      fill?: string;
+      color?: string;
+    } & IAlertIconProps,
+    ref?: any
+  ) => {
+    const { action: parentAction } = useStyleContext(SCOPE);
+    const { color = defaultColors[parentAction as keyof DefaultColors] } =
+      props;
 
-  if (AsComp) {
+    if (AsComp) {
+      return (
+        <View
+          className={alertIconStyle({
+            size,
+            class: className,
+          })}
+        >
+          <AsComp
+            fill={fill}
+            color={color}
+            {...props}
+            height={'100%'}
+            width={'100%'}
+            ref={ref}
+          />
+        </View>
+      );
+    }
     return (
-      <View
+      <UIAlert.Icon
+        // @ts-ignore
         className={alertIconStyle({
           size,
           class: className,
         })}
-      >
-        <AsComp
-          fill={fill}
-          color={color}
-          {...props}
-          height={'100%'}
-          width={'100%'}
-        />
-      </View>
+        // @ts-ignore
+        fill={fill}
+        color={color}
+        {...props}
+        ref={ref}
+      />
     );
   }
-  return (
-    <UIAlert.Icon
-      // @ts-ignore
-      className={alertIconStyle({
-        size,
-        class: className,
-      })}
-      // @ts-ignore
-      fill={fill}
-      color={color}
-      {...props}
-    />
-  );
-};
+);
 
 Alert.displayName = 'Alert';
 AlertText.displayName = 'AlertText';

diff --git a/example/storybook-nativewind/src/core-components/nativewind/avatar/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/avatar/index.tsx
@@ -46,12 +46,12 @@ const avatarFallbackTextStyle = tva({
 
   parentVariants: {
     size: {
-      'xs': 'text-xs',
-      'sm': 'text-sm',
+      'xs': 'text-2xs',
+      'sm': 'text-xs',
       'md': 'text-base',
-      'lg': 'text-lg',
-      'xl': 'text-xl',
-      '2xl': 'text-2xl',
+      'lg': 'text-xl',
+      'xl': 'text-3xl',
+      '2xl': 'text-5xl',
     },
   },
 });

diff --git a/example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx
@@ -157,21 +157,47 @@ const defaultColors: DefaultColors = {
 };
 type IBadgeIconProps = React.ComponentProps<typeof View> &
   VariantProps<typeof badgeIconStyle>;
-const BadgeIcon = ({
-  className,
-  size,
-  as: AsComp,
-  fill = 'none',
-  ...props
-}: IBadgeIconProps & { className?: any } & {
-  color?: any;
-  fill?: string;
-  as?: any;
-}) => {
-  const { size: parentSize, action: parentAction } = useStyleContext(SCOPE);
-  const { color = defaultColors[parentAction as keyof DefaultColors] } = props;
+const BadgeIcon = React.forwardRef(
+  (
+    {
+      className,
+      size,
+      as: AsComp,
+      fill = 'none',
+      ...props
+    }: IBadgeIconProps & { className?: any } & {
+      color?: any;
+      fill?: string;
+      as?: any;
+    },
+    ref?: any
+  ) => {
+    const { size: parentSize, action: parentAction } = useStyleContext(SCOPE);
+    const { color = defaultColors[parentAction as keyof DefaultColors] } =
+      props;
 
-  if (AsComp) {
+    if (AsComp) {
+      return (
+        <View
+          className={badgeIconStyle({
+            parentVariants: {
+              size: parentSize,
+            },
+            size,
+            class: className,
+          })}
+        >
+          <AsComp
+            {...props}
+            height={'100%'}
+            width={'100%'}
+            fill={fill}
+            color={color}
+            ref={ref}
+          />
+        </View>
+      );
+    }
     return (
       <View
         className={badgeIconStyle({
@@ -181,33 +207,15 @@ const BadgeIcon = ({
           size,
           class: className,
         })}
-      >
-        <AsComp
-          {...props}
-          height={'100%'}
-          width={'100%'}
-          fill={fill}
-          color={color}
-        />
-      </View>
+        {...props}
+        //@ts-ignore
+        fill={fill}
+        color={color}
+        ref={ref}
+      />
     );
   }
-  return (
-    <View
-      className={badgeIconStyle({
-        parentVariants: {
-          size: parentSize,
-        },
-        size,
-        class: className,
-      })}
-      {...props}
-      //@ts-ignore
-      fill={fill}
-      color={color}
-    />
-  );
-};
+);
 
 Badge.displayName = 'Badge';
 BadgeText.displayName = 'BadgeText';

diff --git a/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx
@@ -299,72 +299,79 @@ const defaultColors: DefaultColors = {
 };
 type IButtonIcon = React.ComponentProps<typeof UIButton.Icon> &
   VariantProps<typeof buttonIconStyle>;
-const ButtonIcon = ({
-  className,
-  as: AsComp,
-  fill = 'none',
-  size,
-  ...props
-}: IButtonIcon & {
-  className?: any;
-  fill?: string;
-  color?: string;
-  as?: any;
-}) => {
-  const {
-    variant: parentVariant,
-    size: parentSize,
-    action: parentAction,
-  } = useStyleContext(SCOPE);
+const ButtonIcon = React.forwardRef(
+  (
+    {
+      className,
+      as: AsComp,
+      fill = 'none',
+      size,
+      ...props
+    }: IButtonIcon & {
+      className?: any;
+      fill?: string;
+      color?: string;
+      as?: any;
+    },
+    ref?: any
+  ) => {
+    const {
+      variant: parentVariant,
+      size: parentSize,
+      action: parentAction,
+    } = useStyleContext(SCOPE);
 
-  let localColor;
-  if (parentVariant !== 'solid') {
-    localColor = defaultColors[parentAction as keyof DefaultColors];
-  } else {
-    localColor = '#FEFEFF';
-  }
-  const { color = localColor } = props;
+    let localColor;
+    if (parentVariant !== 'solid') {
+      localColor = defaultColors[parentAction as keyof DefaultColors];
+    } else {
+      localColor = '#FEFEFF';
+    }
+    const { color = localColor } = props;
 
-  if (AsComp) {
+    if (AsComp) {
+      return (
+        <View
+          className={buttonIconStyle({
+            parentVariants: {
+              size: parentSize,
+              variant: parentVariant,
+              action: parentAction,
+            },
+            size,
+            class: className,
+          })}
+        >
+          <AsComp
+            fill={fill}
+            color={color}
+            {...props}
+            height={'100%'}
+            width={'100%'}
+            ref={ref}
+          />
+        </View>
+      );
+    }
     return (
-      <View
+      <UIButton.Icon
+        {...props}
+        //@ts-ignore
         className={buttonIconStyle({
           parentVariants: {
             size: parentSize,
-            variant: parentVariant,
-            action: parentAction,
           },
           size,
           class: className,
         })}
-      >
-        <AsComp
-          fill={fill}
-          color={color}
-          {...props}
-          height={'100%'}
-          width={'100%'}
-        />
-      </View>
+        //@ts-ignore
+        fill={fill}
+        color={color}
+        ref={ref}
+      />
     );
   }
-  return (
-    <UIButton.Icon
-      {...props}
-      //@ts-ignore
-      className={buttonIconStyle({
-        parentVariants: {
-          size: parentSize,
-        },
-        size,
-        class: className,
-      })}
-      //@ts-ignore
-      fill={fill}
-      color={color}
-    />
-  );
-};
+);
 
 Button.displayName = 'Button';
 ButtonText.displayName = 'ButtonText';