ActivityIndicator Example ES6 classes migration and TimerMixin removal

Summary:
**This is the first part of `React.createClass` -> ES2015 classes migration.
1. Rewritten UI Explorer ActivityIndicator example to ES2015 classes
2. Removed TimerMixin from example.

Motivation:

- ES2015 classes do not support mixins so due to the classes / pure functions as "best practices" it would be better to avoid mixins in examples.

- TimerMixin is covered later and is out of scope of current example.
Closes https://github.com/facebook/react-native/pull/8342

Differential Revision: D3659349

fbshipit-source-id: e1c6f1a3091d60c589303fe6da55b8d132adedc3
This commit is contained in:
Artyom Trityak 2016-08-02 17:06:37 -07:00 committed by Facebook Github Bot 8
parent b21c8f1614
commit 5617d41327

View File

@ -22,34 +22,43 @@
*/
'use strict';
const React = require('react');
const ReactNative = require('react-native');
const {
ActivityIndicator,
StyleSheet,
View,
} = ReactNative;
const TimerMixin = require('react-timer-mixin');
import React, { Component } from 'react';
import { ActivityIndicator, StyleSheet, View } from 'react-native';
const ToggleAnimatingActivityIndicator = React.createClass({
mixins: [TimerMixin],
/**
* Optional Flowtype state and timer types definition
*/
type State = { animating: boolean; };
type Timer = number;
getInitialState() {
return {
class ToggleAnimatingActivityIndicator extends Component {
/**
* Optional Flowtype state and timer types
*/
state: State;
_timer: Timer;
constructor(props) {
super(props);
this.state = {
animating: true,
};
},
setToggleTimeout() {
this.setTimeout(() => {
this.setState({animating: !this.state.animating});
this.setToggleTimeout();
}, 2000);
},
}
componentDidMount() {
this.setToggleTimeout();
},
}
componentWillUnmount() {
clearTimeout(this._timer);
}
setToggleTimeout() {
this._timer = setTimeout(() => {
this.setState({animating: !this.state.animating});
this.setToggleTimeout();
}, 2000);
}
render() {
return (
@ -60,7 +69,9 @@ const ToggleAnimatingActivityIndicator = React.createClass({
/>
);
}
});
}
exports.displayName = (undefined: ?string);
exports.framework = 'React';