From bc651a28f9833d11c6e56c25a2d8d90fbb60a136 Mon Sep 17 00:00:00 2001
From: Website Deployment Script
minDate and maxDate options.<
var UIExplorerBlock = require('./UIExplorerBlock');
var UIExplorerPage = require('./UIExplorerPage');
-var DatePickerAndroidExample = React.createClass({
+class DatePickerAndroidExample extends React.Component {
+ static title = 'DatePickerAndroid';
+ static description = 'Standard Android date picker dialog';
- statics: {
- title: 'DatePickerAndroid',
- description: 'Standard Android date picker dialog',
- },
+ state = {
+ presetDate: new Date(2020, 4, 5),
+ allDate: new Date(2020, 4, 5),
+ simpleText: 'pick a date',
+ minText: 'pick a date, no earlier than today',
+ maxText: 'pick a date, no later than today',
+ presetText: 'pick a date, preset to 2020/5/5',
+ allText: 'pick a date between 2020/5/1 and 2020/5/10',
+ };
- getInitialState() {
- return {
- presetDate: new Date(2020, 4, 5),
- allDate: new Date(2020, 4, 5),
- simpleText: 'pick a date',
- minText: 'pick a date, no earlier than today',
- maxText: 'pick a date, no later than today',
- presetText: 'pick a date, preset to 2020/5/5',
- allText: 'pick a date between 2020/5/1 and 2020/5/10',
- };
- },
-
- async showPicker(stateKey, options) {
+ showPicker = async (stateKey, options) => {
try {
var newState = {};
const {action, year, month, day} = await DatePickerAndroid.open(options);
@@ -64,7 +59,7 @@ when using the minDate and maxDate options.<
} catch ({code, message}) {
console.warn(`Error in example '${stateKey}': `, message);
}
- },
+ };
render() {
return (
@@ -111,8 +106,8 @@ when using the minDate and maxDate options.<
</UIExplorerBlock>
</UIExplorerPage>
);
- },
-});
+ }
+}
var styles = StyleSheet.create({
text: {
diff --git a/releases/next/docs/datepickerios.html b/releases/next/docs/datepickerios.html
index acc973820af..9d9eb808a24 100644
--- a/releases/next/docs/datepickerios.html
+++ b/releases/next/docs/datepickerios.html
@@ -18,34 +18,30 @@ instance, to show times in Pacific Standard Time, pass -7 * 60.<
View,
} = ReactNative;
-var DatePickerExample = React.createClass({
- getDefaultProps: function () {
- return {
- date: new Date(),
- timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60,
- };
- },
+class DatePickerExample extends React.Component {
+ static defaultProps = {
+ date: new Date(),
+ timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60,
+ };
- getInitialState: function() {
- return {
- date: this.props.date,
- timeZoneOffsetInHours: this.props.timeZoneOffsetInHours,
- };
- },
+ state = {
+ date: this.props.date,
+ timeZoneOffsetInHours: this.props.timeZoneOffsetInHours,
+ };
- onDateChange: function(date) {
+ onDateChange = (date) => {
this.setState({date: date});
- },
+ };
- onTimezoneChange: function(event) {
+ onTimezoneChange = (event) => {
var offset = parseInt(event.nativeEvent.text, 10);
if (isNaN(offset)) {
return;
}
this.setState({timeZoneOffsetInHours: offset});
- },
+ };
- render: function() {
+ render() {
// Ideally, the timezone input would be a picker rather than a
// text input, but we don't have any pickers yet :(
return (
@@ -89,11 +85,11 @@ instance, to show times in Pacific Standard Time, pass -7 * 60.<
/>
</View>
);
- },
-});
+ }
+}
-var WithLabel = React.createClass({
- render: function() {
+class WithLabel extends React.Component {
+ render() {
return (
<View style={styles.labelContainer}>
<View style={styles.labelView}>
@@ -105,10 +101,10 @@ instance, to show times in Pacific Standard Time, pass -7 * 60.<
</View>
);
}
-});
+}
-var Heading = React.createClass({
- render: function() {
+class Heading extends React.Component {
+ render() {
return (
<View style={styles.headingContainer}>
<Text style={styles.heading}>
@@ -117,7 +113,7 @@ instance, to show times in Pacific Standard Time, pass -7 * 60.<
</View>
);
}
-});
+}
exports.displayName = (undefined: ?string);
exports.title = '<DatePickerIOS>';
diff --git a/releases/next/docs/geolocation.html b/releases/next/docs/geolocation.html
index 6a151fcd53b..da798979e5f 100644
--- a/releases/next/docs/geolocation.html
+++ b/releases/next/docs/geolocation.html
@@ -31,17 +31,15 @@ exports.examples }
];
-var GeolocationExample = React.createClass({
- watchID: (null: ?number),
+class GeolocationExample extends React.Component {
+ state = {
+ initialPosition: 'unknown',
+ lastPosition: 'unknown',
+ };
- getInitialState: function() {
- return {
- initialPosition: 'unknown',
- lastPosition: 'unknown',
- };
- },
+ watchID: ?number = null;
- componentDidMount: function() {
+ componentDidMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
var initialPosition = JSON.stringify(position);
@@ -54,13 +52,13 @@ exports.examples var lastPosition = JSON.stringify(position);
this.setState({lastPosition});
});
- },
+ }
- componentWillUnmount: function() {
+ componentWillUnmount() {
navigator.geolocation.clearWatch(this.watchID);
- },
+ }
- render: function() {
+ render() {
return (
<View>
<Text>
@@ -74,7 +72,7 @@ exports.examples /View>
);
}
-});
+}
var styles = StyleSheet.create({
title: {
diff --git a/releases/next/docs/layoutanimation.html b/releases/next/docs/layoutanimation.html
index 34a4f4e8799..4eb0bdd6d5c 100644
--- a/releases/next/docs/layoutanimation.html
+++ b/releases/next/docs/layoutanimation.html
@@ -15,25 +15,22 @@ const {
TouchableOpacity,
} = ReactNative;
-const AddRemoveExample = React.createClass({
-
- getInitialState() {
- return {
- views: [],
- };
- },
+class AddRemoveExample extends React.Component {
+ state = {
+ views: [],
+ };
componentWillUpdate() {
LayoutAnimation.easeInEaseOut();
- },
+ }
- _onPressAddView() {
+ _onPressAddView = () => {
this.setState((state) => ({views: [...state.views, {}]}));
- },
+ };
- _onPressRemoveView() {
+ _onPressRemoveView = () => {
this.setState((state) => ({views: state.views.slice(0, -1)}));
- },
+ };
render() {
const views = this.state.views.map((view, i) =>
@@ -58,8 +55,8 @@ const AddRemoveExample = React/View>
</View>
);
- },
-});
+ }
+}
const GreenSquare = () =>
<View style={styles.greenSquare}>
@@ -71,18 +68,15 @@ const BlueSquare = >Blue square</Text>
</View>;
-const CrossFadeExample = React.createClass({
+class CrossFadeExample extends React.Component {
+ state = {
+ toggled: false,
+ };
- getInitialState() {
- return {
- toggled: false,
- };
- },
-
- _onPressToggle() {
+ _onPressToggle = () => {
LayoutAnimation.easeInEaseOut();
this.setState((state) => ({toggled: !state.toggled}));
- },
+ };
render() {
return (
@@ -101,8 +95,8 @@ const CrossFadeExample = React/View>
</View>
);
- },
-});
+ }
+}
const styles = StyleSheet.create({
container: {
diff --git a/releases/next/docs/linking.html b/releases/next/docs/linking.html
index b77573e8f86..6581fc12b76 100644
--- a/releases/next/docs/linking.html
+++ b/releases/next/docs/linking.html
@@ -64,13 +64,12 @@ it will give the link url, otherwise it will give nullNOTE:
} = ReactNative;
var UIExplorerBlock = require('./UIExplorerBlock');
-var OpenURLButton = React.createClass({
-
- propTypes: {
+class OpenURLButton extends React.Component {
+ static propTypes = {
url: React.PropTypes.string,
- },
+ };
- handleClick: function() {
+ handleClick = () => {
Linking.canOpenURL(this.props.url).then(supported => {
if (supported) {
Linking.openURL(this.props.url);
@@ -78,9 +77,9 @@ it will give the link url, otherwise it will give null
NOTE:
console.log('Don\'t know how to open URI: ' + this.props.url);
}
});
- },
+ };
- render: function() {
+ render() {
return (
<TouchableOpacity
onPress={this.handleClick}>
@@ -90,16 +89,13 @@ it will give the link url, otherwise it will give null
NOTE:
</TouchableOpacity>
);
}
-});
+}
-var IntentAndroidExample = React.createClass({
+class IntentAndroidExample extends React.Component {
+ static title = 'Linking';
+ static description = 'Shows how to use Linking to open URLs.';
- statics: {
- title: 'Linking',
- description: 'Shows how to use Linking to open URLs.',
- },
-
- render: function() {
+ render() {
return (
<UIExplorerBlock title="Open external URLs">
<OpenURLButton url={'https://www.facebook.com'} />
@@ -110,8 +106,8 @@ it will give the link url, otherwise it will give null
NOTE:
<OpenURLButton url={'tel:9876543210'} />
</UIExplorerBlock>
);
- },
-});
+ }
+}
var styles = StyleSheet.create({
container: {
diff --git a/releases/next/docs/mapview.html b/releases/next/docs/mapview.html
index 5d334f0bbbc..91b45fb4aa6 100644
--- a/releases/next/docs/mapview.html
+++ b/releases/next/docs/mapview.html
@@ -182,16 +182,13 @@ Default value is true.
true.true.true.true.true.