Skip to content

Commit

Permalink
pass along variant name to restyled component
Browse files Browse the repository at this point in the history
  • Loading branch information
dominic authored and linddominic committed Jun 5, 2024
1 parent 5fbb3f4 commit 133116f
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 33 deletions.
10 changes: 7 additions & 3 deletions src/hooks/useRestyle.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
}
Expand All @@ -27,6 +28,9 @@ const filterRestyleProps = <
}
}

if (restyleProps.variant) {
cleanProps.variant = restyleProps.variant;
}
const keys = {cleanProps, restyleProps, serializedRestyleProps};
return keys;
};
Expand Down
79 changes: 49 additions & 30 deletions src/test/createRestyleComponent.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand All @@ -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,
},
],
});
});
});
});
});

0 comments on commit 133116f

Please sign in to comment.