[ReactNative] Use oss TimerMixin

This commit is contained in:
Tadeu Zagallo 2015-03-24 11:35:59 -07:00
parent fe0527a7c4
commit 57ee9e7dc0
10 changed files with 10 additions and 119 deletions

View File

@ -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');

View File

@ -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],

View File

@ -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() {

View File

@ -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],

View File

@ -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');

View File

@ -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');

View File

@ -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');

View File

@ -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;

View File

@ -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

View File

@ -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",