migrate TouchableOpacity to typescript

Author: ethanshar

generatedTypes/components/touchableOpacity/index.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { TouchableOpacityProps } from 'react-native';
+declare type IProps = TouchableOpacityProps & {
+    /**
+     * background color for TouchableOpacity
+     */
+    backgroundColor?: string;
+    /**
+     * throttle time in MS for onPress callback
+     */
+    throttleTime?: number;
+    /**
+     * throttle options {leading, trailing}
+     */
+    throttleOptions?: {
+        leading: boolean;
+        trailing: boolean;
+    };
+    /**
+     * Apply background color on TouchableOpacity when active (press is on)
+     */
+    activeBackgroundColor?: string;
+    /**
+     * Should use a more native touchable opacity component
+     */
+    useNative?: boolean;
+};
+declare const _default: React.ComponentType<IProps>;
+export default _default;

generatedTypes/index.d.ts

@@ -6,6 +6,7 @@
 export * from './style';
 export {default as View} from './components/view';
 export {default as Text} from './components/text';
+export {default as TouchableOpacity} from './components/touchableOpacity';
 
 /* All components with manual typings */
 export {
@@ -60,8 +61,7 @@ export {
   StateScreen,
   WheelPicker,
   Incubator,
-  ColorPicker,
-  TouchableOpacity
+  ColorPicker
 } from '../typings';
 
 /* All components that are missing either manual or auto generated typings */

src/components/touchableOpacity/index.js renamed to src/components/touchableOpacity/index.tsx

@@ -1,10 +1,35 @@
 import React, {PureComponent} from 'react';
-import {TouchableOpacity as RNTouchableOpacity} from 'react-native';
-import PropTypes from 'prop-types';
+import {TouchableOpacity as RNTouchableOpacity, TouchableOpacityProps} from 'react-native';
 import _ from 'lodash';
-import {asBaseComponent, forwardRef} from '../../commons';
+import {asBaseComponent, forwardRef, BaseComponentInjectedProps, ForwardRefInjectedProps} from '../../commons/new';
+// @ts-ignore
 import Incubator from '../../incubator';
 
+type IProps = TouchableOpacityProps & {
+  /**
+   * background color for TouchableOpacity
+   */
+  backgroundColor?: string;
+  /**
+   * throttle time in MS for onPress callback
+   */
+  throttleTime?: number;
+  /**
+   * throttle options {leading, trailing}
+   */
+  throttleOptions?: {leading: boolean, trailing: boolean};
+  /**
+   * Apply background color on TouchableOpacity when active (press is on)
+   */
+  activeBackgroundColor?: string;
+  /**
+   * Should use a more native touchable opacity component
+   */
+  useNative?: boolean;
+};
+
+type Props = BaseComponentInjectedProps & ForwardRefInjectedProps & IProps;
+
 /**
  * @description: A wrapper for TouchableOpacity component. Support onPress, throttling and activeBackgroundColor
  * @extends: TouchableOpacity
@@ -13,33 +38,10 @@ import Incubator from '../../incubator';
  * @gif: https://media.giphy.com/media/xULW8AMIgw7l31zjm8/giphy.gif
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/src/components/touchableOpacity/index.js
  */
-class TouchableOpacity extends PureComponent {
+class TouchableOpacity extends PureComponent<Props, {active: boolean}> {
   static displayName = 'TouchableOpacity';
 
-  static propTypes = {
-    /**
-     * background color for TouchableOpacity
-     */
-    backgroundColor: PropTypes.string,
-    /**
-     * throttle time in MS for onPress callback
-     */
-    throttleTime: PropTypes.number,
-    /**
-     * throttle options
-     */
-    throttleOptions: PropTypes.shape({leading: PropTypes.bool, trailing: PropTypes.bool}),
-    /**
-     * Apply background color on TouchableOpacity when active (press is on)
-     */
-    activeBackgroundColor: PropTypes.string,
-    /**
-     * Should use a more native touchable opacity component
-     */
-    useNative: PropTypes.bool
-  };
-
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
 
     const {throttleTime, throttleOptions} = this.props;
@@ -50,7 +52,6 @@ class TouchableOpacity extends PureComponent {
   }
 
   state = {
-    ...this.state,
     active: false
   };
 
@@ -62,14 +63,14 @@ class TouchableOpacity extends PureComponent {
     };
   }
 
-  onPressIn(...args) {
+  onPressIn(...args: any) {
     this.setState({
       active: true
     });
     _.invoke(this.props, 'onPressIn', ...args);
   }
 
-  onPressOut(...args) {
+  onPressOut(...args: any) {
     this.setState({
       active: false
     });
@@ -103,6 +104,7 @@ class TouchableOpacity extends PureComponent {
     }
 
     return (
+      // @ts-ignore
       <RNTouchableOpacity
         {...this.getAccessibilityInfo()}
         {...others}
@@ -129,4 +131,4 @@ class TouchableOpacity extends PureComponent {
   }
 }
 
-export default asBaseComponent(forwardRef(TouchableOpacity));
+export default asBaseComponent<IProps>(forwardRef(TouchableOpacity));

src/index.ts

@@ -7,6 +7,7 @@
 export * from './style';
 export {default as View} from './components/view';
 export {default as Text} from './components/text';
+export {default as TouchableOpacity} from './components/touchableOpacity';
 
 //================ Manual typings (all those exports should be removed one day) ==========
 export {
@@ -15,5 +16,5 @@ export {
   PanGestureView, PanListenerView, PanDismissibleView, PanResponderView, Picker, ProgressBar, Slider, GradientSlider,
   ColorSliderGroup, Stepper, TabBar, TagsInput, RadioButton, RadioGroup, SharedTransition, StackAggregator, Toast,
   WheelPickerDialog, Assets, BaseComponent, PureBaseComponent, UIComponent, forwardRef, AvatarHelper, Constants,
-  DocsGenerator, LogService, LoaderScreen, Modal, StateScreen, WheelPicker, Incubator, ColorPicker, TouchableOpacity
+  DocsGenerator, LogService, LoaderScreen, Modal, StateScreen, WheelPicker, Incubator, ColorPicker
 } from '../typings';