Merge pull request #479 from gluestack/fix/component-style-prop-config

fix: component and style prop conflict typing
gluestack · Oct 16, 2023 · fa3021a · fa3021a
2 parents 6331dee + f3fb15e
commit fa3021a
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 60 deletions.
diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx
@@ -5,7 +5,6 @@ import type {
   OrderedSXResolved,
   StyleIds,
   ComponentProps,
-  UtilityProps,
   IVerbosedTheme,
   ITheme,
   ExtendedConfigType,
@@ -996,12 +995,7 @@ export function verboseStyled<P, Variants, ComCon>(
       // sxHash: BUILD_TIME_sxHash = '',
       ...componentProps
     }: Omit<
-      Omit<P, keyof Variants> &
-        Partial<ComponentProps<ITypeReactNativeStyles, Variants, P, ComCon>> &
-        Partial<UtilityProps<ITypeReactNativeStyles>> & {
-          as?: any;
-          children?: any;
-        },
+      ComponentProps<ITypeReactNativeStyles, Variants, P, ComCon>,
       'animationComponentGluestack'
     >,
     ref: React.ForwardedRef<P>

diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
@@ -735,61 +735,71 @@ interface GenericComponents {
 /********************* COMPONENT PROPS TYPE *****************************************/
 
 export type ComponentProps<GenericComponentStyles, Variants, P, ComCon> =
-  SxStyleProps<
-    GenericComponentStyles,
-    Variants,
-    P,
-    'animationComponentGluestack' extends keyof P
-      ? P['animationComponentGluestack'] extends true
-        ? Plugins
-        : []
-      : []
-  > & {
-    states?: {
-      [K in IState]?: boolean;
-    };
-  } & (GSConfig['globalStyle'] extends object
-      ? {
-          [Key in keyof MergeNestedThree<
-            GlobalVariants,
-            Variants,
-            // @ts-ignore
-            Components[`${ComCon}`]['theme']['variants']
-          >]?: keyof MergeNestedThree<
-            GlobalVariants,
-            Variants,
-            // @ts-ignore
-            Components[`${ComCon}`]['theme']['variants']
-          >[Key] extends 'true' | 'false'
-            ? boolean
-            : keyof MergeNestedThree<
-                GlobalVariants,
-                Variants,
-                // @ts-ignore
-                Components[`${ComCon}`]['theme']['variants']
-              >[Key];
-        } & Omit<P, keyof Variants>
-      : {
-          [Key in keyof MergeNested<
-            Variants,
-            // @ts-ignore
-            Components[`${ComCon}`]['theme']['variants']
-          >]?: keyof MergeNested<
-            Variants, // @ts-ignore
-            Components[`${ComCon}`]['theme']['variants']
-          >[Key] extends 'true' | 'false'
-            ? boolean
-            : keyof MergeNested<
-                Variants,
-                // @ts-ignore
-                Components[`${ComCon}`]['theme']['variants']
-              >[Key];
-        });
+  Partial<
+    Omit<P, keyof Variants> &
+      SxStyleProps<
+        GenericComponentStyles,
+        Variants,
+        P,
+        'animationComponentGluestack' extends keyof P
+          ? P['animationComponentGluestack'] extends true
+            ? Plugins
+            : []
+          : []
+      > & {
+        as?: any;
+        children?: any;
+      } & UtilityProps<GenericComponentStyles, P> & {
+        states?: {
+          [K in IState]?: boolean;
+        };
+      } & (GSConfig['globalStyle'] extends object
+        ? {
+            [Key in keyof MergeNestedThree<
+              GlobalVariants,
+              Variants,
+              // @ts-ignore
+              Components[`${ComCon}`]['theme']['variants']
+            >]?: keyof MergeNestedThree<
+              GlobalVariants,
+              Variants,
+              // @ts-ignore
+              Components[`${ComCon}`]['theme']['variants']
+            >[Key] extends 'true' | 'false'
+              ? boolean
+              : keyof MergeNestedThree<
+                  GlobalVariants,
+                  Variants,
+                  // @ts-ignore
+                  Components[`${ComCon}`]['theme']['variants']
+                >[Key];
+          } & Omit<P, keyof Variants>
+        : {
+            [Key in keyof MergeNested<
+              Variants,
+              // @ts-ignore
+              Components[`${ComCon}`]['theme']['variants']
+            >]?: keyof MergeNested<
+              Variants, // @ts-ignore
+              Components[`${ComCon}`]['theme']['variants']
+            >[Key] extends 'true' | 'false'
+              ? boolean
+              : keyof MergeNested<
+                  Variants,
+                  // @ts-ignore
+                  Components[`${ComCon}`]['theme']['variants']
+                >[Key];
+          })
+  >;
 
-export type UtilityProps<GenericComponentStyles> = TokenizedRNStyleProps<
-  GetRNStyles<GenericComponentStyles>
+export type UtilityProps<GenericComponentStyles, GenericComponentProps> = Omit<
+  TokenizedRNStyleProps<GetRNStyles<GenericComponentStyles>>,
+  keyof GenericComponentProps
 > &
-  AliasesProps<RNStyles<GenericComponentStyles>>;
+  Omit<
+    AliasesProps<RNStyles<GenericComponentStyles>>,
+    keyof GenericComponentProps
+  >;
 
 /********************* UTILITY TYPE *****************************************/