mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Josh JusticeandMike Grabowski
bd79303d5b
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).   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
103 lines
2.2 KiB
JavaScript
103 lines
2.2 KiB
JavaScript
/**
|
|
* 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<Props, State> {
|
|
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 (
|
|
<View>
|
|
{this._renderTextInput()}
|
|
{this.props.render({filteredSections})}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
_renderTextInput(): ?React.Element<any> {
|
|
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;
|