File Tree

Usage

import { FileTree } from '@wdzyi/ui';

<FileTree
  nodes={[
    {
      name: 'src',
      children: [
        { name: 'components', children: [{ name: 'button.tsx', modified: true }, { name: 'dialog.tsx' }] },
        { name: 'index.ts' },
      ],
    },
    { name: 'package.json' },
  ]}
  defaultOpen={['src', 'src/components']}
  selected={file}
  onSelect={(id) => setFile(id)}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

nodesFileTreeNode[]

The folders and files at the top. Each has a name, children if it’s a folder, modified for a dot, a tag to stand for its type, and an id. A small sample project by default.

defaultOpenstring[] = []

The ids of the folders open at the start. A node’s id is its path, such as src/components, unless you give it one.

selected, defaultSelectedstring | null = null

The selected file’s id, when you hold it, or the one selected at the start. A file chosen from outside opens the folders around it.

onSelect(id: string, node: FileTreeNode) => void

Called when a file is chosen, with a press, Enter or Space.

labelstring = 'Files'

Names the tree for screen readers.

classNamestring

Added to the tree. It fills the width it’s given, and a name too long for it is cut short.

Notes

• A folder opens by its grid rows over 400ms as its chevron turns in 280ms, and the rows inside drop in from 4px above, 34ms apart, the first eight one by one and any more together. Shutting, they go in 140ms.
• It’s a tree to the keys and to screen readers. One row takes Tab, the arrows go up and down, right opens a folder or goes into it, left shuts it or goes up to the folder it’s in, Home and End go to the ends, and typing the first letters of a name jumps to it. Enter or Space opens a folder or chooses a file.
• A file’s tag comes from its extension, such as TS, CSS, MD or JSON, unless you give it one. A changed file has a dot, and a folder shut over changed files keeps a fainter one, so nothing goes unseen when it’s folded away.
• The hairline down the selected file’s folder is drawn a little stronger, so you can see where you are, and the selected file keeps a sliver of foil at its edge.
• With reduced motion, folders open and shut at once.