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;