From 8f984044ba26fde8d37b36ad0ed999788459e1c9 Mon Sep 17 00:00:00 2001 From: Drew Miller <49833875+wwdrew@users.noreply.github.com> Date: Thu, 14 Apr 2022 15:03:51 +0100 Subject: [PATCH 1/4] test: add tests to pinpoint variants bug --- src/test/createRestyleComponent.test.tsx | 102 ++++++++++++++++++++++- 1 file changed, 100 insertions(+), 2 deletions(-) diff --git a/src/test/createRestyleComponent.test.tsx b/src/test/createRestyleComponent.test.tsx index c3a4af23..662e2d18 100644 --- a/src/test/createRestyleComponent.test.tsx +++ b/src/test/createRestyleComponent.test.tsx @@ -74,6 +74,10 @@ const Component = createRestyleComponent< const cardVariant = createVariant({ themeKey: 'cardVariants', }); +const cardVariantRenamed = createVariant({ + themeKey: 'cardVariants', + property: 'size', +}); const ComponentWithVariant = createRestyleComponent< BackgroundColorProps & SpacingProps & @@ -82,6 +86,14 @@ const ComponentWithVariant = createRestyleComponent< ViewProps, ThemeWithVariant >([backgroundColor, spacing, opacity, cardVariant]); +const ComponentWithRenamedVariant = createRestyleComponent< + BackgroundColorProps & + SpacingProps & + OpacityProps & + VariantProps & + ViewProps, + ThemeWithVariant +>([backgroundColor, spacing, opacity, cardVariantRenamed]); describe('createRestyleComponent', () => { describe('creates a component that', () => { @@ -169,7 +181,35 @@ describe('createRestyleComponent', () => { ); }); - it('passes styles from default variant when no variant prop is defined', () => { + it('passes styles from default variant', () => { + const {root} = render( + + + , + ); + expect(root.findByType(View).props.style).toStrictEqual([ + { + alignItems: 'flex-start', + backgroundColor: '#FFB6C1', + }, + ]); + }); + + it('passes styles from specified default variant', () => { + const {root} = render( + + + , + ); + expect(root.findByType(View).props.style).toStrictEqual([ + { + alignItems: 'center', + backgroundColor: '#E0FFFF', + }, + ]); + }); + + it('passes styles from default variant with style prop', () => { const {root} = render( @@ -184,7 +224,7 @@ describe('createRestyleComponent', () => { ]); }); - it('passes styles from the defined variant', () => { + it('passes styles from the specified variant with style prop', () => { const {root} = render( @@ -198,5 +238,63 @@ describe('createRestyleComponent', () => { }, ]); }); + + it('passes styles from renamed default variant', () => { + const {root} = render( + + + , + ); + expect(root.findByType(View).props.style).toStrictEqual([ + { + alignItems: 'flex-start', + backgroundColor: '#FFB6C1', + }, + ]); + }); + + it('passes styles from specified renamed variant', () => { + const {root} = render( + + + , + ); + expect(root.findByType(View).props.style).toStrictEqual([ + { + alignItems: 'center', + backgroundColor: '#E0FFFF', + }, + ]); + }); + + it('passes styles from renamed default variant with style prop', () => { + const {root} = render( + + + , + ); + expect(root.findByType(View).props.style).toStrictEqual([ + { + alignItems: 'flex-start', + backgroundColor: '#FFB6C1', + margin: 8, + }, + ]); + }); + + it('passes styles from specified renamed variant with style prop', () => { + const {root} = render( + + + , + ); + expect(root.findByType(View).props.style).toStrictEqual([ + { + alignItems: 'center', + backgroundColor: '#E0FFFF', + margin: 8, + }, + ]); + }); }); }); From 0c0a6ddbb4e7c1ca2392371e26f2fce445ce1f4e Mon Sep 17 00:00:00 2001 From: Drew Miller <49833875+wwdrew@users.noreply.github.com> Date: Thu, 14 Apr 2022 16:17:02 +0100 Subject: [PATCH 2/4] fix: find variant prop to extract variant prop name --- src/composeRestyleFunctions.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/composeRestyleFunctions.ts b/src/composeRestyleFunctions.ts index 6b3f817c..15cc8098 100644 --- a/src/composeRestyleFunctions.ts +++ b/src/composeRestyleFunctions.ts @@ -23,7 +23,10 @@ const composeRestyleFunctions = < }, [], ); - + // @ts-expect-error + const variantProp = flattenedRestyleFunctions.find( + item => item.variant === true, + ); const properties = flattenedRestyleFunctions.map(styleFunc => { return styleFunc.property; }); From 7434832533ce3561644fb68b5e687da6b6645840 Mon Sep 17 00:00:00 2001 From: Drew Miller <49833875+wwdrew@users.noreply.github.com> Date: Wed, 20 Apr 2022 19:52:49 +0100 Subject: [PATCH 3/4] pass variant prop name through --- src/composeRestyleFunctions.ts | 8 ++++---- src/createRestyleComponent.tsx | 1 + src/hooks/useRestyle.ts | 8 ++++++-- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/composeRestyleFunctions.ts b/src/composeRestyleFunctions.ts index 15cc8098..da159869 100644 --- a/src/composeRestyleFunctions.ts +++ b/src/composeRestyleFunctions.ts @@ -23,13 +23,12 @@ const composeRestyleFunctions = < }, [], ); - // @ts-expect-error const variantProp = flattenedRestyleFunctions.find( item => item.variant === true, ); - const properties = flattenedRestyleFunctions.map(styleFunc => { - return styleFunc.property; - }); + const properties = flattenedRestyleFunctions.map( + styleFunc => styleFunc.property, + ); const propertiesMap = properties.reduce( (acc, prop) => ({...acc, [prop]: true}), {} as Record, @@ -65,6 +64,7 @@ const composeRestyleFunctions = < buildStyle, properties, propertiesMap, + variantProp: variantProp ? variantProp.property : 'variant', }; }; diff --git a/src/createRestyleComponent.tsx b/src/createRestyleComponent.tsx index 5f4daa1e..d5a321d2 100644 --- a/src/createRestyleComponent.tsx +++ b/src/createRestyleComponent.tsx @@ -17,6 +17,7 @@ const createRestyleComponent = < const composedRestyleFunction = composeRestyleFunctions(restyleFunctions); const RestyleComponent = React.forwardRef((props: Props, ref) => { + // @ts-expect-error const passedProps = useRestyle(composedRestyleFunction, props); return ; }); diff --git a/src/hooks/useRestyle.ts b/src/hooks/useRestyle.ts index 420d1304..d5244604 100644 --- a/src/hooks/useRestyle.ts +++ b/src/hooks/useRestyle.ts @@ -13,10 +13,12 @@ const filterRestyleProps = < >( componentProps: TProps, omitPropertiesMap: Record, + variant: string, ) => { - const props = omitPropertiesMap.variant - ? {variant: 'defaults', ...componentProps} + const props = omitPropertiesMap[variant] + ? {[variant]: 'defaults', ...componentProps} : componentProps; + return getKeys(props).reduce( ({cleanProps, restyleProps, serializedRestyleProps}, key) => { if (omitPropertiesMap[key as keyof TProps]) { @@ -59,6 +61,7 @@ const useRestyle = < ) => RNStyle; properties: (keyof TProps)[]; propertiesMap: Record; + variantProp: string; }, props: TProps, ) => { @@ -68,6 +71,7 @@ const useRestyle = < const {cleanProps, restyleProps, serializedRestyleProps} = filterRestyleProps( props, composedRestyleFunction.propertiesMap, + composedRestyleFunction.variantProp, ); const calculatedStyle = useMemo(() => { From 5dc70b57ddf0b3861e2b210c95b38e2feadd7d46 Mon Sep 17 00:00:00 2001 From: Drew Miller <49833875+wwdrew@users.noreply.github.com> Date: Fri, 29 Apr 2022 09:14:56 +0100 Subject: [PATCH 4/4] fix types --- src/createRestyleComponent.tsx | 1 - src/hooks/useRestyle.ts | 14 ++++++++++---- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/createRestyleComponent.tsx b/src/createRestyleComponent.tsx index d5a321d2..5f4daa1e 100644 --- a/src/createRestyleComponent.tsx +++ b/src/createRestyleComponent.tsx @@ -17,7 +17,6 @@ const createRestyleComponent = < const composedRestyleFunction = composeRestyleFunctions(restyleFunctions); const RestyleComponent = React.forwardRef((props: Props, ref) => { - // @ts-expect-error const passedProps = useRestyle(composedRestyleFunction, props); return ; }); diff --git a/src/hooks/useRestyle.ts b/src/hooks/useRestyle.ts index d5244604..b453ba06 100644 --- a/src/hooks/useRestyle.ts +++ b/src/hooks/useRestyle.ts @@ -1,7 +1,12 @@ import {useMemo} from 'react'; import {StyleProp} from 'react-native'; -import {BaseTheme, RNStyle, Dimensions} from '../types'; +import { + BaseTheme, + RNStyle, + Dimensions, + RestyleFunctionContainer, +} from '../types'; import {getKeys} from '../typeHelpers'; import useDimensions from './useDimensions'; @@ -9,11 +14,12 @@ import useTheme from './useTheme'; const filterRestyleProps = < TRestyleProps, - TProps extends Record & TRestyleProps + TProps extends Record & TRestyleProps, + Theme extends BaseTheme >( componentProps: TProps, omitPropertiesMap: Record, - variant: string, + variant: RestyleFunctionContainer['property'], ) => { const props = omitPropertiesMap[variant] ? {[variant]: 'defaults', ...componentProps} @@ -61,7 +67,7 @@ const useRestyle = < ) => RNStyle; properties: (keyof TProps)[]; propertiesMap: Record; - variantProp: string; + variantProp: RestyleFunctionContainer['property']; }, props: TProps, ) => {