Adds a state values renderer. (#109)

packages/reactotron-app/App/Commands/StateValuesResponseCommand.js

@@ -0,0 +1,88 @@
+import React, { Component, PropTypes } from 'react'
+import Command from '../Shared/Command'
+import ObjectTree from '../Shared/ObjectTree'
+import Colors from '../Theme/Colors'
+import { isNil, equals, length, pipe, without, reject, map, contains, __, values } from 'ramda'
+import makeTable from '../Shared/MakeTable'
+
+const Styles = {
+  path: {
+    padding: '10px 0'
+  },
+  stringValue: {
+    color: Colors.text,
+    WebkitUserSelect: 'all',
+    wordBreak: 'break-all'
+  }
+}
+
+// all the values in this object are in our approved list of types?
+const allValuesStatic = pipe(
+  values,
+  without([null, undefined]),
+  map(x => typeof x),
+  reject(contains(__, ['number', 'string', 'boolean'])),
+  length,
+  equals(0)
+  )
+
+class StateValuesResponseCommand extends Component {
+
+  static propTypes = {
+    command: PropTypes.object.isRequired
+  }
+
+  renderObject (value) {
+    return <ObjectTree object={value} level={0} />
+  }
+
+  renderString (value) {
+    return <div style={Styles.stringValue}>{value}</div>
+  }
+
+  renderTable (value) {
+    return makeTable(value)
+  }
+
+  renderNull () {
+    return '¯\\_(ツ)_/¯'
+  }
+
+  renderValue (value) {
+    if (isNil(value)) {
+      return this.renderNull()
+    }
+    switch (typeof value) {
+      case 'object':
+        if (allValuesStatic(value)) {
+          return this.renderTable(value)
+        } else {
+          return this.renderObject(value)
+        }
+
+      case 'string':
+      case 'number':
+        return this.renderString(value)
+
+      default:
+        return <div style={Styles.unknown}>Not sure how to render this value</div>
+    }
+  }
+
+  render () {
+    const { command } = this.props
+    const { payload } = command
+    const { path, value } = payload
+    const pathText = path || '(root)'
+
+    return (
+      <Command command={command} title='STATE' subtitle={pathText}>
+        <div style={Styles.container}>
+          {this.renderValue(value)}
+        </div>
+      </Command>
+    )
+  }
+}
+
+export default StateValuesResponseCommand

packages/reactotron-app/App/Commands/index.js

@@ -4,6 +4,7 @@ import StateActionCompleteCommand from './StateActionCompleteCommand'
 import ApiResponseCommand from './ApiResponseCommand'
 import ClientIntroCommand from './ClientIntroCommand'
 import BenchmarkReportCommand from './BenchmarkReportCommand'
+import StateValuesResponseCommand from './StateValuesResponseCommand'
 
 export default command => {
   const { type } = command
@@ -14,6 +15,7 @@ export default command => {
     case 'state.action.complete': return StateActionCompleteCommand
     case 'api.response': return ApiResponseCommand
     case 'client.intro': return ClientIntroCommand
+    case 'state.values.response': return StateValuesResponseCommand
     default: return UnknownCommand
   }
 }

packages/reactotron-app/App/Shared/MakeTable.js

@@ -1,20 +1,20 @@
 import React from 'react'
-import { map, toPairs } from 'ramda'
 import Colors from '../Theme/Colors'
+import { map, toPairs, identity, isNil, T, equals, cond, always } from 'ramda'
 
 const Styles = {
   row: {
-    fontSize: 14,
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
     WebkitUserSelect: 'all'
   },
   key: {
-    minWidth: 150,
-    width: 150,
+    width: '25%',
+    paddingRight: 10,
     wordBreak: 'break-all',
-    color: Colors.matteBlack
+    textAlign: 'right',
+    color: Colors.text
   },
   value: {
     flex: 1,
@@ -23,10 +23,18 @@ const Styles = {
 }
 
 const makeRow = ([key, value]) => {
+  const textValue = cond([
+    [isNil, always('¯\\_(ツ)_/¯')],
+    [x => typeof x === 'boolean', always(value ? 'true' : 'false')],
+    [T, identity]
+  ])(value)
+
   return (
     <div key={key} style={Styles.row}>
       <div style={Styles.key}>{key}</div>
-      <div style={Styles.value}>{value}</div>
+      <div style={Styles.value}>
+        {textValue}
+      </div>
     </div>
   )
 }