ツリービューTreeViewExperimental
ファイル、設定、階層カテゴリなどの親子構造を開閉できるツリーとして表示します。
プレビュー
状態とバリエーション
初期展開
非制御で使う場合は defaultExpanded に最初から開くノードIDを渡します。
選択状態
ファイルブラウザーや設定ナビでは selectedId を外側の状態と同期します。
アイコンなし
設定やカテゴリのように文字だけで十分に判別できる階層では icon を省略できます。
アイコン付き
フォルダー、コード、画像など種類が混ざるツリーでは icon で判別性を上げます。
メタ情報と操作
件数やファイルサイズは renderNodeMeta、編集やメニューは renderNodeActions で上位の FileTree から差し込みます。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| nodes | TreeNode[] | - | 表示する階層データです。各ノードは id、label、任意の icon、children を持てます。 |
| expanded | Set<string> | - | 開いているノードIDの集合です。指定すると開閉状態を制御できます。 |
| onExpandedChange | (expanded: Set<string>) => void | - | 開閉状態が変わったときに呼び出されます。 |
| defaultExpanded | string[] | - | 非制御で使う場合の初期展開ノードIDです。 |
| selectedId | string | - | 選択中のノードIDです。 |
| selectedIds | Iterable<string> | - | 複数の選択状態を表示する場合のノードID集合です。選択のルールは FileTree など上位のコンポーネントで扱います。 |
| selectionMode | "single" | "multiple" | "none" | "single" | 選択状態の表示と ARIA 属性の意味付けを指定します。 |
| onSelectedIdChange | (id: string) => void | - | ノードが選択されたときに呼び出されます。 |
| onNodeActivate | (id: string) => void | - | ラベルクリック / Enter でノードを「開く（ドリルイン）」ときに呼び出されます。展開/折りたたみとは別。指定すると親ラベルのクリックはトグルではなくアクティブ化になり、展開はシェブロンと左右矢印キーに限定されます。(#283) |
| renderNodeMeta | (node: TreeNode) => React.ReactNode | - | 行のラベル後に件数、容量、状態などの補足情報を表示するための描画関数です。関数propのため Client Component からのみ渡すこと（Server Component から渡すと next build が落ちる）。JSX を返すため serializable な代替は無く、RSC からは "use client" ラッパーで包む。(#338) |
| renderNodeActions | (node: TreeNode) => React.ReactNode | - | 行末に編集、削除、メニューなどの操作を表示するための描画関数です。関数propのため Client Component からのみ渡すこと（Server Component から渡すと next build が落ちる）。JSX を返すため serializable な代替は無く、RSC からは "use client" ラッパーで包む。(#338) |
| getNodeRowProps | (node: TreeNode) => HTMLAttributes<HTMLDivElement> | - | 行のラッパーにドラッグ&ドロップや計測用の属性を追加します。 |
| className | string | - | 必要に応じて外側に追加するクラスです。 |
使い方
import * as React from "react";
import { TreeView, type TreeNode } from "@gunjo/ui";
import { IconFileText as FileText, IconFolder as Folder } from "@tabler/icons-react";
const nodes: TreeNode[] = [
{
id: "guides",
label: "ガイド",
icon: <Folder className="h-4 w-4" />,
children: [
{ id: "guides/getting-started.md", label: "導入ガイド.md", icon: <FileText className="h-4 w-4" /> },
{ id: "guides/release.md", label: "公開手順.md", icon: <FileText className="h-4 w-4" /> },
],
},
];
export function Example() {
const [expanded, setExpanded] = React.useState(new Set(["guides"]));
const [selectedId, setSelectedId] = React.useState("guides/getting-started.md");
return (
<TreeView
nodes={nodes}
expanded={expanded}
onExpandedChange={setExpanded}
selectedId={selectedId}
onSelectedIdChange={setSelectedId}
/>
);
}