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'),