react-arborist
react-arborist copied to clipboard
Handler toggle is not working
Data
const treeData = {
id: nanoid(),
name: "Bookmarks",
isOpen: true,
children: [
{
id: nanoid(),
name: "Brim Github",
isOpen: true,
children: [
{
id: nanoid(),
name: "brim/pulls",
},
{
id: nanoid(),
name: "zed/pulls",
},
{
id: nanoid(),
name: "brim/releases",
},
{
id: nanoid(),
name: "brim/zson",
},
{
id: nanoid(),
name: "Level 3",
isOpen: true,
children: [
{ id: nanoid(), name: "amazon" },
{ id: nanoid(), name: "apple" },
{ id: nanoid(), name: "facebook" },
],
},
],
},
{
id: nanoid(),
name: "Brim Zenhub",
isOpen: true,
children: [
{ id: nanoid(), name: "My Issues" },
{ id: nanoid(), name: "Brim All Issues" },
{ id: nanoid(), name: "MVP 0" },
{ id: nanoid(), name: "Manual Brim Test Cases" },
],
},
{
id: nanoid(),
name: "Meetings",
isOpen: true,
children: [
{ id: nanoid(), name: "Thursday" },
{ id: nanoid(), name: "Saturday" },
],
},
{
id: nanoid(),
name: "Personal",
isOpen: true,
children: [
{ id: nanoid(), name: "Imbox" },
{ id: nanoid(), name: "Facebook Marketplace" },
{ id: nanoid(), name: "Bank of America" },
{ id: nanoid(), name: "Mint" },
{ id: nanoid(), name: "Learn UI Design" },
],
},
],
};
Element
function MaybeToggleButton({ toggle, isOpen, isFolder, isSelected }: any) {
if (isFolder) {
const Icon = isOpen ? treeMinusSmall : treePlusSmall;
return (
<button onClick={toggle} css={treeExpand}>
<img src={Icon} alt="" />
</button>
);
} else {
return <div className="spacer" />;
}
}
function Node({ innerRef, styles, data, state, handlers, tree }: any) {
debugger;
const folder = Array.isArray(data.children);
const open = state.isOpen;
const name = data.name;
return (
<div
ref={innerRef}
style={styles.row}
className={clsx("tree-row", state)}
onClick={(e) => handlers.select(e)}
css={treeRow}
>
<div
className="tree-row-contents"
style={styles.indent}
css={treeRowContents}
>
<MaybeToggleButton
toggle={handlers.toggle}
isOpen={open}
isFolder={folder}
isSelected={state.isSelected}
/>
<div style={styles.indent}>{data.name}</div>
</div>
</div>
);
}
Main Component
<Tree
data={treeData}
hideRoot={true}
isOpen="isOpen"
getChildren="children"
indent={24}
>
{Node}
</Tree>
Your Tree component is missing an event listener for onToggle
: https://github.com/brimdata/react-arborist/blob/4fe9659d2c4cbd57582294330863d4fd7e7af74b/packages/demo/src/backend.ts#L43
Yes, that's true. I'm considering moving the "toggle" state into the component, which a way to access it from the tree api. This way, you won't have to keep track of it in the parent.