Override default 'getItemText' behavior with 'formatItem' prop

README.md

@@ -51,6 +51,7 @@ Name               | Type             | Description
 `tabs`             | Array or function | Overrides list of tabs (see below)
 `diffObjectHash`   | Function         | Optional callback for better array handling in diffs (see [jsondiffpatch docs](https://github.com/benjamine/jsondiffpatch/blob/master/docs/arrays.md))
 `diffPropertyFilter` | Function       | Optional callback for ignoring particular props in diff (see [jsondiffpatch docs](https://github.com/benjamine/jsondiffpatch#options))
+`formatItem` | Function |  Optional formatting function for JSON tree nodes. (see below)
 
 
 If `tabs` is a function, it receives a list of default tabs and should return updated list, for example:
@@ -59,6 +60,11 @@ defaultTabs => [...defaultTabs, { name: 'My Tab', component: MyTab }]
 ```
 If `tabs` is an array, only provided tabs are rendered.
 
+`formatItem` is used for formatting labels of generated JSON tree nodes (see [react-json-tree](https://github.com/alexkuz/react-json-tree#customize-labels-for-arrays-objects-and-iterables)). It takes the following arguments: `type`, `data`, `isWideLayout` (`true` if the width of the inspector is greater than 500 px, `false` otherwise), `isDiff` (whether Diff is the active tab). It must return a `string` or `null`, in the latter case default formatting will be used. The following example overrides label formatting for Arrays in Action and State tabs:
+```
+(type, data, isWideLayout, isDiff) => !isDiff && type === "Array" ? "// Array" : null
+```
+
 `component` is provided with `action` and other props, see [`ActionPreview.jsx`](src/ActionPreview.jsx#L42) for reference.
 
 Usage example: [`redux-devtools-test-generator`](https://github.com/zalmoxisus/redux-devtools-test-generator#containersdevtoolsjs).

src/ActionPreview.jsx

@@ -6,14 +6,15 @@ import StateTab from './tabs/StateTab';
 import ActionTab from './tabs/ActionTab';
 
 import type { LabelRenderer } from 'react-json-tree';
-import type { Tab, TabName } from './types';
+import type { Tab, TabName, FormatItemFunction } from './types';
 
 type DefaultProps = {
   tabName: TabName
 };
 
 type Props = DefaultProps & {
-  tabs: ((defaultTabs: Tab[]) => Tab[]) | Tab[]
+  tabs: ((defaultTabs: Tab[]) => Tab[]) | Tab[],
+  formatItem: FormatItemFunction,
 };
 
 const DEFAULT_TABS: Tab[] = [{
@@ -36,7 +37,7 @@ class ActionPreview extends Component<DefaultProps, Props, void> {
     const {
       styling, delta, error, nextState, onInspectPath, inspectedPath, tabName,
       isWideLayout, onSelectTab, action, actions, selectedActionId, startActionId,
-      computedStates, base16Theme, invertTheme, tabs
+      computedStates, base16Theme, invertTheme, tabs, formatItem
     } = this.props;
 
     const renderedTabs = (typeof tabs === 'function') ?
@@ -70,6 +71,7 @@ class ActionPreview extends Component<DefaultProps, Props, void> {
                   base16Theme,
                   invertTheme,
                   isWideLayout,
+                  formatItem,
                   delta,
                   action,
                   nextState

src/DevtoolsInspector.js

@@ -172,7 +172,7 @@ export default class DevtoolsInspector extends PureComponent<DefaultProps, Props
   }
 
   render() {
-    const { stagedActionIds: actionIds, actionsById: actions, computedStates,
+    const { stagedActionIds: actionIds, actionsById: actions, computedStates, formatItem,
       tabs, invertTheme, skippedActionIds, currentStateIndex, monitorState } = this.props;
     const { selectedActionId, startActionId, searchValue, tabName } = monitorState;
     const inspectedPathType = tabName === 'Action' ? 'inspectedActionPath' : 'inspectedStatePath';
@@ -199,8 +199,8 @@ export default class DevtoolsInspector extends PureComponent<DefaultProps, Props
                     currentActionId={actionIds[currentStateIndex]}
                     lastActionId={getLastActionId(this.props)} />
         <ActionPreview {...{
-          base16Theme, invertTheme, isWideLayout, tabs, tabName, delta, error, nextState,
-          computedStates, action, actions, selectedActionId, startActionId
+          base16Theme, invertTheme, isWideLayout, formatItem, tabs, tabName, delta, error,
+          nextState, computedStates, action, actions, selectedActionId, startActionId
         }}
                        styling={styling}
                        onInspectPath={this.handleInspectPath.bind(this, inspectedPathType)}

src/tabs/ActionTab.jsx

@@ -5,7 +5,7 @@ import getItemString from './getItemString';
 import getJsonTreeTheme from './getJsonTreeTheme';
 
 import type { LabelRenderer } from 'react-json-tree';
-import type { Action } from '../types';
+import type { Action, FormatItemFunction } from '../types';
 import type { StylingFunction, Base16Theme, StylingConfig } from 'react-base16-styling';
 
 type Props = {
@@ -14,7 +14,8 @@ type Props = {
   base16Theme: Base16Theme,
   invertTheme: boolean,
   labelRenderer: LabelRenderer,
-  isWideLayout: boolean
+  isWideLayout: boolean,
+  formatItem: FormatItemFunction
 };
 
 type State = {
@@ -54,6 +55,7 @@ export default class ActionTab extends PureComponent<void, Props, State> {
   }
 
   getItemString = (type: string, data: any) => {
-    return getItemString(this.props.styling, type, data, this.props.isWideLayout);
+    const { styling, isWideLayout, formatItem } = this.props;
+    return getItemString(styling, type, data, isWideLayout, false, formatItem);
   };
 }

src/tabs/DiffTab.jsx

@@ -5,21 +5,23 @@ import JSONDiff from './JSONDiff';
 import type { LabelRenderer } from 'react-json-tree';
 import type { Delta } from 'jsondiffpatch';
 import type { StylingFunction, Base16Theme } from 'react-base16-styling';
+import type { FormatItemFunction } from '../types';
 
 type Props = {
   delta: Delta,
   styling: StylingFunction,
   base16Theme: Base16Theme,
   invertTheme: boolean,
   labelRenderer: LabelRenderer,
-  isWideLayout: boolean
+  isWideLayout: boolean,
+  formatItem: FormatItemFunction
 };
 
 const DiffTab = (
-  { delta, styling, base16Theme, invertTheme, labelRenderer, isWideLayout }: Props
+  { delta, styling, base16Theme, invertTheme, labelRenderer, isWideLayout, formatItem }: Props
 ): React$Element<*> =>
   <JSONDiff
-    {...{ delta, styling, base16Theme, invertTheme, labelRenderer, isWideLayout }}
+    {...{ delta, styling, base16Theme, invertTheme, labelRenderer, isWideLayout, formatItem }}
   />;
 
 export default DiffTab;

src/tabs/JSONDiff.jsx

@@ -8,14 +8,16 @@ import getJsonTreeTheme from './getJsonTreeTheme';
 import type { LabelRenderer } from 'react-json-tree';
 import type { Delta, ArrayDelta } from 'jsondiffpatch';
 import type { StylingFunction, Base16Theme, StylingConfig } from 'react-base16-styling';
+import type { FormatItemFunction } from '../types';
 
 type Props = {
   delta: Delta,
   styling: StylingFunction,
   base16Theme: Base16Theme,
   invertTheme: boolean,
   labelRenderer: LabelRenderer,
-  isWideLayout: boolean
+  isWideLayout: boolean,
+  formatItem: FormatItemFunction
 };
 
 type State = {
@@ -138,6 +140,7 @@ export default class JSONDiff extends PureComponent<void, Props, State> {
   }
 
   getItemString = (type: string, data: any) => {
-    return getItemString(this.props.styling, type, data, this.props.isWideLayout, true);
+    const { styling, isWideLayout, formatItem } = this.props;
+    return getItemString(styling, type, data, isWideLayout, true, formatItem);
   };
 }

src/tabs/StateTab.jsx

@@ -6,13 +6,15 @@ import getJsonTreeTheme from './getJsonTreeTheme';
 
 import type { LabelRenderer } from 'react-json-tree';
 import type { StylingFunction, Base16Theme, StylingConfig } from 'react-base16-styling';
+import type { FormatItemFunction } from '../types';
 
 type Props = {
   styling: StylingFunction,
   base16Theme: Base16Theme,
   invertTheme: boolean,
   labelRenderer: LabelRenderer,
   isWideLayout: boolean,
+  formatItem: FormatItemFunction,
   nextState: Object
 };
 
@@ -53,6 +55,7 @@ export default class StateTab extends PureComponent<void, Props, State> {
   }
 
   getItemString = (type: string, data: any) => {
-    return getItemString(this.props.styling, type, data, this.props.isWideLayout);
+    const { styling, isWideLayout, formatItem } = this.props;
+    return getItemString(styling, type, data, isWideLayout, false, formatItem);
   };
 }

src/tabs/getItemString.js

@@ -3,6 +3,7 @@ import React from 'react';
 import getType from '../utils/getType';
 
 import type { StylingFunction } from 'react-base16-styling';
+import type { FormatItemFunction } from '../types';
 
 function getShortTypeString(val: any, diff?: boolean): string {
   const type = getType(val);
@@ -130,10 +131,12 @@ const getItemString = (
   type: string,
   data: Object,
   isWideLayout: boolean,
-  isDiff: boolean = false
+  isDiff: boolean = false,
+  formatItem?: FormatItemFunction,
 ): React$Element<*> =>
   <span {...styling('treeItemHint')}>
-    {getText(type, data, isWideLayout, isDiff)}
+    {(formatItem && formatItem(type, data, isWideLayout, isDiff)) ||
+      getText(type, data, isWideLayout, isDiff)}
   </span>;
 
 export default getItemString;

src/types.js

@@ -20,3 +20,5 @@ export type ReduxState = {
 export type MonitorState = {
   initialScrollTop: number
 };
+
+export type FormatItemFunction = () => string | null