react-panorama-x/dist/index.d.ts

React for Valve's Panorama UI (for Dota 2 Custom Games).

/// <reference types="@moddota/panorama-types" />
import { DependencyList, ClassAttributes, ReactNode, ExoticComponent, ReactPortal } from "react";
import { ReactNodeList } from "react-reconciler";

/**
 * Executes `callback` every time `eventName` game event is fired.
 */
declare function useGameEvent<T extends string | object>(
    eventName: (T extends string ? T : string) | keyof CustomGameEventDeclarations | keyof GameEventDeclarations,
    callback: (event: NetworkedData<GameEvents.InferGameEventType<T, object>>) => void,
    dependencies?: DependencyList,
): void;
/**
 * Executes `callback` every time `event` UI event is fired.
 */
declare function useRegisterForUnhandledEvent<TName extends PanoramaEvents.PanoramaEventName | string>(
    event: TName extends PanoramaEvents.PanoramaEventName ? TName : string,
    callback: PanoramaEvents.InferPanoramaCallback<TName>,
    dependencies?: DependencyList,
): void;
/**
 * Gets the value of a key in a custom NetTable and updates component when it changes.
 */
declare function useNetTableKey<
    TName extends keyof CustomNetTableDeclarations,
    T extends CustomNetTableDeclarations[TName],
    K extends keyof T
>(name: TName, key: K): NetworkedData<T[K]> | null;
/**
 * Gets all values in a custom NetTable and updates component when it changes.
 */
declare function useNetTableValues<
    TName extends keyof CustomNetTableDeclarations,
    T extends CustomNetTableDeclarations[TName]
>(name: TName): NetworkedData<T> | null;

