react-native/Examples/UIExplorer/ListViewPagingExample.js

255 lines
7.7 KiB
JavaScript
Raw Normal View History

/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ListViewPagingExample
* @flow
*/
'use strict';
var React = require('react-native');
var {
Image,
LayoutAnimation,
ListView,
StyleSheet,
Text,
TouchableOpacity,
View,
} = React;
var PAGE_SIZE = 4;
var THUMB_URLS = ['https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851549_767334479959628_274486868_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851579_767334503292959_179092627_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851589_767334513292958_1747022277_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851563_767334559959620_1193692107_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851593_767334566626286_1953955109_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851591_767334523292957_797560749_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851567_767334529959623_843148472_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851548_767334489959627_794462220_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851575_767334539959622_441598241_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851573_767334549959621_534583464_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851583_767334573292952_1519550680_n.png'];
var NUM_SECTIONS = 100;
var NUM_ROWS_PER_SECTION = 10;
var Thumb = React.createClass({
getInitialState: function() {
return {thumbIndex: this._getThumbIdx(), dir: 'row'};
},
_getThumbIdx: function() {
return Math.floor(Math.random() * THUMB_URLS.length);
},
_onPressThumb: function() {
var config = layoutAnimationConfigs[this.state.thumbIndex % layoutAnimationConfigs.length];
LayoutAnimation.configureNext(config);
this.setState({
thumbIndex: this._getThumbIdx(),
dir: this.state.dir === 'row' ? 'column' : 'row',
});
},
render: function() {
return (
<TouchableOpacity onPress={this._onPressThumb}>
<View style={[styles.buttonContents, {flexDirection: this.state.dir}]}>
<Image style={styles.img} source={{uri: THUMB_URLS[this.state.thumbIndex]}} />
<Image style={styles.img} source={{uri: THUMB_URLS[this.state.thumbIndex]}} />
<Image style={styles.img} source={{uri: THUMB_URLS[this.state.thumbIndex]}} />
{this.state.dir === 'column' ?
<Text>
Oooo, look at this new text! So awesome it may just be crazy.
Let me keep typing here so it wraps at least one line.
</Text> :
<Text />
}
</View>
</TouchableOpacity>
);
}
});
var ListViewPagingExample = React.createClass({
statics: {
title: '<ListView> - Paging',
description: 'Floating headers & layout animations.'
},
getInitialState: function() {
var getSectionData = (dataBlob, sectionID) => {
return dataBlob[sectionID];
};
var getRowData = (dataBlob, sectionID, rowID) => {
return dataBlob[rowID];
};
var dataSource = new ListView.DataSource({
getRowData: getRowData,
getSectionHeaderData: getSectionData,
rowHasChanged: (row1, row2) => row1 !== row2,
sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
});
var dataBlob = {};
var sectionIDs = [];
var rowIDs = [];
for (var ii = 0; ii < NUM_SECTIONS; ii++) {
var sectionName = 'Section ' + ii;
sectionIDs.push(sectionName);
dataBlob[sectionName] = sectionName;
rowIDs[ii] = [];
for (var jj = 0; jj < NUM_ROWS_PER_SECTION; jj++) {
var rowName = 'S' + ii + ', R' + jj;
rowIDs[ii].push(rowName);
dataBlob[rowName] = rowName;
}
}
return {
dataSource: dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs),
headerPressCount: 0,
};
},
renderRow: function(rowData: string, sectionID: string, rowID: string): ReactElement {
return (<Thumb text={rowData}/>);
},
renderSectionHeader: function(sectionData: string, sectionID: string) {
return (
<View style={styles.section}>
<Text style={styles.text}>
{sectionData}
</Text>
</View>
);
},
renderHeader: function() {
var headerLikeText = this.state.headerPressCount % 2 ?
<View><Text style={styles.text}>1 Like</Text></View> :
null;
return (
<TouchableOpacity onPress={this._onPressHeader}>
<View style={styles.header}>
{headerLikeText}
<View>
<Text style={styles.text}>
Table Header (click me)
</Text>
</View>
</View>
</TouchableOpacity>
);
},
renderFooter: function() {
return (
<View style={styles.header}>
<Text onPress={() => console.log('Footer!')} style={styles.text}>
Table Footer
</Text>
</View>
);
},
render: function() {
return (
<ListView
style={styles.listview}
dataSource={this.state.dataSource}
onChangeVisibleRows={(visibleRows, changedRows) => console.log({visibleRows, changedRows})}
renderHeader={this.renderHeader}
renderFooter={this.renderFooter}
renderSectionHeader={this.renderSectionHeader}
renderRow={this.renderRow}
initialListSize={10}
pageSize={PAGE_SIZE}
scrollRenderAheadDistance={2000}
/>
);
},
_onPressHeader: function() {
var config = layoutAnimationConfigs[Math.floor(this.state.headerPressCount / 2) % layoutAnimationConfigs.length];
LayoutAnimation.configureNext(config);
this.setState({headerPressCount: this.state.headerPressCount + 1});
},
});
var styles = StyleSheet.create({
listview: {
backgroundColor: '#B0C4DE',
},
header: {
height: 40,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#3B5998',
flexDirection: 'row',
},
text: {
color: 'white',
paddingHorizontal: 8,
},
rowText: {
color: '#888888',
},
thumbText: {
fontSize: 20,
color: '#888888',
},
buttonContents: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 5,
marginVertical: 3,
padding: 5,
backgroundColor: '#EAEAEA',
borderRadius: 3,
paddingVertical: 10,
},
img: {
width: 64,
height: 64,
marginHorizontal: 10,
},
section: {
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'flex-start',
padding: 6,
backgroundColor: '#5890ff',
},
});
var animations = {
layout: {
spring: {
duration: 0.75,
create: {
duration: 0.3,
type: LayoutAnimation.Types.easeInEaseOut,
property: LayoutAnimation.Properties.opacity,
},
update: {
type: LayoutAnimation.Types.spring,
springDamping: 0.4,
},
},
easeInEaseOut: {
duration: 0.3,
create: {
type: LayoutAnimation.Types.easeInEaseOut,
property: LayoutAnimation.Properties.scaleXY,
},
update: {
delay: 0.1,
type: LayoutAnimation.Types.easeInEaseOut,
},
},
},
};
var layoutAnimationConfigs = [
animations.layout.spring,
animations.layout.easeInEaseOut,
];
module.exports = ListViewPagingExample;