From 133116f8d24c4f992b0b45131592d74d05b5dde4 Mon Sep 17 00:00:00 2001
From: dominic <dominic@dominics-MacBook-Pro.local>
Date: Wed, 5 Jun 2024 13:56:32 +0200
Subject: [PATCH] pass along variant name to restyled component

---
 src/hooks/useRestyle.ts                  | 10 ++-
 src/test/createRestyleComponent.test.tsx | 79 +++++++++++++++---------
 2 files changed, 56 insertions(+), 33 deletions(-)

diff --git a/src/hooks/useRestyle.ts b/src/hooks/useRestyle.ts
index 01d71441..671d9a46 100644
--- a/src/hooks/useRestyle.ts
+++ b/src/hooks/useRestyle.ts
@@ -7,14 +7,15 @@ import useTheme from './useTheme';
 
 const filterRestyleProps = <
   TRestyleProps,
-  TProps extends {[key: string]: unknown} & TRestyleProps,
+  TProps extends {[key: string]: unknown} & TRestyleProps & {variant?: unknown},
 >(
   componentProps: TProps,
   omitPropertiesMap: {[key in keyof TProps]: boolean},
 ) => {
-  const cleanProps: TProps = {} as TProps;
-  const restyleProps: TProps & {variant?: unknown} = {} as TProps;
+  const cleanProps: Partial<TProps> = {};
+  const restyleProps: Partial<TProps> = {};
   let serializedRestyleProps = '';
+
   if (omitPropertiesMap.variant) {
     restyleProps.variant = componentProps.variant ?? 'defaults';
   }
@@ -27,6 +28,9 @@ const filterRestyleProps = <
     }
   }
 
+  if (restyleProps.variant) {
+    cleanProps.variant = restyleProps.variant;
+  }
   const keys = {cleanProps, restyleProps, serializedRestyleProps};
   return keys;
 };
diff --git a/src/test/createRestyleComponent.test.tsx b/src/test/createRestyleComponent.test.tsx
index 9fe1abce..a4c55463 100644
--- a/src/test/createRestyleComponent.test.tsx
+++ b/src/test/createRestyleComponent.test.tsx
@@ -179,36 +179,6 @@ describe('createRestyleComponent', () => {
       );
     });
 
-    it('passes styles from default variant when no variant prop is defined', () => {
-      const {root} = render(
-        <ThemeProvider theme={themeWithVariant}>
-          <ComponentWithVariant margin="s" />
-        </ThemeProvider>,
-      );
-      expect(root.findByType(View).props.style).toStrictEqual([
-        {
-          alignItems: 'flex-start',
-          backgroundColor: '#FFB6C1',
-          margin: 8,
-        },
-      ]);
-    });
-
-    it('passes styles from the defined variant', () => {
-      const {root} = render(
-        <ThemeProvider theme={themeWithVariant}>
-          <ComponentWithVariant variant="regular" margin="s" />
-        </ThemeProvider>,
-      );
-      expect(root.findByType(View).props.style).toStrictEqual([
-        {
-          alignItems: 'center',
-          backgroundColor: '#E0FFFF',
-          margin: 8,
-        },
-      ]);
-    });
-
     it('uses gap values from the theme', () => {
       const {root} = render(
         <ThemeProvider theme={theme}>
@@ -230,5 +200,54 @@ describe('createRestyleComponent', () => {
         style: [{gap: 8, columnGap: 8, rowGap: 8}],
       });
     });
+
+    describe('variant', () => {
+      it('does not pass variant prop if no variant is created', () => {
+        const {root} = render(
+          <ThemeProvider theme={theme}>
+            <Component opacity={0.5} />
+          </ThemeProvider>,
+        );
+        expect(root.findByType(View).props).toStrictEqual({
+          style: [{opacity: 0.5}],
+        });
+      });
+
+      it('passes styles from default variant when no variant prop is defined', () => {
+        const {root} = render(
+          <ThemeProvider theme={themeWithVariant}>
+            <ComponentWithVariant margin="s" />
+          </ThemeProvider>,
+        );
+        expect(root.findByType(View).props).toStrictEqual({
+          variant: 'defaults',
+          style: [
+            {
+              alignItems: 'flex-start',
+              backgroundColor: '#FFB6C1',
+              margin: 8,
+            },
+          ],
+        });
+      });
+
+      it('passes styles from the defined variant', () => {
+        const {root} = render(
+          <ThemeProvider theme={themeWithVariant}>
+            <ComponentWithVariant variant="regular" margin="s" />
+          </ThemeProvider>,
+        );
+        expect(root.findByType(View).props).toStrictEqual({
+          variant: 'regular',
+          style: [
+            {
+              alignItems: 'center',
+              backgroundColor: '#E0FFFF',
+              margin: 8,
+            },
+          ],
+        });
+      });
+    });
   });
 });