fix: heading component

gluestack · Jul 3, 2024 · 757a776 · 757a776
1 parent fa7128e
commit 757a776
Show file tree

Hide file tree

Showing 6 changed files with 315 additions and 53 deletions.
diff --git a/example/storybook-nativewind/src/core-components/nativewind/actionsheet/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/actionsheet/index.tsx
@@ -78,6 +78,7 @@ const ItemWrapper = React.forwardRef(({ ...props }: any, ref?: any) => {
 });
 
 const AnimatedPressable = createMotionAnimatedComponent(Pressable);
+
 export const UIActionsheet = createActionsheet({
   Root: View,
   Content: Motion.View,

diff --git a/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.tsx
@@ -10,13 +10,13 @@ export function GluestackUIProvider({
 }: {
   mode?: 'light' | 'dark';
   children?: any;
+  style?: any;
 }) {
   return (
     <View
       style={[
         config[mode],
         { flex: 1, height: '100%', width: '100%' },
-        // @ts-ignore
         props.style,
       ]}
     >

diff --git a/example/storybook-nativewind/src/core-components/nativewind/heading/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/heading/index.tsx
@@ -1,85 +1,216 @@
-import React, { useCallback } from 'react';
+import React, { forwardRef, memo } from 'react';
 import { H1, H2, H3, H4, H5, H6 } from '@expo/html-elements';
 import { cssInterop } from 'nativewind';
 import { headingStyle } from './styles';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 
-const Heading = ({ className, size = 'lg', as: AsComp, ...props }: any) => {
-  const MappedHeading = useCallback(
-    () => {
+type IHeadingProps = VariantProps<typeof headingStyle> &
+  React.ComponentProps<typeof H1>;
+
+cssInterop(H1, { className: 'style' });
+cssInterop(H2, { className: 'style' });
+cssInterop(H3, { className: 'style' });
+cssInterop(H4, { className: 'style' });
+cssInterop(H5, { className: 'style' });
+cssInterop(H6, { className: 'style' });
+
+const MappedHeading = memo(
+  forwardRef(
+    (
+      {
+        size,
+        className,
+        isTruncated,
+        bold,
+        underline,
+        strikeThrough,
+        sub,
+        italic,
+        highlight,
+        ...props
+      }: IHeadingProps,
+      ref?: any
+    ) => {
       switch (size) {
         case '5xl':
         case '4xl':
         case '3xl':
-          cssInterop(H1, { className: 'style' });
           return (
             <H1
-              className={headingStyle({ size, class: className })}
+              className={headingStyle({
+                size,
+                isTruncated,
+                bold,
+                underline,
+                strikeThrough,
+                sub,
+                italic,
+                highlight,
+                class: className,
+              })}
               {...props}
+              ref={ref}
             />
           );
         case '2xl':
-          cssInterop(H2, { className: 'style' });
           return (
             <H2
-              className={headingStyle({ size, class: className })}
+              className={headingStyle({
+                size,
+                isTruncated,
+                bold,
+                underline,
+                strikeThrough,
+                sub,
+                italic,
+                highlight,
+                class: className,
+              })}
               {...props}
+              ref={ref}
             />
           );
         case 'xl':
-          cssInterop(H3, { className: 'style' });
           return (
             <H3
-              className={headingStyle({ size, class: className })}
+              className={headingStyle({
+                size,
+                isTruncated,
+                bold,
+                underline,
+                strikeThrough,
+                sub,
+                italic,
+                highlight,
+                class: className,
+              })}
               {...props}
+              ref={ref}
             />
           );
         case 'lg':
-          cssInterop(H4, { className: 'style' });
           return (
             <H4
-              className={headingStyle({ size, class: className })}
+              className={headingStyle({
+                size,
+                isTruncated,
+                bold,
+                underline,
+                strikeThrough,
+                sub,
+                italic,
+                highlight,
+                class: className,
+              })}
               {...props}
+              ref={ref}
             />
           );
         case 'md':
-          cssInterop(H5, { className: 'style' });
           return (
             <H5
-              className={headingStyle({ size, class: className })}
+              className={headingStyle({
+                size,
+                isTruncated,
+                bold,
+                underline,
+                strikeThrough,
+                sub,
+                italic,
+                highlight,
+                class: className,
+              })}
               {...props}
+              ref={ref}
             />
           );
         case 'sm':
         case 'xs':
-          cssInterop(H6, { className: 'style' });
           return (
             <H6
-              className={headingStyle({ size, class: className })}
+              className={headingStyle({
+                size,
+                isTruncated,
+                bold,
+                underline,
+                strikeThrough,
+                sub,
+                italic,
+                highlight,
+                class: className,
+              })}
               {...props}
+              ref={ref}
             />
           );
         default:
-          cssInterop(H4, { className: 'style' });
           return (
             <H4
-              className={headingStyle({ size, class: className })}
+              className={headingStyle({
+                size,
+                isTruncated,
+                bold,
+                underline,
+                strikeThrough,
+                sub,
+                italic,
+                highlight,
+                class: className,
+              })}
               {...props}
+              ref={ref}
             />
           );
       }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [size]
-  );
+    }
+  )
+);
+const Heading = memo(
+  forwardRef(
+    (
+      {
+        className,
+        size = 'lg',
+        as: AsComp,
+        ...props
+      }: IHeadingProps & {
+        as?: React.ElementType;
+      },
+      ref?: any
+    ) => {
+      const {
+        isTruncated,
+        bold,
+        underline,
+        strikeThrough,
+        sub,
+        italic,
+        highlight,
+      } = props;
 
-  if (AsComp) {
-    return (
-      <AsComp className={headingStyle({ size, class: className })} {...props} />
-    );
-  }
+      if (AsComp) {
+        return (
+          <AsComp
+            className={headingStyle({
+              size,
+              isTruncated,
+              bold,
+              underline,
+              strikeThrough,
+              sub,
+              italic,
+              highlight,
+              class: className,
+            })}
+            {...props}
+          />
+        );
+      }
 
-  return <MappedHeading />;
-};
+      return <MappedHeading size={size} ref={ref} {...props} />;
+    }
+  )
+);
 
 Heading.displayName = 'Heading';