Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor renderSmallSwitchOption

Browse Source 
Summary:
Changelog:
[General][Changed] - Refactor `renderSmallSwitchOption`, a RNTester util for list based components to not pass state around.

Reviewed By: nadiia

Differential Revision: D25986317

fbshipit-source-id: cbbd71cc1b1bab71ecd007980f2813f7a066b3f2
This commit is contained in:
Luna Wei
2021-01-22 13:44:19 -08:00
committed by Facebook GitHub Bot
parent 881860886c
commit 335f6de00a
4 changed files with 91 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/rn-tester/js/components/ListExampleShared.js
+6 -5
View File
@@ -240,19 +240,20 @@ function pressItem(context: Object, key: string) {
}
function renderSmallSwitchOption(
context: Object,
key: string,
label: string,
value: boolean,
setValue: boolean => void,
): null | React.Node {
if (Platform.isTV) {
return null;
}
return (
<View style={styles.option}>
<Text>{key}:</Text>
<Text>{label}:</Text>
<Switch
style={styles.smallSwitch}
value={context.state[key]}
onValueChange={value => context.setState({[key]: value})}
value={value}
onValueChange={setValue}
/>
</View>
);
packages/rn-tester/js/examples/FlatList/FlatListExample.js
+43 -8
View File
@@ -98,6 +98,9 @@ class FlatListExample extends React.PureComponent<Props, State> {
this._listRef.recordInteraction(); // e.g. flipping logViewable switch
}
_setBooleanValue: string => boolean => void = key => value =>
this.setState({[key]: value});
render(): React.Node {
const filterRegex = new RegExp(String(this.state.filterText), 'i');
const filter = item =>
@@ -123,14 +126,46 @@ class FlatListExample extends React.PureComponent<Props, State> {
/>
</View>
<View style={styles.options}>
{renderSmallSwitchOption(this, 'virtualized')}
{renderSmallSwitchOption(this, 'horizontal')}
{renderSmallSwitchOption(this, 'fixedHeight')}
{renderSmallSwitchOption(this, 'log')}
{renderSmallSwitchOption(this, 'inverted')}
{renderSmallSwitchOption(this, 'empty')}
{renderSmallSwitchOption(this, 'debug')}
{renderSmallSwitchOption(this, 'useFlatListItemComponent')}
{renderSmallSwitchOption(
'Virtualized',
this.state.virtualized,
this._setBooleanValue('virtualized'),
)}
{renderSmallSwitchOption(
'Horizontal',
this.state.horizontal,
this._setBooleanValue('horizontal'),
)}
{renderSmallSwitchOption(
'Fixed Height',
this.state.fixedHeight,
this._setBooleanValue('fixedHeight'),
)}
{renderSmallSwitchOption(
'Log Viewable',
this.state.logViewable,
this._setBooleanValue('logViewable'),
)}
{renderSmallSwitchOption(
'Inverted',
this.state.inverted,
this._setBooleanValue('inverted'),
)}
{renderSmallSwitchOption(
'Empty',
this.state.empty,
this._setBooleanValue('empty'),
)}
{renderSmallSwitchOption(
'Debug',
this.state.debug,
this._setBooleanValue('debug'),
)}
{renderSmallSwitchOption(
'Use FlatListItemComponent',
this.state.useFlatListItemComponent,
this._setBooleanValue('useFlatListItemComponent'),
)}
{Platform.OS === 'android' && (
<View>
<TextInput
packages/rn-tester/js/examples/MultiColumn/MultiColumnExample.js
+19 -3
View File
@@ -56,6 +56,10 @@ class MultiColumnExample extends React.PureComponent<
_onChangeNumColumns = numColumns => {
this.setState(() => ({numColumns: Number(numColumns)}));
};
_setBooleanValue: string => boolean => void = key => value =>
this.setState({[key]: value});
render(): React.Node {
const filterRegex = new RegExp(String(this.state.filterText), 'i');
const filter = item =>
@@ -81,9 +85,21 @@ class MultiColumnExample extends React.PureComponent<
/>
</View>
<View style={styles.row}>
{renderSmallSwitchOption(this, 'virtualized')}
{renderSmallSwitchOption(this, 'fixedHeight')}
{renderSmallSwitchOption(this, 'logViewable')}
{renderSmallSwitchOption(
'Virtualized',
this.state.virtualized,
this._setBooleanValue('virtualized'),
)}
{renderSmallSwitchOption(
'Fixed Height',
this.state.fixedHeight,
this._setBooleanValue('fixedHeight'),
)}
{renderSmallSwitchOption(
'Log Viewable',
this.state.logViewable,
this._setBooleanValue('logViewable'),
)}
</View>
</View>
<SeparatorComponent />
packages/rn-tester/js/examples/SectionList/SectionListExample.js
+23 -4
View File
@@ -108,6 +108,9 @@ class SectionListExample extends React.PureComponent<{...}, $FlowFixMeState> {
this._sectionListRef.scrollToLocation({sectionIndex, itemIndex});
}
_setBooleanValue: string => boolean => void = key => value =>
this.setState({[key]: value});
render(): React.Node {
const filterRegex = new RegExp(String(this.state.filterText), 'i');
const filter = item =>
@@ -136,10 +139,26 @@ class SectionListExample extends React.PureComponent<{...}, $FlowFixMeState> {
value={this.state.filterText}
/>
<View style={styles.optionSection}>
{renderSmallSwitchOption(this, 'virtualized')}
{renderSmallSwitchOption(this, 'logViewable')}
{renderSmallSwitchOption(this, 'debug')}
{renderSmallSwitchOption(this, 'inverted')}
{renderSmallSwitchOption(
'virtualized',
this.state.virtualized,
this._setBooleanValue('virtualized'),
)}
{renderSmallSwitchOption(
'Log Viewable',
this.state.logViewable,
this._setBooleanValue('logViewable'),
)}
{renderSmallSwitchOption(
'Debug',
this.state.debug,
this._setBooleanValue('debug'),
)}
{renderSmallSwitchOption(
'Inverted',
this.state.inverted,
this._setBooleanValue('inverted'),
)}
<Spindicator value={this._scrollPos} />
</View>
<View style={styles.scrollToRow}>