@playcanvas/pcui/types/components/SelectInput/index.d.ts

User interface component library for the web

import { Container } from '../Container';
import { Element, ElementArgs, IBindable, IBindableArgs, IFocusable, IPlaceholderArgs } from '../Element';
import { Label } from '../Label';
import { TextInput } from '../TextInput';
/**
 * The arguments for the {@link SelectInput} constructor.
 */
interface SelectInputArgs extends ElementArgs, IBindableArgs, IPlaceholderArgs {
    /**
     * Used to map the options.
     */
    optionsFn?: any;
    /**
     * Default value for the input.
     */
    defaultValue?: any;
    /**
     * If `true` then the input value becomes an array allowing the selection of multiple options. Defaults to `false`.
     */
    multiSelect?: boolean;
    /**
     * The dropdown options of the input. Contains an array of objects with the following format \{v: Any, t: String\} where v is the value and t is the text of the option.
     */
    options?: {
        t: string;
        v: boolean | number | string;
    }[];
    /**
     * An array of values against which new values are checked before they are created. If a value is in the array it will not be created.
     */
    invalidOptions?: Array<any>;
    /**
     * If `true` then null is a valid input value. Defaults to `false`.
     */
    allowNull?: boolean;
    /**
     * If `true` then a text field is shown for the user to search for values or enter new ones. Defaults to `false`.
     */
    allowInput?: boolean;
    /**
     * If `true` then the input allows creating new values from the text field. Only used when allowInput is true. Defaults to `false`.
     */
    allowCreate?: boolean;
    /**
     * A function to be executed when the user selects to create a new value. The function takes the new value as a parameter.
     */
    createFn?: (value: string) => void;
    /**
     * The placeholder text to show when creating a new value. Used when allowInput and allowCreate are both true.
     */
    createLabelText?: string;
    /**
     * The type of each value. Can be one of 'string', 'number' or 'boolean'. Defaults to 'string'.
     */
    type?: 'string' | 'number' | 'boolean';
    /**
     * The order that the options should be checked in to find a valid fallback option that isn't included in the disabledOptions object.
     */
    fallbackOrder?: Array<string>;
    /**
     * All the option values that should be disabled. The keys of the object are the values of the options and the values are the text to show when the option is disabled.
     */
    disabledOptions?: Record<string, string>;
    /**
     * If provided, this function will be called each time an option is selected.
     */
    onSelect?: (value: string) => void;
    /**
     * Text to display in the SelectInput before the selected option.
     */
    prefix?: string;
}
/**
 * An input that allows selecting from a dropdown or entering tags.
 */
declare class SelectInput extends Element implements IBindable, IFocusable {
    protected _container: Container;
    protected _containerValue: Container;
    protected _domShadow: HTMLDivElement;
    protected _allowInput: boolean;
    protected _allowCreate: boolean;
    protected _createFn?: (value: string) => void;
    protected _createLabelText?: string;
    protected _labelValue: Label;
    protected _timeoutLabelValueTabIndex: number;
    protected _labelIcon: Label;
    protected _input: TextInput;
    protected _lastInputValue: string;
    protected _suspendInputChange: boolean;
    protected _containerOptions: Container;
    protected _containerTags: Container;
    protected _type: string;
    protected _valueToText: Record<string, string>;
    protected _valueToLabel: Record<string, Label>;
    protected _labelToValue: Map<Label, any>;
    protected _labelHighlighted: Label;
    protected _optionsFn: any;
    protected _allowNull: boolean;
    protected _values: any;
    protected _value: any;
    protected _createLabelContainer: Container;
    protected _options: {
        t: string;
        v: boolean | number | string;
    }[];
    protected _invalidOptions: any;
    protected _renderChanges: boolean;
    protected _disabledOptions: Record<string, string>;
    protected _fallbackOrder: Array<string>;
    protected _disabledValue: string;
    protected _onSelect: (value: string) => void;
    protected _prefix: string;
    /**
     * Creates a new SelectInput.
     *
     * @param args - The arguments.
     */
    constructor(args?: Readonly<SelectInputArgs>);
    destroy(): void;
    protected _initializeCreateLabel(): Container;
    protected _convertSingleValue(value: any): any;
    protected _convertValue(value: any): any;
    protected _onSelectValue(value: any): void;
    protected _highlightLabel(label: Label): void;
    protected _onValueChange(value: any): void;
    protected _onMultipleValuesChange(values: any): void;
    protected _addTag(value: unknown): Container;
    protected _removeTag(tagElement: Container, value: unknown): void;
    protected _onInputChange: (value: any) => void;
    protected _filterOptions(filter: string): void;
    protected _onInputKeyDown: (evt: KeyboardEvent) => void;
    /**
     * Handles pointer down events on the document. It has to be the document instead of the window
     * because otherwise `pointerdown` is not fired when the PCUI app is running in an iframe.
     * @param evt - Pointer event.
     */
    protected _onDocumentPointerDown: (evt: PointerEvent) => void;
    protected _onKeyDown: (evt: KeyboardEvent) => void;
    protected _resizeShadow(): void;
    protected _onPointerDown: () => void;
    protected _onFocus: () => void;
    protected _onBlur: () => void;
    protected _onWheel: (evt: WheelEvent) => void;
    protected _updateInputFieldsVisibility(focused?: boolean): void;
    focus(): void;
    blur(): void;
    /**
     * Opens the dropdown menu.
     */
    open(): void;
    /**
     * Closes the dropdown menu.
     */
    close(): void;
    /**
     * Toggles the dropdown menu.
     */
    toggle(): void;
    unlink(): void;
    _updateValue(value: string): void;
    _updateDisabledValue(value: string): string;
    set options(value: {
        t: string;
        v: boolean | number | string;
    }[]);
    get options(): {
        t: string;
        v: boolean | number | string;
    }[];
    set invalidOptions(value: any);
    get invalidOptions(): any;
    set disabledValue(value: string | null);
    set disabledOptions(value: any);
    set fallbackOrder(value: string[]);
    get multiSelect(): boolean;
    set value(value: any);
    get value(): any;
    set values(values: Array<any>);
    set placeholder(value: string);
    get placeholder(): string;
    set renderChanges(value: boolean);
    get renderChanges(): boolean;
}
export { SelectInput, SelectInputArgs };