mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2025-07-22 22:19:48 +03:00
refactor variables names and files names
This commit is contained in:
parent
032aeb6271
commit
6a125af908
|
@ -137,13 +137,13 @@ Their full signatures are:
|
||||||
- `labelRenderer: function(keyPath, nodeType, expanded, expandable)`
|
- `labelRenderer: function(keyPath, nodeType, expanded, expandable)`
|
||||||
- `valueRenderer: function(valueAsString, value, ...keyPath)`
|
- `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
|
```jsx
|
||||||
<JSONTree
|
<JSONTree
|
||||||
expandable={{
|
expandCollapseAll={{
|
||||||
defaultValue: 'expand',
|
defaultValue: 'expand',
|
||||||
expandIcon: /* your custom expand icon */,
|
expandIcon: /* your custom expand icon */,
|
||||||
collapseIcon: /* your custom collapse icon */,
|
collapseIcon: /* your custom collapse icon */,
|
||||||
|
|
|
@ -2,7 +2,7 @@ import React, { useCallback, useRef, useState } from 'react';
|
||||||
import ItemRange from './ItemRange';
|
import ItemRange from './ItemRange';
|
||||||
import JSONArrow from './JSONArrow';
|
import JSONArrow from './JSONArrow';
|
||||||
import JSONNode from './JSONNode';
|
import JSONNode from './JSONNode';
|
||||||
import { useExpandableButtonContext } from './expandableButtonsContext';
|
import { useExpandCollapseAllContext } from './expandCollapseContext';
|
||||||
import getCollectionEntries from './getCollectionEntries';
|
import getCollectionEntries from './getCollectionEntries';
|
||||||
import type { CircularCache, CommonInternalProps } from './types';
|
import type { CircularCache, CommonInternalProps } from './types';
|
||||||
|
|
||||||
|
@ -114,7 +114,7 @@ export default function JSONNestedNode(props: Props) {
|
||||||
styling,
|
styling,
|
||||||
} = props;
|
} = props;
|
||||||
const { expandAllState, setExpandAllState, setEnableDefaultButton } =
|
const { expandAllState, setExpandAllState, setEnableDefaultButton } =
|
||||||
useExpandableButtonContext();
|
useExpandCollapseAllContext();
|
||||||
|
|
||||||
const [defaultExpanded] = useState<boolean>(
|
const [defaultExpanded] = useState<boolean>(
|
||||||
// calculate individual node expansion if necessary
|
// calculate individual node expansion if necessary
|
||||||
|
|
|
@ -5,12 +5,12 @@ import {
|
||||||
} from '@fortawesome/free-solid-svg-icons';
|
} from '@fortawesome/free-solid-svg-icons';
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
import React, { ReactNode } from 'react';
|
import React, { ReactNode } from 'react';
|
||||||
import { Expandable } from '.';
|
import { ExpandCollapseAll } from '.';
|
||||||
import { useExpandableButtonContext } from './expandableButtonsContext';
|
import { useExpandCollapseAllContext } from './expandCollapseContext';
|
||||||
import { StylingFunction } from 'react-base16-styling';
|
import { StylingFunction } from 'react-base16-styling';
|
||||||
|
|
||||||
interface ExpandableButtonsProps {
|
interface Props {
|
||||||
expandable: Expandable;
|
expandCollapseAll: ExpandCollapseAll;
|
||||||
styling: StylingFunction;
|
styling: StylingFunction;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -28,25 +28,25 @@ interface DefaultButtonProps {
|
||||||
defaultIcon?: ReactNode;
|
defaultIcon?: ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
function ExpandableButtons({ expandable, styling }: ExpandableButtonsProps) {
|
function ExpandCollapseButtons({ expandCollapseAll, styling }: Props) {
|
||||||
const { enableDefaultButton } = useExpandableButtonContext();
|
const { enableDefaultButton } = useExpandCollapseAllContext();
|
||||||
|
|
||||||
const expandableDefaultValue = expandable?.defaultValue || 'expand';
|
const expandableDefaultValue = expandCollapseAll?.defaultValue || 'expand';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div {...styling('expandable')}>
|
<div {...styling('expandable')}>
|
||||||
{enableDefaultButton && (
|
{enableDefaultButton && (
|
||||||
<DefaultButton defaultIcon={expandable?.defaultIcon} />
|
<DefaultButton defaultIcon={expandCollapseAll?.defaultIcon} />
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<ExpandButton
|
<ExpandButton
|
||||||
expandableDefaultValue={expandableDefaultValue}
|
expandableDefaultValue={expandableDefaultValue}
|
||||||
expandIcon={expandable?.expandIcon}
|
expandIcon={expandCollapseAll?.expandIcon}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<CollapseButton
|
<CollapseButton
|
||||||
expandableDefaultValue={expandable?.defaultValue}
|
expandableDefaultValue={expandCollapseAll?.defaultValue}
|
||||||
collapseIcon={expandable?.collapseIcon}
|
collapseIcon={expandCollapseAll?.collapseIcon}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -57,7 +57,7 @@ function ExpandButton({
|
||||||
expandIcon,
|
expandIcon,
|
||||||
}: ExpandButtonProps) {
|
}: ExpandButtonProps) {
|
||||||
const { expandAllState, setExpandAllState, setEnableDefaultButton } =
|
const { expandAllState, setExpandAllState, setEnableDefaultButton } =
|
||||||
useExpandableButtonContext();
|
useExpandCollapseAllContext();
|
||||||
|
|
||||||
const onExpand = () => {
|
const onExpand = () => {
|
||||||
setExpandAllState('expand');
|
setExpandAllState('expand');
|
||||||
|
@ -85,7 +85,7 @@ function CollapseButton({
|
||||||
collapseIcon,
|
collapseIcon,
|
||||||
}: CollapseButtonProps) {
|
}: CollapseButtonProps) {
|
||||||
const { expandAllState, setExpandAllState, setEnableDefaultButton } =
|
const { expandAllState, setExpandAllState, setEnableDefaultButton } =
|
||||||
useExpandableButtonContext();
|
useExpandCollapseAllContext();
|
||||||
|
|
||||||
const onCollapse = () => {
|
const onCollapse = () => {
|
||||||
setExpandAllState('collapse');
|
setExpandAllState('collapse');
|
||||||
|
@ -110,7 +110,7 @@ function CollapseButton({
|
||||||
|
|
||||||
function DefaultButton({ defaultIcon }: DefaultButtonProps) {
|
function DefaultButton({ defaultIcon }: DefaultButtonProps) {
|
||||||
const { setExpandAllState, setEnableDefaultButton } =
|
const { setExpandAllState, setEnableDefaultButton } =
|
||||||
useExpandableButtonContext();
|
useExpandCollapseAllContext();
|
||||||
|
|
||||||
const onDefaultCollapse = () => {
|
const onDefaultCollapse = () => {
|
||||||
setExpandAllState('default');
|
setExpandAllState('default');
|
||||||
|
@ -126,4 +126,4 @@ function DefaultButton({ defaultIcon }: DefaultButtonProps) {
|
||||||
return <></>;
|
return <></>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default ExpandableButtons;
|
export default ExpandCollapseButtons;
|
|
@ -5,8 +5,8 @@ import React, {
|
||||||
useMemo,
|
useMemo,
|
||||||
useState,
|
useState,
|
||||||
} from 'react';
|
} from 'react';
|
||||||
import { Expandable } from '.';
|
import { ExpandCollapseAll } from '.';
|
||||||
import ExpandableButtons from './expandableButtons';
|
import ExpandCollapseButtons from './expandCollapseButtons';
|
||||||
import { StylingFunction } from 'react-base16-styling';
|
import { StylingFunction } from 'react-base16-styling';
|
||||||
|
|
||||||
interface Context {
|
interface Context {
|
||||||
|
@ -18,14 +18,14 @@ interface Context {
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
expandable?: Expandable;
|
expandCollapseAll?: ExpandCollapseAll;
|
||||||
styling: StylingFunction;
|
styling: StylingFunction;
|
||||||
}
|
}
|
||||||
|
|
||||||
const ExpandableButtonsContext = createContext<Context>({} as Context);
|
const ExpandCollapseAllContext = createContext<Context>({} as Context);
|
||||||
|
|
||||||
function ExpandableButtonsContextProvider({
|
function ExpandCollapseAllContextProvider({
|
||||||
expandable,
|
expandCollapseAll,
|
||||||
children,
|
children,
|
||||||
styling,
|
styling,
|
||||||
}: Props) {
|
}: Props) {
|
||||||
|
@ -43,16 +43,19 @@ function ExpandableButtonsContextProvider({
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ExpandableButtonsContext.Provider value={value}>
|
<ExpandCollapseAllContext.Provider value={value}>
|
||||||
{children}
|
{children}
|
||||||
{expandable && (
|
{expandCollapseAll && (
|
||||||
<ExpandableButtons expandable={expandable} styling={styling} />
|
<ExpandCollapseButtons
|
||||||
|
expandCollapseAll={expandCollapseAll}
|
||||||
|
styling={styling}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
</ExpandableButtonsContext.Provider>
|
</ExpandCollapseAllContext.Provider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export const useExpandableButtonContext = () =>
|
export const useExpandCollapseAllContext = () =>
|
||||||
useContext(ExpandableButtonsContext);
|
useContext(ExpandCollapseAllContext);
|
||||||
|
|
||||||
export default ExpandableButtonsContextProvider;
|
export default ExpandCollapseAllContextProvider;
|
|
@ -8,7 +8,7 @@ import JSONNode from './JSONNode';
|
||||||
import createStylingFromTheme from './createStylingFromTheme';
|
import createStylingFromTheme from './createStylingFromTheme';
|
||||||
import { invertTheme } from 'react-base16-styling';
|
import { invertTheme } from 'react-base16-styling';
|
||||||
import type { StylingValue, Theme } from 'react-base16-styling';
|
import type { StylingValue, Theme } from 'react-base16-styling';
|
||||||
import ExpandableButtonsContext from './expandableButtonsContext';
|
import ExpandCollapseAllButtonsContext from './expandCollapseContext';
|
||||||
|
|
||||||
import type {
|
import type {
|
||||||
CommonExternalProps,
|
CommonExternalProps,
|
||||||
|
@ -22,10 +22,10 @@ interface Props extends Partial<CommonExternalProps> {
|
||||||
data: unknown;
|
data: unknown;
|
||||||
theme?: Theme;
|
theme?: Theme;
|
||||||
invertTheme?: boolean;
|
invertTheme?: boolean;
|
||||||
expandable?: Expandable;
|
expandCollapseAll?: ExpandCollapseAll;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Expandable {
|
interface ExpandCollapseAll {
|
||||||
defaultValue?: 'expand' | 'collapse';
|
defaultValue?: 'expand' | 'collapse';
|
||||||
expandIcon?: ReactNode;
|
expandIcon?: ReactNode;
|
||||||
collapseIcon?: ReactNode;
|
collapseIcon?: ReactNode;
|
||||||
|
@ -51,7 +51,7 @@ export function JSONTree({
|
||||||
labelRenderer = defaultLabelRenderer,
|
labelRenderer = defaultLabelRenderer,
|
||||||
valueRenderer = identity,
|
valueRenderer = identity,
|
||||||
shouldExpandNodeInitially = expandRootNode,
|
shouldExpandNodeInitially = expandRootNode,
|
||||||
expandable,
|
expandCollapseAll,
|
||||||
hideRoot = false,
|
hideRoot = false,
|
||||||
getItemString = defaultItemString,
|
getItemString = defaultItemString,
|
||||||
postprocessValue = identity,
|
postprocessValue = identity,
|
||||||
|
@ -67,7 +67,10 @@ export function JSONTree({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ul {...styling('tree')}>
|
<ul {...styling('tree')}>
|
||||||
<ExpandableButtonsContext expandable={expandable} styling={styling}>
|
<ExpandCollapseAllButtonsContext
|
||||||
|
expandCollapseAll={expandCollapseAll}
|
||||||
|
styling={styling}
|
||||||
|
>
|
||||||
<JSONNode
|
<JSONNode
|
||||||
keyPath={hideRoot ? [] : keyPath}
|
keyPath={hideRoot ? [] : keyPath}
|
||||||
value={postprocessValue(value)}
|
value={postprocessValue(value)}
|
||||||
|
@ -82,7 +85,7 @@ export function JSONTree({
|
||||||
collectionLimit={collectionLimit}
|
collectionLimit={collectionLimit}
|
||||||
sortObjectKeys={sortObjectKeys}
|
sortObjectKeys={sortObjectKeys}
|
||||||
/>
|
/>
|
||||||
</ExpandableButtonsContext>
|
</ExpandCollapseAllButtonsContext>
|
||||||
</ul>
|
</ul>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -100,4 +103,4 @@ export type {
|
||||||
Styling,
|
Styling,
|
||||||
CommonExternalProps,
|
CommonExternalProps,
|
||||||
} from './types';
|
} from './types';
|
||||||
export type { Expandable, StylingValue };
|
export type { ExpandCollapseAll, StylingValue };
|
||||||
|
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
||||||
import { createRenderer } from 'react-test-renderer/shallow';
|
import { createRenderer } from 'react-test-renderer/shallow';
|
||||||
|
|
||||||
import { JSONTree } from '../src/index';
|
import { JSONTree } from '../src/index';
|
||||||
import ExpandableButtonsContextProvider from '../src/expandableButtonsContext';
|
import ExpandCollapseAllContext from '../src/expandCollapseContext';
|
||||||
|
|
||||||
const BASIC_DATA = { a: 1, b: 'c' };
|
const BASIC_DATA = { a: 1, b: 'c' };
|
||||||
|
|
||||||
|
@ -17,8 +17,6 @@ describe('JSONTree', () => {
|
||||||
const result = render(<JSONTree data={BASIC_DATA} />);
|
const result = render(<JSONTree data={BASIC_DATA} />);
|
||||||
|
|
||||||
expect(result.type).toBe('ul');
|
expect(result.type).toBe('ul');
|
||||||
expect(result.props.children.type.name).toBe(
|
expect(result.props.children.type.name).toBe(ExpandCollapseAllContext.name);
|
||||||
ExpandableButtonsContextProvider.name
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue
Block a user