diff --git a/packages/react-json-tree/README.md b/packages/react-json-tree/README.md index 7a55b3e1..100a3c98 100644 --- a/packages/react-json-tree/README.md +++ b/packages/react-json-tree/README.md @@ -137,6 +137,21 @@ Their full signatures are: - `labelRenderer: function(keyPath, nodeType, expanded, expandable)` - `valueRenderer: function(valueAsString, value, ...keyPath)` +#### Customize Expandable Buttons + +Passing the `expandable` props will activate in the top right corner of the JSONTree component the `expand all/collapse all` buttons. You can pass a JSON to customize the expand all/collapse all icons. The default icons are from [FontAwesome](https://fontawesome.com/). + +```jsx + +``` + #### More Options - `shouldExpandNodeInitially: function(keyPath, data, level)` - determines if node should be expanded when it first renders (root is expanded by default) diff --git a/packages/react-json-tree/src/JSONNestedNode.tsx b/packages/react-json-tree/src/JSONNestedNode.tsx index 38aa299c..fe16593f 100644 --- a/packages/react-json-tree/src/JSONNestedNode.tsx +++ b/packages/react-json-tree/src/JSONNestedNode.tsx @@ -113,7 +113,7 @@ export default function JSONNestedNode(props: Props) { shouldExpandNodeInitially, styling, } = props; - const { shouldExpandNode, setEnableDefaultButton, setShouldExpandNode } = + const { expandAllState, setExpandAllState, setEnableDefaultButton } = useExpandableButtonContext(); const [defaultExpanded] = useState( @@ -121,7 +121,7 @@ export default function JSONNestedNode(props: Props) { isCircular ? false : (function getDefault() { - switch (shouldExpandNode) { + switch (expandAllState) { case 'expand': return true; case 'collapse': @@ -139,7 +139,7 @@ export default function JSONNestedNode(props: Props) { * could lead to a "Maximum update depth exceeded" error */ const expandedRef = useRef(defaultExpanded); - switch (shouldExpandNode) { + switch (expandAllState) { case 'expand': expandedRef.current = isCircular ? false : true; break; @@ -157,9 +157,9 @@ export default function JSONNestedNode(props: Props) { expandedRef.current = !expandedRef.current; setTriggerReRender((e) => !e); setEnableDefaultButton(true); - setShouldExpandNode(undefined); + setExpandAllState(undefined); } - }, [expandable, setEnableDefaultButton, setShouldExpandNode]); + }, [expandable, setEnableDefaultButton, setExpandAllState]); const renderedChildren = expandedRef.current || (hideRoot && level === 0) diff --git a/packages/react-json-tree/src/expandableButtons.tsx b/packages/react-json-tree/src/expandableButtons.tsx index 8aa66b25..f6be23a0 100644 --- a/packages/react-json-tree/src/expandableButtons.tsx +++ b/packages/react-json-tree/src/expandableButtons.tsx @@ -56,18 +56,18 @@ function ExpandButton({ expandableDefaultValue, expandIcon, }: ExpandButtonProps) { - const { shouldExpandNode, setShouldExpandNode, setEnableDefaultButton } = + const { expandAllState, setExpandAllState, setEnableDefaultButton } = useExpandableButtonContext(); const onExpand = () => { - setShouldExpandNode('expand'); + setExpandAllState('expand'); setEnableDefaultButton(true); }; - const isDefault = !shouldExpandNode || shouldExpandNode === 'default'; + const isDefault = !expandAllState || expandAllState === 'default'; if ( - shouldExpandNode === 'collapse' || + expandAllState === 'collapse' || (isDefault && expandableDefaultValue === 'expand') ) { return ( @@ -84,18 +84,18 @@ function CollapseButton({ expandableDefaultValue, collapseIcon, }: CollapseButtonProps) { - const { shouldExpandNode, setShouldExpandNode, setEnableDefaultButton } = + const { expandAllState, setExpandAllState, setEnableDefaultButton } = useExpandableButtonContext(); const onCollapse = () => { - setShouldExpandNode('collapse'); + setExpandAllState('collapse'); setEnableDefaultButton(true); }; - const isDefault = !shouldExpandNode || shouldExpandNode === 'default'; + const isDefault = !expandAllState || expandAllState === 'default'; if ( - shouldExpandNode === 'expand' || + expandAllState === 'expand' || (isDefault && expandableDefaultValue === 'collapse') ) { return ( @@ -109,11 +109,11 @@ function CollapseButton({ } function DefaultButton({ defaultIcon }: DefaultButtonProps) { - const { setShouldExpandNode, setEnableDefaultButton } = + const { setExpandAllState, setEnableDefaultButton } = useExpandableButtonContext(); const onDefaultCollapse = () => { - setShouldExpandNode('default'); + setExpandAllState('default'); setEnableDefaultButton(false); }; diff --git a/packages/react-json-tree/src/expandableButtonsContext.tsx b/packages/react-json-tree/src/expandableButtonsContext.tsx index 41e15f47..38dc6017 100644 --- a/packages/react-json-tree/src/expandableButtonsContext.tsx +++ b/packages/react-json-tree/src/expandableButtonsContext.tsx @@ -12,8 +12,8 @@ import { StylingFunction } from 'react-base16-styling'; interface Context { enableDefaultButton: boolean; setEnableDefaultButton: any; - shouldExpandNode?: 'expand' | 'collapse' | 'default'; - setShouldExpandNode: any; + expandAllState?: 'expand' | 'collapse' | 'default'; + setExpandAllState: any; } interface Props { @@ -30,16 +30,16 @@ function ExpandableButtonsContextProvider({ styling, }: Props) { const [enableDefaultButton, setEnableDefaultButton] = useState(false); - const [shouldExpandNode, setShouldExpandNode] = useState(); + const [expandAllState, setExpandAllState] = useState(); const value = useMemo( () => ({ enableDefaultButton, setEnableDefaultButton, - shouldExpandNode, - setShouldExpandNode, + expandAllState, + setExpandAllState, }), - [enableDefaultButton, shouldExpandNode] + [enableDefaultButton, expandAllState] ); return (