From bd79303d5bd043431d249f58caf86e6ec42b9a47 Mon Sep 17 00:00:00 2001 From: Josh Justice Date: Sat, 29 Dec 2018 16:03:08 -0800 Subject: [PATCH] Added filtering to RNTester example screens (#22777) Summary: This PR adds filtering functionality to individual example screens of RNTester. This is useful for Detox testing of RNTester, since Detox requires elements to be visible on the screen before they can be interacted with. Instead of needing to scroll an arbitrary amount, the test can enter the name of the example to be tested, just as is done on the main screen. This will lead to simpler and more reliable E2E tests for long example screens. This PR doesn't add any automated tests using the filter; those will be added in a separate PR. This is implemented by extracting the existing filtering functionality out of `RNTesterExampleList` into a shared `RNTesterExampleFilter` component that can be used both within `RNTesterExampleList` (the main screen) and `RNTesterExampleContainer` (the example screen). ![simulator screen shot - iphone 8 - 2018-12-24 at 08 22 46](https://user-images.githubusercontent.com/15832198/50401564-4273a300-0755-11e9-9120-9bf8fbb70261.png) ![simulator screen shot - iphone 8 - 2018-12-24 at 08 22 51](https://user-images.githubusercontent.com/15832198/50401566-44d5fd00-0755-11e9-9637-6e5ddce1c476.png) Changelog: ---------- [General] [Added] - Added filtering to RNTester example screens Pull Request resolved: https://github.com/facebook/react-native/pull/22777 Reviewed By: TheSavior Differential Revision: D13561744 Pulled By: rickhanlonii fbshipit-source-id: cb120626a8e2b8440f88b871557c0b92fbef5edc --- RNTester/js/RNTesterExampleContainer.js | 24 +++++- RNTester/js/RNTesterExampleFilter.js | 102 +++++++++++++++++++++++ RNTester/js/RNTesterExampleList.js | 106 +++++++----------------- 3 files changed, 155 insertions(+), 77 deletions(-) create mode 100644 RNTester/js/RNTesterExampleFilter.js 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;