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,30 @@ class RNTesterExampleContainer extends React.Component {
  return <this.props.module />;
  }
 
+ if (this.props.module.examples.length === 1) {
+ const Example = this.props.module.examples[0].render;
+ return <Example />;
+ }
+
+ 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;