Added filtering to RNTester example screens

RNTester/js/RNTesterExampleContainer.js

@@ -12,6 +12,7 @@
 const React = require('react');
 const {Platform} = require('react-native');
 const RNTesterBlock = require('./RNTesterBlock');
+const RNTesterExampleFilter = require('./RNTesterExampleFilter');
 const RNTesterPage = require('./RNTesterPage');
 
 class RNTesterExampleContainer extends React.Component {
@@ -37,9 +38,25 @@ class RNTesterExampleContainer extends React.Component {
       return <this.props.module />;
     }
 
+    const filter = ({example, filterRegex}) => filterRegex.test(example.title);
+
+    const sections = [
+      {
+        data: this.props.module.examples,
+        title: 'EXAMPLES',
+        key: 'e',
+      },
+    ];
+
     return (
       <RNTesterPage title={this.props.title}>
-        {this.props.module.examples.map(this.renderExample)}
+        <RNTesterExampleFilter
+          sections={sections}
+          filter={filter}
+          render={({filteredSections}) =>
+            filteredSections[0].data.map(this.renderExample)
+          }
+        />
       </RNTesterPage>
     );
   }

RNTester/js/RNTesterExampleFilter.js

@@ -0,0 +1,103 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+const React = require('react');
+const StyleSheet = require('StyleSheet');
+const TextInput = require('TextInput');
+const View = require('View');
+
+type Props = {
+  filter: Function,
+  render: Function,
+  sections: Object,
+};
+
+class RNTesterExampleFilter extends React.Component<Props, $FlowFixMeState> {
+  state = {filter: ''};
+
+  render() {
+    const filterText = this.state.filter;
+    let filterRegex = /.*/;
+
+    try {
+      filterRegex = new RegExp(String(filterText), 'i');
+    } catch (error) {
+      console.warn(
+        'Failed to create RegExp: %s\n%s',
+        filterText,
+        error.message,
+      );
+    }
+
+    const filter = example =>
+      /* $FlowFixMe(>=0.68.0 site=react_native_fb) This comment suppresses an
+       * error found when Flow v0.68 was deployed. To see the error delete this
+       * comment and run Flow. */
+      this.props.disableSearch || this.props.filter({example, filterRegex});
+
+    const filteredSections = this.props.sections.map(section => ({
+      ...section,
+      data: section.data.filter(filter),
+    }));
+
+    return (
+      <View>
+        {this._renderTextInput()}
+        {this.props.render({filteredSections})}
+      </View>
+    );
+  }
+
+  _renderTextInput(): ?React.Element<any> {
+    /* $FlowFixMe(>=0.68.0 site=react_native_fb) This comment suppresses an
+     * error found when Flow v0.68 was deployed. To see the error delete this
+     * comment and run Flow. */
+    if (this.props.disableSearch) {
+      return null;
+    }
+    return (
+      <View style={styles.searchRow}>
+        <TextInput
+          autoCapitalize="none"
+          autoCorrect={false}
+          clearButtonMode="always"
+          onChangeText={text => {
+            this.setState(() => ({filter: text}));
+          }}
+          placeholder="Search..."
+          underlineColorAndroid="transparent"
+          style={styles.searchTextInput}
+          testID="explorer_search"
+          value={this.state.filter}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  searchRow: {
+    backgroundColor: '#eeeeee',
+    padding: 10,
+  },
+  searchTextInput: {
+    backgroundColor: 'white',
+    borderColor: '#cccccc',
+    borderRadius: 3,
+    borderWidth: 1,
+    paddingLeft: 8,
+    paddingVertical: 0,
+    height: 35,
+  },
+});
+
+module.exports = RNTesterExampleFilter;

RNTester/js/RNTesterExampleList.js

@@ -15,15 +15,15 @@ const React = require('react');
 const SectionList = require('SectionList');
 const StyleSheet = require('StyleSheet');
 const Text = require('Text');
-const TextInput = require('TextInput');
 const TouchableHighlight = require('TouchableHighlight');
 const RNTesterActions = require('./RNTesterActions');
+const RNTesterExampleFilter = require('./RNTesterExampleFilter');
 const View = require('View');
 
 /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found when
  * making Flow check .android.js files. */
 import type {RNTesterExample} from './RNTesterList.ios';
-import type {TextStyleProp, ViewStyleProp} from 'StyleSheet';
+import type {ViewStyleProp} from 'StyleSheet';
 
 type Props = {
   onNavigate: Function,
@@ -69,58 +69,48 @@ const renderSectionHeader = ({section}) => (
 );
 
 class RNTesterExampleList extends React.Component<Props, $FlowFixMeState> {
-  state = {filter: ''};
-
   render() {
-    const filterText = this.state.filter;
-    let filterRegex = /.*/;
-
-    try {
-      filterRegex = new RegExp(String(filterText), 'i');
-    } catch (error) {
-      console.warn(
-        'Failed to create RegExp: %s\n%s',
-        filterText,
-        error.message,
-      );
-    }
-
-    const filter = example =>
+    const filter = ({example, filterRegex}) =>
       /* $FlowFixMe(>=0.68.0 site=react_native_fb) This comment suppresses an
-       * error found when Flow v0.68 was deployed. To see the error delete this
-       * comment and run Flow. */
-      this.props.disableSearch ||
-      (filterRegex.test(example.module.title) &&
-        (!Platform.isTV || example.supportsTVOS));
+      * error found when Flow v0.68 was deployed. To see the error delete this
+      * comment and run Flow. */
+      filterRegex.test(example.module.title) &&
+      (!Platform.isTV || example.supportsTVOS);
 
     const sections = [
       {
-        data: this.props.list.ComponentExamples.filter(filter),
+        data: this.props.list.ComponentExamples,
         title: 'COMPONENTS',
         key: 'c',
       },
       {
-        data: this.props.list.APIExamples.filter(filter),
+        data: this.props.list.APIExamples,
         title: 'APIS',
         key: 'a',
       },
     ];
+
     return (
       <View style={[styles.listContainer, this.props.style]}>
         {this._renderTitleRow()}
-        {this._renderTextInput()}
-        <SectionList
-          ItemSeparatorComponent={ItemSeparator}
-          contentContainerStyle={{backgroundColor: 'white'}}
-          style={styles.list}
+        <RNTesterExampleFilter
           sections={sections}
-          renderItem={this._renderItem}
-          enableEmptySections={true}
-          itemShouldUpdate={this._itemShouldUpdate}
-          keyboardShouldPersistTaps="handled"
-          automaticallyAdjustContentInsets={false}
-          keyboardDismissMode="on-drag"
-          renderSectionHeader={renderSectionHeader}
+          filter={filter}
+          render={({filteredSections}) => (
+            <SectionList
+              ItemSeparatorComponent={ItemSeparator}
+              contentContainerStyle={styles.sectionListContentContainer}
+              style={styles.list}
+              sections={filteredSections}
+              renderItem={this._renderItem}
+              enableEmptySections={true}
+              itemShouldUpdate={this._itemShouldUpdate}
+              keyboardShouldPersistTaps="handled"
+              automaticallyAdjustContentInsets={false}
+              keyboardDismissMode="on-drag"
+              renderSectionHeader={renderSectionHeader}
+            />
+          )}
         />
       </View>
     );
@@ -162,32 +152,6 @@ class RNTesterExampleList extends React.Component<Props, $FlowFixMeState> {
     );
   }
 
-  _renderTextInput(): ?React.Element<any> {
-    /* $FlowFixMe(>=0.68.0 site=react_native_fb) This comment suppresses an
-     * error found when Flow v0.68 was deployed. To see the error delete this
-     * comment and run Flow. */
-    if (this.props.disableSearch) {
-      return null;
-    }
-    return (
-      <View style={styles.searchRow}>
-        <TextInput
-          autoCapitalize="none"
-          autoCorrect={false}
-          clearButtonMode="always"
-          onChangeText={text => {
-            this.setState(() => ({filter: text}));
-          }}
-          placeholder="Search..."
-          underlineColorAndroid="transparent"
-          style={styles.searchTextInput}
-          testID="explorer_search"
-          value={this.state.filter}
-        />
-      </View>
-    );
-  }
-
   _handleRowPress(exampleKey: string): void {
     this.props.onNavigate(RNTesterActions.ExampleAction(exampleKey));
   }
@@ -225,6 +189,9 @@ const styles = StyleSheet.create({
     height: StyleSheet.hairlineWidth,
     backgroundColor: 'rgb(217, 217, 217)',
   },
+  sectionListContentContainer: {
+    backgroundColor: 'white',
+  },
   rowTitleText: {
     fontSize: 17,
     fontWeight: '500',
@@ -234,19 +201,6 @@ const styles = StyleSheet.create({
     color: '#888888',
     lineHeight: 20,
   },
-  searchRow: {
-    backgroundColor: '#eeeeee',
-    padding: 10,
-  },
-  searchTextInput: {
-    backgroundColor: 'white',
-    borderColor: '#cccccc',
-    borderRadius: 3,
-    borderWidth: 1,
-    paddingLeft: 8,
-    paddingVertical: 0,
-    height: 35,
-  },
 });
 
 module.exports = RNTesterExampleList;