diff --git a/Examples/UIExplorer/js/NativeAnimationsExample.js b/Examples/UIExplorer/js/NativeAnimationsExample.js index 209271b36..515a33d37 100644 --- a/Examples/UIExplorer/js/NativeAnimationsExample.js +++ b/Examples/UIExplorer/js/NativeAnimationsExample.js @@ -123,6 +123,52 @@ class ValueListenerExample extends React.Component { } } +const UIExplorerSettingSwitchRow = require('UIExplorerSettingSwitchRow'); +class InternalSettings extends React.Component { + _stallInterval: ?number; + state: {busyTime: number | string, filteredStall: number}; + render() { + return ( + + { + this._stallInterval = setInterval(() => { + const start = Date.now(); + console.warn('burn CPU'); + while ((Date.now() - start) < 100) {} + }, 300); + }} + onDisable={() => { + clearInterval(this._stallInterval || 0); + }} + /> + { + require('JSEventLoopWatchdog').install({thresholdMS: 25}); + this.setState({busyTime: ''}); + require('JSEventLoopWatchdog').addHandler({ + onStall: ({busyTime}) => this.setState((state) => ({ + busyTime, + filteredStall: (state.filteredStall || 0) * 0.97 + busyTime * 0.03, + })), + }); + }} + onDisable={() => { + console.warn('Cannot disable yet....'); + }} + /> + {this.state && + JS Stall filtered: {Math.round(this.state.filteredStall)}, last: {this.state.busyTime} + } + + ); + } +} + const styles = StyleSheet.create({ row: { padding: 10, @@ -147,8 +193,7 @@ exports.examples = [ return ( + config={{ duration: 1000 }}> {anim => ( + config={{ duration: 1000 }}> {anim => ( + config={{ duration: 1000 }}> {anim => ( + config={{ duration: 1000 }}> {anim => ( + config={{ duration: 1000 }}> {anim => ( + config={{ bounciness: 0 }}> {anim => ( + reverseConfig={{ velocity: -0.5 }}> {anim => ( + ); + }, + }, ]; diff --git a/Examples/UIExplorer/js/UIExplorerSettingSwitchRow.js b/Examples/UIExplorer/js/UIExplorerSettingSwitchRow.js new file mode 100644 index 000000000..628355e07 --- /dev/null +++ b/Examples/UIExplorer/js/UIExplorerSettingSwitchRow.js @@ -0,0 +1,54 @@ +/** + * 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 UIExplorerSettingSwitchRow + * @flow + */ +'use strict'; + +const React = require('React'); +const StyleSheet = require('StyleSheet'); +const Switch = require('Switch'); +const Text = require('Text'); +const UIExplorerStatePersister = require('./UIExplorerStatePersister'); +const View = require('View'); + +class UIExplorerSettingSwitchRow extends React.Component { + componentWillReceiveProps(newProps) { + const {onEnable, onDisable, persister} = this.props; + if (newProps.persister.state !== persister.state) { + newProps.persister.state ? onEnable() : onDisable(); + } + } + render() { + const {label, persister} = this.props; + return ( + + {label} + { + persister.setState(() => value); + }} + /> + + ); + } +} +const styles = StyleSheet.create({ + row: { + padding: 10, + flexDirection: 'row', + justifyContent: 'space-between', + }, +}); +UIExplorerSettingSwitchRow = UIExplorerStatePersister.createContainer(UIExplorerSettingSwitchRow, { + cacheKeySuffix: ({label}) => 'Switch:' + label, + getInitialState: ({initialValue}) => initialValue, +}); +module.exports = UIExplorerSettingSwitchRow; diff --git a/Libraries/Interaction/JSEventLoopWatchdog.js b/Libraries/Interaction/JSEventLoopWatchdog.js index 8d5dfadb9..acd3f7575 100644 --- a/Libraries/Interaction/JSEventLoopWatchdog.js +++ b/Libraries/Interaction/JSEventLoopWatchdog.js @@ -11,11 +11,12 @@ */ 'use strict'; +const infoLog = require('infoLog'); const performanceNow = require('fbjs/lib/performanceNow'); type Handler = { onIterate?: () => void, - onStall: (params: {lastInterval: number}) => string, + onStall: (params: {lastInterval: number, busyTime: number}) => ?string, }; /** @@ -35,7 +36,7 @@ const JSEventLoopWatchdog = { return {stallCount, totalStallTime, longestStall, acceptableBusyTime}; }, reset: function() { - console.log('JSEventLoopWatchdog: reset'); + infoLog('JSEventLoopWatchdog: reset'); totalStallTime = 0; stallCount = 0; longestStall = 0; @@ -62,9 +63,9 @@ const JSEventLoopWatchdog = { let msg = `JSEventLoopWatchdog: JS thread busy for ${busyTime}ms. ` + `${totalStallTime}ms in ${stallCount} stalls so far. `; handlers.forEach((handler) => { - msg += handler.onStall({lastInterval}); + msg += handler.onStall({lastInterval, busyTime}) || ''; }); - console.log(msg); + infoLog(msg); } handlers.forEach((handler) => { handler.onIterate && handler.onIterate();