diff --git a/packages/react-json-tree/README.md b/packages/react-json-tree/README.md index 100a3c98..7577d62f 100644 --- a/packages/react-json-tree/README.md +++ b/packages/react-json-tree/README.md @@ -137,13 +137,13 @@ Their full signatures are: - `labelRenderer: function(keyPath, nodeType, expanded, expandable)` - `valueRenderer: function(valueAsString, value, ...keyPath)` -#### Customize Expandable Buttons +#### Customize "Expand All/Collapse All" 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/). +Passing the `expandCollapseAll` 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 ( // calculate individual node expansion if necessary diff --git a/packages/react-json-tree/src/expandableButtons.tsx b/packages/react-json-tree/src/expandCollapseButtons.tsx similarity index 75% rename from packages/react-json-tree/src/expandableButtons.tsx rename to packages/react-json-tree/src/expandCollapseButtons.tsx index f6be23a0..80318564 100644 --- a/packages/react-json-tree/src/expandableButtons.tsx +++ b/packages/react-json-tree/src/expandCollapseButtons.tsx @@ -5,12 +5,12 @@ import { } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React, { ReactNode } from 'react'; -import { Expandable } from '.'; -import { useExpandableButtonContext } from './expandableButtonsContext'; +import { ExpandCollapseAll } from '.'; +import { useExpandCollapseAllContext } from './expandCollapseContext'; import { StylingFunction } from 'react-base16-styling'; -interface ExpandableButtonsProps { - expandable: Expandable; +interface Props { + expandCollapseAll: ExpandCollapseAll; styling: StylingFunction; } @@ -28,25 +28,25 @@ interface DefaultButtonProps { defaultIcon?: ReactNode; } -function ExpandableButtons({ expandable, styling }: ExpandableButtonsProps) { - const { enableDefaultButton } = useExpandableButtonContext(); +function ExpandCollapseButtons({ expandCollapseAll, styling }: Props) { + const { enableDefaultButton } = useExpandCollapseAllContext(); - const expandableDefaultValue = expandable?.defaultValue || 'expand'; + const expandableDefaultValue = expandCollapseAll?.defaultValue || 'expand'; return (
{enableDefaultButton && ( - + )}
); @@ -57,7 +57,7 @@ function ExpandButton({ expandIcon, }: ExpandButtonProps) { const { expandAllState, setExpandAllState, setEnableDefaultButton } = - useExpandableButtonContext(); + useExpandCollapseAllContext(); const onExpand = () => { setExpandAllState('expand'); @@ -85,7 +85,7 @@ function CollapseButton({ collapseIcon, }: CollapseButtonProps) { const { expandAllState, setExpandAllState, setEnableDefaultButton } = - useExpandableButtonContext(); + useExpandCollapseAllContext(); const onCollapse = () => { setExpandAllState('collapse'); @@ -110,7 +110,7 @@ function CollapseButton({ function DefaultButton({ defaultIcon }: DefaultButtonProps) { const { setExpandAllState, setEnableDefaultButton } = - useExpandableButtonContext(); + useExpandCollapseAllContext(); const onDefaultCollapse = () => { setExpandAllState('default'); @@ -126,4 +126,4 @@ function DefaultButton({ defaultIcon }: DefaultButtonProps) { return <>; } -export default ExpandableButtons; +export default ExpandCollapseButtons; diff --git a/packages/react-json-tree/src/expandableButtonsContext.tsx b/packages/react-json-tree/src/expandCollapseContext.tsx similarity index 55% rename from packages/react-json-tree/src/expandableButtonsContext.tsx rename to packages/react-json-tree/src/expandCollapseContext.tsx index 38dc6017..d1258ef5 100644 --- a/packages/react-json-tree/src/expandableButtonsContext.tsx +++ b/packages/react-json-tree/src/expandCollapseContext.tsx @@ -5,8 +5,8 @@ import React, { useMemo, useState, } from 'react'; -import { Expandable } from '.'; -import ExpandableButtons from './expandableButtons'; +import { ExpandCollapseAll } from '.'; +import ExpandCollapseButtons from './expandCollapseButtons'; import { StylingFunction } from 'react-base16-styling'; interface Context { @@ -18,14 +18,14 @@ interface Context { interface Props { children: ReactNode; - expandable?: Expandable; + expandCollapseAll?: ExpandCollapseAll; styling: StylingFunction; } -const ExpandableButtonsContext = createContext({} as Context); +const ExpandCollapseAllContext = createContext({} as Context); -function ExpandableButtonsContextProvider({ - expandable, +function ExpandCollapseAllContextProvider({ + expandCollapseAll, children, styling, }: Props) { @@ -43,16 +43,19 @@ function ExpandableButtonsContextProvider({ ); return ( - + {children} - {expandable && ( - + {expandCollapseAll && ( + )} - + ); } -export const useExpandableButtonContext = () => - useContext(ExpandableButtonsContext); +export const useExpandCollapseAllContext = () => + useContext(ExpandCollapseAllContext); -export default ExpandableButtonsContextProvider; +export default ExpandCollapseAllContextProvider; diff --git a/packages/react-json-tree/src/index.tsx b/packages/react-json-tree/src/index.tsx index 8ed3a099..0af44436 100644 --- a/packages/react-json-tree/src/index.tsx +++ b/packages/react-json-tree/src/index.tsx @@ -8,7 +8,7 @@ import JSONNode from './JSONNode'; import createStylingFromTheme from './createStylingFromTheme'; import { invertTheme } from 'react-base16-styling'; import type { StylingValue, Theme } from 'react-base16-styling'; -import ExpandableButtonsContext from './expandableButtonsContext'; +import ExpandCollapseAllButtonsContext from './expandCollapseContext'; import type { CommonExternalProps, @@ -22,10 +22,10 @@ interface Props extends Partial { data: unknown; theme?: Theme; invertTheme?: boolean; - expandable?: Expandable; + expandCollapseAll?: ExpandCollapseAll; } -interface Expandable { +interface ExpandCollapseAll { defaultValue?: 'expand' | 'collapse'; expandIcon?: ReactNode; collapseIcon?: ReactNode; @@ -51,7 +51,7 @@ export function JSONTree({ labelRenderer = defaultLabelRenderer, valueRenderer = identity, shouldExpandNodeInitially = expandRootNode, - expandable, + expandCollapseAll, hideRoot = false, getItemString = defaultItemString, postprocessValue = identity, @@ -67,7 +67,10 @@ export function JSONTree({ return (
    - + - +
); } @@ -100,4 +103,4 @@ export type { Styling, CommonExternalProps, } from './types'; -export type { Expandable, StylingValue }; +export type { ExpandCollapseAll, StylingValue }; diff --git a/packages/react-json-tree/test/index.spec.tsx b/packages/react-json-tree/test/index.spec.tsx index 198975ac..136b64a9 100644 --- a/packages/react-json-tree/test/index.spec.tsx +++ b/packages/react-json-tree/test/index.spec.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { createRenderer } from 'react-test-renderer/shallow'; import { JSONTree } from '../src/index'; -import ExpandableButtonsContextProvider from '../src/expandableButtonsContext'; +import ExpandCollapseAllContext from '../src/expandCollapseContext'; const BASIC_DATA = { a: 1, b: 'c' }; @@ -17,8 +17,6 @@ describe('JSONTree', () => { const result = render(); expect(result.type).toBe('ul'); - expect(result.props.children.type.name).toBe( - ExpandableButtonsContextProvider.name - ); + expect(result.props.children.type.name).toBe(ExpandCollapseAllContext.name); }); });