diff --git a/Examples/Movies/SearchScreen.js b/Examples/Movies/SearchScreen.js index ea4247f71..b845c03a8 100644 --- a/Examples/Movies/SearchScreen.js +++ b/Examples/Movies/SearchScreen.js @@ -18,9 +18,9 @@ var { StyleSheet, Text, TextInput, - TimerMixin, View, } = React; +var TimerMixin = require('react-timer-mixin'); var MovieCell = require('./MovieCell'); var MovieScreen = require('./MovieScreen'); diff --git a/Examples/UIExplorer/ActivityIndicatorExample.js b/Examples/UIExplorer/ActivityIndicatorExample.js index 7d05bd88a..99ae39741 100644 --- a/Examples/UIExplorer/ActivityIndicatorExample.js +++ b/Examples/UIExplorer/ActivityIndicatorExample.js @@ -14,9 +14,9 @@ var React = require('react-native'); var { ActivityIndicatorIOS, StyleSheet, - TimerMixin, View, } = React; +var TimerMixin = require('react-timer-mixin'); var ToggleAnimatingActivityIndicator = React.createClass({ mixins: [TimerMixin], diff --git a/Examples/UIExplorer/TimerExample.js b/Examples/UIExplorer/TimerExample.js index ef05ebf93..b341f086c 100644 --- a/Examples/UIExplorer/TimerExample.js +++ b/Examples/UIExplorer/TimerExample.js @@ -15,10 +15,10 @@ var { AlertIOS, StyleSheet, Text, - TimerMixin, TouchableHighlight, View, } = React; +var TimerMixin = require('react-timer-mixin'); var Button = React.createClass({ render: function() { diff --git a/IntegrationTests/TimersTest.js b/IntegrationTests/TimersTest.js index bee3fe183..4814d8b1d 100644 --- a/IntegrationTests/TimersTest.js +++ b/IntegrationTests/TimersTest.js @@ -13,9 +13,9 @@ var React = require('react-native'); var { StyleSheet, Text, - TimerMixin, View, } = React; +var TimerMixin = require('react-timer-mixin'); var TimersTest = React.createClass({ mixins: [TimerMixin], diff --git a/Libraries/Components/TextInput/TextInput.ios.js b/Libraries/Components/TextInput/TextInput.ios.js index 947bc0a4a..6affc4042 100644 --- a/Libraries/Components/TextInput/TextInput.ios.js +++ b/Libraries/Components/TextInput/TextInput.ios.js @@ -21,7 +21,7 @@ var ReactIOSViewAttributes = require('ReactIOSViewAttributes'); var StyleSheet = require('StyleSheet'); var Text = require('Text'); var TextInputState = require('TextInputState'); -var TimerMixin = require('TimerMixin'); +var TimerMixin = require('react-timer-mixin'); var TouchableWithoutFeedback = require('TouchableWithoutFeedback'); var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass'); diff --git a/Libraries/Components/Touchable/TouchableHighlight.js b/Libraries/Components/Touchable/TouchableHighlight.js index 981208577..6feaef099 100644 --- a/Libraries/Components/Touchable/TouchableHighlight.js +++ b/Libraries/Components/Touchable/TouchableHighlight.js @@ -14,7 +14,7 @@ var NativeMethodsMixin = require('NativeMethodsMixin'); var React = require('React'); var ReactIOSViewAttributes = require('ReactIOSViewAttributes'); var StyleSheet = require('StyleSheet'); -var TimerMixin = require('TimerMixin'); +var TimerMixin = require('react-timer-mixin'); var Touchable = require('Touchable'); var TouchableWithoutFeedback = require('TouchableWithoutFeedback'); var View = require('View'); diff --git a/Libraries/CustomComponents/ListView/ListView.js b/Libraries/CustomComponents/ListView/ListView.js index 04f7615cc..4eb630890 100644 --- a/Libraries/CustomComponents/ListView/ListView.js +++ b/Libraries/CustomComponents/ListView/ListView.js @@ -16,7 +16,7 @@ var RCTUIManager = require('NativeModules').UIManager; var ScrollView = require('ScrollView'); var ScrollResponder = require('ScrollResponder'); var StaticRenderer = require('StaticRenderer'); -var TimerMixin = require('TimerMixin'); +var TimerMixin = require('react-timer-mixin'); var logError = require('logError'); var merge = require('merge'); diff --git a/Libraries/Utilities/TimerMixin.js b/Libraries/Utilities/TimerMixin.js deleted file mode 100644 index 0fc68457d..000000000 --- a/Libraries/Utilities/TimerMixin.js +++ /dev/null @@ -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; diff --git a/Libraries/react-native/react-native.js b/Libraries/react-native/react-native.js index a6f25c9f1..12112a4bb 100644 --- a/Libraries/react-native/react-native.js +++ b/Libraries/react-native/react-native.js @@ -54,7 +54,6 @@ var ReactNative = Object.assign(Object.create(require('React')), { PanResponder: require('PanResponder'), StatusBarIOS: require('StatusBarIOS'), StyleSheet: require('StyleSheet'), - TimerMixin: require('TimerMixin'), VibrationIOS: require('VibrationIOS'), // Plugins diff --git a/package.json b/package.json index 38ac7fd4b..8b3e55619 100644 --- a/package.json +++ b/package.json @@ -30,9 +30,10 @@ "dependencies": { "connect": "2.8.3", "jstransform": "10.0.1", + "react-timer-mixin": "^0.13.1", + "react-tools": "0.13.0-rc2", "source-map": "0.1.31", - "stacktrace-parser": "0.1.1", - "react-tools": "0.13.0-rc2" + "stacktrace-parser": "0.1.1" }, "devDependencies": { "ws": "0.4.31",