FilePicker

File picker widget for browsing and selecting workspace files. Rezi core does not read the filesystem; you provide the file tree data.

Usage

ui.filePicker({
  id: "picker",
  rootPath: state.rootPath,
  data: state.data,
  selectedPath: state.selectedPath,
  expandedPaths: state.expandedPaths,
  onSelect: (path) => app.update((s) => ({ ...s, selectedPath: path })),
  onToggle: (path, expanded) =>
    app.update((s) => ({
      ...s,
      expandedPaths: expanded
        ? [...s.expandedPaths, path]
        : s.expandedPaths.filter((p) => p !== path),
    })),
  onOpen: (path) => openFile(path),
})

Props

Prop	Type	Default	Description
`id`	`string`	required	Widget identifier
`rootPath`	`string`	required	Root path label
`data`	`FileNode \| FileNode[]`	required	File tree data
`selectedPath`	`string`	-	Selected file path
`expandedPaths`	`string[]`	required	Expanded directory paths
`modifiedPaths`	`string[]`	-	Modified file paths
`stagedPaths`	`string[]`	-	Staged file paths
`filter`	`string`	-	Glob filter
`showHidden`	`boolean`	-	Show hidden files
`multiSelect`	`boolean`	-	Enable multi-select
`selection`	`string[]`	-	Selected paths (multi-select)
`onSelect`	`(path) => void`	required	Selection callback
`onToggle`	`(path, expanded) => void`	required	Expand/collapse callback
`onOpen`	`(path) => void`	required	Open callback
`onSelectionChange`	`(paths) => void`	-	Multi-select change callback

Notes

FileNode includes name, path, type, and optional children and status.

Usage

Props

Notes

Related

On this page