Adding custom view to swipeable component

Summary: as title

Reviewed By: fred2028

Differential Revision: D8550184

fbshipit-source-id: 5ba72538fae11d75a82568774dd937b4493e7292

Libraries/Experimental/SwipeableRow/SwipeableQuickActionButton.js

@@ -11,7 +11,6 @@
 'use strict';
 
 const Image = require('Image');
-const PropTypes = require('prop-types');
 const React = require('React');
 const Text = require('Text');
 const TouchableHighlight = require('TouchableHighlight');
@@ -27,35 +26,22 @@ import type {ImageSource} from 'ImageSource';
  */
 class SwipeableQuickActionButton extends React.Component<{
   accessibilityLabel?: string,
-  imageSource: ImageSource | number,
+  imageSource?: ?(ImageSource | number),
   imageStyle?: ?ViewPropTypes.style,
+  mainView?: ?React.Node,
   onPress?: Function,
   style?: ?ViewPropTypes.style,
   testID?: string,
   text?: ?(string | Object | Array<string | Object>),
   textStyle?: ?ViewPropTypes.style,
 }> {
-  static propTypes = {
-    accessibilityLabel: PropTypes.string,
-    imageSource: Image.propTypes.source.isRequired,
-    imageStyle: Image.propTypes.style,
-    onPress: PropTypes.func,
-    style: ViewPropTypes.style,
-    testID: PropTypes.string,
-    text: PropTypes.string,
-    textStyle: Text.propTypes.style,
-  };
-
   render(): React.Node {
-    if (!this.props.imageSource && !this.props.text) {
+    if (!this.props.imageSource && !this.props.text && !this.props.mainView) {
       return null;
     }
-
-    return (
-      <TouchableHighlight
-        onPress={this.props.onPress}
-        testID={this.props.testID}
-        underlayColor="transparent">
+    const mainView = this.props.mainView ? (
+      this.props.mainView
+    ) : (
       <View style={this.props.style}>
         <Image
           accessibilityLabel={this.props.accessibilityLabel}
@@ -64,6 +50,13 @@ class SwipeableQuickActionButton extends React.Component<{
         />
         <Text style={this.props.textStyle}>{this.props.text}</Text>
       </View>
+    );
+    return (
+      <TouchableHighlight
+        onPress={this.props.onPress}
+        testID={this.props.testID}
+        underlayColor="transparent">
+        <View style={this.props.style}>{mainView}</View>
       </TouchableHighlight>
     );
   }