add context

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

@@ -1,8 +1,9 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import JSONArrow from './JSONArrow';
-import getCollectionEntries from './getCollectionEntries';
-import JSONNode from './JSONNode';
 import ItemRange from './ItemRange';
+import JSONArrow from './JSONArrow';
+import JSONNode from './JSONNode';
+import { useExpandableButtonContext } from './expandableButtonsContext';
+import getCollectionEntries from './getCollectionEntries';
 import type { CircularCache, CommonInternalProps } from './types';
 
 /**
@@ -110,12 +111,12 @@ export default function JSONNestedNode(props: Props) {
     nodeType,
     nodeTypeIndicator,
     shouldExpandNodeInitially,
-    shouldExpandNode,
-    setShouldExpandNode,
-    setEnableDefaultButton,
     styling,
   } = props;
 
+  const { shouldExpandNode, setShouldExpandNode, setEnableDefaultButton } =
+    useExpandableButtonContext();
+
   const [expanded, setExpanded] = useState<boolean>(
     // calculate individual node expansion if necessary
     isCircular ? false : shouldExpandNodeInitially(keyPath, data, level)
@@ -125,10 +126,16 @@ export default function JSONNestedNode(props: Props) {
 
   useEffect(() => {
     switch (shouldExpandNode) {
-      case 'expand': setExpanded(true); break;
-      case'collapse': setExpanded(false); break;
-      case'default': setExpanded(defaultExpanded); break;
-      default:
+      case 'expand':
+        setExpanded(true);
+        break;
+      case 'collapse':
+        setExpanded(false);
+        break;
+      case 'default':
+        setExpanded(defaultExpanded);
+        break;
+      default: // Do nothing
     }
   }, [defaultExpanded, shouldExpandNode]);
 
@@ -136,7 +143,7 @@ export default function JSONNestedNode(props: Props) {
     if (expandable) {
       setExpanded(!expanded);
       setEnableDefaultButton(true);
-      setShouldExpandNode(undefined)
+      setShouldExpandNode(undefined);
     }
   }, [expandable, expanded, setEnableDefaultButton, setShouldExpandNode]);
 

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

@@ -1,87 +1,84 @@
-import React, { ReactNode } from 'react'
+import {
+  faArrowDown,
+  faArrowRight,
+  faUndo,
+} from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowDown, faArrowRight, faUndo } from '@fortawesome/free-solid-svg-icons';
+import React, { ReactNode } from 'react';
 import { Expandable } from '.';
+import { useExpandableButtonContext } from './expandableButtonsContext';
 
-interface Props {
-  expandable?: Expandable;
-  enableDefaultButton: boolean;
-  setEnableDefaultButton: any;
-  shouldExpandNode?: 'expand' | 'collapse' | 'default';
-  setShouldExpandNode: any;
+interface ExpandableButtonsProps {
+  expandable: Expandable;
 }
 
 interface ExpandButtonProps {
   expandableDefaultValue?: 'expand' | 'collapse';
   expandIcon?: ReactNode;
-  shouldExpandNode?: 'expand' | 'collapse' | 'default';
-  setShouldExpandNode: any;
-  setEnableDefaultButton: any;
 }
 
 interface CollapseButtonProps {
   expandableDefaultValue?: 'expand' | 'collapse';
   collapseIcon?: ReactNode;
-  shouldExpandNode?: 'expand' | 'collapse' | 'default';
-  setShouldExpandNode: any;
-  setEnableDefaultButton: any;
 }
 
 interface DefaultButtonProps {
   defaultIcon?: ReactNode;
-  setShouldExpandNode: any;
-  setEnableDefaultButton: any;
 }
 
-function ExpandableButtons({ 
-  expandable,
-  enableDefaultButton,
-  setEnableDefaultButton,
-  setShouldExpandNode,
-  shouldExpandNode
- }: Props){
-    if(!expandable){
-        return <></>
-    }
+function ExpandableButtons({ expandable }: ExpandableButtonsProps) {
+  const { enableDefaultButton } = useExpandableButtonContext();
 
-    const expandableDefaultValue = expandable?.defaultValue || 'expand'
+  const expandableDefaultValue = expandable?.defaultValue || 'expand';
 
   return (
-      <div style={{position: 'absolute', display: 'flex', justifyContent:'center', alignItems: 'center', gap:'1rem', top: '1rem', right: '1rem', cursor: 'pointer'}}>
-        {enableDefaultButton && <DefaultButton
-          defaultIcon={expandable?.defaultIcon}
-          setShouldExpandNode={setShouldExpandNode}
-          setEnableDefaultButton={setEnableDefaultButton}
-        />}
+    <div
+      style={{
+        position: 'absolute',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: '1rem',
+        top: '1rem',
+        right: '1rem',
+        cursor: 'pointer',
+      }}
+    >
+      {enableDefaultButton && (
+        <DefaultButton defaultIcon={expandable?.defaultIcon} />
+      )}
 
       <ExpandButton
         expandableDefaultValue={expandableDefaultValue}
         expandIcon={expandable?.expandIcon}
-          setShouldExpandNode={setShouldExpandNode}
-          setEnableDefaultButton={setEnableDefaultButton}
-          shouldExpandNode={shouldExpandNode}
       />
 
       <CollapseButton
         expandableDefaultValue={expandable?.defaultValue}
         collapseIcon={expandable?.collapseIcon}
-          setShouldExpandNode={setShouldExpandNode}
-          setEnableDefaultButton={setEnableDefaultButton}
-          shouldExpandNode={shouldExpandNode}
       />
     </div>
-    )
+  );
 }
 
-function ExpandButton({ expandableDefaultValue, expandIcon, shouldExpandNode, setEnableDefaultButton, setShouldExpandNode }: ExpandButtonProps) {
+function ExpandButton({
+  expandableDefaultValue,
+  expandIcon,
+}: ExpandButtonProps) {
+  const { shouldExpandNode, setShouldExpandNode, setEnableDefaultButton } =
+    useExpandableButtonContext();
+
   const onExpand = () => {
     setShouldExpandNode('expand');
     setEnableDefaultButton(true);
-    }
+  };
 
-    const isDefault = !shouldExpandNode ||shouldExpandNode === 'default'
+  const isDefault = !shouldExpandNode || shouldExpandNode === 'default';
 
-    if (shouldExpandNode === 'collapse' || (isDefault && expandableDefaultValue === 'collapse')) {
+  if (
+    shouldExpandNode === 'collapse' ||
+    (isDefault && expandableDefaultValue === 'collapse')
+  ) {
     return (
       <div role="presentation" onClick={onExpand}>
         {expandIcon || <FontAwesomeIcon icon={faArrowRight} />}
@@ -92,15 +89,24 @@ function ExpandButton({ expandableDefaultValue, expandIcon, shouldExpandNode, se
   return <></>;
 }
 
-  function CollapseButton({ expandableDefaultValue, collapseIcon, shouldExpandNode, setEnableDefaultButton, setShouldExpandNode }: CollapseButtonProps) {
+function CollapseButton({
+  expandableDefaultValue,
+  collapseIcon,
+}: CollapseButtonProps) {
+  const { shouldExpandNode, setShouldExpandNode, setEnableDefaultButton } =
+    useExpandableButtonContext();
+
   const onCollapse = () => {
     setShouldExpandNode('collapse');
     setEnableDefaultButton(true);
-    }
+  };
 
-    const isDefault = !shouldExpandNode ||shouldExpandNode === 'default'
+  const isDefault = !shouldExpandNode || shouldExpandNode === 'default';
 
-    if (shouldExpandNode === 'expand' ||(isDefault && expandableDefaultValue === 'expand')) {
+  if (
+    shouldExpandNode === 'expand' ||
+    (isDefault && expandableDefaultValue === 'expand')
+  ) {
     return (
       <div role="presentation" onClick={onCollapse}>
         {collapseIcon || <FontAwesomeIcon icon={faArrowDown} />}
@@ -111,11 +117,14 @@ function ExpandButton({ expandableDefaultValue, expandIcon, shouldExpandNode, se
   return <></>;
 }
 
-  function DefaultButton({defaultIcon, setEnableDefaultButton, setShouldExpandNode }:DefaultButtonProps) {
+function DefaultButton({ defaultIcon }: DefaultButtonProps) {
+  const { setShouldExpandNode, setEnableDefaultButton } =
+    useExpandableButtonContext();
+
   const onDefaultCollapse = () => {
     setShouldExpandNode('default');
-      setEnableDefaultButton(false)
-    }
+    setEnableDefaultButton(false);
+  };
 
   return (
     <div role="presentation" onClick={onDefaultCollapse}>
@@ -126,4 +135,4 @@ function ExpandButton({ expandableDefaultValue, expandIcon, shouldExpandNode, se
   return <></>;
 }
 
-  export default ExpandableButtons
+export default ExpandableButtons;

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

@@ -0,0 +1,50 @@
+import React, {
+  ReactNode,
+  createContext,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+import { Expandable } from '.';
+import ExpandableButtons from './expandableButtons';
+
+interface Context {
+  enableDefaultButton: boolean;
+  setEnableDefaultButton: any;
+  shouldExpandNode?: 'expand' | 'collapse' | 'default';
+  setShouldExpandNode: any;
+}
+
+interface Props {
+  children: ReactNode;
+  expandable?: Expandable;
+}
+
+const ExpandableButtonsContext = createContext<Context>({} as Context);
+
+function ExpandableButtonsContextProvider({ expandable, children }: Props) {
+  const [enableDefaultButton, setEnableDefaultButton] = useState(false);
+  const [shouldExpandNode, setShouldExpandNode] = useState();
+
+  const value = useMemo(
+    () => ({
+      enableDefaultButton,
+      setEnableDefaultButton,
+      shouldExpandNode,
+      setShouldExpandNode,
+    }),
+    [enableDefaultButton, shouldExpandNode]
+  );
+
+  return (
+    <ExpandableButtonsContext.Provider value={value}>
+      {children}
+      {expandable && <ExpandableButtons expandable={expandable} />}
+    </ExpandableButtonsContext.Provider>
+  );
+}
+
+export const useExpandableButtonContext = () =>
+  useContext(ExpandableButtonsContext);
+
+export default ExpandableButtonsContextProvider;

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

@@ -3,12 +3,13 @@
 // Dave Vedder <veddermatic@gmail.com> http://www.eskimospy.com/
 // port by Daniele Zannotti http://www.github.com/dzannotti <dzannotti@me.com>
 
-import React, { ReactNode, useMemo, useState } from 'react';
+import React, { ReactNode, useMemo } from 'react';
 import JSONNode from './JSONNode';
 import createStylingFromTheme from './createStylingFromTheme';
 import { invertTheme } from 'react-base16-styling';
 import type { StylingValue, Theme } from 'react-base16-styling';
-import ExpandableButtons from './expandableButtons'
+import ExpandableButtonsContext from './expandableButtonsContext';
+
 import type {
   CommonExternalProps,
   GetItemString,
@@ -58,9 +59,6 @@ export function JSONTree({
   collectionLimit = 50,
   sortObjectKeys = false,
 }: Props) {
-  const [enableDefaultButton, setEnableDefaultButton] = useState(false);
-  const [shouldExpandNode, setShouldExpandNode] = useState();
-
   const styling = useMemo(
     () =>
       createStylingFromTheme(shouldInvertTheme ? invertTheme(theme) : theme),
@@ -69,6 +67,7 @@ export function JSONTree({
 
   return (
     <ul {...styling('tree')}>
+      <ExpandableButtonsContext expandable={expandable}>
         <JSONNode
           keyPath={hideRoot ? [] : keyPath}
           value={postprocessValue(value)}
@@ -77,23 +76,13 @@ export function JSONTree({
           labelRenderer={labelRenderer}
           valueRenderer={valueRenderer}
           shouldExpandNodeInitially={shouldExpandNodeInitially}
-        shouldExpandNode={shouldExpandNode}
-        setEnableDefaultButton={setEnableDefaultButton}
-        setShouldExpandNode={setShouldExpandNode}
           hideRoot={hideRoot}
           getItemString={getItemString}
           postprocessValue={postprocessValue}
           collectionLimit={collectionLimit}
           sortObjectKeys={sortObjectKeys}
         />
-
-      <ExpandableButtons 
-        expandable={expandable}
-        enableDefaultButton={enableDefaultButton}
-        setEnableDefaultButton={setEnableDefaultButton}
-        shouldExpandNode={shouldExpandNode}
-        setShouldExpandNode={setShouldExpandNode}
-      />
+      </ExpandableButtonsContext>
     </ul>
   );
 }

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

@@ -53,8 +53,6 @@ export interface CommonExternalProps {
   isCustomNode: IsCustomNode;
   collectionLimit: number;
   sortObjectKeys: SortObjectKeys;
-  setEnableDefaultButton: any;
-  setShouldExpandNode: any;
 }
 
 export interface CommonInternalProps extends CommonExternalProps {
@@ -62,5 +60,4 @@ export interface CommonInternalProps extends CommonExternalProps {
   circularCache?: CircularCache;
   level?: number;
   isCircular?: boolean;
-  shouldExpandNode?: 'expand' | 'collapse' | 'default';
 }