zidanecode/editor/FileTree
import { … } from 'zidane-ui/code/editor'ui/src/code/editor/FileTree.tsx
Components#
FileTreeComponent#
The workspace file tree: rows from entries, painted with gitStatus, reporting selection,
opens and right-clicks.
function FileTree(props: FileTreeProps): ElementParameters
| Name | Type | Description |
|---|---|---|
| props | FileTreeProps | The paths, git status and selection to show, and the handlers it reports to. |
Returns
ElementProps
| Name | Type | Description |
|---|---|---|
| className? | string | Extra classes on the root element. |
| controlRef? | RefObject<FileTreeControl | null> | Receives the imperative handle for search and reveal. |
| editing? | FileTreeEditing | Rename, create, drag and drop. Absent: the tree only browses. Read when the tree is created. |
| entries | readonly TreeEntry[] | The paths to show, flat. |
| gitStatus | readonly TreeGitStatus[] | Git status painted on the rows. |
| label? | string | Accessible name. Default: the |
| onContextMenu? | (target: { kind: 'file' | 'folder'; path: string }, at: { x: number; y: number }) => void | Right-click on a row. |
| onExpandFolder? | (path: string) => void | An ignored folder listed as one node was expanded (its path, without the trailing |
| onOpen | (path: string, modifiers: { ctrlKey: boolean; metaKey: boolean }) => void | Fired when the user activates a file (click / Enter), with the modifiers held. |
| onSelect | (path: string | null) => void | Called with the newly selected path, or |
| openPaths? | readonly string[] | Files open in the editor: the folders holding them start expanded, every other folder starts collapsed. Read when the tree is created only. |
| selectedPath | string | null | The selected row's path; |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. |
Functions#
ancestorDirsFunction#
Every folder holding one of paths (src/, src/chat/), as tree ids.
function ancestorDirs(paths: readonly string[]): string[]Parameters
| Name | Type | Description |
|---|---|---|
| paths | readonly string[] | File paths relative to the tree's root. |
Returns
string[]Constants#
TREE_PATH_MIMEConstant#
The drag data type a tree row carries (its path, relative to the tree's root): what an editor takes to open it.
const TREE_PATH_MIME = 'application/x-zidane-tree-path'Interfaces#
FileTreeControlInterface#
Imperative handle for the bits of the model the tab drives itself.
interface FileTreeControlProperties
| Name | Type | Description |
|---|---|---|
| resync | () => void | Drops what the tree changed on its own (an optimistic rename or move that failed) and shows |
| reveal | (path: string) => boolean | Expand ancestors, scroll to and select only |
| revealSoon | (path: string) => void | Reveals |
| setSearch | (value: string | null) => void | Filter rows by substring; |
| startCreate | (dir: string, kind: 'file' | 'folder', name: string) => boolean | With |
| startRename | (path: string) => boolean | With |
FileTreeEditingInterface#
What the tree reports when it is editable. Paths are relative to its root, without a trailing /.
interface FileTreeEditingProperties
| Name | Type | Description |
|---|---|---|
| onCreate | (path: string, kind: 'file' | 'folder') => void | A placeholder row ( |
| onDropFiles? | (toDir: string, data: DataTransfer) => void | Files dragged in from outside the page, dropped on folder |
| onError? | (message: string) => void | The tree refused a name itself (a sibling has it, or it is empty). |
| onMove | (paths: readonly string[], toDir: string, copy: boolean) => void | Rows dragged onto folder |
| onRename | (from: string, to: string, kind: 'file' | 'folder') => void | A row renamed in place. |
FileTreePropsInterface#
Props for FileTree.
interface FileTreePropsProperties
| Name | Type | Description |
|---|---|---|
| className? | string | Extra classes on the root element. |
| controlRef? | RefObject<FileTreeControl | null> | Receives the imperative handle for search and reveal. |
| editing? | FileTreeEditing | Rename, create, drag and drop. Absent: the tree only browses. Read when the tree is created. |
| entries | readonly TreeEntry[] | The paths to show, flat. |
| gitStatus | readonly TreeGitStatus[] | Git status painted on the rows. |
| label? | string | Accessible name. Default: the |
| onContextMenu? | (target: { kind: 'file' | 'folder'; path: string }, at: { x: number; y: number }) => void | Right-click on a row. |
| onExpandFolder? | (path: string) => void | An ignored folder listed as one node was expanded (its path, without the trailing |
| onOpen | (path: string, modifiers: { ctrlKey: boolean; metaKey: boolean }) => void | Fired when the user activates a file (click / Enter), with the modifiers held. |
| onSelect | (path: string | null) => void | Called with the newly selected path, or |
| openPaths? | readonly string[] | Files open in the editor: the folders holding them start expanded, every other folder starts collapsed. Read when the tree is created only. |
| selectedPath | string | null | The selected row's path; |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. |
TreeEntryInterface#
One path in the tree.
interface TreeEntryProperties
| Name | Type | Description |
|---|---|---|
| ignored? | boolean | Dimmed (gitignored). |
| kind | 'dir' | 'file' | A file or a directory. |
| path | string | Relative to the tree's root; directories end with |
TreeGitStatusInterface#
A path's git status, painted on its row.
interface TreeGitStatusProperties
| Name | Type | Description |
|---|---|---|
| path | string | Relative to the tree's root, without a trailing |
| status | 'added' | 'deleted' | 'ignored' | 'modified' | 'renamed' | 'untracked' | The change git reports for the path; |