FileTree

import { FileTree, glyph } from '@hanzo/ui/agents'

Flat

Every path at once; the folders are the ones the paths imply, folders first.

public

src

lib

api.ts

auth.ts

app.tsx

package.json

README.md

export function Flat() {
  const [file, setFile] = useState<string | null>('src/lib/api.ts')
  return (
    <YStack width={280} height={260} borderWidth={1} borderColor="$borderColor" rounded="$4">
      <FileTree files={FILES} value={file} onSelect={setFile} />
    </YStack>
  )
}

Lazy

One directory per call, the way a repository answers, read the first time a folder opens.

No files yet.

export function Lazy() {
  const load = async (dir: string): Promise<Entry[]> => {
    await new Promise((r) => setTimeout(r, 300))
    if (dir === '') return [{ path: 'cmd', kind: 'dir' }, { path: 'go.mod', kind: 'file' }]
    if (dir === 'cmd') return [{ path: 'cmd/server', kind: 'dir' }]
    return [{ path: `${dir}/main.go`, kind: 'file' }]
  }
  return (
    <YStack width={280} height={220} borderWidth={1} borderColor="$borderColor" rounded="$4">
      <FileTree load={load} />
    </YStack>
  )
}

Types

export interface FileTreeProps extends Col {
  /** Every file path at once. Folders are implied by the paths. */
  files?: readonly string[]
  /** One directory's children (`''` is the root). Called once per folder, on first open. */
  load?: (dir: string) => Promise<Entry[]>
  /** The open file. Its folders are opened so it can be seen. */
  value?: string | null
  onSelect?: (path: string) => void
  /** The tree's accessible name. */
  label?: string
  /** Drawn when the root has nothing in it. */
  empty?: ReactNode
}

Exports

FileTreeglyphtype FileTreeProps