Feature Request: Add prop to allow initially collapsed

[thorsent]

It's great that you can click on the tree nodes to expand them, but I'd like a way to specify that the tree should be initially collapsed (my use case is a log viewer with lots of objects in a big scrollable list).

In other words, I'd like to collapse the tree until the end user interacts with it.

I don't think there's a way to accomplish this with shouldExpandNode function, but I think you could add another prop called initialExpansionLevel to make this easy to control.

export interface Props extends React.AriaAttributes {
    data: Object | Array<any>;
    style?: StyleProps;
    shouldExpandNode?: (level: number, value: any, field?: string) => boolean; // programmatically override the expansion level
    clickToExpandNode?: boolean;
    initialExpansionLevel?: number // set the expansion level before the end user interacts with the tree: 0 = fully collapsed, -1 = fully expanded. Or set any number in-between to mimic shouldExpandNode Defaults to -1
}

[fabiradi]

Doesn't shouldExpandNode do just that – with a function instead of a prop? Or are you looking for a combination, where you have the regular shouldExpandNode behavior with the addition to define the initial state of the root node?

[AnyRoad]

Sorry for the late response...

Can you please describe what do you mean by "interaction"? Is it just click on the root node, or scroll on the page to the component until it is visible?
If you want to collapse root node initially and then expand only one level after clicking the root node
you can have a workaround by change the shouldExpandNode property on a button click/checkbox check:

const [expanded, setExpanded] = React.useState(false);

<button className={cx('button')} onClick={() => setExpanded(!expanded)}>
          {expanded ? 'Collapse' : 'Expand'}
        </button>

<JsonView
    data={jsonData}
    shouldExpandNode={expanded ? expandFirstLevel : collapseAllNested}
    style={defaultStyles}
/>

I think it will be less convenient for the user comparing to the simple click on the root node but still will work.
Also if you want to render whole tree collapsed initially it might be better to just hide it and render only after "Show logs" button click.

[thorsent]

Sorry, I missed @fabiradi comment in November. Yes, I would like to set initial state fully closed, with ability to click on the arrows to expand the nest. @AnyRoad 's workaround does this (with slight modification), but is clunky with the extra button.

My example, is a logger with many, many objects. They need to be closed initially because the objects are large. End users choose to expand objects only when they are debugging:

It would be nice if the library didn't require the workaround. It's confusing to end users that they can't click on the arrow. It's a good library with a lot of downloads. I'm surprised my use case isn't more common ¯\(ツ)/¯

[AnyRoad]

I afraid that adding initialExpansionLevel property will make logic and understanding of proper usage of the component too complicated. Do you think it will be enough if I add some callback on the root node expand button click?
There was similar PR but it is not completed. I think I can make similar changes if it will not affect the performance for the case when we don't need this.

[thorsent]

Yes, a callback would give a lot of control. Would be great.

[AnyRoad]

Just released 2.4.0 version, you can refer to the storybook example of the beforeExpandChange property usage.

[thorsent]

Thank you (months later) I was able to use beforeExpandChange() to get the behavior I desired. For posterity, I'm including the sample code of how I got it to work:

// react-json-view-lite defaults to expanding the tree. This code reverses that behavior, while maintaining the
// ability for the end user to interact with the tree. The basic idea is that the tree is forced closed under
// two conditions: (1) the end user hasn't yet interacted with it, or (2) the end user has closed the lowest level of the tree.
export const TreeView = ({ item }: { item: object }) => {
	// Keeps track of whether the end user has interacted with the tree (by clicking one of the arrows)
	const [touched, setTouched] = useState(false);

	// Forces the tree closed when the end user explicitly closes the lowest level arrow
	const [forceClose, setForceClose] = useState(false);

	return (
		<div>
			<JsonView
				data={item}
				beforeExpandChange={(event) => {
					if(event.level===0 && !event.newExpandValue) {
						setForceClose(true);
					} else {
						setForceClose(false);
					}
					setTouched(true);
					return false;
				}}
				clickToExpandNode={true}
				shouldExpandNode={touched?(forceClose?()=>false:undefined):() => false}
			/>
		</div>
	);
};