diff --git a/Examples/UIExplorer/UIExplorerList.js b/Examples/UIExplorer/UIExplorerList.js index 08558971f25b62..26aded614debe3 100644 --- a/Examples/UIExplorer/UIExplorerList.js +++ b/Examples/UIExplorer/UIExplorerList.js @@ -5,66 +5,91 @@ var React = require('react-native/addons'); var { + ListView, PixelRatio, ScrollView, StyleSheet, Text, TouchableHighlight, View, - invariant, } = React; var createExamplePage = require('./createExamplePage'); -var EXAMPLES = [ - require('./ViewExample'), - require('./LayoutExample'), - require('./TextExample.ios'), - require('./TimerExample'), - require('./TextInputExample'), +var COMPONENTS = [ + require('./ActivityIndicatorExample'), + require('./DatePickerExample'), require('./ImageExample'), - require('./ListViewSimpleExample'), require('./ListViewPagingExample'), + require('./ListViewSimpleExample'), + require('./MapViewExample'), require('./NavigatorIOSExample'), - require('./StatusBarIOSExample'), - require('./PointerEventsExample'), - require('./TouchableExample'), - require('./ActivityIndicatorExample'), - require('./ScrollViewExample'), require('./PickerExample'), - require('./DatePickerExample'), - require('./GeolocationExample'), - require('./TabBarExample'), - require('./SwitchExample'), + require('./ScrollViewExample'), require('./SliderIOSExample'), - require('./AsyncStorageExample'), - require('./CameraRollExample.ios'), - require('./MapViewExample'), + require('./SwitchExample'), + require('./TabBarExample'), + require('./TextExample.ios'), + require('./TextInputExample'), + require('./TouchableExample'), + require('./ViewExample'), require('./WebViewExample'), - require('./AppStateIOSExample'), - require('./NetInfoExample'), - require('./AlertIOSExample'), +]; + +var APIS = [ + require('./ActionSheetIOSExample'), require('./AdSupportIOSExample'), + require('./AlertIOSExample'), require('./AppStateExample'), - require('./ActionSheetIOSExample'), + require('./AppStateIOSExample'), + require('./AsyncStorageExample'), + require('./CameraRollExample.ios'), + require('./GeolocationExample'), + require('./LayoutExample'), + require('./NetInfoExample'), + require('./PointerEventsExample'), + require('./StatusBarIOSExample'), + require('./TimerExample'), require('./VibrationIOSExample'), ]; var UIExplorerList = React.createClass({ + + getInitialState: function() { + var ds = new ListView.DataSource({ + rowHasChanged: (r1, r2) => r1 !== r2, + sectionHeaderHasChanged: (h1, h2) => h1 !== h2, + }); + return { + dataSource: ds.cloneWithRowsAndSections({ + components: COMPONENTS, + apis: APIS, + }), + }; + }, + render: function() { return ( - - - - {EXAMPLES.map(this._renderRow)} - - - + + ); + }, + + _renderSectionHeader: function(data, section) { + return ( + + + {section.toUpperCase()} + + ); }, _renderRow: function(example, i) { - invariant(example.title, 'Example must provide a title.'); return ( this._onPressRow(example)}> @@ -97,13 +122,12 @@ var styles = StyleSheet.create({ list: { backgroundColor: '#eeeeee', }, - group: { - backgroundColor: 'white', - marginVertical: 25, + sectionHeader: { + padding: 5, }, - line: { - backgroundColor: '#bbbbbb', - height: 1 / PixelRatio.get(), + sectionHeaderTitle: { + fontWeight: 'bold', + fontSize: 11, }, row: { backgroundColor: 'white',