asciitorium/dist/components/Switch.d.ts

an ASCII CLUI framework

import { Component, ComponentProps } from '../core/Component.js';
import type { State } from '../core/State.js';
/**
 * Properties for Switch component
 */
export interface SwitchProps extends ComponentProps {
    /** State that holds a factory function returning the component to display */
    component?: State<() => Component>;
    /** State that holds the condition string to match against Case components */
    condition?: State<string> | State<number>;
}
/**
 * Switch component that displays a child component based on a reactive state.
 *
 * Inspired by React's conditional rendering patterns, this component provides
 * a clean way to dynamically switch between different components based on state.
 *
 * Two usage modes:
 *
 * 1. Factory function mode:
 * ```tsx
 * const currentView = new State(() => new DashboardView({ width: 100 }));
 * <Switch component={currentView} />
 * ```
 *
 * 2. Condition-based mode with Case/Default children (recommended):
 * ```tsx
 * const userRole = new State<string>("admin");
 * <Switch condition={userRole}>
 *   <Case when="admin"><AdminPanel /></Case>
 *   <Case when="user"><UserPanel /></Case>
 *   <Default><GuestPanel /></Default>
 * </Switch>
 * ```
 */
export declare class Switch extends Component {
    private componentState?;
    private conditionState?;
    private cases;
    private defaultCase?;
    constructor(props: SwitchProps);
    /**
     * Override setChildren to capture Case and Default components in condition mode
     */
    setChildren(children: Component[]): void;
    /**
     * Updates the displayed content based on the current state value.
     * Clears existing children and creates the appropriate component.
     */
    private updateContent;
}