Fix some types, add exports for components Props types (#833)

* Fix return type for asBaseComponent

* Add getThemeProps and extractAccessibilityProps for PureBaseComponent

* Export more types of component props

Author: ykravv

src/commons/asBaseComponent.tsx

@@ -14,7 +14,7 @@ export interface BaseComponentInjectedProps {
   modifiers: ReturnType<typeof Modifiers.generateModifiersStyle>;
 }
 
-function asBaseComponent<PROPS, STATICS = {}>(WrappedComponent: React.ComponentType<any>): React.ComponentType<PROPS> & STATICS {
+function asBaseComponent<PROPS, STATICS = {}>(WrappedComponent: React.ComponentType<any>): React.ComponentClass<PROPS> & STATICS {
   class BaseComponent extends UIComponent {
     state = Modifiers.generateModifiersStyle(undefined, BaseComponent.getThemeProps(this.props, this.context));
     static displayName: string | undefined;

src/components/checkbox/index.tsx

@@ -12,7 +12,7 @@ const DEFAULT_COLOR = Colors.blue30;
 const DEFAULT_ICON_COLOR = Colors.white;
 const DEFAULT_DISABLED_COLOR = Colors.dark70;
 
-interface CheckboxProps {
+export interface CheckboxPropTypes extends TouchableOpacityProps {
   /**
    * The value of the Checkbox. If true the switch will be turned on. Default value is false.
    */
@@ -51,20 +51,18 @@ interface CheckboxProps {
   style?: StyleProp<ViewStyle>
 }
 
-type CheckboxState = {
+interface CheckboxState {
   isChecked: Animated.Value;
 };
 
-type Props = CheckboxProps & TouchableOpacityProps;
-
 /**
  * @description: Checkbox component for toggling boolean value related to some context
  * @extends: TouchableOpacity
  * @extendslink: docs/TouchableOpacity
  * @gif: https://media.giphy.com/media/xULW8j5WzsuPytqklq/giphy.gif
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CheckboxScreen.tsx
  */
-class Checkbox extends Component<Props, CheckboxState> {
+class Checkbox extends Component<CheckboxPropTypes, CheckboxState> {
   static displayName = 'Checkbox';
 
   styles: {
@@ -84,7 +82,7 @@ class Checkbox extends Component<Props, CheckboxState> {
     ];
   };
 
-  constructor(props: Props) {
+  constructor(props: CheckboxPropTypes) {
     super(props);
 
     this.state = {
@@ -106,7 +104,7 @@ class Checkbox extends Component<Props, CheckboxState> {
     };
   }
 
-  componentDidUpdate(prevProps: Props) {
+  componentDidUpdate(prevProps: CheckboxPropTypes) {
     const {value} = this.props;
     if (prevProps.value !== value) {
       this.animateCheckbox(value);
@@ -125,7 +123,7 @@ class Checkbox extends Component<Props, CheckboxState> {
     };
   }
 
-  animateCheckbox(value: CheckboxProps['value']) {
+  animateCheckbox(value: CheckboxPropTypes['value']) {
     const {isChecked} = this.state;
 
     Animated.timing(isChecked, {
@@ -189,7 +187,7 @@ class Checkbox extends Component<Props, CheckboxState> {
   }
 }
 
-function createStyles(props: Props) {
+function createStyles(props: CheckboxPropTypes) {
   const {color = DEFAULT_COLOR, iconColor = DEFAULT_ICON_COLOR, size = DEFAULT_SIZE, borderRadius} = props;
 
   return StyleSheet.create({
@@ -209,4 +207,4 @@ function createStyles(props: Props) {
   });
 }
 
-export default asBaseComponent<Props>(Checkbox);
+export default asBaseComponent<CheckboxPropTypes>(Checkbox);

src/components/radioButton/RadioButton.tsx

@@ -16,14 +16,14 @@ import {asBaseComponent, forwardRef, BaseComponentInjectedProps, ForwardRefInjec
 import TouchableOpacity from '../touchableOpacity';
 import View from '../view';
 import Text from '../text';
-const Image = require('../image').default; // TODO: change this once Image is written in typescript
+import Image from '../image';
 import asRadioGroupChild from './asRadioGroupChild';
 import {RadioGroupContextPropTypes} from './RadioGroupContext';
 
 const DEFAULT_SIZE = 24;
 const DEFAULT_COLOR = Colors.blue30;
 
-interface RadioButtonPropTypes {
+export type RadioButtonPropTypes = RadioGroupContextPropTypes & BaseComponentInjectedProps & ForwardRefInjectedProps & ViewProps & {
   /**
    * The identifier value of the radio button. must be different than other RadioButtons in the same group
    */
@@ -79,16 +79,10 @@ interface RadioButtonState {
   scaleAnimationValue: Animated.Value;
 }
 
-type Props = RadioButtonPropTypes &
-  RadioGroupContextPropTypes &
-  BaseComponentInjectedProps &
-  ForwardRefInjectedProps &
-  ViewProps;
-
 /**
  * A Radio Button component, should be wrapped inside a RadioGroup
  */
-class RadioButton extends PureComponent<Props, RadioButtonState> {
+class RadioButton extends PureComponent<RadioButtonPropTypes, RadioButtonState> {
   static displayName = 'RadioButton';
 
   static defaultProps = {
@@ -101,7 +95,7 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
     image: StyleProp<ImageStyle>;
   };
 
-  constructor(props: Props) {
+  constructor(props: RadioButtonPropTypes) {
     super(props);
     this.styles = createStyles(props);
     this.state = {
@@ -114,7 +108,7 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
     this.animate();
   }
 
-  componentDidUpdate(prevProps: Props) {
+  componentDidUpdate(prevProps: RadioButtonPropTypes) {
     if (prevProps.selected !== this.props.selected) {
       this.animate();
     }
@@ -258,7 +252,7 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
   }
 }
 
-function createStyles(props: Props) {
+function createStyles(props: RadioButtonPropTypes) {
   const {size = DEFAULT_SIZE, borderRadius = DEFAULT_SIZE / 2, color = DEFAULT_COLOR, disabled} = props;
   return StyleSheet.create({
     radioButtonOutline: {

src/components/radioButton/RadioGroup.tsx

@@ -4,7 +4,7 @@ import {asBaseComponent, forwardRef, BaseComponentInjectedProps, ForwardRefInjec
 import View from '../view';
 import RadioGroupContext from './RadioGroupContext';
 
-interface RadioGroupPropTypes {
+export type RadioGroupPropTypes = BaseComponentInjectedProps & ForwardRefInjectedProps & {
   /**
    * The initial value of the selected radio button
    */
@@ -13,21 +13,19 @@ interface RadioGroupPropTypes {
    * Invoked once when value changes, by selecting one of the radio buttons in the group
    */
   onValueChange?: (value: string | number | boolean) => void;
-}
+};
 
 interface RadioGroupState {
   value?: RadioGroupPropTypes['initialValue'];
 }
 
-type Props = RadioGroupPropTypes & BaseComponentInjectedProps & ForwardRefInjectedProps;
-
 /**
  * Wrap a group of Radio Buttons to automatically control their selection
  */
-class RadioGroup extends PureComponent<Props, RadioGroupState> {
+class RadioGroup extends PureComponent<RadioGroupPropTypes, RadioGroupState> {
   static displayName = 'RadioGroup';
 
-  constructor(props: Props) {
+  constructor(props: RadioGroupPropTypes) {
     super(props);
 
     this.state = {

src/index.ts

@@ -5,16 +5,16 @@
  */
 
 export * from './style';
-export {default as Card} from './components/card';
-export {default as View} from './components/view';
-export {default as Text} from './components/text';
-export {default as TouchableOpacity} from './components/touchableOpacity';
-export {default as Button} from './components/button';
-export {default as Checkbox} from './components/checkbox';
-export {default as Image} from './components/image';
-export {default as Overlay} from './components/overlay';
-export {default as RadioButton} from './components/radioButton/RadioButton';
-export {default as RadioGroup} from './components/radioButton/RadioGroup';
+export {default as Card, CardPropTypes, CardSectionProps} from './components/card';
+export {default as View, ViewPropTypes} from './components/view';
+export {default as Text, TextPropTypes} from './components/text';
+export {default as TouchableOpacity, TouchableOpacityProps} from './components/touchableOpacity';
+export {default as Button, ButtonPropTypes} from './components/button';
+export {default as Checkbox, CheckboxPropTypes} from './components/checkbox';
+export {default as Image, ImageProps} from './components/image';
+export {default as Overlay, OverlayTypes} from './components/overlay';
+export {default as RadioButton, RadioButtonPropTypes} from './components/radioButton/RadioButton';
+export {default as RadioGroup, RadioGroupPropTypes} from './components/radioButton/RadioGroup';
 
 //================ Manual typings (all those exports should be removed one day) ==========
 export {

typings/commons/index.d.ts

@@ -50,5 +50,9 @@ export type _B = Partial<Record<BaseComponentColorModifierVariations, boolean>>;
 export class PureBaseComponent<P = {}, S = {}, SS = any> extends React.PureComponent<P & _B, S, SS> {
   static propTypes?: any;
   static defaultProps?: Partial<P>;
+
+  // TODO: There's more methods here, need to create more precise types
+  getThemeProps: () => P & ThemeProps;
+  extractAccessibilityProps: () => AccessibilityProps;
 }