import { VirtualScroll } from '@aiquants/virtualscroll'; import { ComponentProps, CSSProperties, ReactNode } from 'react'; /** * @type DirectoryEntry * @description Represents an entry in the directory tree, which can be a file or a directory. * ディレクトリツリー内のエントリを表す。ファイルまたはディレクトリの場合がある。 * @property {string} name - Name of the entry. エントリ名。 * @property {ReactNode} [label] - Optional label to render instead of name. 名前のかわりに描画する任意のラベル。 * @property {"file" | "directory"} type - Type of the entry. エントリの種別。 * @property {string} absolutePath - Absolute path of the entry. エントリの絶対パス。 * @property {string} relativePath - Relative path of the entry. エントリの相対パス。 * @property {DirectoryEntry[]} [children] - Child entries if it's a directory. ディレクトリの場合の子エントリ。 * @property {DirectoryTreeIconRenderer} [icon] - Optional icon renderer for the entry. エントリ用の任意のアイコン描画設定。 */ export type DirectoryEntry = { name: string; label?: ReactNode; type: "file" | "directory"; absolutePath: string; relativePath: string; children?: DirectoryEntry[]; icon?: DirectoryTreeIconRenderer; /** * Optional CSS class name for the entry. * エントリ用のオプション CSS クラス名。 */ className?: string; /** * Optional inline styles for the entry. * エントリ用のオプションのインラインスタイル。 */ style?: CSSProperties; }; /** * Context object passed to icon renderer functions. * アイコン描画関数に渡されるコンテキストオブジェクト。 */ export type DirectoryTreeIconRenderContext = { entry: DirectoryEntry; isDirectory: boolean; isExpanded: boolean; isSelected: boolean; isItemSelected: boolean; extension?: string; }; /** * Type definition for icon renderer. * アイコン描画ロジックの定義。 */ export type DirectoryTreeIconRenderer = ReactNode | ((context: DirectoryTreeIconRenderContext) => ReactNode); /** * Icon override options for directory tree entries. * ディレクトリツリーエントリのアイコン差し替えオプション。 */ export type DirectoryTreeIconOverrides = { directory?: DirectoryTreeIconRenderer; directoryExpanded?: DirectoryTreeIconRenderer; file?: DirectoryTreeIconRenderer; fileByExtension?: Record; }; /** * Highlight styles configuration for hover and selection states. * ホバー時および選択時のハイライトスタイルの設定。 */ export type HighlightStyles = { /** CSS class name for hover state. / ホバー時の CSS クラス名。 */ hoverClassName?: string; /** Inline style for hover state. / ホバー時のインラインスタイル。 */ hoverStyle?: CSSProperties; /** CSS class name for selected directory. / ディレクトリ選択時の CSS クラス名。 */ directorySelectedClassName?: string; /** Inline style for selected directory. / ディレクトリ選択時のインラインスタイル。 */ directorySelectedStyle?: CSSProperties; /** CSS class name for selected item (file). / アイテム(ファイル)選択時の CSS クラス名。 */ itemSelectedClassName?: string; /** Inline style for selected item (file). / アイテム(ファイル)選択時のインラインスタイル。 */ itemSelectedStyle?: CSSProperties; }; /** * Event object passed to the onEntryClick callback. * onEntryClick コールバックに渡されるイベントオブジェクト。 */ export type DirectoryTreeClickEvent = { /** The entry that was clicked. / クリックされたエントリ。 */ entry: DirectoryEntry; /** Whether the entry is a directory. / エントリがディレクトリかどうか。 */ isDirectory: boolean; /** Whether the directory is currently expanded (always false for files). / ディレクトリが展開中か (ファイルは常に false)。 */ isExpanded: boolean; /** * Call to prevent the default behavior. * For directories, this prevents the expand/collapse toggle. * For files, this is a no-op (there is no default behavior to prevent). * * デフォルト動作を抑制する。 * ディレクトリの場合、展開/折りたたみのトグルを抑制する。 * ファイルの場合、抑制するデフォルト動作がないため何もしない。 */ preventDefault: () => void; }; /** * Options for configuring virtual scroll behavior. * 仮想スクロールの挙動を設定するためのオプション。 */ export type DirectoryTreeVirtualScrollOptions = Omit, "itemCount" | "getItem" | "getItemHeight" | "children" | "viewportSize"> & { /** Override for viewport height. / 内部計測をスキップするための任意の固定ビューポート高さ。 */ viewportHeightOverride?: number; }; /** * Represents the state and actions for a directory tree. * ディレクトリツリーの状態とアクションを表します。 */ export type DirectoryTreeState = { /** * A set of strings representing the paths of the expanded directories. * 展開されているディレクトリのパスを表す文字列のセット。 */ expanded: Set; /** * Toggles the expansion state of a directory. * ディレクトリの展開状態を切り替えます。 * @param path - The path of the directory to toggle. */ toggle: (path: string) => void; /** * Expands a directory. * ディレクトリを展開します。 * @param path - The path of the directory to expand. */ expand: (path: string) => void; /** * Collapses a directory. * ディレクトリを折りたたみます。 * @param path - The path of the directory to collapse. */ collapse: (path: string) => void; /** * Collapses multiple specified directories. * 指定された複数のディレクトリを折りたたみます。 * @param paths - An array of directory paths to collapse. */ collapseMultiple: (paths: string[]) => void; /** * Expands multiple specified directories. * 指定された複数のディレクトリを展開します。 * @param paths - An array of directory paths to expand. */ expandMultiple: (paths: string[]) => void; /** * Collapses all directories. * すべてのディレクトリを折りたたみます。 */ collapseAll: () => void; /** * Checks if a directory is expanded. * ディレクトリが展開されているかどうかを確認します。 * @param path - The path of the directory to check. * @returns True if the directory is expanded, false otherwise. */ isExpanded: (path: string) => boolean; /** * A boolean that is true if a transition is pending. * トランジションが保留中の場合に true となる真偽値。 */ isPending: boolean; }; /** * @type DirectoryTreeProps * @description Props for the DirectoryTree component. * DirectoryTree コンポーネントの Props。 */ export type DirectoryTreeProps = { /** * The directory entries to display. * 表示するディレクトリエンティティの配列。 */ entries: DirectoryEntry[]; /** * Configuration for tree expansion state and behavior. * ツリーの展開状態と動作の設定。 */ expansion: { /** * Function to toggle the expansion state of a directory. * ディレクトリの展開状態を切り替える関数。 */ toggle: (path: string) => void; /** * Function to check if a directory is expanded. * ディレクトリが展開されているか確認する関数。 */ isExpanded: (path: string) => boolean; /** * Function to expand multiple specified directories. * 指定された複数のディレクトリを展開する関数。 */ expandMultiple: (paths: string[]) => void; /** * Function to collapse all specified directories. * 指定されたすべてのディレクトリを折りたたむ関数。 */ collapseMultiple: (paths: string[]) => void; /** * Flag to indicate if the tree is in a pending state. * ツリーが保留状態かどうかを示すフラグ。 */ isPending?: boolean; /** * If true, all directories are always expanded. * true の場合、すべてのディレクトリが常に展開されます。 */ alwaysExpanded?: boolean; /** * The action to perform on double-clicking a directory. * ディレクトリをダブルクリックしたときのアクション。 */ doubleClickAction?: "toggle" | "recursive"; }; /** * Configuration for item selection. * アイテム選択の設定。 */ selection: { /** * Selection mode for items. * アイテムの選択モード。 */ mode?: "none" | "single" | "multiple"; /** * The currently selected path. * 現在選択されているパス。 */ selectedPath?: string | null; /** * Set of paths for currently selected items. * 現在選択されているアイテムのパスのセット。 */ selectedItems?: Set; /** * Callback when an entry (file or directory) is clicked. * エントリ(ファイルまたはディレクトリ)がクリックされたときのコールバック。 * * For files: called immediately on click. * For directories: called immediately on click, then expand/collapse follows * unless preventDefault() is called on the event. * * ファイルの場合: クリック時に即座に呼ばれる。 * ディレクトリの場合: クリック時に即座に呼ばれ、イベントで preventDefault() が * 呼ばれない限り展開/折りたたみが続行される。 */ onEntryClick: (event: DirectoryTreeClickEvent) => void; /** * Callback when item selection changes. * アイテム選択状態変更時のコールバック。 */ onSelectionChange?: (entry: DirectoryEntry, isSelected: boolean) => void; }; /** * Visual customization options. * 表示のカスタマイズオプション。 */ visual?: { /** * Optional CSS class name for the container. * コンテナ用のオプション CSS クラス名。 */ className?: string; /** * Optional inline styles for the container. * コンテナ用のオプションのインラインスタイル。 */ style?: CSSProperties; /** * Line color for tree connections. * ツリーラインの色。 */ lineColor?: string; /** * Flag indicating whether to render tree connector lines. * ツリーのコネクタラインをレンダリングするかどうかのフラグ。 */ showTreeLines?: boolean; /** * Flag indicating whether to render directory expand icons. * ディレクトリの展開アイコンを描画するかどうかのフラグ。 */ showExpandIcons?: boolean; /** * Flag indicating whether to render directory type icons. * ディレクトリアイコンを描画するかどうかのフラグ。 */ showDirectoryIcons?: boolean; /** * Flag indicating whether to render file type icons. * ファイルアイコンを描画するかどうかのフラグ。 */ showFileIcons?: boolean; /** * Icon overrides applied globally. * グローバルに適用するアイコン差し替え設定。 */ iconOverrides?: DirectoryTreeIconOverrides; /** * Size of the expand icon. * 展開アイコンのサイズ。 */ expandIconSize?: number; /** * If true, removes the indentation and connector lines for root-level items. * true の場合、ルートレベルのアイテムのインデントとコネクタラインを削除します。 */ removeRootIndent?: boolean; /** * Highlight styles configuration for hover and selection states. * ホバー時および選択時のハイライトスタイルの設定。 */ highlightStyles?: HighlightStyles; /** CSS class name for each entry. / 各エントリ(行)に適用する追加の CSS クラス名。 */ entryClassName?: string; /** Inline styles for each entry. / 各エントリ(行)に適用する追加のインラインスタイル。 */ entryStyle?: CSSProperties; /** CSS class name for the name (label) part. / 名前(ラベル)部分に適用する追加の CSS クラス名。 */ nameClassName?: string; /** Inline styles for the name (label) part. / 名前(ラベル)部分に適用する追加のインラインスタイル。 */ nameStyle?: CSSProperties; /** CSS class name specifically for directory names. / ディレクトリ名特有の追加の CSS クラス名。 */ directoryNameClassName?: string; /** Inline styles specifically for directory names. / ディレクトリ名特有の追加のインラインスタイル。 */ directoryNameStyle?: CSSProperties; /** CSS class name specifically for file names. / ファイル名特有の追加の CSS クラス名。 */ fileNameClassName?: string; /** Inline styles specifically for file names. / ファイル名特有の追加のインラインスタイル。 */ fileNameStyle?: CSSProperties; }; /** * Additional options for VirtualScroll integration. * VirtualScroll の設定を上書きするオプション。 */ virtualScroll?: DirectoryTreeVirtualScrollOptions; }; /** * Props for the useDirectoryTreeState hook. * useDirectoryTreeState フックのプロパティ。 */ export type UseDirectoryTreeStateProps = { /** * An optional set of initially expanded directory paths. * 初期状態で展開されているディレクトリパスのオプションのセット。 */ initialExpanded?: Set; /** * An optional key to store the expanded state in localStorage. * 展開状態を localStorage に保存するためのオプションのキー。 */ storageKey?: string; }; /** * @type DirectoryEntryItemProps * @description Props for the DirectoryEntryItem component. * DirectoryEntryItem コンポーネントの Props。 */ export type DirectoryEntryItemProps = { entry: DirectoryEntry; indentLevel: number; isDirOpen: (path: string) => boolean; expansion: { toggleDirectory: (path: string) => void; onToggleDirectoryRecursive: (entry: DirectoryEntry) => void; doubleClickAction?: "toggle" | "recursive"; }; selection: { selectedPath: string | null; mode?: "none" | "single" | "multiple"; selectedItems?: Set; onEntryClick: (event: DirectoryTreeClickEvent) => void; onSelectionChange?: (entry: DirectoryEntry, isSelected: boolean) => void; }; visual: { showExpandIcons?: boolean; showDirectoryIcons?: boolean; showFileIcons?: boolean; iconOverrides?: DirectoryTreeIconOverrides; expandIconSize?: number; useCanvasExpandIcons?: boolean; highlightStyles?: HighlightStyles; entryClassName?: string; entryStyle?: CSSProperties; nameClassName?: string; nameStyle?: CSSProperties; directoryNameClassName?: string; directoryNameStyle?: CSSProperties; fileNameClassName?: string; fileNameStyle?: CSSProperties; }; parentIsLast: boolean[]; renderChildren?: boolean; }; /** * Information for a single item in the tree line. * * ツリーラインの単一アイテムの情報。 */ export type TreeLineItemInfo = { id: string; absolutePath: string; name: string; indentLevel: number; isLastChild: boolean; ancestorIsLast: boolean[]; isDirectory: boolean; isOpen?: boolean; isExpanded: boolean; hideLines?: boolean; }; /** * Segment data for TreeLine rendering. * * TreeLine 描画用のセグメントデータ。 */ export type TreeLineSegment = { key: string; x1: number; y1: number; x2: number; y2: number; itemIndex: number; }; /** * Glyph data for expand icons rendered on the tree line canvas. * * ツリーラインキャンバスに描画する展開アイコンのグリフ情報。 */ export type TreeLineGlyph = { key: string; itemIndex: number; centerX: number; centerY: number; size: number; isExpanded: boolean; }; /** * Geometric data for tree line rendering. * * ツリーライン描画用のジオメトリデータ。 */ export type TreeLineGeometry = { segmentsByItem: TreeLineSegment[][]; glyphsByItem: TreeLineGlyph[][]; }; /** * Props for the TreeLine component. * * TreeLine コンポーネントの Props。 */ export type TreeLineProps = { segmentsByItem: TreeLineSegment[][]; glyphsByItem: TreeLineGlyph[][]; itemHeight: number; width: number; viewportHeight: number; scrollPosition: number; color?: string; strokeWidth?: number; renderStartIndex?: number; renderEndIndex?: number; lookaheadEndIndex?: number; devicePixelRatio?: number; expandGlyphColor?: string; expandGlyphSize?: number; }; //# sourceMappingURL=types.d.ts.map