Merge pull request #61 from gaearon/react-json-tree-update

Address changes in react-json-tree
gaearon · Oct 19, 2016 · e4ecbce · e4ecbce
2 parents 6bd50a6 + 4eb3e71
commit e4ecbce
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -52,8 +52,9 @@ Name                  | Description
 `theme`               | Either a string referring to one of the themes provided by [redux-devtools-themes](https://github.com/gaearon/redux-devtools-themes) (feel free to contribute!) or a custom object of the same format. Optional. By default, set to [`'nicinabox'`](https://github.com/gaearon/redux-devtools-themes/blob/master/src/nicinabox.js).
 `select`              | A function that selects the slice of the state for DevTools to show. For example, `state => state.thePart.iCare.about`. Optional. By default, set to `state => state`.
 `preserveScrollTop`   | When `true`, records the current scroll top every second so it can be restored on refresh. This only has effect when used together with `persistState()` enhancer from Redux DevTools. By default, set to `true`.
-`expandActionRoot`    | When `true`, displays the action object expanded rather than collapsed. By default, set to `true`.
-`expandStateRoot`     | When `true`, displays the state object expanded rather than collapsed. By default, set to `true`.
+`expandActionRoot`    | When `true`, displays the action object expanded rather than collapsed. By default, set to `false`.
+`expandStateRoot`     | When `true`, displays the state object expanded rather than collapsed. By default, set to `false`.
+`markStateDiff`       | When `true`, mark the state's values which were changed comparing to the previous state. It affects the performance significantly! You might also want to set `expandStateRoot` to `true` as well when enabling it. By default, set to `false`.
 
 ### License
 

diff --git a/src/LogMonitor.js b/src/LogMonitor.js
@@ -60,15 +60,17 @@ export default class LogMonitor extends Component {
       PropTypes.string
     ]),
     expandActionRoot: PropTypes.bool,
-    expandStateRoot: PropTypes.bool
+    expandStateRoot: PropTypes.bool,
+    markStateDiff: PropTypes.bool
   };
 
   static defaultProps = {
     select: (state) => state,
     theme: 'nicinabox',
     preserveScrollTop: true,
-    expandActionRoot: true,
-    expandStateRoot: true
+    expandActionRoot: false,
+    expandStateRoot: false,
+    markStateDiff: false
   };
 
   shouldComponentUpdate = shouldPureComponentUpdate;
@@ -187,8 +189,9 @@ export default class LogMonitor extends Component {
       currentStateIndex,
       select,
       expandActionRoot,
-      expandStateRoot
-      } = this.props;
+      expandStateRoot,
+      markStateDiff
+    } = this.props;
 
     const entryListProps = {
       theme,
@@ -200,6 +203,7 @@ export default class LogMonitor extends Component {
       select,
       expandActionRoot,
       expandStateRoot,
+      markStateDiff,
       onActionClick: this.handleToggleAction
     };
 

diff --git a/src/LogMonitorEntry.js b/src/LogMonitorEntry.js
@@ -52,32 +52,37 @@ export default class LogMonitorEntry extends Component {
     if (!errorText) {
       try {
         const data = this.props.select(state);
-        const previousData = typeof this.props.previousState !== 'undefined' ?
-          this.props.select(this.props.previousState) :
-          undefined;
-        const getValueStyle = ({ style }, nodeType, keyPath) => ({
-          style: {
-            ...style,
-            ...(dataIsEqual(data, previousData, keyPath) ? {} : styles.changedData)
-          }
-        });
-        const getNestedNodeStyle = ({ style }, nodeType, expanded, keyPath) => ({
-          style: {
-            ...style,
-            ...(keyPath.length > 1 ? {} : styles.root)
-          }
-        });
+        let theme = this.props.theme;
+
+        if (this.props.markStateDiff) {
+          const previousData = typeof this.props.previousState !== 'undefined' ?
+            this.props.select(this.props.previousState) :
+            undefined;
+          const getValueStyle = ({ style }, nodeType, keyPath) => ({
+            style: {
+              ...style,
+              ...(dataIsEqual(data, previousData, keyPath) ? {} : styles.changedData)
+            }
+          });
+          const getNestedNodeStyle = ({ style }, keyPath) => ({
+            style: {
+              ...style,
+              ...(keyPath.length > 1 ? {} : styles.root)
+            }
+          });
+          theme = {
+            extend: this.props.theme,
+            tree: styles.tree,
+            value: getValueStyle,
+            nestedNode: getNestedNodeStyle
+          };
+        }
 
         return (
           <JSONTree
-            theme={{
-              extend: this.props.theme,
-              tree: styles.tree,
-              value: getValueStyle,
-              nestedNode: getNestedNodeStyle
-            }}
+            theme={theme}
             data={data}
-            isLightTheme={false}
+            invertTheme={false}
             keyPath={['state']}
             shouldExpandNode={this.shouldExpandNode} />
         );
@@ -130,7 +135,7 @@ export default class LogMonitorEntry extends Component {
           onClick={this.handleActionClick}
           style={{...styles.entry, ...styleEntry}}/>
         {!collapsed &&
-          <div>
+          <div style={{ paddingLeft: 16 }}>
             {this.printState(state, error)}
           </div>
         }

diff --git a/src/LogMonitorEntryAction.js b/src/LogMonitorEntryAction.js
@@ -9,6 +9,7 @@ const styles = {
   },
   payload: {
     margin: 0,
+    paddingLeft: 16,
     overflow: 'auto'
   }
 };
@@ -27,7 +28,7 @@ export default class LogMonitorAction extends Component {
       }}>
         { Object.keys(payload).length > 0 ?
           <JSONTree theme={this.props.theme}
-                    isLightTheme={false}
+                    invertTheme={false}
                     keyPath={['action']}
                     data={payload}
                     shouldExpandNode={this.shouldExpandNode} /> : '' }

diff --git a/src/LogMonitorEntryList.js b/src/LogMonitorEntryList.js
@@ -34,6 +34,7 @@ export default class LogMonitorEntryList extends Component {
       stagedActionIds,
       expandActionRoot,
       expandStateRoot,
+      markStateDiff,
       onActionClick
     } = this.props;
 
@@ -58,6 +59,7 @@ export default class LogMonitorEntryList extends Component {
           error={error}
           expandActionRoot={expandActionRoot}
           expandStateRoot={expandStateRoot}
+          markStateDiff={markStateDiff}
           onActionClick={onActionClick} />
       );
     }