reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-22 14:09:46 +03:00
Code Issues Packages Projects Releases Wiki Activity

handle very first render

Browse Source
This commit is contained in:
lucataglia 2023-05-19 18:16:39 +02:00
parent decde458b1
commit b12babbcd9
2 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/react-json-tree/src/expandableButtons.tsx
View File

@ -5,7 +5,6 @@ import { Expandable } from '.';
interface Props { interface Props {
expandable?: Expandable; expandable?: Expandable;
expandableDefaultValue?: 'expand' | 'collapse';
shouldExpandNode?: 'expand' | 'collapse' | 'default'; shouldExpandNode?: 'expand' | 'collapse' | 'default';
setShouldExpandNode: any; setShouldExpandNode: any;
} }
@ -31,7 +30,6 @@ interface DefaultButtonProps {
function ExpandableButtons({ function ExpandableButtons({
expandable, expandable,
expandableDefaultValue,
setShouldExpandNode, setShouldExpandNode,
shouldExpandNode shouldExpandNode
}: Props){ }: Props){
@ -39,13 +37,15 @@ function ExpandableButtons({
return <></> return <></>
} }
const expandableDefaultValue = expandable?.defaultValue || 'expand'
return ( return (
<div style={{position: 'absolute', display: 'flex', justifyContent:'center', alignItems: 'center', gap:'1rem', top: '1rem', right: '1rem', cursor: 'pointer'}}> <div style={{position: 'absolute', display: 'flex', justifyContent:'center', alignItems: 'center', gap:'1rem', top: '1rem', right: '1rem', cursor: 'pointer'}}>
<DefaultButton <DefaultButton
defaultIcon={expandable?.defaultIcon} defaultIcon={expandable?.defaultIcon}
setShouldExpandNode={setShouldExpandNode} setShouldExpandNode={setShouldExpandNode}
/> />
<ExpandButton <ExpandButton
expandableDefaultValue={expandableDefaultValue} expandableDefaultValue={expandableDefaultValue}
expandIcon={expandable?.expandIcon} expandIcon={expandable?.expandIcon}
@ -66,7 +66,9 @@ function ExpandableButtons({
function ExpandButton({ expandableDefaultValue, expandIcon, shouldExpandNode, setShouldExpandNode }: ExpandButtonProps) { function ExpandButton({ expandableDefaultValue, expandIcon, shouldExpandNode, setShouldExpandNode }: ExpandButtonProps) {
const onExpand = () => setShouldExpandNode('expand'); const onExpand = () => setShouldExpandNode('expand');
if (shouldExpandNode === 'collapse' || (shouldExpandNode === 'default' && expandableDefaultValue === 'collapse')) { const isDefault = !shouldExpandNode ||shouldExpandNode === 'default'
if (shouldExpandNode === 'collapse' || (isDefault && expandableDefaultValue === 'collapse')) {
return ( return (
<div role="presentation" onClick={onExpand}> <div role="presentation" onClick={onExpand}>
{expandIcon || <FontAwesomeIcon icon={faArrowRight} />} {expandIcon || <FontAwesomeIcon icon={faArrowRight} />}
@ -80,7 +82,9 @@ function ExpandButton({ expandableDefaultValue, expandIcon, shouldExpandNode, se
function CollapseButton({ expandableDefaultValue, collapseIcon, shouldExpandNode, setShouldExpandNode }: CollapseButtonProps) { function CollapseButton({ expandableDefaultValue, collapseIcon, shouldExpandNode, setShouldExpandNode }: CollapseButtonProps) {
const onCollapse = () => setShouldExpandNode('collapse'); const onCollapse = () => setShouldExpandNode('collapse');
if (shouldExpandNode === 'expand' ||(shouldExpandNode === 'default' && expandableDefaultValue === 'expand')) { const isDefault = !shouldExpandNode ||shouldExpandNode === 'default'
if (shouldExpandNode === 'expand' ||(isDefault && expandableDefaultValue === 'expand')) {
return ( return (
<div role="presentation" onClick={onCollapse}> <div role="presentation" onClick={onCollapse}>
{collapseIcon || <FontAwesomeIcon icon={faArrowDown} />} {collapseIcon || <FontAwesomeIcon icon={faArrowDown} />}

4
packages/react-json-tree/src/index.tsx
View File

@ -58,8 +58,7 @@ export function JSONTree({
collectionLimit = 50, collectionLimit = 50,
sortObjectKeys = false, sortObjectKeys = false,
}: Props) { }: Props) {
const expandableDefaultValue = expandable?.defaultValue || 'expand' const [shouldExpandNode, setShouldExpandNode] = useState();
const [shouldExpandNode, setShouldExpandNode] = useState(expandableDefaultValue);
const styling = useMemo( const styling = useMemo(
() => () =>
@ -87,7 +86,6 @@ export function JSONTree({
<ExpandableButtons <ExpandableButtons
expandable={expandable} expandable={expandable}
expandableDefaultValue={expandableDefaultValue}
shouldExpandNode={shouldExpandNode} shouldExpandNode={shouldExpandNode}
setShouldExpandNode={setShouldExpandNode} setShouldExpandNode={setShouldExpandNode}
/> />