Permalink
Browse files

interop with react devtools

  • Loading branch information...
Jared Forsyth
Jared Forsyth committed Jun 8, 2015
1 parent 16b8747 commit d68776d5deebfc54a22f87eab36d95ca2abccade
Showing with 55 additions and 0 deletions.
  1. +55 −0 Libraries/ReactIOS/InspectorOverlay/InspectorOverlay.js
@@ -19,8 +19,61 @@ var UIManager = require('NativeModules').UIManager;
var View = require('View');
var ElementBox = require('ElementBox');
var ElementProperties = require('ElementProperties');
var TimerMixin = require('TimerMixin');
var highlightComponentInstance = function() {};
var hideHighlight = function() {};
var getSelectedInstance = function() {};
if (typeof window !== 'undefined' && window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.getSelectedInstance = function() {
return getSelectedInstance();
};
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.Overlay = {
highlightComponentInstance(val) {
highlightComponentInstance(val);
},
hideHighlight() {
hideHighlight();
}
};
}
var InspectorOverlay = React.createClass({
mixins: [TimerMixin],
componentWillMount() {
highlightComponentInstance = this.handleHighlight;
hideHighlight = this.hideHighlight;
getSelectedInstance = this.getSelectedInstance;
// this is needed so that changes from chrome will be sent to RN (changes
// are flushed only when an event happens)
this.setInterval(() => {}, 100);
},
getSelectedInstance() {
return this.state.selInstance;
},
handleHighlight(publicInstance) {
var instance = publicInstance._reactInternalInstance;
var hierarchy = Inspector.getOwnerHierarchy(instance);
var handle = React.findNodeHandle(publicInstance);
if (!handle) {
return;
}
UIManager.measure(handle, (x, y, width, height, left, top) => {
this.setState({
selInstance: publicInstance,
frame: {left, top, width, height},
style: publicInstance.props ? publicInstance.props.style : {},
selection: hierarchy.length - 1,
hierarchy,
});
});
},
getInitialState: function() {
return {
frame: null,
@@ -44,6 +97,7 @@ var InspectorOverlay = React.createClass({
var publicInstance = instance.getPublicInstance();
this.setState({
hierarchy,
selInstance: publicInstance,
pointerY: locationY,
selection: hierarchy.length - 1,
frame: {left, top, width, height},
@@ -59,6 +113,7 @@ var InspectorOverlay = React.createClass({
UIManager.measure(React.findNodeHandle(instance), (x, y, width, height, left, top) => {
this.setState({
frame: {left, top, width, height},
selInstance: publicInstance,
style: publicInstance.props ? publicInstance.props.style : {},
selection: i,
});

2 comments on commit d68776d

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Jun 22, 2015

Collaborator

@jaredly - I couldn't get this working with the latest build (https://github.com/nicklockwood/react-native/tree/update_fri_19_jun) and I wanted to include it in the release notes for v0.7.0-rc - any ideas?

Collaborator

brentvatne replied Jun 22, 2015

@jaredly - I couldn't get this working with the latest build (https://github.com/nicklockwood/react-native/tree/update_fri_19_jun) and I wanted to include it in the release notes for v0.7.0-rc - any ideas?

@jaredly

This comment has been minimized.

Show comment
Hide comment
@jaredly

jaredly Jun 22, 2015

Contributor

Unfortunately it required some changes to react-devtools to function properly :/
I'm in the process of rebooting the devtools, after which the native inspector will be able to interface better

Contributor

jaredly replied Jun 22, 2015

Unfortunately it required some changes to react-devtools to function properly :/
I'm in the process of rebooting the devtools, after which the native inspector will be able to interface better

Please sign in to comment.