mirror of
https://github.com/status-im/react-native.git
synced 2025-01-14 19:44:13 +00:00
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:
parent
b21c8f1614
commit
5617d41327
@ -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';
|
||||
|
Loading…
x
Reference in New Issue
Block a user