Add array paging

Kong · Oct 13, 2017 · 12dbc8a · 12dbc8a
1 parent c43c251
commit 12dbc8a
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 24 deletions.
diff --git a/app/ui/components/json-viewer.js b/app/ui/components/json-viewer.js
@@ -3,8 +3,8 @@ import React from 'react';
 import classnames from 'classnames';
 import autobind from 'autobind-decorator';
 
-// const PAGE_SIZE = 10;
-const MAX_VALUE_LENGTH = 50;
+const PAGE_SIZE = 25;
+const MAX_VALUE_LENGTH = 100;
 
 type Props = {
   body: Buffer,
@@ -83,7 +83,8 @@ type Props2 = {
 
 type State2 = {
   expanded: boolean,
-  hasBeenExpanded: boolean
+  hasBeenExpanded: boolean,
+  page: number
 };
 
 @autobind
@@ -93,7 +94,8 @@ class JSONViewerObj extends React.PureComponent<Props2, State2> {
     const {paths} = props;
     this.state = {
       expanded: paths.length === 0,
-      hasBeenExpanded: false
+      hasBeenExpanded: false,
+      page: 0
     };
   }
 
@@ -153,9 +155,15 @@ class JSONViewerObj extends React.PureComponent<Props2, State2> {
         return abbr;
       }
 
-      return collapsed
-        ? <span>{abbr} <span className="json-viewer__type-comment">{comment}</span></span>
-        : null;
+      if (collapsed) {
+        return (
+          <td>
+            {abbr} <span className="json-viewer__type-comment">{comment}</span>
+          </td>
+        );
+      } else {
+        return null;
+      }
     }
 
     const strObj: string = `${obj}`;
@@ -170,9 +178,9 @@ class JSONViewerObj extends React.PureComponent<Props2, State2> {
     }
 
     return (
-      <pre className={`json-viewer__value json-viewer__type-${this.getType(obj)}`}>
+      <td className={`json-viewer__value json-viewer__type-${this.getType(obj)}`}>
         {displayValue}
-      </pre>
+      </td>
     );
   }
 
@@ -187,13 +195,18 @@ class JSONViewerObj extends React.PureComponent<Props2, State2> {
     }));
   }
 
+  handleNextPage () {
+    this.setState(({page}) => ({page: page + 1}));
+  }
+
   render () {
     const {label, value, paths, hide, onExpand} = this.props;
-    const {expanded, hasBeenExpanded} = this.state;
+    const {expanded, hasBeenExpanded, page} = this.state;
 
     const collapsable = this.isCollapsable(value);
     const collapsed = !expanded;
     const indentStyles = {paddingLeft: `${(paths.length - 1) * 1.3}em`};
+    const nextIndentStyles = {paddingLeft: `${(paths.length) * 1.3}em`};
 
     const rowClasses = classnames({
       'hide': hide,
@@ -211,19 +224,16 @@ class JSONViewerObj extends React.PureComponent<Props2, State2> {
                 className="json-viewer__key-container"
                 onClick={collapsable ? this.handleClickKey : null}>
               <span className="json-viewer__icon"></span>
-              <span className="json-viewer__key json-viewer__key--array">
-            {label}
-          </span>
-            </td>
-            <td>
-              {this.getValue(value, collapsed)}
+              <span className="json-viewer__key json-viewer__key--array">{label}</span>
             </td>
+            {this.getValue(value, collapsed)}
           </tr>
         ));
       }
 
       if (!collapsed || hasBeenExpanded) {
-        for (let key = 0; key < value.length; key++) {
+        const maxItem = page >= 0 ? PAGE_SIZE * (page + 1) : Infinity;
+        for (let key = 0; key < value.length && key < maxItem; key++) {
           const newPaths = [...paths, `[${key}]`];
           rows.push((
             <JSONViewerObj
@@ -236,6 +246,23 @@ class JSONViewerObj extends React.PureComponent<Props2, State2> {
             />
           ));
         }
+
+        if (value.length > maxItem) {
+          const numLeft = Math.min(value.length - maxItem, PAGE_SIZE);
+          rows.push(
+            <tr key="next">
+              <td style={nextIndentStyles} className="json-viewer__key-container">
+                <span className="json-viewer__icon"></span>
+                <span className="json-viewer__key json-viewer__key--array">
+                  {maxItem}…{value.length - 1}
+                </span>
+              </td>
+              <td className="json-viewer__value json-viewer__value--next-page">
+                <button onClick={this.handleNextPage}>Show {numLeft} More</button>
+              </td>
+            </tr>
+          );
+        }
       }
     } else if (value && typeof value === 'object') {
       if (label !== undefined) {
@@ -249,9 +276,7 @@ class JSONViewerObj extends React.PureComponent<Props2, State2> {
               {label}
             </span>
             </td>
-            <td>
-              {this.getValue(value, collapsed)}
-            </td>
+            {this.getValue(value, collapsed)}
           </tr>
         ));
       }
@@ -284,9 +309,7 @@ class JSONViewerObj extends React.PureComponent<Props2, State2> {
               </span>
             ) : null}
           </td>
-          <td>
-            {this.getValue(value, collapsed)}
-          </td>
+          {this.getValue(value, collapsed)}
         </tr>
       ));
     }

diff --git a/app/ui/css/components/json-viewer.less b/app/ui/css/components/json-viewer.less
@@ -19,13 +19,29 @@
     padding-right: @padding-sm;
   }
 
-  .json-viewer__key {
+  .json-viewer__key--array,
+  .json-viewer__key--object {
     user-select: text;
     &::after {
       content: ':';
     }
   }
 
+  .json-viewer__value--next-page {
+    button {
+      padding: @padding-xxs @padding-xs;
+      border-radius: @radius-sm;
+      margin: @padding-sm 0 @padding-xs 0;
+      border: 1px solid var(--hl);
+      display: inline-block;
+      opacity: @opacity-subtle;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
   .json-viewer__key--object {
     color: var(--color-success);
   }
@@ -57,6 +73,7 @@
     &.json-viewer__row--collapsed .json-viewer__icon::before {
       content: '▸';
     }
+
     &:not(.json-viewer__row--collapsed) .json-viewer__icon::before {
       content: '▾';
     }
@@ -65,10 +82,14 @@
   .json-viewer__value {
     user-select: text;
     cursor: text;
+    white-space: pre-wrap;
   }
 
   .json-viewer__type-string {
     color: var(--color-notice);
+    &::before, &::after {
+      content: '"';
+    }
   }
 
   .json-viewer__type-null,