diff --git a/RNTester/js/RNTesterExampleContainer.js b/RNTester/js/RNTesterExampleContainer.js
index e1c66e3333f1dd..03b2a1cb762713 100644
--- a/RNTester/js/RNTesterExampleContainer.js
+++ b/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 ;
}
+ if (this.props.module.examples.length === 1) {
+ const Example = this.props.module.examples[0].render;
+ return ;
+ }
+
+ const filter = ({example, filterRegex}) => filterRegex.test(example.title);
+
+ const sections = [
+ {
+ data: this.props.module.examples,
+ title: 'EXAMPLES',
+ key: 'e',
+ },
+ ];
+
return (
- {this.props.module.examples.map(this.renderExample)}
+
+ filteredSections[0].data.map(this.renderExample)
+ }
+ />
);
}
diff --git a/RNTester/js/RNTesterExampleFilter.js b/RNTester/js/RNTesterExampleFilter.js
new file mode 100644
index 00000000000000..975d5e7214caff
--- /dev/null
+++ b/RNTester/js/RNTesterExampleFilter.js
@@ -0,0 +1,102 @@
+/**
+ * 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,
+ disableSearch?: boolean,
+};
+
+type State = {
+ filter: string,
+};
+
+class RNTesterExampleFilter extends React.Component {
+ 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 =>
+ this.props.disableSearch || this.props.filter({example, filterRegex});
+
+ const filteredSections = this.props.sections.map(section => ({
+ ...section,
+ data: section.data.filter(filter),
+ }));
+
+ return (
+
+ {this._renderTextInput()}
+ {this.props.render({filteredSections})}
+
+ );
+ }
+
+ _renderTextInput(): ?React.Element {
+ if (this.props.disableSearch) {
+ return null;
+ }
+ return (
+
+ {
+ this.setState(() => ({filter: text}));
+ }}
+ placeholder="Search..."
+ underlineColorAndroid="transparent"
+ style={styles.searchTextInput}
+ testID="explorer_search"
+ value={this.state.filter}
+ />
+
+ );
+ }
+}
+
+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;
diff --git a/RNTester/js/RNTesterExampleList.js b/RNTester/js/RNTesterExampleList.js
index 48bfab00285269..78fb8ed7ebe4cd 100644
--- a/RNTester/js/RNTesterExampleList.js
+++ b/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 {
- 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 (
{this._renderTitleRow()}
- {this._renderTextInput()}
- (
+
+ )}
/>
);
@@ -162,32 +152,6 @@ class RNTesterExampleList extends React.Component {
);
}
- _renderTextInput(): ?React.Element {
- /* $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 (
-
- {
- this.setState(() => ({filter: text}));
- }}
- placeholder="Search..."
- underlineColorAndroid="transparent"
- style={styles.searchTextInput}
- testID="explorer_search"
- value={this.state.filter}
- />
-
- );
- }
-
_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;