ファイルツリー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 | - | 標準のサイズ、件数、補足情報以外の内容を行内に表示します。関数propのため Client Component からのみ渡すこと（Server Component から渡すと next build が落ちる）。JSX を返すため serializable な代替は無く、RSC からは "use client" ラッパーで包む。(#338) |
| renderNodeActions | (node: FileTreeNode) => React.ReactNode | - | 行末に編集、削除、メニューなどの操作を表示します。関数propのため Client Component からのみ渡すこと（Server Component から渡すと next build が落ちる）。JSX を返すため serializable な代替は無く、RSC からは "use client" ラッパーで包む。(#338) |
| getNodeRowProps | (node: FileTreeNode) => HTMLAttributes<HTMLDivElement> | - | 行のラッパーにドラッグ&ドロップや計測用の属性を追加します。 |
| expanded / onExpandedChange / defaultExpanded | TreeView の開閉 props | - | フォルダの開閉状態は TreeView と同じ指定方法で制御できます。 |
使い方
import * as React from "react";
import { FileTree, type FileTreeNode } from "@gunjo/ui";
const nodes: FileTreeNode[] = [
{
id: "campaign",
label: "キャンペーン",
type: "folder",
count: "2件",
children: [
{ id: "campaign/hero.png", label: "ヒーロー画像.png", type: "file", size: "2.4 MB" },
{ id: "campaign/banner.jpg", label: "バナー.jpg", type: "file", size: "860 KB" },
],
},
];
export function Example() {
const [selectedIds, setSelectedIds] = React.useState(["campaign/hero.png"]);
return (
<FileTree
nodes={nodes}
defaultExpanded={["campaign"]}
selectedIds={selectedIds}
onSelectedIdsChange={setSelectedIds}
/>
);
}