@teaui/core
Version:
A high-level terminal UI library for Node
102 lines (101 loc) • 4.06 kB
TypeScript
import type { Viewport } from '../Viewport.js';
import { type Props as ContainerProps, Container } from '../Container.js';
import { View } from '../View.js';
import { Point, Size } from '../geometry.js';
import { type MouseEvent } from '../events/index.js';
import { type Direction } from '../types.js';
interface Props extends ContainerProps {
/**
* Layout direction for children. Scrollable manages an internal Stack,
* so children are laid out in this direction.
* @default 'down'
*/
direction?: Direction;
/**
* Gap between children (passed to internal Stack).
* @default 0
*/
gap?: number;
/**
* Which directions to allow scrolling.
* @default 'both'
*/
scrollable?: 'both' | 'horizontal' | 'vertical';
/**
* Show/hide the scrollbars. `true` shows both, `false` hides both, or
* specify `'horizontal'` or `'vertical'` to show only one.
* @default true
*/
showScrollbars?: boolean | 'horizontal' | 'vertical';
/**
* When true, automatically scrolls to the bottom when content grows,
* as long as the view was already at the bottom. Useful for log views.
* @default false
*/
keepAtBottom?: boolean;
/**
* Override the content size. Useful for testing or when the content size
* is known ahead of time. When not provided, the content size is computed
* from the children's naturalSize.
*/
contentSize?: {
width?: number;
height?: number;
};
/**
* The current scroll offset. Use with `onOffsetChange` for controlled scrolling.
*/
offset?: Point;
/**
* Callback when the scroll offset changes.
*/
onOffsetChange?: (offset: Point) => void;
}
type ShorthandProps = NonNullable<Props['children']> | Omit<Props, 'direction'>;
/**
* Scrollable manages an internal Stack for layout and adds scroll offset,
* scrollbar rendering, and mouse wheel handling on top.
*
* Children added to the Scrollable are delegated to the internal Stack.
* Use `direction` to control layout (default: 'down'), or the static
* constructors `Scrollable.down()`, `Scrollable.right()`, etc.
*/
export declare class Scrollable extends Container {
#private;
static down(props?: ShorthandProps, extraProps?: Omit<Props, 'children' | 'direction'>): Scrollable;
static up(props?: ShorthandProps, extraProps?: Omit<Props, 'children' | 'direction'>): Scrollable;
static right(props?: ShorthandProps, extraProps?: Omit<Props, 'children' | 'direction'>): Scrollable;
static left(props?: ShorthandProps, extraProps?: Omit<Props, 'children' | 'direction'>): Scrollable;
constructor({ children, child, direction, gap, ...props }: Props);
update({ children, child, direction, gap, ...props }: Props): void;
/**
* Children are delegated to the internal Stack.
*/
add(child: View, at?: number): void;
removeChild(child: View): void;
removeAllChildren(): void;
/**
* Returns the children of the internal Stack (the user's children),
* not the Scrollable's direct children (which is just the Stack).
*/
get children(): View[];
naturalSize(available: Size): Size;
receiveMouse(event: MouseEvent): void;
receiveMouseDown(event: MouseEvent): void;
receiveWheel(event: MouseEvent): void;
/**
* Moves the visible region. The visible region is stored as a pointer to the
* top-most row and an offset from the top of that row (see `interface ContentOffset`)
*
* Positive offset scrolls *down* (currentOffset goes more negative)
*
* When current cell is entirely above the top, we set the `contentOffset` to the
* row that is at the top of the screen and still visible, similarly if the current
* cell is below the top, we fetch enough rows about and update the `contentOffset`
* to point to the top-most row.
*/
scrollBy(offsetX: number, offsetY: number): void;
get contentSize(): Size;
render(viewport: Viewport): void;
}
export {};