Add element's key and ref to tree and prop views

Fixes facebook#148. Fixes facebook#226. If a `key` or `ref` is set on the React element, it's displayed before the `props` in the tree view and in the `PropState` sidebar. If none is set, nothing is changed. Also removed a piece of code `Node.js` that would never run. (condition is checked in the previous block that `return`s)
AdRoll · Feb 18, 2016 · cfb33cd · cfb33cd
1 parent 81f7386
commit cfb33cd
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 5 deletions.
diff --git a/backend/getData.js b/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';
@@ -52,6 +54,8 @@ function getData(element: Object): DataType {
 
   if (element._currentElement) {
     type = element._currentElement.type;
+    key = element._currentElement.key;
+    ref = element._currentElement.ref;
     if (typeof type === 'string') {
       name = type;
     } else if (element.getName) {
@@ -95,6 +99,8 @@ function getData(element: Object): DataType {
   return {
     nodeType,
     type,
+    key,
+    ref,
     name,
     props,
     state,

diff --git a/backend/getData012.js b/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,8 @@ function getData012(element: Object): DataType {
 
   if (element._currentElement) {
     type = element._currentElement.type;
+    key = element._currentElement.key;
+    ref = element._currentElement.ref;
     if (typeof type === 'string') {
       name = type;
     } else {
@@ -83,6 +87,8 @@ function getData012(element: Object): DataType {
   return {
     nodeType,
     type,
+    key,
+    ref,
     name,
     props,
     state,

diff --git a/backend/types.js b/backend/types.js
@@ -13,6 +13,8 @@
 export type DataType = {
   nodeType: 'Native' | 'Wrapper' | 'NativeWrapper' | 'Composite' | 'Text' | 'Empty',
   type: ?(string | AnyFn),
+  key: ?string,
+  ref: ?string,
   name: ?string,
   props: ?Object,
   state: ?Object,

diff --git a/frontend/Node.js b/frontend/Node.js
@@ -144,6 +144,8 @@ class Node extends React.Component {
             <span style={styles.tagText}>
               <span style={styles.openTag}>
                 <span style={tagStyle}>&lt;{name}</span>
+                {node.get('key') && <Props props={{'key': node.get('key')}}/>}
+                {node.get('ref') && <Props props={{'ref': node.get('ref')}}/>}
                 {node.get('props') && <Props props={node.get('props')}/>}
                 {!content && '/'}
                 <span style={tagStyle}>&gt;</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,6 +193,8 @@ class Node extends React.Component {
         <span style={styles.tagText}>
           <span style={styles.openTag}>
             <span style={tagStyle}>&lt;{'' + node.get('name')}</span>
+            {node.get('key') && <Props props={{'key': node.get('key')}}/>}
+            {node.get('ref') && <Props props={{'ref': node.get('ref')}}/>}
             {node.get('props') && <Props props={node.get('props')}/>}
             <span style={tagStyle}>&gt;</span>
           </span>

diff --git a/frontend/PropState.js b/frontend/PropState.js
@@ -64,6 +64,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 +74,8 @@ class PropState extends React.Component {
       <DetailPane
         header={'<' + this.props.node.get('name') + '>'}
         hint="($r in the console)">
+        {key && <DetailPaneSection title="Key" hint={key}/>}
+        {ref && <DetailPaneSection title="Ref" hint={ref}/>}
         {editTextContent}
         <DetailPaneSection
           hint={propsReadOnly ? 'read-only' : null}