status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[react-native] inspector + devtools, naming things

This commit is contained in:
Jared Forsyth 2015-07-22 16:36:46 -07:00
parent 93bbc6482d
commit e06af51cf9
2 changed files with 23 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
Libraries/Inspector/ElementProperties.js
View File

@ -27,7 +27,11 @@ var mapWithSeparator = require('mapWithSeparator');
var ElementProperties = React.createClass({ var ElementProperties = React.createClass({
propTypes: { propTypes: {
hierarchy: PropTypes.array.isRequired, hierarchy: PropTypes.array.isRequired,
style: PropTypes.array.isRequired, style: PropTypes.oneOfType([
PropTypes.object,
PropTypes.array,
PropTypes.number,
]),
}, },
render: function() { render: function() {

37
Libraries/Inspector/Inspector.js
View File

@ -20,7 +20,7 @@ var StyleSheet = require('StyleSheet');
var UIManager = require('NativeModules').UIManager; var UIManager = require('NativeModules').UIManager;
var View = require('View'); var View = require('View');
var REACT_DEVTOOLS_HOOK: ?Object = typeof window !== 'undefined' ? window.__REACT_DEVTOOLS_BACKEND__ : null; var REACT_DEVTOOLS_HOOK: ?Object = typeof window !== 'undefined' ? window.__REACT_DEVTOOLS_GLOBAL_HOOK__ : null;
if (REACT_DEVTOOLS_HOOK) { if (REACT_DEVTOOLS_HOOK) {
// required for devtools to be able to edit react native styles // required for devtools to be able to edit react native styles
@ -34,7 +34,7 @@ class Inspector extends React.Component {
super(props); super(props);
this.state = { this.state = {
devtoolsBackend: null, devtoolsAgent: null,
panelPos: 'bottom', panelPos: 'bottom',
inspecting: true, inspecting: true,
perfing: false, perfing: false,
@ -45,14 +45,10 @@ class Inspector extends React.Component {
componentDidMount() { componentDidMount() {
if (REACT_DEVTOOLS_HOOK) { if (REACT_DEVTOOLS_HOOK) {
this.attachToDevtools = this.attachToDevtools.bind(this); this.attachToDevtools = this.attachToDevtools.bind(this);
REACT_DEVTOOLS_HOOK.addStartupListener(this.attachToDevtools); REACT_DEVTOOLS_HOOK.on('react-devtools', this.attachToDevtools);
// if devtools is already started // if devtools is already started
// TODO(jared): should addStartupListener just go ahead and call the if (REACT_DEVTOOLS_HOOK.reactDevtoolsAgent) {
// listener if the devtools is already started? might be unexpected... this.attachToDevtools(REACT_DEVTOOLS_HOOK.reactDevtoolsAgent);
// is there some name other than `addStartupListener` that would be
// better?
if (REACT_DEVTOOLS_HOOK.backend) {
this.attachToDevtools(REACT_DEVTOOLS_HOOK.backend);
} }
} }
} }
@ -62,13 +58,13 @@ class Inspector extends React.Component {
this._subs.map(fn => fn()); this._subs.map(fn => fn());
} }
if (REACT_DEVTOOLS_HOOK) { if (REACT_DEVTOOLS_HOOK) {
REACT_DEVTOOLS_HOOK.removeStartupListener(this.attachToDevtools); REACT_DEVTOOLS_HOOK.off('react-devtools', this.attachToDevtools);
} }
} }
attachToDevtools(backend: Object) { attachToDevtools(agent: Object) {
var _hideWait = null; var _hideWait = null;
var hlSub = backend.sub('highlight', ({node, name, props}) => { var hlSub = agent.sub('highlight', ({node, name, props}) => {
clearTimeout(_hideWait); clearTimeout(_hideWait);
UIManager.measure(node, (x, y, width, height, left, top) => { UIManager.measure(node, (x, y, width, height, left, top) => {
this.setState({ this.setState({
@ -80,7 +76,10 @@ class Inspector extends React.Component {
}); });
}); });
}); });
var hideSub = backend.sub('hideHighlight', () => { var hideSub = agent.sub('hideHighlight', () => {
if (this.state.inspected === null) {
return;
}
// we wait to actually hide in order to avoid flicker // we wait to actually hide in order to avoid flicker
_hideWait = setTimeout(() => { _hideWait = setTimeout(() => {
this.setState({ this.setState({
@ -90,12 +89,12 @@ class Inspector extends React.Component {
}); });
this._subs = [hlSub, hideSub]; this._subs = [hlSub, hideSub];
backend.on('shutdown', () => { agent.on('shutdown', () => {
this.setState({devtoolsBackend: null}); this.setState({devtoolsAgent: null});
this._subs = null; this._subs = null;
}); });
this.setState({ this.setState({
devtoolsBackend: backend, devtoolsAgent: agent,
}); });
} }
@ -114,8 +113,8 @@ class Inspector extends React.Component {
} }
onTouchInstance(instance: Object, frame: Object, pointerY: number) { onTouchInstance(instance: Object, frame: Object, pointerY: number) {
if (this.state.devtoolsBackend) { if (this.state.devtoolsAgent) {
this.state.devtoolsBackend.selectFromReactInstance(instance, true); this.state.devtoolsAgent.selectFromReactInstance(instance, true);
} }
var hierarchy = InspectorUtils.getOwnerHierarchy(instance); var hierarchy = InspectorUtils.getOwnerHierarchy(instance);
var publicInstance = instance.getPublicInstance(); var publicInstance = instance.getPublicInstance();
@ -159,7 +158,7 @@ class Inspector extends React.Component {
/>} />}
<View style={[styles.panelContainer, panelContainerStyle]}> <View style={[styles.panelContainer, panelContainerStyle]}>
<InspectorPanel <InspectorPanel
devtoolsIsOpen={!!this.state.devtoolsBackend} devtoolsIsOpen={!!this.state.devtoolsAgent}
inspecting={this.state.inspecting} inspecting={this.state.inspecting}
perfing={this.state.perfing} perfing={this.state.perfing}
setPerfing={this.setPerfing.bind(this)} setPerfing={this.setPerfing.bind(this)}