ファイルツリーFileTreeExperimental
ファイルとフォルダの階層を、容量や件数、行アクション、単一選択・複数選択つきで表示します。
プレビュー
状態とバリエーション
単一選択
現在開いているフォルダやプレビュー対象のファイルを一つだけ選ぶ場合に使います。
複数選択
一括移動、削除、タグ付けの対象を複数選ぶ場合は selectionMode="multiple" を使います。
行アクション
編集、削除、詳細メニューなどは renderNodeActions で行末に差し込みます。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| nodes | FileTreeNode[] | - | 表示するファイル/フォルダの階層データです。label、type、children、size、count、meta を指定できます。 |
| variant | "single" | "multiple" | "actions" | "single" | デザイン仕様上の表示バリエーションです。複数選択バリエーションでは、既定の選択モードも複数選択になります。 |
| selectionMode | "single" | "multiple" | "none" | "single" | 単一選択、複数選択、選択なしを切り替えます。 |
| selectedIds | Iterable<string> | - | 選択中ノードIDの集合です。指定すると選択状態を制御できます。 |
| defaultSelectedIds | string[] | - | 非制御で使う場合の初期選択ノードIDです。 |
| onSelectedIdsChange | (ids: string[], node: FileTreeNode) => void | - | 選択状態が変わったときに呼び出されます。 |
| onNodeSelect | (node: FileTreeNode) => void | - | ノードが選択操作されたときに呼び出されます。 |
| renderNodeMeta | (node: FileTreeNode) => React.ReactNode | - | 標準のサイズ、件数、補足情報以外の内容を行内に表示します。 |
| renderNodeActions | (node: FileTreeNode) => React.ReactNode | - | 行末に編集、削除、メニューなどの操作を表示します。 |
| getNodeRowProps | (node: FileTreeNode) => HTMLAttributes<HTMLDivElement> | - | 行のラッパーにドラッグ&ドロップや計測用の属性を追加します。 |
| expanded / onExpandedChange / defaultExpanded | TreeView の開閉 props | - | フォルダの開閉状態は TreeView と同じ指定方法で制御できます。 |
使い方
Loading...