[ReactNative] Use oss TimerMixin
This commit is contained in:
parent
fe0527a7c4
commit
57ee9e7dc0
|
@ -18,9 +18,9 @@ var {
|
||||||
StyleSheet,
|
StyleSheet,
|
||||||
Text,
|
Text,
|
||||||
TextInput,
|
TextInput,
|
||||||
TimerMixin,
|
|
||||||
View,
|
View,
|
||||||
} = React;
|
} = React;
|
||||||
|
var TimerMixin = require('react-timer-mixin');
|
||||||
|
|
||||||
var MovieCell = require('./MovieCell');
|
var MovieCell = require('./MovieCell');
|
||||||
var MovieScreen = require('./MovieScreen');
|
var MovieScreen = require('./MovieScreen');
|
||||||
|
|
|
@ -14,9 +14,9 @@ var React = require('react-native');
|
||||||
var {
|
var {
|
||||||
ActivityIndicatorIOS,
|
ActivityIndicatorIOS,
|
||||||
StyleSheet,
|
StyleSheet,
|
||||||
TimerMixin,
|
|
||||||
View,
|
View,
|
||||||
} = React;
|
} = React;
|
||||||
|
var TimerMixin = require('react-timer-mixin');
|
||||||
|
|
||||||
var ToggleAnimatingActivityIndicator = React.createClass({
|
var ToggleAnimatingActivityIndicator = React.createClass({
|
||||||
mixins: [TimerMixin],
|
mixins: [TimerMixin],
|
||||||
|
|
|
@ -15,10 +15,10 @@ var {
|
||||||
AlertIOS,
|
AlertIOS,
|
||||||
StyleSheet,
|
StyleSheet,
|
||||||
Text,
|
Text,
|
||||||
TimerMixin,
|
|
||||||
TouchableHighlight,
|
TouchableHighlight,
|
||||||
View,
|
View,
|
||||||
} = React;
|
} = React;
|
||||||
|
var TimerMixin = require('react-timer-mixin');
|
||||||
|
|
||||||
var Button = React.createClass({
|
var Button = React.createClass({
|
||||||
render: function() {
|
render: function() {
|
||||||
|
|
|
@ -13,9 +13,9 @@ var React = require('react-native');
|
||||||
var {
|
var {
|
||||||
StyleSheet,
|
StyleSheet,
|
||||||
Text,
|
Text,
|
||||||
TimerMixin,
|
|
||||||
View,
|
View,
|
||||||
} = React;
|
} = React;
|
||||||
|
var TimerMixin = require('react-timer-mixin');
|
||||||
|
|
||||||
var TimersTest = React.createClass({
|
var TimersTest = React.createClass({
|
||||||
mixins: [TimerMixin],
|
mixins: [TimerMixin],
|
||||||
|
|
|
@ -21,7 +21,7 @@ var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
|
||||||
var StyleSheet = require('StyleSheet');
|
var StyleSheet = require('StyleSheet');
|
||||||
var Text = require('Text');
|
var Text = require('Text');
|
||||||
var TextInputState = require('TextInputState');
|
var TextInputState = require('TextInputState');
|
||||||
var TimerMixin = require('TimerMixin');
|
var TimerMixin = require('react-timer-mixin');
|
||||||
var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
|
var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
|
||||||
|
|
||||||
var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');
|
var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');
|
||||||
|
|
|
@ -14,7 +14,7 @@ var NativeMethodsMixin = require('NativeMethodsMixin');
|
||||||
var React = require('React');
|
var React = require('React');
|
||||||
var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
|
var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
|
||||||
var StyleSheet = require('StyleSheet');
|
var StyleSheet = require('StyleSheet');
|
||||||
var TimerMixin = require('TimerMixin');
|
var TimerMixin = require('react-timer-mixin');
|
||||||
var Touchable = require('Touchable');
|
var Touchable = require('Touchable');
|
||||||
var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
|
var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
|
||||||
var View = require('View');
|
var View = require('View');
|
||||||
|
|
|
@ -16,7 +16,7 @@ var RCTUIManager = require('NativeModules').UIManager;
|
||||||
var ScrollView = require('ScrollView');
|
var ScrollView = require('ScrollView');
|
||||||
var ScrollResponder = require('ScrollResponder');
|
var ScrollResponder = require('ScrollResponder');
|
||||||
var StaticRenderer = require('StaticRenderer');
|
var StaticRenderer = require('StaticRenderer');
|
||||||
var TimerMixin = require('TimerMixin');
|
var TimerMixin = require('react-timer-mixin');
|
||||||
|
|
||||||
var logError = require('logError');
|
var logError = require('logError');
|
||||||
var merge = require('merge');
|
var merge = require('merge');
|
||||||
|
|
|
@ -1,109 +0,0 @@
|
||||||
/**
|
|
||||||
* Copyright (c) 2015-present, Facebook, Inc.
|
|
||||||
* All rights reserved.
|
|
||||||
*
|
|
||||||
* This source code is licensed under the BSD-style license found in the
|
|
||||||
* LICENSE file in the root directory of this source tree. An additional grant
|
|
||||||
* of patent rights can be found in the PATENTS file in the same directory.
|
|
||||||
*
|
|
||||||
* @providesModule TimerMixin
|
|
||||||
* @flow
|
|
||||||
*/
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
var setImmediate = require('setImmediate');
|
|
||||||
var clearImmediate = require('clearImmediate');
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Using bare setTimeout, setInterval, setImmediate and
|
|
||||||
* requestAnimationFrame calls is very dangerous because if you forget to cancel
|
|
||||||
* the request before the component is unmounted, you risk the callback throwing
|
|
||||||
* an exception.
|
|
||||||
*
|
|
||||||
* If you include TimerMixin, then you can replace your calls
|
|
||||||
* to `setTimeout(fn, 500)`
|
|
||||||
* with `this.setTimeout(fn, 500)` (just prepend `this.`)
|
|
||||||
* and everything will be properly cleaned up for you.
|
|
||||||
*
|
|
||||||
* Example:
|
|
||||||
*
|
|
||||||
* var Component = React.createClass({
|
|
||||||
* mixins: [TimerMixin],
|
|
||||||
* componentDidMount: function() {
|
|
||||||
* this.setTimeout(
|
|
||||||
* () => { console.log('I do not leak!'); },
|
|
||||||
* 500
|
|
||||||
* );
|
|
||||||
* }
|
|
||||||
* });
|
|
||||||
*/
|
|
||||||
|
|
||||||
var setter = function(setter, clearer, array) {
|
|
||||||
return function(
|
|
||||||
callback: () => void,
|
|
||||||
delta: number
|
|
||||||
): number {
|
|
||||||
var id = setter(() => {
|
|
||||||
clearer.call(this, id);
|
|
||||||
callback.apply(this, arguments);
|
|
||||||
}, delta);
|
|
||||||
|
|
||||||
if (!this[array]) {
|
|
||||||
this[array] = [id];
|
|
||||||
} else {
|
|
||||||
this[array].push(id);
|
|
||||||
}
|
|
||||||
return id;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
var clearer = function(clearer, array) {
|
|
||||||
return function(id: number) {
|
|
||||||
if (this[array]) {
|
|
||||||
var index = this[array].indexOf(id);
|
|
||||||
if (index !== -1) {
|
|
||||||
this[array].splice(index, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
clearer(id);
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
var _timeouts = 'TimerMixin_timeouts';
|
|
||||||
var _clearTimeout = clearer(clearTimeout, _timeouts);
|
|
||||||
var _setTimeout = setter(setTimeout, _clearTimeout, _timeouts);
|
|
||||||
|
|
||||||
var _intervals = 'TimerMixin_intervals';
|
|
||||||
var _clearInterval = clearer(clearInterval, _intervals);
|
|
||||||
var _setInterval = setter(setInterval, () => {/* noop */}, _intervals);
|
|
||||||
|
|
||||||
var _immediates = 'TimerMixin_immediates';
|
|
||||||
var _clearImmediate = clearer(clearImmediate, _immediates);
|
|
||||||
var _setImmediate = setter(setImmediate, _clearImmediate, _immediates);
|
|
||||||
|
|
||||||
var _rafs = 'TimerMixin_rafs';
|
|
||||||
var _cancelAnimationFrame = clearer(window.cancelAnimationFrame, _rafs);
|
|
||||||
var _requestAnimationFrame = setter(window.requestAnimationFrame, _cancelAnimationFrame, _rafs);
|
|
||||||
|
|
||||||
var TimerMixin = {
|
|
||||||
componentWillUnmount: function() {
|
|
||||||
this[_timeouts] && this[_timeouts].forEach(this.clearTimeout);
|
|
||||||
this[_intervals] && this[_intervals].forEach(this.clearInterval);
|
|
||||||
this[_immediates] && this[_immediates].forEach(this.clearImmediate);
|
|
||||||
this[_rafs] && this[_rafs].forEach(this.cancelAnimationFrame);
|
|
||||||
},
|
|
||||||
|
|
||||||
setTimeout: _setTimeout,
|
|
||||||
clearTimeout: _clearTimeout,
|
|
||||||
|
|
||||||
setInterval: _setInterval,
|
|
||||||
clearInterval: _clearInterval,
|
|
||||||
|
|
||||||
setImmediate: _setImmediate,
|
|
||||||
clearImmediate: _clearImmediate,
|
|
||||||
|
|
||||||
requestAnimationFrame: _requestAnimationFrame,
|
|
||||||
cancelAnimationFrame: _cancelAnimationFrame,
|
|
||||||
};
|
|
||||||
|
|
||||||
module.exports = TimerMixin;
|
|
|
@ -54,7 +54,6 @@ var ReactNative = Object.assign(Object.create(require('React')), {
|
||||||
PanResponder: require('PanResponder'),
|
PanResponder: require('PanResponder'),
|
||||||
StatusBarIOS: require('StatusBarIOS'),
|
StatusBarIOS: require('StatusBarIOS'),
|
||||||
StyleSheet: require('StyleSheet'),
|
StyleSheet: require('StyleSheet'),
|
||||||
TimerMixin: require('TimerMixin'),
|
|
||||||
VibrationIOS: require('VibrationIOS'),
|
VibrationIOS: require('VibrationIOS'),
|
||||||
|
|
||||||
// Plugins
|
// Plugins
|
||||||
|
|
|
@ -30,9 +30,10 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"connect": "2.8.3",
|
"connect": "2.8.3",
|
||||||
"jstransform": "10.0.1",
|
"jstransform": "10.0.1",
|
||||||
|
"react-timer-mixin": "^0.13.1",
|
||||||
|
"react-tools": "0.13.0-rc2",
|
||||||
"source-map": "0.1.31",
|
"source-map": "0.1.31",
|
||||||
"stacktrace-parser": "0.1.1",
|
"stacktrace-parser": "0.1.1"
|
||||||
"react-tools": "0.13.0-rc2"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"ws": "0.4.31",
|
"ws": "0.4.31",
|
||||||
|
|
Loading…
Reference in New Issue