Separate shorthand props intro different functions

Shopify · Jul 22, 2020 · 2eb2b6e · 2eb2b6e
1 parent ea3cad4
commit 2eb2b6e
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 32 deletions.
diff --git a/src/createBox.ts b/src/createBox.ts
@@ -5,6 +5,7 @@ import createRestyleComponent from './createRestyleComponent';
 import {BaseTheme} from './types';
 import {
   backgroundColor,
+  backgroundColorShorthand,
   opacity,
   layout,
   spacing,
@@ -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);
 };

diff --git a/src/createText.ts b/src/createText.ts
@@ -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);
 };

diff --git a/src/restyleFunctions.ts b/src/restyleFunctions.ts
@@ -19,6 +19,9 @@ const spacingProperties = {
   paddingLeft: true,
   paddingHorizontal: true,
   paddingVertical: true,
+};
+
+const spacingPropertiesShorthand = {
   m: 'margin',
   mt: 'marginTop',
   mr: 'marginRight',
@@ -114,11 +117,6 @@ const textShadowProperties = {
   textShadowRadius: true,
 };
 
-const backgroundColorProperties = {
-  backgroundColor: true,
-  bg: 'backgroundColor',
-};
-
 export const color = createRestyleFunction({
   property: 'color',
   themeKey: 'colors',
@@ -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,
@@ -227,8 +233,10 @@ export const textShadow = [
 export const all = [
   color,
   opacity,
-  ...backgroundColor,
+  backgroundColor,
+  backgroundColorShorthand,
   ...spacing,
+  ...spacingShorthand,
   ...typography,
   ...layout,
   ...position,
@@ -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
   >;