Skip to content

Commit

Permalink
Separate shorthand props intro different functions
Browse files Browse the repository at this point in the history
  • Loading branch information
META-DREAMER committed Jul 22, 2020
1 parent ea3cad4 commit 2eb2b6e
Show file tree
Hide file tree
Showing 3 changed files with 71 additions and 32 deletions.
22 changes: 18 additions & 4 deletions src/createBox.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import createRestyleComponent from './createRestyleComponent';
import {BaseTheme} from './types';
import {
backgroundColor,
backgroundColorShorthand,
opacity,
layout,
spacing,
Expand All @@ -20,36 +21,49 @@ import {
PositionProps,
visible,
VisibleProps,
SpacingShorthandProps,
BackgroundColorShorthandProps,
spacingShorthand,
} from './restyleFunctions';

export type BoxProps<Theme extends BaseTheme> = BackgroundColorProps<Theme> &
export type BoxProps<
Theme extends BaseTheme,
EnableShorthand extends boolean = true
> = BackgroundColorProps<Theme> &
OpacityProps<Theme> &
VisibleProps<Theme> &
LayoutProps<Theme> &
SpacingProps<Theme> &
BorderProps<Theme> &
ShadowProps<Theme> &
PositionProps<Theme>;
PositionProps<Theme> &
(EnableShorthand extends true
? SpacingShorthandProps<Theme> & BackgroundColorShorthandProps<Theme>
: never);

export const boxRestyleFunctions = [
backgroundColor,
backgroundColorShorthand,
opacity,
visible,
layout,
spacing,
spacingShorthand,
border,
shadow,
position,
];

const createBox = <
Theme extends BaseTheme,
Props = React.ComponentProps<typeof View> & {children?: React.ReactNode}
Props = React.ComponentProps<typeof View> & {children?: React.ReactNode},
EnableShorthand extends boolean = true
>(
BaseComponent: React.ComponentType<any> = View,
) => {
return createRestyleComponent<
BoxProps<Theme> & Omit<Props, keyof BoxProps<Theme>>,
BoxProps<Theme, EnableShorthand> &
Omit<Props, keyof BoxProps<Theme, EnableShorthand>>,
Theme
>(boxRestyleFunctions, BaseComponent);
};
Expand Down
17 changes: 13 additions & 4 deletions src/createText.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,35 +16,44 @@ import {
TextShadowProps,
TypographyProps,
VisibleProps,
spacingShorthand,
SpacingShorthandProps,
} from './restyleFunctions';
import createVariant, {VariantProps} from './createVariant';

export type TextProps<Theme extends BaseTheme> = ColorProps<Theme> &
export type TextProps<
Theme extends BaseTheme,
EnableShorthand extends boolean = true
> = ColorProps<Theme> &
OpacityProps<Theme> &
VisibleProps<Theme> &
TypographyProps<Theme> &
SpacingProps<Theme> &
TextShadowProps<Theme> &
VariantProps<Theme, 'textVariants'>;
VariantProps<Theme, 'textVariants'> &
(EnableShorthand extends true ? SpacingShorthandProps<Theme> : never);

export const textRestyleFunctions = [
color,
opacity,
visible,
typography,
spacing,
spacingShorthand,
textShadow,
createVariant({themeKey: 'textVariants'}),
];

const createText = <
Theme extends BaseTheme,
Props = React.ComponentProps<typeof Text> & {children?: React.ReactNode}
Props = React.ComponentProps<typeof Text> & {children?: React.ReactNode},
EnableShorthand extends boolean = true
>(
BaseComponent: React.ComponentType<any> = Text,
) => {
return createRestyleComponent<
TextProps<Theme> & Omit<Props, keyof TextProps<Theme>>,
TextProps<Theme, EnableShorthand> &
Omit<Props, keyof TextProps<Theme, EnableShorthand>>,
Theme
>(textRestyleFunctions, BaseComponent);
};
Expand Down
64 changes: 40 additions & 24 deletions src/restyleFunctions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ const spacingProperties = {
paddingLeft: true,
paddingHorizontal: true,
paddingVertical: true,
};

const spacingPropertiesShorthand = {
m: 'margin',
mt: 'marginTop',
mr: 'marginRight',
Expand Down Expand Up @@ -114,11 +117,6 @@ const textShadowProperties = {
textShadowRadius: true,
};

const backgroundColorProperties = {
backgroundColor: true,
bg: 'backgroundColor',
};

export const color = createRestyleFunction({
property: 'color',
themeKey: 'colors',
Expand All @@ -134,28 +132,36 @@ export const visible = createRestyleFunction({
transform: ({value}) => (value === false ? 'none' : 'flex'),
});

export const backgroundColor = getKeys(backgroundColorProperties).map(
property => {
const alias = backgroundColorProperties[property];
export const backgroundColor = createRestyleFunction({
property: 'backgroundColor',
themeKey: 'colors',
});

return createRestyleFunction({
property,
styleProperty: typeof alias === 'string' ? alias : undefined,
themeKey: 'colors',
});
},
);
export const backgroundColorShorthand = createRestyleFunction({
property: 'bg',
styleProperty: 'backgroundColor',
themeKey: 'colors',
});

export const spacing = getKeys(spacingProperties).map(property => {
const alias = spacingProperties[property];

return createRestyleFunction({
property,
styleProperty: typeof alias === 'string' ? alias : undefined,
themeKey: 'spacing',
});
});

export const spacingShorthand = getKeys(spacingPropertiesShorthand).map(
property => {
const styleProperty = spacingPropertiesShorthand[property];

return createRestyleFunction({
property,
styleProperty,
themeKey: 'spacing',
});
},
);

export const typography = getKeys(typographyProperties).map(property => {
return createRestyleFunction({
property,
Expand Down Expand Up @@ -227,8 +233,10 @@ export const textShadow = [
export const all = [
color,
opacity,
...backgroundColor,
backgroundColor,
backgroundColorShorthand,
...spacing,
...spacingShorthand,
...typography,
...layout,
...position,
Expand All @@ -248,15 +256,23 @@ export interface VisibleProps<Theme extends BaseTheme> {
visible?: ResponsiveValue<boolean, Theme>;
}

export type BackgroundColorProps<Theme extends BaseTheme> = {
[Key in keyof typeof backgroundColorProperties]?: ResponsiveValue<
keyof Theme['colors'],
export interface BackgroundColorProps<Theme extends BaseTheme> {
backgroundColor?: ResponsiveValue<keyof Theme['colors'], Theme>;
}

export interface BackgroundColorShorthandProps<Theme extends BaseTheme> {
bg?: ResponsiveValue<keyof Theme['colors'], Theme>;
}

export type SpacingProps<Theme extends BaseTheme> = {
[Key in keyof typeof spacingProperties]?: ResponsiveValue<
keyof Theme['spacing'],
Theme
>;
};

export type SpacingProps<Theme extends BaseTheme> = {
[Key in keyof typeof spacingProperties]?: ResponsiveValue<
export type SpacingShorthandProps<Theme extends BaseTheme> = {
[Key in keyof typeof spacingPropertiesShorthand]?: ResponsiveValue<
keyof Theme['spacing'],
Theme
>;
Expand Down

0 comments on commit 2eb2b6e

Please sign in to comment.