Fix/custom modifiers typings (#750)

ethanshar · web-flow · commit a75afd3f1413 · 2020-04-21T20:43:04.000+03:00
* Fix issue with custom boolean modifiers throwing errors

* update generated types
diff --git a/generatedTypes/commons/asBaseComponent.d.ts b/generatedTypes/commons/asBaseComponent.d.ts
@@ -1,7 +1,10 @@
 import React from 'react';
 import * as Modifiers from './modifiers';
 export interface BaseComponentInjectedProps {
+    /**
+     * All generated styles from the modifiers props
+     */
     modifiers: ReturnType<typeof Modifiers.generateModifiersStyle>;
 }
-declare function asBaseComponent<PROPS>(WrappedComponent: React.ComponentType<PROPS>): React.ComponentType<Omit<PROPS, keyof BaseComponentInjectedProps>>;
+declare function asBaseComponent<PROPS>(WrappedComponent: React.ComponentType<any>): React.ComponentType<PROPS>;
 export default asBaseComponent;
diff --git a/generatedTypes/commons/forwardRef.d.ts b/generatedTypes/commons/forwardRef.d.ts
@@ -1,5 +1,8 @@
 import React from 'react';
 export interface ForwardRefInjectedProps {
+    /**
+     * The forwarded ref of the containing element
+     */
     forwardedRef: any;
 }
-export default function forwardRef<P>(WrappedComponent: React.ComponentType<P>): React.ComponentType<Omit<P, keyof ForwardRefInjectedProps>>;
+export default function forwardRef(WrappedComponent: React.ComponentType<any>): React.ComponentType<any>;
diff --git a/generatedTypes/commons/modifiers.d.ts b/generatedTypes/commons/modifiers.d.ts
@@ -60,8 +60,11 @@ export declare type TypographyLiterals = keyof typeof TypographyPresets;
 export declare type BorderRadiusLiterals = keyof typeof BorderRadiusesLiterals;
 export declare type AlignmentLiterals = 'row' | 'spread' | 'center' | 'centerH' | 'centerV' | 'left' | 'right' | 'top' | 'bottom';
 export declare type Modifier<T extends string> = Partial<Record<T, boolean>>;
-export declare type TypographyModifiers = Modifier<TypographyLiterals>;
-export declare type ColorsModifiers = Modifier<ColorLiterals>;
+export declare type CustomModifier = {
+    [key: string]: any;
+};
+export declare type TypographyModifiers = Modifier<TypographyLiterals> & CustomModifier;
+export declare type ColorsModifiers = Modifier<ColorLiterals> & CustomModifier;
 export declare type BackgroundColorModifier = Modifier<'bg'>;
 export declare type AlignmentModifiers = Modifier<AlignmentLiterals>;
 export declare type PaddingModifiers = Modifier<PaddingLiterals>;
diff --git a/generatedTypes/commons/new.d.ts b/generatedTypes/commons/new.d.ts
@@ -1,5 +1,4 @@
 export { default as UIComponent } from './UIComponent';
-export { default as asBaseComponent } from './asBaseComponent';
-export { BaseComponentInjectedProps } from './asBaseComponent';
-export { default as forwardRef } from './forwardRef';
-export { ForwardRefInjectedProps } from './forwardRef';
+export { default as asBaseComponent, BaseComponentInjectedProps } from './asBaseComponent';
+export { default as forwardRef, ForwardRefInjectedProps } from './forwardRef';
+export { ContainerModifiers, MarginModifiers, TypographyModifiers, ColorsModifiers } from './modifiers';
diff --git a/generatedTypes/components/text/index.d.ts b/generatedTypes/components/text/index.d.ts
@@ -1,8 +1,7 @@
 import React, { PureComponent } from 'react';
 import { TextProps, TextStyle } from 'react-native';
-import { BaseComponentInjectedProps, ForwardRefInjectedProps } from '../../commons/new';
-import { MarginModifiers, TypographyModifiers, ColorsModifiers } from '../../commons/modifiers';
-interface TextPropTypes extends TextProps {
+import { BaseComponentInjectedProps, ForwardRefInjectedProps, MarginModifiers, TypographyModifiers, ColorsModifiers } from '../../commons/new';
+interface TextPropTypes extends TextProps, TypographyModifiers, ColorsModifiers, MarginModifiers {
     /**
      * color of the text
      */
@@ -30,7 +29,7 @@ interface TextPropTypes extends TextProps {
     ref?: any;
     textAlign?: string;
 }
-declare type PropsTypes = BaseComponentInjectedProps & TextPropTypes & ForwardRefInjectedProps & MarginModifiers & TypographyModifiers & ColorsModifiers;
+declare type PropsTypes = BaseComponentInjectedProps & ForwardRefInjectedProps & TextPropTypes;
 /**
  * @description: A wrapper for Text component with extra functionality like modifiers support
  * @extends: Text
@@ -45,5 +44,5 @@ declare class Text extends PureComponent<PropsTypes> {
     render(): JSX.Element;
 }
 export { Text };
-declare const _default: React.ComponentType<Pick<Pick<PropsTypes, "black" | "white" | "dark10" | "dark20" | "dark30" | "dark40" | "dark50" | "dark60" | "dark70" | "dark80" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80" | "margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV" | "text10" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text20B" | "text30" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text60B" | "text65" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL" | "center" | "style" | "testID" | "ref" | "modifiers" | "color" | "uppercase" | "highlightString" | "highlightStyle" | "animated" | "textAlign" | "allowFontScaling" | "ellipsizeMode" | "lineBreakMode" | "numberOfLines" | "onLayout" | "onPress" | "onLongPress" | "nativeID" | "maxFontSizeMultiplier" | "adjustsFontSizeToFit" | "minimumFontScale" | "suppressHighlighting" | "selectable" | "selectionColor" | "textBreakStrategy" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityStates" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors">, "black" | "white" | "dark10" | "dark20" | "dark30" | "dark40" | "dark50" | "dark60" | "dark70" | "dark80" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80" | "margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV" | "text10" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text20B" | "text30" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text60B" | "text65" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL" | "center" | "style" | "testID" | "ref" | "color" | "uppercase" | "highlightString" | "highlightStyle" | "animated" | "textAlign" | "allowFontScaling" | "ellipsizeMode" | "lineBreakMode" | "numberOfLines" | "onLayout" | "onPress" | "onLongPress" | "nativeID" | "maxFontSizeMultiplier" | "adjustsFontSizeToFit" | "minimumFontScale" | "suppressHighlighting" | "selectable" | "selectionColor" | "textBreakStrategy" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityStates" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors">>;
+declare const _default: React.ComponentType<TextPropTypes>;
 export default _default;
diff --git a/generatedTypes/components/view/index.d.ts b/generatedTypes/components/view/index.d.ts
@@ -1,8 +1,7 @@
 import React from 'react';
 import { ViewProps } from 'react-native';
-import { BaseComponentInjectedProps, ForwardRefInjectedProps } from '../../commons/new';
-import { ContainerModifiers } from '../../commons/modifiers';
-interface ViewPropTypes extends ViewProps {
+import { ContainerModifiers } from '../../commons/new';
+interface ViewPropTypes extends ViewProps, ContainerModifiers {
     /**
      * If true, will render as SafeAreaView
      */
@@ -24,6 +23,5 @@ interface ViewPropTypes extends ViewProps {
      */
     height?: string | number;
 }
-declare type PropsTypes = BaseComponentInjectedProps & ViewPropTypes & ForwardRefInjectedProps & ContainerModifiers;
-declare const _default: React.ComponentType<Pick<Pick<PropsTypes, "br0" | "br10" | "br20" | "br30" | "br40" | "br50" | "br60" | "br100" | "padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV" | "margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV" | "flex" | "flexG" | "flexS" | "bg" | "row" | "spread" | "center" | "centerH" | "centerV" | "left" | "right" | "top" | "bottom" | "style" | "testID" | "modifiers" | "animated" | "onLayout" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityStates" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "useSafeArea" | "inaccessible" | "width" | "height" | "hitSlop" | "pointerEvents" | "removeClippedSubviews" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture">, "br0" | "br10" | "br20" | "br30" | "br40" | "br50" | "br60" | "br100" | "padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV" | "margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV" | "flex" | "flexG" | "flexS" | "bg" | "row" | "spread" | "center" | "centerH" | "centerV" | "left" | "right" | "top" | "bottom" | "style" | "testID" | "animated" | "onLayout" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityStates" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "useSafeArea" | "inaccessible" | "width" | "height" | "hitSlop" | "pointerEvents" | "removeClippedSubviews" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture">>;
+declare const _default: React.ComponentType<ViewPropTypes>;
 export default _default;
diff --git a/src/commons/asBaseComponent.tsx b/src/commons/asBaseComponent.tsx
@@ -8,10 +8,13 @@ import forwardRef from './forwardRef';
 import UIComponent from './UIComponent';
 
 export interface BaseComponentInjectedProps {
+  /**
+   * All generated styles from the modifiers props
+   */
   modifiers: ReturnType<typeof Modifiers.generateModifiersStyle>;
 }
 
-function asBaseComponent<PROPS>(WrappedComponent: React.ComponentType<PROPS>): React.ComponentType<Omit<PROPS, keyof BaseComponentInjectedProps>> {
+function asBaseComponent<PROPS>(WrappedComponent: React.ComponentType<any>): React.ComponentType<PROPS> {
   class BaseComponent extends UIComponent {
     state = Modifiers.generateModifiersStyle(undefined, BaseComponent.getThemeProps(this.props, this.context));
     static displayName: string | undefined;
@@ -34,6 +37,8 @@ function asBaseComponent<PROPS>(WrappedComponent: React.ComponentType<PROPS>): R
 
     render() {
       const themeProps = BaseComponent.getThemeProps(this.props, this.context);
+      // TODO: omit original modifiers props (left, right, flex, etc..)
+      // Because they throws an error when being passed to RNView on Android
       const {forwardedRef, ...others} = themeProps;
       return <WrappedComponent /* {...this.props} */ {...others} modifiers={this.state} ref={forwardedRef}/>;
     }
diff --git a/src/commons/forwardRef.tsx b/src/commons/forwardRef.tsx
@@ -3,11 +3,14 @@ import React from 'react';
 import hoistStatics from 'hoist-non-react-statics';
 
 export interface ForwardRefInjectedProps {
+  /**
+   * The forwarded ref of the containing element
+   */
   forwardedRef: any;
 }
 
-export default function forwardRef<P>(WrappedComponent: React.ComponentType<P>): React.ComponentType<Omit<P, keyof ForwardRefInjectedProps>> {
-  function forwardRef(props: P, ref: any) {
+export default function forwardRef(WrappedComponent: React.ComponentType<any>): React.ComponentType<any> {
+  function forwardRef(props: any, ref: any) {
     return <WrappedComponent {...props} forwardedRef={ref}/>;
   }
 
diff --git a/src/commons/modifiers.ts b/src/commons/modifiers.ts
@@ -74,9 +74,10 @@ export type AlignmentLiterals =
 | 'left' | 'right' | 'top' | 'bottom';
 
 export type Modifier<T extends string> = Partial<Record<T, boolean>>
+export type CustomModifier = {[key: string]: any};
 
-export type TypographyModifiers = Modifier<TypographyLiterals>;
-export type ColorsModifiers = Modifier<ColorLiterals>;
+export type TypographyModifiers = Modifier<TypographyLiterals> & CustomModifier;
+export type ColorsModifiers = Modifier<ColorLiterals> & CustomModifier;
 export type BackgroundColorModifier = Modifier<'bg'>;
 export type AlignmentModifiers = Modifier<AlignmentLiterals>;
 export type PaddingModifiers = Modifier<PaddingLiterals>;
diff --git a/src/commons/new.ts b/src/commons/new.ts
@@ -1,7 +1,5 @@
 // TODO: this file should replace commons/index.js
-
 export {default as UIComponent} from './UIComponent';
-export {default as asBaseComponent} from './asBaseComponent';
-export {BaseComponentInjectedProps} from './asBaseComponent';
-export {default as forwardRef} from './forwardRef';
-export {ForwardRefInjectedProps} from './forwardRef';
+export {default as asBaseComponent, BaseComponentInjectedProps} from './asBaseComponent';
+export {default as forwardRef, ForwardRefInjectedProps} from './forwardRef';
+export {ContainerModifiers, MarginModifiers, TypographyModifiers, ColorsModifiers} from './modifiers';
diff --git a/src/components/text/index.tsx b/src/components/text/index.tsx
@@ -1,11 +1,19 @@
 import React, {PureComponent} from 'react';
 import {Text as RNText, StyleSheet, TextProps, TextStyle, Animated} from 'react-native';
-import {asBaseComponent, forwardRef, BaseComponentInjectedProps, ForwardRefInjectedProps} from '../../commons/new';
+import {
+  asBaseComponent,
+  forwardRef,
+  BaseComponentInjectedProps,
+  ForwardRefInjectedProps,
+  MarginModifiers,
+  TypographyModifiers,
+  ColorsModifiers
+} from '../../commons/new';
 import {Colors} from '../../style';
 import _ from 'lodash';
-import {MarginModifiers, TypographyModifiers, ColorsModifiers} from '../../commons/modifiers';
 
-interface TextPropTypes extends TextProps {
+
+interface TextPropTypes extends TextProps, TypographyModifiers, ColorsModifiers, MarginModifiers {
   /**
    * color of the text
    */
@@ -35,13 +43,7 @@ interface TextPropTypes extends TextProps {
   textAlign?: string;
 }
 
-type PropsTypes =
-  & BaseComponentInjectedProps
-  & TextPropTypes
-  & ForwardRefInjectedProps
-  & MarginModifiers
-  & TypographyModifiers
-  & ColorsModifiers;
+type PropsTypes = BaseComponentInjectedProps & ForwardRefInjectedProps & TextPropTypes;
 
 /**
  * @description: A wrapper for Text component with extra functionality like modifiers support
@@ -88,7 +90,7 @@ class Text extends PureComponent<PropsTypes> {
 
     if (!_.isEmpty(highlightString)) {
       if (_.isArray(children)) {
-        return _.map(children, child => {
+        return _.map(children, (child) => {
           return this.renderText(child);
         });
       }
@@ -155,4 +157,4 @@ const styles = StyleSheet.create({
 
 export {Text}; // For tests
 
-export default asBaseComponent(forwardRef(Text));
+export default asBaseComponent<TextPropTypes>(forwardRef(Text));
diff --git a/src/components/view/index.tsx b/src/components/view/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -3,11 +3,14 @@ import React from 'react';`
`3`	`3`	`import hoistStatics from 'hoist-non-react-statics';`
`4`	`4`
`5`	`5`	`export interface ForwardRefInjectedProps {`
	`6`	`+ /**`
	`7`	`+ * The forwarded ref of the containing element`
	`8`	`+ */`
`6`	`9`	`forwardedRef: any;`
`7`	`10`	`}`
`8`	`11`
`9`		`-export default function forwardRef<P>(WrappedComponent: React.ComponentType<P>): React.ComponentType<Omit<P, keyof ForwardRefInjectedProps>> {`
`10`		`- function forwardRef(props: P, ref: any) {`
	`12`	`+export default function forwardRef(WrappedComponent: React.ComponentType<any>): React.ComponentType<any> {`
	`13`	`+ function forwardRef(props: any, ref: any) {`
`11`	`14`	`return <WrappedComponent {...props} forwardedRef={ref}/>;`
`12`	`15`	`}`
`13`	`16`