diff --git a/Examples/UIExplorer/ListViewGridLayoutExample.js b/Examples/UIExplorer/ListViewGridLayoutExample.js new file mode 100644 index 000000000..879b24387 --- /dev/null +++ b/Examples/UIExplorer/ListViewGridLayoutExample.js @@ -0,0 +1,149 @@ +/** + * 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, + ListView, + TouchableHighlight, + StyleSheet, + Text, + View, +} = React; + +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 ListViewGridLayoutExample = React.createClass({ + + statics: { + title: ' - Grid Layout', + description: 'Flexbox grid layout.' + }, + + getInitialState: function() { + var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); + return { + dataSource: ds.cloneWithRows(this._genRows({})), + }; + }, + + _pressData: ({}: {[key: number]: boolean}), + + componentWillMount: function() { + this._pressData = {}; + }, + + render: function() { + return ( + // ListView wraps ScrollView and so takes on its properties. + // With that in mind you can use the ScrollView's contentContainerStyle prop to style the items. + + ); + }, + + _renderRow: function(rowData: string, sectionID: number, rowID: number) { + var rowHash = Math.abs(hashCode(rowData)); + var imgSource = { + uri: THUMB_URLS[rowHash % THUMB_URLS.length], + }; + return ( + this._pressRow(rowID)} underlayColor="transparent"> + + + + + {rowData} + + + + + ); + }, + + _genRows: function(pressData: {[key: number]: boolean}): Array { + var dataBlob = []; + for (var ii = 0; ii < 100; ii++) { + var pressedText = pressData[ii] ? ' (X)' : ''; + dataBlob.push('Cell ' + ii + pressedText); + } + return dataBlob; + }, + + _pressRow: function(rowID: number) { + this._pressData[rowID] = !this._pressData[rowID]; + this.setState({dataSource: this.state.dataSource.cloneWithRows( + this._genRows(this._pressData) + )}); + }, +}); + +/* eslint no-bitwise: 0 */ +var hashCode = function(str) { + var hash = 15; + for (var ii = str.length - 1; ii >= 0; ii--) { + hash = ((hash << 5) - hash) + str.charCodeAt(ii); + } + return hash; +}; + +var styles = StyleSheet.create({ + list: { + justifyContent: 'space-around', + flexDirection: 'row', + flexWrap: 'wrap' + }, + row: { + justifyContent: 'center', + padding: 5, + margin: 3, + width: 100, + height: 100, + backgroundColor: '#F6F6F6', + alignItems: 'center', + borderWidth: 1, + borderRadius: 5, + borderColor: '#CCC' + }, + thumb: { + width: 64, + height: 64 + }, + text: { + flex: 1, + marginTop: 5, + fontWeight: 'bold' + }, +}); + +module.exports = ListViewGridLayoutExample; diff --git a/Examples/UIExplorer/UIExplorerList.js b/Examples/UIExplorer/UIExplorerList.js index 20edd13b0..c3fc0492a 100644 --- a/Examples/UIExplorer/UIExplorerList.js +++ b/Examples/UIExplorer/UIExplorerList.js @@ -40,6 +40,7 @@ var COMMON_COMPONENTS = [ require('./ImageExample'), require('./LayoutEventsExample'), require('./ListViewExample'), + require('./ListViewGridLayoutExample'), require('./ListViewPagingExample'), require('./MapViewExample'), require('./Navigator/NavigatorExample'),