pass along variant name to restyled component

Shopify · Jun 5, 2024 · 2c477af · 2c477af
1 parent 5fbb3f4
commit 2c477af
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 42 deletions.
diff --git a/src/hooks/useRestyle.ts b/src/hooks/useRestyle.ts
@@ -1,19 +1,19 @@
-import {useMemo} from 'react';
-import {StyleProp, useWindowDimensions} from 'react-native';
+import { useMemo } from 'react';
+import { StyleProp, useWindowDimensions } from 'react-native';
 
-import {BaseTheme, RNStyle, Dimensions} from '../types';
+import { BaseTheme, RNStyle, Dimensions } from '../types';
 
 import useTheme from './useTheme';
 
 const filterRestyleProps = <
   TRestyleProps,
-  TProps extends {[key: string]: unknown} & TRestyleProps,
+  TProps extends { [key: string]: unknown } & TRestyleProps,
 >(
   componentProps: TProps,
-  omitPropertiesMap: {[key in keyof TProps]: boolean},
+  omitPropertiesMap: { [key in keyof TProps]: boolean },
 ) => {
   const cleanProps: TProps = {} as TProps;
-  const restyleProps: TProps & {variant?: unknown} = {} as TProps;
+  const restyleProps: TProps & { variant?: unknown } = {} as TProps;
   let serializedRestyleProps = '';
   if (omitPropertiesMap.variant) {
     restyleProps.variant = componentProps.variant ?? 'defaults';
@@ -27,14 +27,14 @@ const filterRestyleProps = <
     }
   }
 
-  const keys = {cleanProps, restyleProps, serializedRestyleProps};
+  const keys = { cleanProps, restyleProps, serializedRestyleProps };
   return keys;
 };
 
 const useRestyle = <
   Theme extends BaseTheme,
-  TRestyleProps extends {[key: string]: any},
-  TProps extends TRestyleProps & {style?: StyleProp<RNStyle>},
+  TRestyleProps extends { [key: string]: any },
+  TProps extends TRestyleProps & { style?: StyleProp<RNStyle> },
 >(
   composedRestyleFunction: {
     buildStyle: <TInputProps extends TProps>(
@@ -48,7 +48,7 @@ const useRestyle = <
       },
     ) => RNStyle;
     properties: (keyof TProps)[];
-    propertiesMap: {[key in keyof TProps]: boolean};
+    propertiesMap: { [key in keyof TProps]: boolean };
   },
   props: TProps,
 ) => {
@@ -59,10 +59,10 @@ const useRestyle = <
   // as this hook is called extremely often and incurs some performance hit.
   const dimensions = theme.breakpoints
     ? // eslint-disable-next-line react-hooks/rules-of-hooks
-      useWindowDimensions()
+    useWindowDimensions()
     : null;
 
-  const {cleanProps, restyleProps, serializedRestyleProps} = filterRestyleProps(
+  const { cleanProps, restyleProps, serializedRestyleProps } = filterRestyleProps(
     props,
     composedRestyleFunction.propertiesMap,
   );
@@ -93,6 +93,9 @@ const useRestyle = <
   ]);
 
   cleanProps.style = calculatedStyle;
+  if (restyleProps.variant) {
+    (cleanProps as TProps & { variant?: unknown }).variant = restyleProps.variant;
+  }
   return cleanProps;
 };
 

diff --git 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,
+            },
+          ],
+        });
+      });
+    });
   });
 });