Added ArrowComponentOverride

packages/react-json-tree/README.md

@@ -137,6 +137,34 @@ Their full signatures are:
 - `labelRenderer: function(keyPath, nodeType, expanded, expandable)`
 - `valueRenderer: function(valueAsString, value, ...keyPath)`
 
+Additionally, it is possible to override the arrows for expanding, for example with a `+` and `-` button.
+
+```tsx
+const ArrowOverride = ({ expanded, ...rest }: JSONArrowProps) => {
+  if (expanded) {
+    return <button {...rest}>-</button>
+  }
+  return <button {...rest}>+</button>
+}
+
+<JSONTree ArrowComponentOverride={ArrowOverride} />
+```
+
+The default `JSONArrow` component will literally check if an `ArrowComponentOverride` exists and pass it's props there. The typescript for these props is as follows.
+
+```ts
+interface JSONArrowProps {
+  styling: StylingFunction;
+  arrowStyle?: 'single' | 'double';
+  expanded: boolean;
+  nodeType: string;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  ariaControls?: string;
+  ariaLabel?: string
+  OverrideComponent?: ComponentType<JSONArrowProps>;
+}
+```
+
 #### More Options
 
 - `shouldExpandNodeInitially: function(keyPath, data, level)` - determines if node should be expanded when it first renders (root is expanded by default)

packages/react-json-tree/examples/src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Map } from 'immutable';
-import { JSONTree, StylingValue } from 'react-json-tree';
+import { JSONArrowProps, JSONTree, StylingValue } from 'react-json-tree';
 
 const getLabelStyle: StylingValue = ({ style }, nodeType, expanded) => ({
   style: {
@@ -125,6 +125,13 @@ const theme = {
   base0F: '#cc6633',
 };
 
+const ArrowOverride = ({ expanded, ...rest }: JSONArrowProps) => {
+  if (expanded) {
+    return <button {...rest}>-</button>
+  }
+  return <button {...rest}>+</button>
+}
+
 const App = () => (
   <div>
     <JSONTree data={data} theme={theme} invertTheme />
@@ -168,10 +175,12 @@ const App = () => (
     <p>
       Pass <code>labelRenderer</code> or <code>valueRenderer</code>.
     </p>
+    <p>Additionally, you may pass an <code>ArrowComponentOverride</code></p>
     <div>
       <JSONTree
         data={data}
         theme={theme}
+        ArrowComponentOverride={ArrowOverride}
         labelRenderer={([raw]) => <span>(({raw})):</span>}
         valueRenderer={(raw) => (
           <em>

packages/react-json-tree/src/ItemRange.tsx

@@ -34,6 +34,7 @@ export default function ItemRange(props: Props) {
         onClick={handleClick}
         arrowStyle="double"
         ariaLabel={`Expand Array from ${from} to ${to}`}
+        OverrideComponent={props.ArrowComponentOverride}
       />
       {`${from} ... ${to}`}
     </div>

packages/react-json-tree/src/JSONArrow.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
 import type { StylingFunction } from 'react-base16-styling';
 
-interface Props {
+export interface JSONArrowProps {
   styling: StylingFunction;
   arrowStyle?: 'single' | 'double';
   expanded: boolean;
@@ -9,17 +9,23 @@ interface Props {
   onClick: React.MouseEventHandler<HTMLButtonElement>;
   ariaControls?: string;
   ariaLabel?: string
+  OverrideComponent?: ComponentType<JSONArrowProps>;
 }
 
-export default function JSONArrow({
-  styling,
-  arrowStyle = 'single',
-  expanded,
-  nodeType,
-  onClick,
-  ariaControls,
-  ariaLabel
-}: Props) {
+export default function JSONArrow({OverrideComponent, ...props}: JSONArrowProps) {
+  const {
+    styling,
+    arrowStyle = 'single',
+    expanded,
+    nodeType,
+    onClick,
+    ariaControls,
+    ariaLabel
+  } = props
+  if(OverrideComponent) {
+    return <OverrideComponent {...props} />
+  }
+
   return (
     <button {...styling('arrowContainer', arrowStyle)} aria-label={ariaLabel} aria-expanded={expanded} aria-controls={ariaControls} onClick={onClick}>
       <div {...styling(['arrow', 'arrowSign'], nodeType, expanded, arrowStyle)}>

packages/react-json-tree/src/JSONNestedNode.tsx

@@ -161,6 +161,7 @@ export default function JSONNestedNode(props: Props) {
           onClick={handleClick}
           ariaControls={ariaControls}
           ariaLabel={ariaLabel}
+          OverrideComponent={props.ArrowComponentOverride}
         />
       )}
       <label

packages/react-json-tree/src/index.tsx

@@ -47,6 +47,7 @@ export function JSONTree({
   isCustomNode = noCustomNode,
   collectionLimit = 50,
   sortObjectKeys = false,
+  ArrowComponentOverride
 }: Props) {
   const styling = useMemo(
     () =>
@@ -69,6 +70,7 @@ export function JSONTree({
         postprocessValue={postprocessValue}
         collectionLimit={collectionLimit}
         sortObjectKeys={sortObjectKeys}
+        ArrowComponentOverride={ArrowComponentOverride}
       />
     </ul>
   );
@@ -87,4 +89,7 @@ export type {
   Styling,
   CommonExternalProps,
 } from './types.js';
+
+export type { JSONArrowProps } from './JSONArrow.js';
+
 export type { StylingValue };

packages/react-json-tree/src/types.ts

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
 import { StylingFunction } from 'react-base16-styling';
+import { JSONArrowProps } from './JSONArrow.js';
 
 export type Key = string | number;
 
@@ -46,6 +47,7 @@ export interface CommonExternalProps {
   keyPath: KeyPath;
   labelRenderer: LabelRenderer;
   valueRenderer: ValueRenderer;
+  ArrowComponentOverride?: ComponentType<JSONArrowProps>;
   shouldExpandNodeInitially: ShouldExpandNodeInitially;
   hideRoot: boolean;
   getItemString: GetItemString;