Merge branch 'add-key-and-ref-to-tree-and-panel-view'

Author: gaearon

backend/getData.js

@@ -24,6 +24,8 @@ function getData(element: Object): DataType {
  var updater = null;
  var name = null;
  var type = null;
+ var key = null;
+ var ref = null;
  var text = null;
  var publicInstance = null;
  var nodeType = 'Native';
@@ -60,6 +62,10 @@ function getData(element: Object): DataType {
  // != used deliberately here to catch undefined and null
  if (element._currentElement != null) {
  type = element._currentElement.type;
+ if (element._currentElement.key) {
+ key = String(element._currentElement.key);
+ }
+ ref = element._currentElement.ref;
  if (typeof type === 'string') {
  name = type;
  } else if (element.getName) {
@@ -103,6 +109,8 @@ function getData(element: Object): DataType {
  return {
  nodeType,
  type,
+ key,
+ ref,
  name,
  props,
  state,

backend/getData012.js

@@ -21,6 +21,8 @@ function getData012(element: Object): DataType {
  var updater = null;
  var name = null;
  var type = null;
+ var key = null;
+ var ref = null;
  var text = null;
  var publicInstance = null;
  var nodeType = 'Native';
@@ -46,6 +48,10 @@ function getData012(element: Object): DataType {
 
  if (element._currentElement) {
  type = element._currentElement.type;
+ if (element._currentElement.key) {
+ key = String(element._currentElement.key);
+ }
+ ref = element._currentElement.ref;
  if (typeof type === 'string') {
  name = type;
  } else {
@@ -83,6 +89,8 @@ function getData012(element: Object): DataType {
  return {
  nodeType,
  type,
+ key,
+ ref,
  name,
  props,
  state,

backend/types.js

@@ -13,6 +13,8 @@
 export type DataType = {
  nodeType: 'Native' | 'Wrapper' | 'NativeWrapper' | 'Composite' | 'Text' | 'Empty',
  type: ?(string | AnyFn),
+ key: ?string,
+ ref: ?(string | AnyFn),
  name: ?string,
  props: ?Object,
  state: ?Object,

frontend/DataView/DataView.js

@@ -256,6 +256,7 @@ var styles = {
  fontSize: 8,
  cursor: 'pointer',
  position: 'absolute',
+ top: '-2px',
  right: '100%',
  padding: '5px 0',
  },

frontend/Node.js

@@ -144,7 +144,9 @@ class Node extends React.Component {
  <span style={styles.tagText}>
  <span style={styles.openTag}>
  <span style={tagStyle}>&lt;{name}</span>
- {node.get('props') && <Props props={node.get('props')}/>}
+ {node.get('key') && <Props key="key" props={{'key': node.get('key')}}/>}
+ {node.get('ref') && <Props key="ref" props={{'ref': node.get('ref')}}/>}
+ {node.get('props') && <Props key="props" props={node.get('props')}/>}
  {!content && '/'}
  <span style={tagStyle}>&gt;</span>
  </span>
@@ -160,11 +162,6 @@ class Node extends React.Component {
  );
  }
 
- // Plain string
- if (typeof children === 'string') {
- return <div style={leftPad}>{children}</div>;
- }
-
  var closeTag = (
  <span style={styles.closeTag}>
  <span style={tagStyle}>
@@ -196,7 +193,9 @@ class Node extends React.Component {
  <span style={styles.tagText}>
  <span style={styles.openTag}>
  <span style={tagStyle}>&lt;{'' + node.get('name')}</span>
- {node.get('props') && <Props props={node.get('props')}/>}
+ {node.get('key') && <Props key="key" props={{'key': node.get('key')}}/>}
+ {node.get('ref') && <Props key="ref" props={{'ref': node.get('ref')}}/>}
+ {node.get('props') && <Props key="props" props={node.get('props')}/>}
  <span style={tagStyle}>&gt;</span>
  </span>
  {collapsed && '…'}

frontend/PropState.js

@@ -14,6 +14,7 @@ var BlurInput = require('./BlurInput');
 var DataView = require('./DataView/DataView');
 var DetailPane = require('./detail_pane/DetailPane');
 var DetailPaneSection = require('./detail_pane/DetailPaneSection');
+var PropVal = require('./PropVal');
 var React = require('react');
 
 var decorate = require('./decorate');
@@ -64,6 +65,8 @@ class PropState extends React.Component {
  }
  }
 
+ var key = this.props.node.get('key');
+ var ref = this.props.node.get('ref');
  var state = this.props.node.get('state');
  var context = this.props.node.get('context');
  var propsReadOnly = !this.props.node.get('canUpdate');
@@ -72,6 +75,24 @@ class PropState extends React.Component {
  <DetailPane
  header={'<' + this.props.node.get('name') + '>'}
  hint="($r in the console)">
+ {key &&
+ <DetailPaneSection
+ title="Key"
+ key={this.props.id + '-key'}>
+ <PropVal
+ val={key}
+ />
+ </DetailPaneSection>
+ }
+ {ref &&
+ <DetailPaneSection
+ title="Ref"
+ key={this.props.id + '-ref'}>
+ <PropVal
+ val={ref}
+ />
+ </DetailPaneSection>
+ }
  {editTextContent}
  <DetailPaneSection
  hint={propsReadOnly ? 'read-only' : null}

frontend/detail_pane/DetailPaneSection.js

@@ -20,8 +20,8 @@ class DetailPaneSection extends React.Component {
  } = this.props;
  return (
  <div style={styles.section}>
- <strong>{this.props.title}</strong>
- {hint ? ' ' + hint : null}
+ <strong style={styles.title}>{this.props.title}</strong>
+ {hint}
  {children}
  </div>
  );
@@ -33,6 +33,9 @@ var styles = {
  marginBottom: 10,
  flexShrink: 0,
  },
+ title: {
+ marginRight: 7,
+ },
 };
 
 module.exports = DetailPaneSection;