status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-02-04 21:53:30 +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, item: Object,
onNavigate: Function, onNavigate: Function,
onPress?: Function, onPress?: Function,
onShowUnderlay?: Function,
onHideUnderlay?: Function,
}; };
_onPress = () => { _onPress = () => {
if (this.props.onPress) { if (this.props.onPress) {
@ -71,19 +73,16 @@ class RowComponent extends React.PureComponent {
render() { render() {
const {item} = this.props; const {item} = this.props;
return ( return (
<View> <TouchableHighlight {...this.props} onPress={this._onPress}>
<TouchableHighlight onPress={this._onPress}> <View style={styles.row}>
<View style={styles.row}> <Text style={styles.rowTitleText}>
<Text style={styles.rowTitleText}> {item.module.title}
{item.module.title} </Text>
</Text> <Text style={styles.rowDetailText}>
<Text style={styles.rowDetailText}> {item.module.description}
{item.module.description} </Text>
</Text> </View>
</View> </TouchableHighlight>
</TouchableHighlight>
<View style={styles.separator} />
</View>
); );
} }
} }
@ -121,6 +120,8 @@ class UIExplorerExampleList extends React.Component {
{this._renderTitleRow()} {this._renderTitleRow()}
{this._renderTextInput()} {this._renderTextInput()}
<SectionList <SectionList
ItemSeparatorComponent={ItemSeparator}
contentContainerStyle={{backgroundColor: 'white'}}
style={styles.list} style={styles.list}
sections={sections} sections={sections}
renderItem={this._renderItem} renderItem={this._renderItem}
@ -140,7 +141,14 @@ class UIExplorerExampleList extends React.Component {
return curr.item !== prev.item; 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> { _renderTitleRow(): ?React.Element<any> {
if (!this.props.displayTitleRow) { 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, { UIExplorerExampleList = UIExplorerStatePersister.createContainer(UIExplorerExampleList, {
cacheKeySuffix: () => 'mainList', cacheKeySuffix: () => 'mainList',
getInitialState: () => ({filter: ''}), getInitialState: () => ({filter: ''}),
@ -217,6 +229,10 @@ const styles = StyleSheet.create({
backgroundColor: '#bbbbbb', backgroundColor: '#bbbbbb',
marginLeft: 15, marginLeft: 15,
}, },
separatorHighlighted: {
height: StyleSheet.hairlineWidth,
backgroundColor: 'rgb(217, 217, 217)',
},
rowTitleText: { rowTitleText: {
fontSize: 17, fontSize: 17,
fontWeight: '500', fontWeight: '500',