retro-react
Version:
A React component library for building retro-style websites
118 lines (117 loc) • 3.2 kB
TypeScript
/** @jsxImportSource theme-ui */
import React from 'react';
import { ThemeUICSSObject } from 'theme-ui';
import { TreeVariant } from './Tree.styled';
interface TreeProps extends React.HTMLAttributes<HTMLDivElement> {
/**
* The data to be displayed in the tree.
*
* `Label` is the only required property.
*
* @default []
*
* @example
* ```tsx
* const data = [
* {
* label: 'Parent 1',
* content: <Text variant="paragraph">This is some content</Text>,
* children: [
* {
* label: 'Child 1',
* content: 'Child 1 content',
* collapsed: false,
* },
* {
* label: 'Child 2',
* children: [ ... ],
* },
* ],
* },
* ];
*```
*/
data: TreeNodeProps['node'][];
/**
* The visual variant of the Tree.
* - default: Basic tree with white background
* - file-manager: File Manager style with proper indentation
* - explorer: Windows Explorer style with button face background
*
* @default 'default'
*/
variant?: TreeVariant;
/**
* Default collapsed state of the tree.
*
* @default false
*/
defaultCollapsed?: boolean;
/**
* Currently selected node label (for controlled selection)
*/
selectedNode?: string;
/**
* Callback when a node is selected
*/
onNodeSelect?: (nodeLabel: string) => void;
/**
* Callback when a node is expanded/collapsed
*/
onNodeToggle?: (nodeLabel: string, expanded: boolean) => void;
sx?: ThemeUICSSObject;
}
interface TreeNodeProps extends React.HTMLAttributes<HTMLDivElement> {
/**
* @internal The object representing the node.
*
* @example
* ```tsx
* const node = {
* label: 'Parent 1',
* content: <Text variant="paragraph">This is some content</Text>,
* children: [ ... ],
* };
* ```
*/
node: {
label: string;
content?: React.ReactNode;
children?: TreeNodeProps['node'][];
collapsed?: boolean;
};
$variant: TreeVariant;
$defaultCollapsed: boolean;
$selectedNode?: string;
$onNodeSelect?: (nodeLabel: string) => void;
$onNodeToggle?: (nodeLabel: string, expanded: boolean) => void;
}
/**
* Authentic retro Tree component with Windows 3.1 File Manager styling.
*
* Features:
* - Authentic Windows 3.1 File Manager appearance
* - Classic expand/collapse buttons with + and - symbols
* - Multiple retro variants (default, file-manager, explorer)
* - Proper indentation and tree hierarchy
* - Period-appropriate fonts and styling
* - Hierarchical data display with collapsible nodes
*
* @example
* ```tsx
* <Tree
* variant="file-manager"
* data={[
* {
* label: 'Documents',
* children: [
* { label: 'Resume.doc' },
* { label: 'Cover Letter.doc' }
* ]
* }
* ]}
* />
* ```
*/
export declare const Tree: React.ForwardRefExoticComponent<TreeProps & React.RefAttributes<HTMLDivElement>>;
export {};