diff --git a/Examples/UIExplorer/js/UIExplorerExampleList.js b/Examples/UIExplorer/js/UIExplorerExampleList.js index 232c6e11b..72db7e377 100644 --- a/Examples/UIExplorer/js/UIExplorerExampleList.js +++ b/Examples/UIExplorer/js/UIExplorerExampleList.js @@ -23,9 +23,9 @@ */ 'use strict'; -const ListView = require('ListView'); const Platform = require('Platform'); const React = require('react'); +const SectionList = require('SectionList'); const StyleSheet = require('StyleSheet'); const Text = require('Text'); const TextInput = require('TextInput'); @@ -44,11 +44,6 @@ import type { StyleObj, } from 'StyleSheetTypes'; -const ds = new ListView.DataSource({ - rowHasChanged: (r1, r2) => r1 !== r2, - sectionHeaderHasChanged: (h1, h2) => h1 !== h2, -}); - type Props = { onNavigate: Function, list: { @@ -60,49 +55,110 @@ type Props = { style?: ?StyleObj, }; +class RowComponent extends React.PureComponent { + props: { + item: Object, + onNavigate: Function, + onPress?: Function, + }; + _onPress = () => { + if (this.props.onPress) { + this.props.onPress(); + return; + } + this.props.onNavigate(UIExplorerActions.ExampleAction(this.props.item.key)); + }; + render() { + const {item} = this.props; + return ( + + + + + {item.module.title} + + + {item.module.description} + + + + + + ); + } +} + +const renderSectionHeader = ({section}) => + + {section.title} + ; + class UIExplorerExampleList extends React.Component { props: Props - render(): ?React.Element { + render() { const filterText = this.props.persister.state.filter; const filterRegex = new RegExp(String(filterText), 'i'); - const filter = (example) => filterRegex.test(example.module.title) && (!Platform.isTVOS || example.supportsTVOS); + const filter = (example) => + this.props.disableSearch || + filterRegex.test(example.module.title) && + (!Platform.isTVOS || example.supportsTVOS); - const dataSource = ds.cloneWithRowsAndSections({ - components: this.props.list.ComponentExamples.filter(filter), - apis: this.props.list.APIExamples.filter(filter), - }); + const sections = [ + { + data: this.props.list.ComponentExamples.filter(filter), + title: 'COMPONENTS', + key: 'c', + }, + { + data: this.props.list.APIExamples.filter(filter), + title: 'APIS', + key: 'a', + }, + ]; return ( {this._renderTitleRow()} {this._renderTextInput()} - ); } + _itemShouldUpdate(curr, prev) { + return curr.item !== prev.item; + } + + _renderItem = ({item}) => ; + _renderTitleRow(): ?React.Element { if (!this.props.displayTitleRow) { return null; } - return this._renderRow( - 'UIExplorer', - 'React Native Examples', - 'home_key', - () => { - this.props.onNavigate( - UIExplorerActions.ExampleListWithFilter('') - ); - } + return ( + { + this.props.onNavigate( + UIExplorerActions.ExampleListWithFilter('') + ); + }} + /> ); } @@ -129,41 +185,6 @@ class UIExplorerExampleList extends React.Component { ); } - _renderSectionHeader(data: any, section: string): ?React.Element { - return ( - - {section.toUpperCase()} - - ); - } - - _renderExampleRow(example: {key: string, module: Object}): ?React.Element { - return this._renderRow( - example.module.title, - example.module.description, - example.key, - () => this._handleRowPress(example.key) - ); - } - - _renderRow(title: string, description: string, key: ?string, handler: ?Function): ?React.Element { - return ( - - - - - {title} - - - {description} - - - - - - ); - } - _handleRowPress(exampleKey: string): void { this.props.onNavigate(UIExplorerActions.ExampleAction(exampleKey)); } diff --git a/Examples/UIExplorer/js/UIExplorerList.android.js b/Examples/UIExplorer/js/UIExplorerList.android.js index 1a527d453..a5ac35b1a 100644 --- a/Examples/UIExplorer/js/UIExplorerList.android.js +++ b/Examples/UIExplorer/js/UIExplorerList.android.js @@ -37,6 +37,10 @@ const ComponentExamples: Array = [ key: 'ButtonExample', module: require('./ButtonExample'), }, + { + key: 'FlatListExample', + module: require('./FlatListExample'), + }, { key: 'ImageExample', module: require('./ImageExample'), @@ -57,6 +61,10 @@ const ComponentExamples: Array = [ key: 'ModalExample', module: require('./ModalExample'), }, + { + key: 'MultiColumnExample', + module: require('./MultiColumnExample'), + }, { key: 'PickerExample', module: require('./PickerExample'), @@ -73,6 +81,10 @@ const ComponentExamples: Array = [ key: 'ScrollViewSimpleExample', module: require('./ScrollViewSimpleExample'), }, + { + key: 'SectionListExample', + module: require('./SectionListExample'), + }, { key: 'SliderExample', module: require('./SliderExample'), diff --git a/Examples/UIExplorer/js/UIExplorerList.ios.js b/Examples/UIExplorer/js/UIExplorerList.ios.js index 30361bf14..0c130d74f 100644 --- a/Examples/UIExplorer/js/UIExplorerList.ios.js +++ b/Examples/UIExplorer/js/UIExplorerList.ios.js @@ -45,6 +45,11 @@ const ComponentExamples: Array = [ module: require('./DatePickerIOSExample'), supportsTVOS: false, }, + { + key: 'FlatListExample', + module: require('./FlatListExample'), + supportsTVOS: true, + }, { key: 'ImageExample', module: require('./ImageExample'), @@ -85,6 +90,11 @@ const ComponentExamples: Array = [ module: require('./ModalExample'), supportsTVOS: true, }, + { + key: 'MultiColumnExample', + module: require('./MultiColumnExample'), + supportsTVOS: true, + }, { key: 'NavigatorExample', module: require('./Navigator/NavigatorExample'), @@ -125,6 +135,11 @@ const ComponentExamples: Array = [ module: require('./ScrollViewExample'), supportsTVOS: true, }, + { + key: 'SectionListExample', + module: require('./SectionListExample'), + supportsTVOS: true, + }, { key: 'SegmentedControlIOSExample', module: require('./SegmentedControlIOSExample'),