Handler toggle is not working

[jeevasusej]

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>

[mooijtech]

Your Tree component is missing an event listener for onToggle: https://github.com/brimdata/react-arborist/blob/4fe9659d2c4cbd57582294330863d4fd7e7af74b/packages/demo/src/backend.ts#L43

[jameskerr]

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.