Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[createReactClass] Removing createReactClass from ListView*Example.js #21582

Closed
wants to merge 3 commits into from
Closed

[createReactClass] Removing createReactClass from ListView*Example.js #21582

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5f6f98d
UPDATE: rm createReactClass
exced Oct 9, 2018
93510da
UPDATE: rm createReactClass
exced Oct 9, 2018
3cbc1bc
UPDATE: RNTesterProps
exced Oct 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 47 additions & 36 deletions RNTester/js/ListViewExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,34 +10,45 @@

'use strict';

var React = require('react');
var createReactClass = require('create-react-class');
var ReactNative = require('react-native');
var {Image, ListView, TouchableHighlight, StyleSheet, Text, View} = ReactNative;

var RNTesterPage = require('./RNTesterPage');

var ListViewSimpleExample = createReactClass({
displayName: 'ListViewSimpleExample',
statics: {
title: '<ListView>',
description: 'Performant, scrollable list of data.',
},

getInitialState: function() {
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
return {
dataSource: ds.cloneWithRows(this._genRows({})),
};
},

_pressData: ({}: {[key: number]: boolean}),
const React = require('react');
const ReactNative = require('react-native');
const {
Image,
ListView,
TouchableHighlight,
StyleSheet,
Text,
View,
} = ReactNative;
const ListViewDataSource = require('ListViewDataSource');
const RNTesterPage = require('./RNTesterPage');

import type {RNTesterProps} from 'RNTesterTypes';

type State = {|
dataSource: ListViewDataSource,
|};

class ListViewSimpleExample extends React.Component<RNTesterProps, State> {
static title = '<ListView>';
static description = 'Performant, scrollable list of data.';

state = {
dataSource: this.getInitialDataSource(),
};

_pressData: {[key: number]: boolean} = {};

getInitialDataSource() {
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
return ds.cloneWithRows(this._genRows({}));
}

UNSAFE_componentWillMount: function() {
UNSAFE_componentWillMount() {
this._pressData = {};
},
}

render: function() {
render() {
return (
<RNTesterPage
title={this.props.navigator ? null : '<ListView>'}
Expand All @@ -50,14 +61,14 @@ var ListViewSimpleExample = createReactClass({
/>
</RNTesterPage>
);
},
}

_renderRow: function(
_renderRow = (
rowData: string,
sectionID: number,
rowID: number,
highlightRow: (sectionID: number, rowID: number) => void,
) {
) => {
var rowHash = Math.abs(hashCode(rowData));
var imgSource = THUMB_URLS[rowHash % THUMB_URLS.length];
return (
Expand All @@ -76,27 +87,27 @@ var ListViewSimpleExample = createReactClass({
</View>
</TouchableHighlight>
);
},
};

_genRows: function(pressData: {[key: number]: boolean}): Array<string> {
_genRows(pressData: {[key: number]: boolean}): Array<string> {
var dataBlob = [];
for (var ii = 0; ii < 100; ii++) {
var pressedText = pressData[ii] ? ' (pressed)' : '';
dataBlob.push('Row ' + ii + pressedText);
}
return dataBlob;
},
}

_pressRow: function(rowID: number) {
_pressRow = (rowID: number) => {
this._pressData[rowID] = !this._pressData[rowID];
this.setState({
dataSource: this.state.dataSource.cloneWithRows(
this._genRows(this._pressData),
),
});
},
};

_renderSeparator: function(
_renderSeparator(
sectionID: number,
rowID: number,
adjacentRowHighlighted: boolean,
Expand All @@ -110,8 +121,8 @@ var ListViewSimpleExample = createReactClass({
}}
/>
);
},
});
}
}

var THUMB_URLS = [
require('./Thumbnails/like.png'),
Expand Down
67 changes: 39 additions & 28 deletions RNTester/js/ListViewGridLayoutExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,19 @@

'use strict';

var React = require('react');
var createReactClass = require('create-react-class');
var ReactNative = require('react-native');
var {Image, ListView, TouchableHighlight, StyleSheet, Text, View} = ReactNative;
const React = require('react');
const ReactNative = require('react-native');
const {
Image,
ListView,
TouchableHighlight,
StyleSheet,
Text,
View,
} = ReactNative;
const ListViewDataSource = require('ListViewDataSource');

import type {RNTesterProps} from 'RNTesterTypes';

var THUMB_URLS = [
require('./Thumbnails/like.png'),
Expand All @@ -30,28 +39,30 @@ var THUMB_URLS = [
require('./Thumbnails/victory.png'),
];

var ListViewGridLayoutExample = createReactClass({
displayName: 'ListViewGridLayoutExample',
type State = {|
dataSource: ListViewDataSource,
|};

statics: {
title: '<ListView> - Grid Layout',
description: 'Flexbox grid layout.',
},
class ListViewGridLayoutExample extends React.Component<RNTesterProps, State> {
static title = '<ListView> - Grid Layout';
static description = 'Flexbox grid layout.';

getInitialState: function() {
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
return {
dataSource: ds.cloneWithRows(this._genRows({})),
};
},
state = {
dataSource: this.getInitialDataSource(),
};

_pressData: ({}: {[key: number]: boolean}),
getInitialDataSource() {
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
return ds.cloneWithRows(this._genRows({}));
}

UNSAFE_componentWillMount: function() {
_pressData: {[key: number]: boolean} = {};

UNSAFE_componentWillMount() {
this._pressData = {};
},
}

render: function() {
render() {
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.
Expand All @@ -64,9 +75,9 @@ var ListViewGridLayoutExample = createReactClass({
renderRow={this._renderRow}
/>
);
},
}

_renderRow: function(rowData: string, sectionID: number, rowID: number) {
_renderRow = (rowData: string, sectionID: number, rowID: number) => {
var rowHash = Math.abs(hashCode(rowData));
var imgSource = THUMB_URLS[rowHash % THUMB_URLS.length];
return (
Expand All @@ -81,26 +92,26 @@ var ListViewGridLayoutExample = createReactClass({
</View>
</TouchableHighlight>
);
},
};

_genRows: function(pressData: {[key: number]: boolean}): Array<string> {
_genRows(pressData: {[key: number]: boolean}): Array<string> {
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) {
_pressRow = (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) {
Expand Down