Generalize RNTPressableRow

Summary: Changelog: [Internal] - Extract ExampleModuleRow and use Pressable

Reviewed By: kacieb

Differential Revision: D29480756

fbshipit-source-id: d256513bec497feeb429e9484ffe367b52e5b2ad

packages/rn-tester/js/components/RNTPressableRow.js

@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+import * as React from 'react';
+import {RNTesterThemeContext} from './RNTesterTheme';
+import RNTesterComponentTitle from './RNTesterComponentTitle';
+
+import {Platform, StyleSheet, Pressable, Text, View} from 'react-native';
+
+type ViewStyleProp = $ElementType<React.ElementConfig<typeof View>, 'style'>;
+type Props = {
+  accessibilityLabel?: ?string,
+  testID?: ?string,
+  onPressIn: () => mixed,
+  onPressOut: () => mixed,
+  rightAddOn?: ?React.Node,
+  bottomAddOn?: ?React.Node,
+  children?: ?React.Node,
+  title: string,
+  description?: ?string,
+  onPress: () => mixed,
+  style?: ViewStyleProp | ((pressed: boolean) => ViewStyleProp),
+};
+
+export default function RNTPressableRow({
+  onPressIn,
+  onPressOut,
+  title,
+  description,
+  rightAddOn,
+  bottomAddOn,
+  onPress,
+  accessibilityLabel,
+  style,
+}: Props): React.Node {
+  const theme = React.useContext(RNTesterThemeContext);
+  const label = accessibilityLabel ?? `${title} ${description ?? ''}`;
+  return (
+    <Pressable
+      testID={title}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      accessibilityLabel={label}
+      style={({pressed}) => [
+        styles.row,
+        typeof style === 'function' ? style(pressed) : style,
+        pressed
+          ? styles.pressed
+          : {backgroundColor: theme.SystemBackgroundColor},
+      ]}
+      onPress={onPress}>
+      <View style={styles.topRowStyle}>
+        <RNTesterComponentTitle>{title}</RNTesterComponentTitle>
+        {rightAddOn}
+      </View>
+      <Text
+        style={[styles.descriptionText, {color: theme.SecondaryLabelColor}]}>
+        {description}
+      </Text>
+      {bottomAddOn}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    justifyContent: 'center',
+    paddingHorizontal: 15,
+    paddingVertical: 12,
+    marginVertical: Platform.select({ios: 4, android: 8}),
+    marginHorizontal: 15,
+    overflow: 'hidden',
+    elevation: 5,
+    backgroundColor: Platform.select({ios: '#FFFFFF', android: '#F3F8FF'}),
+  },
+  descriptionText: {
+    fontSize: 12,
+    lineHeight: 20,
+    marginBottom: 5,
+  },
+  pressed: {
+    backgroundColor: 'rgb(242,242,242)',
+  },
+  topRowStyle: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    flex: 1,
+  },
+});

packages/rn-tester/js/components/RNTesterModuleList.js

@@ -9,7 +9,7 @@
  */
 
 const RNTesterExampleFilter = require('./RNTesterExampleFilter');
-const RNTesterComponentTitle = require('./RNTesterComponentTitle');
+import RNTPressableRow from './RNTPressableRow';
 const React = require('react');
 
 const {
@@ -35,43 +35,32 @@ const ExampleModuleRow = ({
   const platform = item.module.platform;
   const onIos = !platform || platform === 'ios';
   const onAndroid = !platform || platform === 'android';
-  return (
+  const rightAddOn = (
     <TouchableHighlight
-      testID={item.module.title}
-      onShowUnderlay={onShowUnderlay}
-      onHideUnderlay={onHideUnderlay}
-      accessibilityLabel={item.module.title + ' ' + item.module.description}
-      style={styles.listItem}
-      underlayColor={'rgb(242,242,242)'}
+      style={styles.imageViewStyle}
       onPress={() =>
-        handlePress({exampleType: item.exampleType, key: item.key})
+        toggleBookmark({exampleType: item.exampleType, key: item.key})
       }>
-      <View
-        style={[styles.row, {backgroundColor: theme.SystemBackgroundColor}]}>
-        <View style={styles.topRowStyle}>
-          <RNTesterComponentTitle>{item.module.title}</RNTesterComponentTitle>
-          <TouchableHighlight
-            style={styles.imageViewStyle}
-            onPress={() =>
-              toggleBookmark({exampleType: item.exampleType, key: item.key})
-            }>
-            <Image
-              style={styles.imageStyle}
-              source={
-                item.isBookmarked
-                  ? require('../assets/bookmark-outline-blue.png')
-                  : require('../assets/bookmark-outline-gray.png')
-              }
-            />
-          </TouchableHighlight>
-        </View>
-        <Text
-          style={[
-            styles.rowDetailText,
-            {color: theme.SecondaryLabelColor, marginBottom: 5},
-          ]}>
-          {item.module.description}
-        </Text>
+      <Image
+        style={styles.imageStyle}
+        source={
+          item.isBookmarked
+            ? require('../assets/bookmark-outline-blue.png')
+            : require('../assets/bookmark-outline-gray.png')
+        }
+      />
+    </TouchableHighlight>
+  );
+  return (
+    <RNTPressableRow
+      title={item.module.title}
+      description={item.module.description}
+      testID={item.module.title}
+      onPressIn={onShowUnderlay}
+      onPressOut={onHideUnderlay}
+      accessibilityLabel={item.module.title + ' ' + item.module.description}
+      rightAddOn={rightAddOn}
+      bottomAddOn={
         <View style={styles.bottomRowStyle}>
           <Text style={{color: theme.SecondaryLabelColor, width: 65}}>
             {item.module.category || 'Other'}
@@ -93,8 +82,11 @@ const ExampleModuleRow = ({
             </Text>
           </View>
         </View>
-      </View>
-    </TouchableHighlight>
+      }
+      onPress={() =>
+        handlePress({exampleType: item.exampleType, key: item.key})
+      }
+    />
   );
 };
 
@@ -226,10 +218,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
-  rowDetailText: {
-    fontSize: 12,
-    lineHeight: 20,
-  },
   imageViewStyle: {
     height: 30,
     width: 30,