status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-01-27 09:45:04 +00:00
Code Issues Projects Releases Wiki Activity

Use separators API in UIExplorer list

Browse Source 
Summary: Clean up code and polish UI.

Reviewed By: yungsters

Differential Revision: D4872739

fbshipit-source-id: e7977c94e744cef30fad2832cf41d7a7b5ec2b2e
This commit is contained in:
Spencer Ahrens 2017-04-12 16:57:12 -07:00 committed by Facebook Github Bot
parent 76307f47b9
commit eeddef18b8
1 changed files with 30 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
Examples/UIExplorer/js/UIExplorerExampleList.js
View File

@ -60,6 +60,8 @@ class RowComponent extends React.PureComponent {
item: Object,
onNavigate: Function,
onPress?: Function,
onShowUnderlay?: Function,
onHideUnderlay?: Function,
};
_onPress = () => {
if (this.props.onPress) {
@ -71,19 +73,16 @@ class RowComponent extends React.PureComponent {
render() {
const {item} = this.props;
return (
<View>
<TouchableHighlight onPress={this._onPress}>
<View style={styles.row}>
<Text style={styles.rowTitleText}>
{item.module.title}
</Text>
<Text style={styles.rowDetailText}>
{item.module.description}
</Text>
</View>
</TouchableHighlight>
<View style={styles.separator} />
</View>
<TouchableHighlight {...this.props} onPress={this._onPress}>
<View style={styles.row}>
<Text style={styles.rowTitleText}>
{item.module.title}
</Text>
<Text style={styles.rowDetailText}>
{item.module.description}
</Text>
</View>
</TouchableHighlight>
);
}
}
@ -121,6 +120,8 @@ class UIExplorerExampleList extends React.Component {
{this._renderTitleRow()}
{this._renderTextInput()}
<SectionList
ItemSeparatorComponent={ItemSeparator}
contentContainerStyle={{backgroundColor: 'white'}}
style={styles.list}
sections={sections}
renderItem={this._renderItem}
@ -140,7 +141,14 @@ class UIExplorerExampleList extends React.Component {
return curr.item !== prev.item;
}
_renderItem = ({item}) => <RowComponent item={item} onNavigate={this.props.onNavigate} />;
_renderItem = ({item, separators}) => (
<RowComponent
item={item}
onNavigate={this.props.onNavigate}
onShowUnderlay={separators.highlight}
onHideUnderlay={separators.unhighlight}
/>
);
_renderTitleRow(): ?React.Element<any> {
if (!this.props.displayTitleRow) {
@ -188,6 +196,10 @@ class UIExplorerExampleList extends React.Component {
}
}
const ItemSeparator = ({highlighted}) => (
<View style={highlighted ? styles.separatorHighlighted : styles.separator} />
);
UIExplorerExampleList = UIExplorerStatePersister.createContainer(UIExplorerExampleList, {
cacheKeySuffix: () => 'mainList',
getInitialState: () => ({filter: ''}),
@ -217,6 +229,10 @@ const styles = StyleSheet.create({
backgroundColor: '#bbbbbb',
marginLeft: 15,
},
separatorHighlighted: {
height: StyleSheet.hairlineWidth,
backgroundColor: 'rgb(217, 217, 217)',
},
rowTitleText: {
fontSize: 17,
fontWeight: '500',