258 lines
7.9 KiB
JavaScript
258 lines
7.9 KiB
JavaScript
/**
|
|
* The examples provided by Facebook are for non-commercial testing and
|
|
* evaluation purposes only.
|
|
*
|
|
* Facebook reserves all rights not expressly granted.
|
|
*
|
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
|
|
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
|
|
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
|
|
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
|
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
*
|
|
* @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}
|
|
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 />
|
|
}
|
|
</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} style={styles.header}>
|
|
{headerLikeText}
|
|
<View>
|
|
<Text style={styles.text}>
|
|
Table Header (click me)
|
|
</Text>
|
|
</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,
|
|
backgroundColor: 'transparent',
|
|
},
|
|
section: {
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
alignItems: 'flex-start',
|
|
padding: 6,
|
|
backgroundColor: '#5890ff',
|
|
},
|
|
});
|
|
|
|
var animations = {
|
|
layout: {
|
|
spring: {
|
|
duration: 750,
|
|
create: {
|
|
duration: 300,
|
|
type: LayoutAnimation.Types.easeInEaseOut,
|
|
property: LayoutAnimation.Properties.opacity,
|
|
},
|
|
update: {
|
|
type: LayoutAnimation.Types.spring,
|
|
springDamping: 0.4,
|
|
},
|
|
},
|
|
easeInEaseOut: {
|
|
duration: 300,
|
|
create: {
|
|
type: LayoutAnimation.Types.easeInEaseOut,
|
|
property: LayoutAnimation.Properties.scaleXY,
|
|
},
|
|
update: {
|
|
delay: 100,
|
|
type: LayoutAnimation.Types.easeInEaseOut,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
var layoutAnimationConfigs = [
|
|
animations.layout.spring,
|
|
animations.layout.easeInEaseOut,
|
|
];
|
|
|
|
module.exports = ListViewPagingExample;
|