This component requires two MobX stores to be initialised to get started:

• A FolderSelectionViewStore to manage selection state
• A FolderTreeViewStore to manage the state of the folder tree; it takes as a second argument the selection store

Read only tree

A simple read-only tree with no ability to react to any interactions internally:

Editable example
() => {
  const selectionStore = new FolderSelectionViewStore()


  const viewStore = new FolderTreeViewStore(
    () => [{
      id: "1",
      name: "Landscaping",
    },
    {
      id: "2",
      name: "Botanists"
    }],
    selectionStore,
  );

  return (
    <Card>
      <div className="space-inset-s">
        <FolderTree
          viewStore={viewStore}
          disableOptions={true}
          onSelect={() => {}}
        />
      </div>
    </Card>
  )
}
() => {
  const selectionStore = new FolderSelectionViewStore()


  const viewStore = new FolderTreeViewStore(
    () => [{
      id: "1",
      name: "Landscaping",
    },
    {
      id: "2",
      name: "Botanists"
    }],
    selectionStore,
  );

  return (
    <Card>
      <div className="space-inset-s">
        <FolderTree
          viewStore={viewStore}
          disableOptions={true}
          onSelect={() => {}}
        />
      </div>
    </Card>
  )
}

Fully reactive tree

Using the selection store and a fully-populated view store, you can set up a folder tree that reacts to user interactions; note that:

• parent-children relationships are set up by referring to the parent's ID from the child node (here node 3 has a parent of node 2)
• selection is handled by linking up the onSelect prop from the FolderTree with the selection store's folder selection method

Editable example
() => {
  const selectionStore = new FolderSelectionViewStore();

  const viewStore = new FolderTreeViewStore(
    () => [{
      id: "1",
      name: "Sales",
    }, {
      id: "2",
      name: "Customer success"
    }, {
      id: "3",
      name: "Diana",
      parent: "2",
    }],
    selectionStore,
  )

  return (
    <Card>
      <div className="space-inset-s">
        <FolderTree
          viewStore={viewStore}
          disableOptions={true}
          onSelect={selectionStore.setSelectedFolder}
        />
      </div>
    </Card>
  )
}
() => {
  const selectionStore = new FolderSelectionViewStore();

  const viewStore = new FolderTreeViewStore(
    () => [{
      id: "1",
      name: "Sales",
    }, {
      id: "2",
      name: "Customer success"
    }, {
      id: "3",
      name: "Diana",
      parent: "2",
    }],
    selectionStore,
  )

  return (
    <Card>
      <div className="space-inset-s">
        <FolderTree
          viewStore={viewStore}
          disableOptions={true}
          onSelect={selectionStore.setSelectedFolder}
        />
      </div>
    </Card>
  )
}

Draggability

Moving folders is provided by enabling drag-and-drop functionality; enable this by providing onDragStart and onDropOverFolder props:

Editable example
() => {
  const selectionStore = new FolderSelectionViewStore();

  const folderTree = mobx.observable([
    {
      id: "1",
      name: "Botanists",
    },
    {
      id: "2",
      name: "Landscaping",
    },
    {
      id: "3",
      name: "Wheatley",
      parent: "2",
    },
    {
      id: "4",
      name: "Chell",
      parent: "2",
    }
  ]);

  const draggedFolder = mobx.observable.box(undefined);

  const viewStore = new FolderTreeViewStore(() => folderTree, selectionStore);

  return (
    <Card>
      <div className="space-inset-s">
        <FolderTree
          viewStore={viewStore}
          disableOptions={true}
          onSelect={selectionStore.setSelectedFolder}
          onDragStart={(event, folderId) => {
            draggedFolder.set(folderId);
          }}
          onDropOnFolder={(event, destinationFolderId) => {
            /**
              * Dragging won't end if the update fires synchronously,
              * leaving the tree partially disabled,
              * so we'll use a setTimeout here to update.
              */
            setTimeout(() => {
              mobx.runInAction(() => {
                const folderToModify = folderTree.find((f) => f.id === draggedFolder.get());
                if (!folderToModify) {
                  return;
                }
                folderToModify.parent = destinationFolderId;
                draggedFolder.set(undefined);
              });
            }, 100);
          }}
        />
      </div>
    </Card>
  );
}
() => {
  const selectionStore = new FolderSelectionViewStore();

  const folderTree = mobx.observable([
    {
      id: "1",
      name: "Botanists",
    },
    {
      id: "2",
      name: "Landscaping",
    },
    {
      id: "3",
      name: "Wheatley",
      parent: "2",
    },
    {
      id: "4",
      name: "Chell",
      parent: "2",
    }
  ]);

  const draggedFolder = mobx.observable.box(undefined);

  const viewStore = new FolderTreeViewStore(() => folderTree, selectionStore);

  return (
    <Card>
      <div className="space-inset-s">
        <FolderTree
          viewStore={viewStore}
          disableOptions={true}
          onSelect={selectionStore.setSelectedFolder}
          onDragStart={(event, folderId) => {
            draggedFolder.set(folderId);
          }}
          onDropOnFolder={(event, destinationFolderId) => {
            /**
              * Dragging won't end if the update fires synchronously,
              * leaving the tree partially disabled,
              * so we'll use a setTimeout here to update.
              */
            setTimeout(() => {
              mobx.runInAction(() => {
                const folderToModify = folderTree.find((f) => f.id === draggedFolder.get());
                if (!folderToModify) {
                  return;
                }
                folderToModify.parent = destinationFolderId;
                draggedFolder.set(undefined);
              });
            }, 100);
          }}
        />
      </div>
    </Card>
  );
}

Accessibility

• This component has limited screenreader and keyboard-driven support; moving folders around is currently not possible via the keyboard