Make the sidebar work with refs that are functions

Refs as strings is the "old" way. They can also be functions and this should handle it nicely. They are already handled nicely in the main elements panel. However the sidebar only showed `[object Object]`. To make it work, I reused the `PropVal` element since it already manages styles for different types of values. This way, `key` and `ref` look like they do in the main panel. In particular, `PropVal` handles functions well: if they are named, they are replaced by `functionName()`, otherwise simply by `fn()`. This change also includes parsing `key` as a string, just in case.

Author: Timothée Boucher

backend/getData.js

@@ -54,7 +54,9 @@ function getData(element: Object): DataType {
 
  if (element._currentElement) {
  type = element._currentElement.type;
- key = element._currentElement.key;
+ if (element._currentElement.key) {
+ key = String(element._currentElement.key);
+ }
  ref = element._currentElement.ref;
  if (typeof type === 'string') {
  name = type;

backend/getData012.js

@@ -48,7 +48,9 @@ function getData012(element: Object): DataType {
 
  if (element._currentElement) {
  type = element._currentElement.type;
- key = element._currentElement.key;
+ if (element._currentElement.key) {
+ key = String(element._currentElement.key);
+ }
  ref = element._currentElement.ref;
  if (typeof type === 'string') {
  name = type;

backend/types.js

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

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