@playcanvas/pcui/react/types/components/ArrayInput/index.d.ts

User interface component library for the web

import { Observer } from '@playcanvas/observer';
import { Container } from '../Container';
import { Element, ElementArgs, IBindable, IBindableArgs, IFocusable } from '../Element';
import { NumericInput } from '../NumericInput';
/**
 * The arguments for the {@link ArrayInput} constructor.
 */
interface ArrayInputArgs extends ElementArgs, IBindableArgs {
    /**
     * The type of values that the array can hold. Can be one of the following:
     *
     * - `boolean`
     * - `number`
     * - `string`
     * - `vec2`
     * - `vec3`
     * - `vec4`
     *
     * Defaults to `string`.
     */
    type?: 'boolean' | 'number' | 'string' | 'vec2' | 'vec3' | 'vec4';
    /**
     * Arguments for each array Element.
     */
    elementArgs?: Array<any>;
    /**
     * If `true` then editing the number of elements that the array has will not be allowed.
     */
    fixedSize?: boolean;
    /**
     * If `true` then the array will be rendered using panels. Defaults to `false`.
     */
    usePanels?: boolean;
    /**
     * Used to specify the default values for each element in the array. Defaults to `null`.
     */
    getDefaultFn?: () => any;
}
/**
 * Element that allows editing an array of values.
 */
declare class ArrayInput extends Element implements IFocusable, IBindable {
    /**
     * Fired when an array element is linked to observers.
     *
     * @event
     * @example
     * ```ts
     * arrayInput.on('linkElement', (element: Element, index: number, path: string) => {
     *     console.log(`Element ${index} is now linked to ${path}`);
     * });
     * ```
     */
    static readonly EVENT_LINK_ELEMENT: 'linkElement';
    /**
     * Fired when an array element is unlinked from observers.
     *
     * @event
     * @example
     * ```ts
     * arrayInput.on('unlinkElement', (element: Element, index: number) => {
     *     console.log(`Element ${index} is now unlinked`);
     * });
     * ```
     */
    static readonly EVENT_UNLINK_ELEMENT: 'unlinkElement';
    static DEFAULTS: {
        boolean: boolean;
        number: number;
        string: string;
        vec2: number[];
        vec3: number[];
        vec4: number[];
    };
    protected _container: Container;
    protected _usePanels: boolean;
    protected _fixedSize: boolean;
    protected _inputSize: NumericInput;
    protected _suspendSizeChangeEvt: boolean;
    protected _containerArray: Container;
    protected _arrayElements: any;
    protected _suspendArrayElementEvts: boolean;
    protected _arrayElementChangeTimeout: number;
    protected _getDefaultFn: any;
    protected _valueType: string;
    protected _elementType: string;
    protected _elementArgs: any;
    protected _values: any[];
    protected _renderChanges: boolean;
    /**
     * Creates a new ArrayInput.
     *
     * @param args - The arguments.
     */
    constructor(args?: Readonly<ArrayInputArgs>);
    destroy(): void;
    protected _onSizeChange(size: number): void;
    protected _createArrayElement(): {
        container: Container;
        element: any;
    };
    protected _removeArrayElement(entry: any): void;
    protected _onArrayElementChange(entry: any, value: any): void;
    protected _linkArrayElement(element: any, index: number): void;
    protected _updateValues(values: any, applyToBinding: boolean): void;
    focus(): void;
    blur(): void;
    unlink(): void;
    link(observers: Observer | Observer[], paths: string | string[]): void;
    /**
     * Executes the specified function for each array element.
     *
     * @param fn - The function with signature (element, index) => bool to execute. If the function
     * returns `false` then the iteration will early out.
     */
    forEachArrayElement(fn: (element: Element, index: number) => false | void): void;
    set binding(value: import("../..").BindingBase);
    get binding(): import("../..").BindingBase;
    set value(value: any);
    get value(): any;
    set values(values: any);
    set renderChanges(value: boolean);
    get renderChanges(): boolean;
}
export { ArrayInput, ArrayInputArgs };