declare type EventHandler<T extends PanelBase> = (panel: T) => void;
interface PanelAttributes<T extends PanelBase = Panel> extends ClassAttributes<T> {
    children?: ReactNode;
    dialogVariables?: Record<string, string | number | Date>;
    id?: string;
    className?: string;
    style?: Partial<VCSSStyleDeclaration>;
    hittest?: boolean;
    hittestchildren?: boolean;
    acceptsfocus?: boolean;
    tabindex?: number | "auto";
    inputnamespace?: string;
    draggable?: boolean;
    enabled?: boolean;
    visible?: boolean;
    useglobalcontext?: boolean;
    disallowedstyleflags?: string;
    "never-cache-composition-layer"?: boolean;
    "always-cache-composition-layer"?: boolean;
    "require-composition-layer"?: boolean;
    registerforreadyevents?: boolean;
    readyfordisplay?: boolean;
    clipaftertransform?: boolean;
    rememberchildfocus?: boolean;
    keepscrolltobottom?: boolean;
    sendchildscrolledintoviewevents?: boolean;
    "overscroll-x"?: number;
    "overscroll-y"?: number;
    scrollparenttofitwhenfocused?: boolean;
    acceptsinput?: boolean;
    analogstickscroll?: boolean;
    childfocusonhover?: boolean;
    focusonhover?: boolean;
    mousecanactivate?: "unfocused" | "iffocused" | "ifparentfocused(<parentid>)" | string;
    defaultfocus?: string;
    selectionposboundary?: "both" | "vertical" | "horizontal" | string;
    onpanelevent?: EventHandler<T>;
    onload?: EventHandler<T>;
    onfocus?: EventHandler<T>;
    onactivate?: EventHandler<T>;
    onmouseactivate?: EventHandler<T>;
    ondblclick?: EventHandler<T>;
    oncontextmenu?: EventHandler<T>;
    onmouseover?: EventHandler<T>;
    onmouseout?: EventHandler<T>;
    onmovedown?: EventHandler<T>;
    onmoveleft?: EventHandler<T>;
    onmoveright?: EventHandler<T>;
    onmoveup?: EventHandler<T>;
    oncancel?: EventHandler<T>;
    ontabforward?: EventHandler<T>;
    ondescendantfocus?: EventHandler<T>;
    onblur?: EventHandler<T>;
    ondescendantblur?: EventHandler<T>;
    ontabbackward?: EventHandler<T>;
    onscrolledtobottom?: EventHandler<T>;
    onscrolledtorightedge?: EventHandler<T>;
    onselect?: EventHandler<T>;
    ondeselect?: EventHandler<T>;
}
interface LabelLikeAttributes<T extends Panel> extends PanelAttributes<T> {
    /**
     * Note: Using this attribute is the same as assigning `text` property on a Label panel - it does
     * not localize strings and ignores dialog variables. If you need the behavior of XML attribute,
     * use `localizedText` instead.
     */
    text?: string | number | ((panel: LabelPanel) => string);
    localizedText?: string;
}
interface LabelAttributes extends LabelLikeAttributes<LabelPanel> {
    unlocalized?: boolean;
    imgscaling?: number;
    allowtextselection?: boolean;
    html?: boolean;
}
interface ImageAttributes<T extends ImagePanel = ImagePanel> extends PanelAttributes<T> {
    svgfillrule?: "nonzero" | "evenodd";
    svgopacity?: number;
    svgstrokeopacity?: number;
    svgstrokelinejoin?: "miter" | "round" | "bevel" | "inherit";
    svgstrokelinecap?: "butt" | "round" | "square";
    svgstrokewidth?: number;
    svgstroke?: "#ffffff" | string;
    svgfillopacity?: number;
    svgfill?: "#ffffff" | string;
    /**
     * texturewidth and textureheight can be used to override the size of vector graphics. Default value of -1 indicates texture width/height to be determined from source file
     */
    texturewidth?: number;
    /**
     * texturewidth and textureheight can be used to override the size of vector graphics. Default value of -1 indicates texture width/height to be determined from source file
     */
    textureheight?: number;
    srcset?: string;
    animate?: string;
    defaultsrc?: string;
    src?: string;
    verticalalign?: "top" | "bottom" | "center" | "middle";
    horizontalalign?: "left" | "right" | "center" | "middle";
    scaling?: ScalingFunction;
}
interface DOTAAbilityImageAttributes extends ImageAttributes<AbilityImage> {
    abilityname?: string;
    abilityid?: number;
    contextEntityIndex?: AbilityEntityIndex;
    /** @default false */
    showtooltip?: boolean;
}
interface DOTAItemImageAttributes extends ImageAttributes<ItemImage> {
    itemname?: string;
    contextEntityIndex?: ItemEntityIndex;
    /** @default true */
    showtooltip?: boolean;
}
interface DOTAHeroImageAttributes extends ImageAttributes<HeroImage> {
    heroname?: string;
    heroid?: HeroID;
    heroimagestyle?: "icon" | "portrait" | "landscape";
    persona?: string;
    usedefaultimage?: boolean;
    defaultimage?: string;
}
interface DOTALeagueImageAttributes extends ImageAttributes<LeagueImage> {
    leagueid?: number;
    /** @default 'Banner' */
    leagueimagestyle?: "Banner" | "Square" | "LargeIcon";
}
interface EconItemImageAttributes extends ImageAttributes {
    itemdef: number;
    itemstyle?: number;
}
interface AnimatedImageStripAttributes extends ImageAttributes {
    framewidth?: number;
    frameheight?: number;
    frametime?: string;
    defaultframe?: number;
    animating?: boolean;
}
interface DOTAEmoticonAttributes extends AnimatedImageStripAttributes {
    emoticonid?: number;
    alias?: string;
}
declare type MovieAutoPlay = "off" | "onload" | "onfocus";
interface MovieAttributes extends PanelAttributes<MoviePanel> {
    src?: string;
    volume?: number;
    muted?: boolean;
    repeat?: boolean;
    notreadybehavior?: boolean;
    loadbehavior?: boolean;
    /** @default 'onload' */
    autoplay?: MovieAutoPlay;
    title?: string;
    controls?: Parameters<MoviePanel["SetControls"]>[0];
}
interface DOTAHeroMovieAttributes extends PanelAttributes<HeroMovie> {
    src?: string;
    volume?: number;
    muted?: boolean;
    repeat?: boolean;
    notreadybehavior?: boolean;
    loadbehavior?: boolean;
    /** @default 'off' */
    autoplay?: MovieAutoPlay;
    heroid?: HeroID;
    heroname?: string;
    persona?: string;
}
interface RenderPanelAttributes extends PanelAttributes {}
interface DOTAScenePanelAttributes extends PanelAttributes<ScenePanel> {
    "post-process-fade"?: number;
    "post-process-material"?: string;
    "animate-during-pause"?: boolean;
    "pin-fov"?: "horizontal" | "vertical";
    "live-mode"?: "high_end_only" | string;
    "no-intro-effects"?: boolean;
    environment?: "default" | "full_body" | "full_body_right_side" | "card";
    "activity-modifier"?: string;
    unit?: string;
    map?: string;
    camera?: string;
    light?: string;
    pitchmin?: number;
    pitchmax?: number;
    yawmin?: number;
    yawmax?: number;
    acceleration?: number;
    autorotatespeed?: number;
    allowrotation?: boolean;
    rotateonhover?: boolean;
    rotateonmousemove?: boolean;
    antialias?: boolean;
    deferredalpha?: boolean;
    drawbackground?: boolean;
    panoramasurfaceheight?: number;
    panoramasurfacewidth?: number;
    panoramasurfacexml?: string;
    particleonly?: boolean;
    renderdeferred?: boolean;
    rendershadows?: boolean;
    renderwaterreflections?: boolean;
    allowsuspendrepaint?: boolean;
}
interface DOTAParticleScenePanelAttributes extends DOTAScenePanelAttributes {
    syncSpawn?: boolean;
    fov?: number;
    startActive?: boolean;
    squarePixels?: boolean;
    farPlane?: number;
    lookAt?: [number, number, number] | string;
    cameraOrigin?: [number, number, number] | string;
    useMapCamera?: boolean;
    particleName?: string;
}
interface DOTAEconItemAttributes extends PanelAttributes<EconItemPanel> {
    itemdef: number;
    itemstyle?: number;
}
interface ProgressBarAttributes extends PanelAttributes<ProgressBar> {
    value?: number;
    min?: number;
    max?: number;
}
interface CircularProgressBarAttributes extends PanelAttributes<CircularProgressBar> {
    value?: number;
    min?: number;
    max?: number;
}
interface ProgressBarWithMiddleAttributes extends PanelAttributes<ProgressBarWithMiddle> {
    lowervalue?: number;
    uppervalue?: number;
    min?: number;
    max?: number;
}
interface DOTAUserNameAttributes extends PanelAttributes<UserName> {
    steamid?: string | "local";
}
interface DOTAUserRichPresenceAttributes extends PanelAttributes<UserRichPresence> {
    steamid?: string | "local";
}
interface DOTAAvatarImageAttributes extends PanelAttributes<AvatarImage> {
    steamid?: string | "local";
    nocompendiumborder?: boolean;
    lazy?: boolean;
}
interface CountdownAttributes extends PanelAttributes<CountdownPanel> {
    startTime?: number;
    endTime: number;
    /** @default 1 */
    updateInterval?: number;
    /** @default 'countdown_time' */
    timeDialogVariable?: string;
}
interface TextButtonAttributes extends LabelLikeAttributes<TextButton> {
    unlocalized?: boolean;
    html?: boolean;
}
interface ToggleButtonAttributes extends LabelLikeAttributes<ToggleButton> {
    selected?: boolean;
    unlocalized?: boolean;
    html?: boolean;
}
interface RadioButtonAttributes extends PanelAttributes<RadioButton> {
    global?: boolean;
    group?: string;
    text?: string;
    html?: boolean;
    selected?: boolean;
}
interface TextEntryAttributes extends PanelAttributes<TextEntry> {
    autocompleteposition?: "top" | string;
    multiline?: boolean;
    placeholder?: string;
    maxchars?: number;
    textmode?: "normal" | "password" | "numeric" | "numericpassword";
    capslockwarn?: 1 | 0;
    undohistory?: "enabled";
    text?: string;
    ontextentrychange?: EventHandler<TextEntry>;
    oninputsubmit?: EventHandler<TextEntry>;
}
interface NumberEntryAttributes extends PanelAttributes<NumberEntry> {
    value?: number;
    onvaluechanged?: EventHandler<NumberEntry>;
    /** @default 0 */
    min?: number;
    /** @default 1000000 */
    max?: number;
    /** @default 1 */
    increment?: number;
}
interface SliderAttributes<T extends SliderPanel = SliderPanel> extends PanelAttributes<T> {
    style?: never;
    value?: number;
    onvaluechanged?: EventHandler<T>;
    /** @default 0 */
    min?: number;
    /** @default 1 */
    max?: number;
    /**
     * Note: to make slider horizontal it also should have a `HorizontalSlider` class.
     *
     * @default 'vertical'
     */
    direction?: "vertical" | "horizontal";
}
interface SlottedSliderAttributes<T extends SlottedSlider = SlottedSlider> extends SliderAttributes<T> {
    notches?: number;
}
interface DropDownAttributes extends PanelAttributes<DropDown> {
    selected?: string;
    oninputsubmit?: EventHandler<DropDown>;
}
interface CarouselAttributes extends PanelAttributes<CarouselPanel> {
    focus?: "center" | "edge";
    "focus-offset"?: string;
    wrap?: boolean;
    "panels-visible"?: number;
    AllowOversized?: any;
    "autoscroll-delay"?: string;
    "x-offset"?: string;
}
interface CarouselNavAttributes extends PanelAttributes {
    carouselid?: string;
}
interface DOTAHUDOverlayMapAttributes extends PanelAttributes<HUDOverlayMap> {
    maptexture?: string;
    /** @default 4 */
    mapscale?: number;
    /** @default true */
    mapscroll?: boolean;
    /** @default false */
    fixedoffsetenabled?: boolean;
    fixedOffset?: {
        x: number;
        y: number;
    };
    fixedBackgroundTexturePosition?: {
        size: number;
        x: number;
        y: number;
    };
}
interface HTMLAttributes extends PanelAttributes<HTML> {
    url?: string;
}
interface TabButtonAttributes extends PanelAttributes {
    group?: string;
    localizedText?: string;
    html?: boolean;
    selected?: boolean;
    onselect?: EventHandler<Panel>;
    ondeselect?: EventHandler<Panel>;
}
interface TabContentsAttributes extends PanelAttributes {
    tabid?: string;
    group?: string;
    selected?: boolean;
    onselect?: EventHandler<Panel>;
    ondeselect?: EventHandler<Panel>;
}
interface CustomLayoutPanelAttributes extends PanelAttributes {
    layout: string;
}
interface GenericPanelAttributes extends PanelAttributes {
    type: string;
    [key: string]: any;
}

