-
Notifications
You must be signed in to change notification settings - Fork 24.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- [ReactNative] Add AsyncStorageTest | Spencer Ahrens - [ReactNative] Add timers integration test | Spencer Ahrens - [ReactNative] Remove ExpandingText | Tadeu Zagallo - [TouchableHighlight] Preserve underlay style when restoring inactive props | Christopher Chedeau - clean flow errors in react-native-github | Basil Hosmer - [ReactNative] Sort React Native exports into two groups, Components and APIs | Christopher Chedeau - [ReactNative] Rename Slider to SliderIOS | Tadeu Zagallo - [react_native] JS files from D1919491: Improve JS logging | Martin Kosiba - [ReactNative] Add TimerExample | Spencer Ahrens - [RFC][ReactNative] increase timer resolution | Spencer Ahrens - [ReactNative] Strip prefixes from NativeModules keys | Spencer Ahrens - [ReactNative] Small docs cleanup in ActivityIndicatorIOS and DatePickerIOS | Christopher Chedeau - [ReactNative] Improvements on perf measurement output | Jing Chen - [ReactNative] Clean up Touchable PropTypes | Christopher Chedeau - [ReactKit] Fail tests when redbox shows up | Alex Kotliarskyi
- Loading branch information
Showing
75 changed files
with
794 additions
and
372 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,193 @@ | ||
| /** | ||
| * Copyright 2004-present Facebook. All Rights Reserved. | ||
| */ | ||
| 'use strict'; | ||
|
|
||
| var React = require('react-native'); | ||
| var { | ||
| AlertIOS, | ||
| StyleSheet, | ||
| Text, | ||
| TimerMixin, | ||
| TouchableHighlight, | ||
| View, | ||
| } = React; | ||
|
|
||
| var Button = React.createClass({ | ||
| render: function() { | ||
| return ( | ||
| <TouchableHighlight | ||
| onPress={this.props.onPress} | ||
| style={styles.button} | ||
| underlayColor="#eeeeee"> | ||
| <Text> | ||
| {this.props.children} | ||
| </Text> | ||
| </TouchableHighlight> | ||
| ); | ||
| }, | ||
| }); | ||
|
|
||
| var TimerTester = React.createClass({ | ||
| mixins: [TimerMixin], | ||
|
|
||
| render: function() { | ||
| var args = 'fn' + (this.props.dt !== undefined ? ', ' + this.props.dt : ''); | ||
| return ( | ||
| <Button onPress={this._run}> | ||
| Measure: {this.props.type}({args}) - {this._ii || 0} | ||
| </Button> | ||
| ); | ||
| }, | ||
|
|
||
| _run: function() { | ||
| if (!this._start) { | ||
| var d = new Date(); | ||
| this._start = d.getTime(); | ||
| this._iters = 100; | ||
| this._ii = 0; | ||
| if (this.props.type === 'setTimeout') { | ||
| if (this.props.dt < 1) { | ||
| this._iters = 5000; | ||
| } else if (this.props.dt > 20) { | ||
| this._iters = 10; | ||
| } | ||
| this._timerFn = () => this.setTimeout(this._run, this.props.dt); | ||
| } else if (this.props.type === 'requestAnimationFrame') { | ||
| this._timerFn = () => this.requestAnimationFrame(this._run); | ||
| } else if (this.props.type === 'setImmediate') { | ||
| this._iters = 5000; | ||
| this._timerFn = () => this.setImmediate(this._run); | ||
| } else if (this.props.type === 'setInterval') { | ||
| this._iters = 30; // Only used for forceUpdate periodicidy | ||
| this._timerFn = null; | ||
| this._handle = this.setInterval(this._run, this.props.dt); | ||
| } | ||
| } | ||
| if (this._ii >= this._iters && !this._handle) { | ||
| var d = new Date(); | ||
| var e = (d.getTime() - this._start); | ||
| var msg = 'Finished ' + this._ii + ' ' + this.props.type + ' calls.\n' + | ||
| 'Elapsed time: ' + e + ' ms\n' + (e / this._ii) + ' ms / iter'; | ||
| console.log(msg); | ||
| AlertIOS.alert(msg); | ||
| this._start = null; | ||
| this.forceUpdate(() => { this._ii = 0; }); | ||
| return; | ||
| } | ||
| this._ii++; | ||
| // Only re-render occasionally so we don't slow down timers. | ||
| if (this._ii % (this._iters / 5) === 0) { | ||
| this.forceUpdate(); | ||
| } | ||
| this._timerFn && this._timerFn(); | ||
| }, | ||
|
|
||
| clear: function() { | ||
| this.clearInterval(this._handle); // invalid handles are ignored | ||
| if (this._handle) { | ||
| // Configure things so we can do a final run to update UI and reset state. | ||
| this._handle = null; | ||
| this._iters = this._ii; | ||
| this._run(); | ||
| } | ||
| }, | ||
| }); | ||
|
|
||
| var styles = StyleSheet.create({ | ||
| button: { | ||
| borderColor: 'gray', | ||
| borderRadius: 8, | ||
| borderWidth: 1, | ||
| padding: 10, | ||
| margin: 5, | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| }, | ||
| }); | ||
|
|
||
| exports.framework = 'React'; | ||
| exports.title = 'Timers, TimerMixin'; | ||
| exports.description = 'The TimerMixin provides timer functions for executing ' + | ||
| 'code in the future that are safely cleaned up when the component unmounts.'; | ||
|
|
||
| exports.examples = [ | ||
| { | ||
| title: 'this.setTimeout(fn, t)', | ||
| description: 'Execute function fn t milliseconds in the future. If ' + | ||
| 't === 0, it will be enqueued immediately in the next event loop. ' + | ||
| 'Larger values will fire on the closest frame.', | ||
| render: function() { | ||
| return ( | ||
| <View> | ||
| <TimerTester type="setTimeout" dt={0} /> | ||
| <TimerTester type="setTimeout" dt={1} /> | ||
| <TimerTester type="setTimeout" dt={100} /> | ||
| </View> | ||
| ); | ||
| }, | ||
| }, | ||
| { | ||
| title: 'this.requestAnimationFrame(fn)', | ||
| description: 'Execute function fn on the next frame.', | ||
| render: function() { | ||
| return ( | ||
| <View> | ||
| <TimerTester type="requestAnimationFrame" /> | ||
| </View> | ||
| ); | ||
| }, | ||
| }, | ||
| { | ||
| title: 'this.setImmediate(fn)', | ||
| description: 'Execute function fn at the end of the current JS event loop.', | ||
| render: function() { | ||
| return ( | ||
| <View> | ||
| <TimerTester type="setImmediate" /> | ||
| </View> | ||
| ); | ||
| }, | ||
| }, | ||
| { | ||
| title: 'this.setInterval(fn, t)', | ||
| description: 'Execute function fn every t milliseconds until cancelled ' + | ||
| 'or component is unmounted.', | ||
| render: function() { | ||
| var IntervalExample = React.createClass({ | ||
| getInitialState: function() { | ||
| return { | ||
| showTimer: true, | ||
| }; | ||
| }, | ||
|
|
||
| render: function() { | ||
| if (this.state.showTimer) { | ||
| var timer = | ||
| <TimerTester ref="interval" dt={25} type="setInterval" />; | ||
| var toggleText = 'Unmount timer'; | ||
| } else { | ||
| var timer = null; | ||
| var toggleText = 'Mount new timer'; | ||
| } | ||
| return ( | ||
| <View> | ||
| {timer} | ||
| <Button onPress={() => this.refs.interval.clear() }> | ||
| Clear interval | ||
| </Button> | ||
| <Button onPress={this._toggleTimer}> | ||
| {toggleText} | ||
| </Button> | ||
| </View> | ||
| ); | ||
| }, | ||
|
|
||
| _toggleTimer: function() { | ||
| this.setState({showTimer: !this.state.showTimer}); | ||
| }, | ||
| }); | ||
| return <IntervalExample />; | ||
| }, | ||
| }, | ||
| ]; |
Oops, something went wrong.