Merge pull request #51 from zalmoxisus/wide

Different result of getItemString and stringifyAndShrink depending on isWideLayout
alexkuz · Nov 19, 2016 · 780116c · 780116c
2 parents e00e8c3 + e115e10
commit 780116c
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 24 deletions.
diff --git a/src/ActionPreview.jsx b/src/ActionPreview.jsx
@@ -19,7 +19,7 @@ class ActionPreview extends Component {
   render() {
     const {
       styling, delta, error, nextState, onInspectPath, inspectedPath, tabName,
-      onSelectTab, action, actions, selectedActionId, startActionId,
+      isWideLayout, onSelectTab, action, actions, selectedActionId, startActionId,
       computedStates, base16Theme, invertTheme, tabs
     } = this.props;
 
@@ -47,6 +47,7 @@ class ActionPreview extends Component {
                 startActionId,
                 base16Theme,
                 invertTheme,
+                isWideLayout,
                 delta,
                 action,
                 nextState

diff --git a/src/DevtoolsInspector.js b/src/DevtoolsInspector.js
@@ -171,7 +171,7 @@ export default class DevtoolsInspector extends Component {
                     skippedActionIds={skippedActionIds}
                     lastActionId={getLastActionId(this.props)} />
         <ActionPreview {...{
-          base16Theme, invertTheme, tabs, tabName, delta, error, nextState,
+          base16Theme, invertTheme, isWideLayout, tabs, tabName, delta, error, nextState,
           computedStates, action, actions, selectedActionId, startActionId
         }}
                        styling={styling}

diff --git a/src/tabs/ActionTab.jsx b/src/tabs/ActionTab.jsx
@@ -3,12 +3,12 @@ import JSONTree from 'react-json-tree';
 import getItemString from './getItemString';
 import getJsonTreeTheme from './getJsonTreeTheme';
 
-const ActionTab = ({ action, styling, base16Theme, invertTheme, labelRenderer }) =>
+const ActionTab = ({ action, styling, base16Theme, invertTheme, labelRenderer, isWideLayout }) =>
   <JSONTree
     labelRenderer={labelRenderer}
     theme={getJsonTreeTheme(base16Theme)}
     data={action}
-    getItemString={(type, data) => getItemString(styling, type, data)}
+    getItemString={(type, data) => getItemString(styling, type, data, isWideLayout)}
     invertTheme={invertTheme}
     hideRoot
   />;

diff --git a/src/tabs/DiffTab.jsx b/src/tabs/DiffTab.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import JSONDiff from './JSONDiff';
 
-const DiffTab = ({ delta, styling, base16Theme, invertTheme, labelRenderer }) =>
+const DiffTab = ({ delta, styling, base16Theme, invertTheme, labelRenderer, isWideLayout }) =>
   <JSONDiff
-    {...{ delta, styling, base16Theme, invertTheme, labelRenderer }}
+    {...{ delta, styling, base16Theme, invertTheme, labelRenderer, isWideLayout }}
   />;
 
 export default DiffTab;
diff --git a/src/tabs/JSONDiff.jsx b/src/tabs/JSONDiff.jsx
@@ -4,11 +4,12 @@ import stringify from 'javascript-stringify';
 import getItemString from './getItemString';
 import getJsonTreeTheme from './getJsonTreeTheme';
 
-function stringifyAndShrink(val) {
+function stringifyAndShrink(val, isWideLayout) {
   const str = stringify(val);
   if (val === null) { return 'null'; }
   else if (typeof val === 'undefined') { return 'undefined'; }
 
+  if (isWideLayout) return str.length > 42 ? str.substr(0, 30) + '…' + str.substr(-10) : str;
   return str.length > 22 ? `${str.substr(0, 15)}…${str.substr(-5)}` : str;
 }
 
@@ -56,7 +57,7 @@ export default class JSONDiff extends Component {
   }
 
   render() {
-    const { styling, base16Theme, ...props } = this.props;
+    const { styling, base16Theme, isWideLayout, ...props } = this.props;
 
     if (!this.state.data) {
       return (
@@ -70,7 +71,9 @@ export default class JSONDiff extends Component {
       <JSONTree {...props}
                 theme={getJsonTreeTheme(base16Theme)}
                 data={this.state.data}
-                getItemString={(type, data) => getItemString(styling, type, data, true)}
+                getItemString={
+                  (type, data) => getItemString(styling, type, data, isWideLayout, true)
+                }
                 valueRenderer={this.valueRenderer}
                 postprocessValue={prepareDelta}
                 isCustomNode={Array.isArray}
@@ -80,7 +83,7 @@ export default class JSONDiff extends Component {
   }
 
   valueRenderer = (raw, value) => {
-    const { styling } = this.props;
+    const { styling, isWideLayout } = this.props;
 
     function renderSpan(name, body) {
       return (
@@ -93,15 +96,15 @@ export default class JSONDiff extends Component {
       case 1:
         return (
           <span {...styling('diffWrap')}>
-            {renderSpan('diffAdd', stringifyAndShrink(value[0]))}
+            {renderSpan('diffAdd', stringifyAndShrink(value[0], isWideLayout))}
           </span>
         );
       case 2:
         return (
           <span {...styling('diffWrap')}>
-            {renderSpan('diffUpdateFrom', stringifyAndShrink(value[0]))}
+            {renderSpan('diffUpdateFrom', stringifyAndShrink(value[0], isWideLayout))}
             {renderSpan('diffUpdateArrow', ' => ')}
-            {renderSpan('diffUpdateTo', stringifyAndShrink(value[1]))}
+            {renderSpan('diffUpdateTo', stringifyAndShrink(value[1], isWideLayout))}
           </span>
         );
       case 3:

diff --git a/src/tabs/StateTab.jsx b/src/tabs/StateTab.jsx
@@ -3,12 +3,12 @@ import JSONTree from 'react-json-tree';
 import getItemString from './getItemString';
 import getJsonTreeTheme from './getJsonTreeTheme';
 
-const StateTab = ({ nextState, styling, base16Theme, invertTheme, labelRenderer }) =>
+const StateTab = ({ nextState, styling, base16Theme, invertTheme, labelRenderer, isWideLayout }) =>
   <JSONTree
     labelRenderer={labelRenderer}
     theme={getJsonTreeTheme(base16Theme)}
     data={nextState}
-    getItemString={(type, data) => getItemString(styling, type, data)}
+    getItemString={(type, data) => getItemString(styling, type, data, isWideLayout)}
     invertTheme={invertTheme}
     hideRoot
   />;

diff --git a/src/tabs/getItemString.js b/src/tabs/getItemString.js
@@ -34,32 +34,36 @@ function getShortTypeString(val, diff) {
   }
 }
 
-function getText(type, data, diff) {
+function getText(type, data, isWideLayout, isDiff) {
   if (type === 'Object') {
     const keys = Object.keys(data);
+    if (!isWideLayout) return keys.length ? '{…}' : '{}';
+
     const str = keys
-      .slice(0, 2)
-      .map(key => `${key}: ${getShortTypeString(data[key], diff)}`)
-      .concat(keys.length > 2 ? ['…'] : [])
+      .slice(0, 3)
+      .map(key => `${key}: ${getShortTypeString(data[key], isDiff)}`)
+      .concat(keys.length > 3 ? ['…'] : [])
       .join(', ');
 
     return `{ ${str} }`;
   } else if (type === 'Array') {
+    if (!isWideLayout) return data.length ? '[…]' : '[]';
+
     const str = data
-      .slice(0, 2)
-      .map(val => getShortTypeString(val, diff))
-      .concat(data.length > 2 ? ['…'] : []).join(', ');
+      .slice(0, 4)
+      .map(val => getShortTypeString(val, isDiff))
+      .concat(data.length > 4 ? ['…'] : []).join(', ');
 
     return `[${str}]`;
   } else {
     return type;
   }
 }
 
-const getItemString = (styling, type, data, diff) =>
+const getItemString = (styling, type, data, isWideLayout, isDiff) =>
   <span {...styling('treeItemHint')}>
     {data[IS_IMMUTABLE_KEY] ? 'Immutable' : ''}
-    {getText(type, data, diff)}
+    {getText(type, data, isWideLayout, isDiff)}
   </span>;
 
 export default getItemString;