declare global {
    var Panel: ExoticComponent<PanelAttributes>;
    var Label: ExoticComponent<LabelAttributes>;
    var Image: ExoticComponent<ImageAttributes>;
    var DOTAAbilityImage: ExoticComponent<DOTAAbilityImageAttributes>;
    var DOTAItemImage: ExoticComponent<DOTAItemImageAttributes>;
    var DOTAHeroImage: ExoticComponent<DOTAHeroImageAttributes>;
    var DOTALeagueImage: ExoticComponent<DOTALeagueImageAttributes>;
    var EconItemImage: ExoticComponent<EconItemImageAttributes>;
    var AnimatedImageStrip: ExoticComponent<AnimatedImageStripAttributes>;
    var DOTAEmoticon: ExoticComponent<DOTAEmoticonAttributes>;
    var Movie: ExoticComponent<MovieAttributes>;
    var DOTAHeroMovie: ExoticComponent<DOTAHeroMovieAttributes>;
    var DOTAScenePanel: ExoticComponent<DOTAScenePanelAttributes>;
    var DOTAParticleScenePanel: ExoticComponent<DOTAParticleScenePanelAttributes>;
    var DOTAEconItem: ExoticComponent<DOTAEconItemAttributes>;
    var ProgressBar: ExoticComponent<ProgressBarAttributes>;
    var CircularProgressBar: ExoticComponent<CircularProgressBarAttributes>;
    var ProgressBarWithMiddle: ExoticComponent<ProgressBarWithMiddleAttributes>;
    var DOTAUserName: ExoticComponent<DOTAUserNameAttributes>;
    var DOTAUserRichPresence: ExoticComponent<DOTAUserRichPresenceAttributes>;
    var DOTAAvatarImage: ExoticComponent<DOTAAvatarImageAttributes>;
    var Countdown: ExoticComponent<CountdownAttributes>;
    var Button: ExoticComponent<PanelAttributes>;
    var TextButton: ExoticComponent<TextButtonAttributes>;
    var ToggleButton: ExoticComponent<ToggleButtonAttributes>;
    var RadioButton: ExoticComponent<RadioButtonAttributes>;
    var TextEntry: ExoticComponent<TextEntryAttributes>;
    var NumberEntry: ExoticComponent<NumberEntryAttributes>;
    var Slider: ExoticComponent<SliderAttributes>;
    var SlottedSlider: ExoticComponent<SlottedSliderAttributes>;
    var DropDown: ExoticComponent<DropDownAttributes>;
    var ContextMenuScript: ExoticComponent<PanelAttributes>;
    var Carousel: ExoticComponent<CarouselAttributes>;
    var CarouselNav: ExoticComponent<CarouselNavAttributes>;
    var DOTAHUDOverlayMap: ExoticComponent<DOTAHUDOverlayMapAttributes>;
    var DOTAMinimap: ExoticComponent<PanelAttributes>;
    var HTML: ExoticComponent<HTMLAttributes>;
    var TabButton: ExoticComponent<TabButtonAttributes>;
    var TabContents: ExoticComponent<TabContentsAttributes>;
    var CustomLayoutPanel: ExoticComponent<CustomLayoutPanelAttributes>;
    /**
     * This element allows to render any unsupported Panorama panel type.
     * All unknown attributes are assumed to be XML properties.
     *
     * @example
     * return (
     *   <GenericPanel
     *     type="DOTABuffList"
     *     showdebuffs={false}
     *     style={{ backgroundColor: 'black' }}
     *   />
     * );
     */
    var GenericPanel: ExoticComponent<GenericPanelAttributes>;
}

