diff --git a/Libraries/ReactIOS/InspectorOverlay/ElementProperties.js b/Libraries/ReactIOS/InspectorOverlay/ElementProperties.js index 9e9ae1d6a..310374fb1 100644 --- a/Libraries/ReactIOS/InspectorOverlay/ElementProperties.js +++ b/Libraries/ReactIOS/InspectorOverlay/ElementProperties.js @@ -18,38 +18,79 @@ var View = require('View'); var PropTypes = require('ReactPropTypes'); var BoxInspector = require('BoxInspector'); var StyleInspector = require('StyleInspector'); +var TouchableHighlight = require('TouchableHighlight'); +var TouchableWithoutFeedback = require('TouchableWithoutFeedback'); var flattenStyle = require('flattenStyle'); +var mapWithSeparator = require('mapWithSeparator'); var ElementProperties = React.createClass({ propTypes: { hierarchy: PropTypes.array.isRequired, style: PropTypes.array.isRequired, }, + render: function() { var style = flattenStyle(this.props.style); - var path = this.props.hierarchy.map((instance) => { - return instance.getName ? instance.getName() : 'Unknown'; - }).join(' > '); + var selection = this.props.selection; + // Without the `TouchableWithoutFeedback`, taps on this inspector pane + // would change the inspected element to whatever is under the inspector return ( - - - {path} - - - - + + + + {mapWithSeparator( + this.props.hierarchy, + (item, i) => ( + this.props.setSelection(i)}> + + {item.getName ? item.getName() : 'Unknown'} + + + ), + () => + )} + + + + + - + ); } }); var styles = StyleSheet.create({ + breadSep: { + fontSize: 8, + color: 'white', + }, + breadcrumb: { + flexDirection: 'row', + flexWrap: 'wrap', + marginBottom: 5, + }, + selected: { + borderColor: 'white', + borderRadius: 5, + }, + breadItem: { + borderWidth: 1, + borderColor: 'transparent', + marginHorizontal: 2, + }, + breadItemText: { + fontSize: 10, + color: 'white', + marginHorizontal: 5, + }, row: { flexDirection: 'row', alignItems: 'center', - justifyContent: 'space-around', + justifyContent: 'space-between', }, info: { backgroundColor: 'rgba(0, 0, 0, 0.7)', diff --git a/Libraries/ReactIOS/InspectorOverlay/InspectorOverlay.js b/Libraries/ReactIOS/InspectorOverlay/InspectorOverlay.js index 1b5009143..3b391502f 100644 --- a/Libraries/ReactIOS/InspectorOverlay/InspectorOverlay.js +++ b/Libraries/ReactIOS/InspectorOverlay/InspectorOverlay.js @@ -24,7 +24,9 @@ var InspectorOverlay = React.createClass({ getInitialState: function() { return { frame: null, + pointerY: 0, hierarchy: [], + selection: -1, }; }, @@ -42,6 +44,8 @@ var InspectorOverlay = React.createClass({ var publicInstance = instance.getPublicInstance(); this.setState({ hierarchy, + pointerY: locationY, + selection: hierarchy.length - 1, frame: {left, top, width, height}, style: publicInstance.props ? publicInstance.props.style : {}, }); @@ -49,6 +53,18 @@ var InspectorOverlay = React.createClass({ ); }, + setSelection(i) { + var instance = this.state.hierarchy[i]; + var publicInstance = instance.getPublicInstance(); + UIManager.measure(React.findNodeHandle(instance), (x, y, width, height, left, top) => { + this.setState({ + frame: {left, top, width, height}, + style: publicInstance.props ? publicInstance.props.style : {}, + selection: i, + }); + }); + }, + shouldSetResponser: function(e) { this.findViewForTouchEvent(e); return true; @@ -59,9 +75,8 @@ var InspectorOverlay = React.createClass({ var justifyContent = 'flex-end'; if (this.state.frame) { - var distanceToTop = this.state.frame.top; - var distanceToBottom = Dimensions.get('window').height - - (this.state.frame.top + this.state.frame.height); + var distanceToTop = this.state.pointerY; + var distanceToBottom = Dimensions.get('window').height - distanceToTop; justifyContent = distanceToTop > distanceToBottom ? 'flex-start' @@ -73,6 +88,8 @@ var InspectorOverlay = React.createClass({ style={this.state.style} frame={this.state.frame} hierarchy={this.state.hierarchy} + selection={this.state.selection} + setSelection={this.setSelection} /> ); } else { diff --git a/Libraries/Utilities/mapWithSeparator.js b/Libraries/Utilities/mapWithSeparator.js new file mode 100644 index 000000000..4aa8665c3 --- /dev/null +++ b/Libraries/Utilities/mapWithSeparator.js @@ -0,0 +1,19 @@ +/** + * Copyright 2004-present Facebook. All Rights Reserved. + * + * @providesModule mapWithSeparator + */ +'use strict'; + +function mapWithSeparator(array, valueFunction, separatorFunction) { + var results = []; + for (var i = 0; i < array.length; i++) { + results.push(valueFunction(array[i], i, array)); + if (i !== array.length - 1) { + results.push(separatorFunction(i)); + } + } + return results; +} + +module.exports = mapWithSeparator;