react-native/Libraries/ReactIOS/YellowBox.js

365 lines
9.1 KiB
JavaScript

/**
* 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 YellowBox
* @flow
*/
'use strict';
const EventEmitter = require('EventEmitter');
import type EmitterSubscription from 'EmitterSubscription';
const Platform = require('Platform');
const React = require('React');
const StyleSheet = require('StyleSheet');
const _warningEmitter = new EventEmitter();
const _warningMap = new Map();
/**
* YellowBox renders warnings at the bottom of the app being developed.
*
* Warnings help guard against subtle yet significant issues that can impact the
* quality of the app. This "in your face" style of warning allows developers to
* notice and correct these issues as quickly as possible.
*
* By default, the warning box is enabled in `__DEV__`. Set the following flag
* to disable it (and call `console.warn` to update any rendered <YellowBox>):
*
* console.disableYellowBox = true;
* console.warn('YellowBox is disabled.');
*
* Warnings can be ignored programmatically by setting the array:
*
* console.ignoredYellowBox = ['Warning: ...'];
*
* Strings in `console.ignoredYellowBox` can be a prefix of the warning that
* should be ignored.
*/
if (__DEV__) {
const {error, warn} = console;
console.error = function() {
error.apply(console, arguments);
// Show yellow box for the `warning` module.
if (typeof arguments[0] === 'string' &&
arguments[0].startsWith('Warning: ')) {
updateWarningMap.apply(null, arguments);
}
};
console.warn = function() {
warn.apply(console, arguments);
updateWarningMap.apply(null, arguments);
};
}
/**
* Simple function for formatting strings.
*
* Replaces placeholders with values passed as extra arguments
*
* @param {string} format the base string
* @param ...args the values to insert
* @return {string} the replaced string
*/
function sprintf(format, ...args) {
var index = 0;
return format.replace(/%s/g, match => args[index++]);
}
function updateWarningMap(format, ...args): void {
const stringifySafe = require('stringifySafe');
format = String(format);
const argCount = (format.match(/%s/g) || []).length;
const warning = [
sprintf(format, ...args.slice(0, argCount)),
...args.slice(argCount).map(stringifySafe),
].join(' ');
const count = _warningMap.has(warning) ? _warningMap.get(warning) : 0;
_warningMap.set(warning, count + 1);
_warningEmitter.emit('warning', _warningMap);
}
function isWarningIgnored(warning: string): boolean {
return (
Array.isArray(console.ignoredYellowBox) &&
console.ignoredYellowBox.some(
ignorePrefix => warning.startsWith(ignorePrefix)
)
);
}
const WarningRow = ({count, warning, onPress}) => {
const Text = require('Text');
const TouchableHighlight = require('TouchableHighlight');
const View = require('View');
const countText = count > 1 ?
<Text style={styles.listRowCount}>{'(' + count + ') '}</Text> :
null;
return (
<View style={styles.listRow}>
<TouchableHighlight
activeOpacity={0.5}
onPress={onPress}
style={styles.listRowContent}
underlayColor="transparent">
<Text style={styles.listRowText} numberOfLines={2}>
{countText}
{warning}
</Text>
</TouchableHighlight>
</View>
);
};
const WarningInspector = ({
count,
warning,
onClose,
onDismiss,
onDismissAll,
}) => {
const ScrollView = require('ScrollView');
const Text = require('Text');
const TouchableHighlight = require('TouchableHighlight');
const View = require('View');
const countSentence =
'Warning encountered ' + count + ' time' + (count - 1 ? 's' : '') + '.';
return (
<TouchableHighlight
activeOpacity={0.95}
underlayColor={backgroundColor(0.8)}
onPress={onClose}
style={styles.inspector}>
<View style={styles.inspectorContent}>
<View style={styles.inspectorCount}>
<Text style={styles.inspectorCountText}>{countSentence}</Text>
</View>
<ScrollView style={styles.inspectorWarning}>
<Text style={styles.inspectorWarningText}>{warning}</Text>
</ScrollView>
<View style={styles.inspectorButtons}>
<TouchableHighlight
activeOpacity={0.5}
onPress={onDismiss}
style={styles.inspectorButton}
underlayColor="transparent">
<Text style={styles.inspectorButtonText}>
Dismiss
</Text>
</TouchableHighlight>
<TouchableHighlight
activeOpacity={0.5}
onPress={onDismissAll}
style={styles.inspectorButton}
underlayColor="transparent">
<Text style={styles.inspectorButtonText}>
Dismiss All
</Text>
</TouchableHighlight>
</View>
</View>
</TouchableHighlight>
);
};
class YellowBox extends React.Component {
state: {
inspecting: ?string;
warningMap: Map;
};
_listener: ?EmitterSubscription;
constructor(props: mixed, context: mixed) {
super(props, context);
this.state = {
inspecting: null,
warningMap: _warningMap,
};
this.dismissWarning = warning => {
const {inspecting, warningMap} = this.state;
if (warning) {
warningMap.delete(warning);
} else {
warningMap.clear();
}
this.setState({
inspecting: (warning && inspecting !== warning) ? inspecting : null,
warningMap,
});
};
}
componentDidMount() {
let scheduled = null;
this._listener = _warningEmitter.addListener('warning', warningMap => {
// Use `setImmediate` because warnings often happen during render, but
// state cannot be set while rendering.
scheduled = scheduled || setImmediate(() => {
scheduled = null;
this.setState({
warningMap,
});
});
});
}
componentWillUnmount() {
if (this._listener) {
this._listener.remove();
}
}
render() {
if (console.disableYellowBox || this.state.warningMap.size === 0) {
return null;
}
const ScrollView = require('ScrollView');
const View = require('View');
const inspecting = this.state.inspecting;
const inspector = inspecting !== null ?
<WarningInspector
count={this.state.warningMap.get(inspecting)}
warning={inspecting}
onClose={() => this.setState({inspecting: null})}
onDismiss={() => this.dismissWarning(inspecting)}
onDismissAll={() => this.dismissWarning(null)}
/> :
null;
const rows = [];
this.state.warningMap.forEach((count, warning) => {
if (!isWarningIgnored(warning)) {
rows.push(
<WarningRow
key={warning}
count={count}
warning={warning}
onPress={() => this.setState({inspecting: warning})}
onDismiss={() => this.dismissWarning(warning)}
/>
);
}
});
const listStyle = [
styles.list,
// Additional `0.4` so the 5th row can peek into view.
{height: Math.min(rows.length, 4.4) * (rowGutter + rowHeight)},
];
return (
<View style={inspector ? styles.fullScreen : listStyle}>
<ScrollView style={listStyle} scrollsToTop={false}>
{rows}
</ScrollView>
{inspector}
</View>
);
}
}
const backgroundColor = opacity => 'rgba(250, 186, 48, ' + opacity + ')';
const textColor = 'white';
const rowGutter = 1;
const rowHeight = 46;
var styles = StyleSheet.create({
fullScreen: {
backgroundColor: 'transparent',
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
},
inspector: {
backgroundColor: backgroundColor(0.95),
flex: 1,
},
inspectorContainer: {
flex: 1,
},
inspectorButtons: {
flexDirection: 'row',
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
},
inspectorButton: {
flex: 1,
padding: 22,
},
inspectorButtonText: {
color: textColor,
fontSize: 14,
opacity: 0.8,
textAlign: 'center',
},
inspectorContent: {
flex: 1,
paddingTop: 5,
},
inspectorCount: {
padding: 15,
paddingBottom: 0,
},
inspectorCountText: {
color: textColor,
fontSize: 14,
},
inspectorWarning: {
padding: 15,
position: 'absolute',
top: 39,
bottom: 60,
},
inspectorWarningText: {
color: textColor,
fontSize: 16,
fontWeight: '600',
},
list: {
backgroundColor: 'transparent',
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
},
listRow: {
position: 'relative',
backgroundColor: backgroundColor(0.95),
flex: 1,
height: rowHeight,
marginTop: rowGutter,
},
listRowContent: {
flex: 1,
},
listRowCount: {
color: 'rgba(255, 255, 255, 0.5)',
},
listRowText: {
color: textColor,
position: 'absolute',
left: 0,
top: Platform.OS === 'android' ? 5 : 7,
marginLeft: 15,
marginRight: 15,
},
});
module.exports = YellowBox;