/**
 * Render a React element into the layout in the supplied container.
 *
 * See [ReactDOM.render](https://reactjs.org/docs/react-dom.html#render) for more information.
 */
declare function render(element: ReactNodeList, container: Panel, callback?: () => void): void;
/**
 * Creates a [React Portal](https://reactjs.org/docs/portals.html).
 */
declare function createPortal(children: ReactNode, container: Panel, key?: null | string): ReactPortal;

export {
    AnimatedImageStripAttributes,
    CarouselAttributes,
    CarouselNavAttributes,
    CircularProgressBarAttributes,
    CountdownAttributes,
    CustomLayoutPanelAttributes,
    DOTAAbilityImageAttributes,
    DOTAAvatarImageAttributes,
    DOTAEconItemAttributes,
    DOTAEmoticonAttributes,
    DOTAHUDOverlayMapAttributes,
    DOTAHeroImageAttributes,
    DOTAHeroMovieAttributes,
    DOTAItemImageAttributes,
    DOTALeagueImageAttributes,
    DOTAParticleScenePanelAttributes,
    DOTAScenePanelAttributes,
    DOTAUserNameAttributes,
    DOTAUserRichPresenceAttributes,
    DropDownAttributes,
    EconItemImageAttributes,
    GenericPanelAttributes,
    HTMLAttributes,
    ImageAttributes,
    LabelAttributes,
    MovieAttributes,
    MovieAutoPlay,
    NumberEntryAttributes,
    PanelAttributes,
    ProgressBarAttributes,
    ProgressBarWithMiddleAttributes,
    RadioButtonAttributes,
    RenderPanelAttributes,
    SliderAttributes,
    SlottedSliderAttributes,
    TabButtonAttributes,
    TabContentsAttributes,
    TextButtonAttributes,
    TextEntryAttributes,
    ToggleButtonAttributes,
    createPortal,
    render,
    useGameEvent,
    useNetTableKey,
    useNetTableValues,
    useRegisterForUnhandledEvent,
};

export as namespace ReactPanorama;