clarify highlightRow usage with UIExplorer example
Summary: Explain the **motivation** for making this change. What existing problem does the pull request solve? > From the existing documentation, it's not clear how one would make use of the highlightRow attribute of ListView.renderRow. Special thanks to halilb for his assistance. Example: When "Adding a function to do X", explain why it is necessary to have a way to do X. **Test plan (required)** Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI. > Here's a screenshot of the UIExplorer with a row highlighted (using the FB Blue Color) > <img width="466" alt="2016-03-16_1944" src="https://cloud.githubusercontent.com/assets/1640318/13835020/49b5b38c-ebb1-11e5-98fa-17201fd3db92.png"> Make sure tests pass on both Travis and Circle CI. **Code formatting** Look around. Match the style of the rest of the codebase. See also the simple [style guide](https://github.com/facebook/react-native/blob/master/CONTRIBUTIN Closes https://github.com/facebook/react-native/pull/6495 Differential Revision: D3264092 Pulled By: nicklockwood fb-gh-sync-id: 9608e8a66387f527b872928a3595ca4d17736b82 fbshipit-source-id: 9608e8a66387f527b872928a3595ca4d17736b82
This commit is contained in:
parent
d037840158
commit
a26afd2d73
|
@ -58,17 +58,20 @@ var ListViewSimpleExample = React.createClass({
|
|||
dataSource={this.state.dataSource}
|
||||
renderRow={this._renderRow}
|
||||
renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
|
||||
renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator} />}
|
||||
renderSeparator={this._renderSeperator}
|
||||
/>
|
||||
</UIExplorerPage>
|
||||
);
|
||||
},
|
||||
|
||||
_renderRow: function(rowData: string, sectionID: number, rowID: number) {
|
||||
_renderRow: function(rowData: string, sectionID: number, rowID: number, highlightRow: (sectionID: number, rowID: number) => void) {
|
||||
var rowHash = Math.abs(hashCode(rowData));
|
||||
var imgSource = THUMB_URLS[rowHash % THUMB_URLS.length];
|
||||
return (
|
||||
<TouchableHighlight onPress={() => this._pressRow(rowID)}>
|
||||
<TouchableHighlight onPress={() => {
|
||||
this._pressRow(rowID);
|
||||
highlightRow(sectionID, rowID);
|
||||
}}>
|
||||
<View>
|
||||
<View style={styles.row}>
|
||||
<Image style={styles.thumb} source={imgSource} />
|
||||
|
@ -96,6 +99,18 @@ var ListViewSimpleExample = React.createClass({
|
|||
this._genRows(this._pressData)
|
||||
)});
|
||||
},
|
||||
|
||||
_renderSeperator: function(sectionID: number, rowID: number, adjacentRowHighlighted: bool) {
|
||||
return (
|
||||
<View
|
||||
key={`${sectionID}-${rowID}`}
|
||||
style={{
|
||||
height: adjacentRowHighlighted ? 4 : 1,
|
||||
backgroundColor: adjacentRowHighlighted ? '#3B5998' : '#CCCCCC',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var THUMB_URLS = [
|
||||
|
@ -130,10 +145,6 @@ var styles = StyleSheet.create({
|
|||
padding: 10,
|
||||
backgroundColor: '#F6F6F6',
|
||||
},
|
||||
separator: {
|
||||
height: 1,
|
||||
backgroundColor: '#CCCCCC',
|
||||
},
|
||||
thumb: {
|
||||
width: 64,
|
||||
height: 64,
|
||||
|
|
|
@ -137,9 +137,10 @@ var ListView = React.createClass({
|
|||
* a renderable component to be rendered as the row. By default the data
|
||||
* is exactly what was put into the data source, but it's also possible to
|
||||
* provide custom extractors. ListView can be notified when a row is
|
||||
* being highlighted by calling highlightRow function. The separators above and
|
||||
* below will be hidden when a row is highlighted. The highlighted state of
|
||||
* a row can be reset by calling highlightRow(null).
|
||||
* being highlighted by calling `highlightRow(sectionID, rowID)`. This
|
||||
* sets a boolean value of adjacentRowHighlighted in renderSeparator, allowing you
|
||||
* to control the separators above and below the highlighted row. The highlighted
|
||||
* state of a row can be reset by calling highlightRow(null).
|
||||
*/
|
||||
renderRow: PropTypes.func.isRequired,
|
||||
/**
|
||||
|
|
Loading…
Reference in New Issue