Remove unused variables and clean up remaining defaultProps

src/object-inspector/ObjectLabel.js

@@ -6,7 +6,7 @@ import ObjectValue from '../object/ObjectValue';
 /**
  * if isNonenumerable is specified, render the name dimmed
  */
-const ObjectLabel = ({ name, data, isNonenumerable }) => {
+const ObjectLabel = ({ name, data, isNonenumerable = false }) => {
   const object = data;
 
   return (
@@ -23,8 +23,4 @@ ObjectLabel.propTypes = {
   isNonenumerable: PropTypes.bool,
 };
 
-ObjectLabel.defaultProps = {
-  isNonenumerable: false,
-};
-
 export default ObjectLabel;

src/object-inspector/ObjectPreview.js

@@ -23,7 +23,7 @@ function intersperse(arr, sep) {
 /**
  * A preview of the object
  */
-const ObjectPreview = ({ data, maxProperties }) => {
+const ObjectPreview = ({ data, maxProperties = 5 }) => {
   const object = data;
 
   if (
@@ -36,15 +36,17 @@ const ObjectPreview = ({ data, maxProperties }) => {
   }
 
   if (Array.isArray(object)) {
+    const previewArray = object
+      .slice(0, maxProperties)
+      .map((element, index) => <ObjectValue key={index} object={element} />);
+    if (object.length > maxProperties) {
+      previewArray.push(<span key="ellipsis">…</span>);
+    }
     return (
-      <span style={styles.preview}>
-        [
-        {intersperse(
-          object.map((element, index) => <ObjectValue key={index} object={element} />),
-          ', ',
-        )}
-        ]
-      </span>
+      <React.Fragment>
+        <span>{`Array(${object.length})`}</span>
+        <span style={styles.preview}>[{intersperse(previewArray, ',')}]</span>
+      </React.Fragment>
     );
   } else {
     let propertyNodes = [];
@@ -64,7 +66,7 @@ const ObjectPreview = ({ data, maxProperties }) => {
             :&nbsp;
             <ObjectValue object={propertyValue} />
             {ellipsis}
-          </span>,
+          </span>
         );
         if (ellipsis) break;
       }
@@ -86,8 +88,5 @@ ObjectPreview.propTypes = {
    */
   maxProperties: PropTypes.number,
 };
-ObjectPreview.defaultProps = {
-  maxProperties: 5,
-};
 
 export default ObjectPreview;

src/object/ObjectName.js

@@ -11,7 +11,7 @@ import { useStyles } from '../styles';
  * If the property name is not enumerable (`Object.prototype.propertyIsEnumerable()`),
  * the property name will be dimmed to show the difference.
  */
-const ObjectName = ({ name, dimmed, styles }) => {
+const ObjectName = ({ name, dimmed = false, styles = {} }) => {
   const themeStyles = useStyles('ObjectName');
   const appliedStyles = {
     ...themeStyles.base,
@@ -29,8 +29,4 @@ ObjectName.propTypes = {
   dimmed: PropTypes.bool,
 };
 
-ObjectName.defaultProps = {
-  dimmed: false,
-};
-
 export default ObjectName;

src/object/ObjectValue.js

@@ -37,7 +37,7 @@ const ObjectValue = ({ object, styles }) => {
         );
       }
       if (Array.isArray(object)) {
-        return <span>{`Array[${object.length}]`}</span>;
+        return <span>{`Array(${object.length})`}</span>;
       }
       if (!object.constructor) {
         return <span>Object</span>;

src/object/ObjectValue.spec.js

@@ -55,7 +55,7 @@ describe('ObjectValue', () => {
       <ObjectValue object={[1, 2, 3, 4, 5]} />
     ).toJSON();
     expect(tree.type).toBe('span');
-    expect(tree.children).toEqual(['Array[5]']);
+    expect(tree.children).toEqual(['Array(5)']);
   });
 
   it('should render an empty object', () => {

src/table-inspector/DataContainer.js

@@ -1,5 +1,4 @@
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 import ObjectValue from '../object/ObjectValue';
 
 import { useStyles } from '../styles';

src/table-inspector/HeaderContainer.js

@@ -1,21 +1,17 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { useStyles } from '../styles';
 import TH from './TH';
 
-const HeaderContainer = (
-  {
-    indexColumnText,
-    columns,
-    sorted,
-    sortIndexColumn,
-    sortColumn,
-    sortAscending,
-    onTHClick,
-    onIndexTHClick,
-  },
-  { theme }
-) => {
+const HeaderContainer = ({
+  indexColumnText = '(index)',
+  columns = [],
+  sorted,
+  sortIndexColumn,
+  sortColumn,
+  sortAscending,
+  onTHClick,
+  onIndexTHClick,
+}) => {
   const styles = useStyles('TableInspectorHeaderContainer');
   const borderStyles = useStyles('TableInspectorLeftBorder');
   return (
@@ -47,9 +43,4 @@ const HeaderContainer = (
   );
 };
 
-HeaderContainer.defaultProps = {
-  indexColumnText: '(index)',
-  columns: [],
-};
-
 export default HeaderContainer;

src/table-inspector/TableInspector.js

@@ -13,12 +13,12 @@ import HeaderContainer from './HeaderContainer';
 
 import { themeAcceptor, useStyles } from '../styles';
 
-export default themeAcceptor(function TableInspector({
+const TableInspector = ({
   // The JS object you would like to inspect, either an array or an object
   data,
   // An array of the names of the columns you'd like to display in the table
   columns,
-}) {
+}) => {
   const styles = useStyles('TableInspector');
 
   const [
@@ -158,4 +158,17 @@ export default themeAcceptor(function TableInspector({
       />
     </div>
   );
-});
+};
+
+TableInspector.propTypes = {
+  /**
+   * the Javascript object you would like to inspect, either an array or an object
+   */
+  data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+  /**
+   * An array of the names of the columns you'd like to display in the table
+   */
+  columns: PropTypes.array,
+};
+
+export default themeAcceptor(TableInspector);

src/tree-view/TreeNode.js

@@ -1,11 +1,4 @@
-import React, {
-  Children,
-  Component,
-  createElement,
-  memo,
-  useContext,
-} from 'react';
-import ExpandedPathsContext from './ExpandedPathsContext';
+import React, { Children, memo } from 'react';
 import PropTypes from 'prop-types';
 import { useStyles } from '../styles';
 

src/tree-view/TreeView.js

@@ -74,7 +74,7 @@ ConnectedTreeNode.propTypes = {
 const TreeView = memo(
   ({ name, data, dataIterator, nodeRenderer, expandPaths, expandLevel }) => {
     const stateAndSetter = useState({});
-    const [expandedPaths, setExpandedPaths] = stateAndSetter;
+    const [, setExpandedPaths] = stateAndSetter;
 
     useLayoutEffect(
       () =>

stories/object-inspector.js

@@ -30,12 +30,34 @@ storiesOf('Null', module).add('Null', () => <Inspector data={null} />);
 
 storiesOf('Symbols', module).add('test', () => <Inspector data={Symbol.for('test')} />);
 
+// Arrays
+storiesOf('Arrays', module)
+  .add('Empty Array', () => <Inspector data={[]} />)
+  .add('Basic Array', () => <Inspector data={['cold', 'ice']} />)
+  .add('Array with different types of elements', () => (
+    <Inspector data={['a', 1, {}]} />
+  ))
+  .add('Long array', () => (
+    <Inspector data={new Array(1000).fill(0).map((x, i) => i + '')} />
+  ))
+  .add('Array with big objects', () => (
+    <Inspector data={
+      new Array(100).fill(0).map((x, i) => ({
+        key: i,
+        name: `John #${i}`,
+        dateOfBirth: new Date(i * 10e8),
+        address: `${i} Main Street`,
+        zip: 90210 + i,
+
+      }))
+    } />
+  ))
+  .add('Uint32Array', () => <Inspector data={new Uint32Array(1000)} />);
+
 // Objects
 storiesOf('Objects', module)
   .add('Object: Date', () => <Inspector data={new Date('2005-04-03')} />)
   .add('Object: Regular Expression', () => <Inspector data={/^.*$/} />)
-  .add('Object: Array', () => <Inspector data={['cold', 'ice']} />)
-  .add('Object: Array with different types of elements', () => <Inspector data={['a', 1, {}]} />)
   .add('Object: Empty Object', () => <Inspector showNonenumerable expandLevel={1} data={{}} />)
   .add('Object: Empty String key', () => <Inspector data={{'': 'hi'}}/>)
   .add('Object: Simple Object', () => (