Interface UiObjectConfig<T, TType, TTarget>

interface UiObjectConfig<T, TType, TTarget> {
    binding?: ValOrFunc<[TTarget, Extract<keyof TTarget, string>]>;
    bounds?: ValOrFunc<number[]>;
    children?: (UiObjectConfig<any, string, any> | Fof<ValOrArrOp<UiObjectConfig<any, string, any>>>)[];
    disabled?: ValOrFunc<boolean>;
    dispatchMode?: TUiRefreshModes | "immediate";
    domChildren?: HTMLElement[] | (() => HTMLElement[]);
    expanded?: ValOrFunc<boolean>;
    getValue?: (() => T);
    hidden?: ValOrFunc<boolean>;
    inlinePicker?: ValOrFunc<boolean>;
    label?: ValOrFunc<string>;
    onChange?: ValOrArrOp<((...args: ChangeArgs) => void)>;
    onClick?: ((...args: any[]) => void);
    onExpand?: ((c: UiObjectConfig<any, string, any>) => void);
    parentOnChange?: ((...args: ChangeArgs) => void);
    path?: ValOrFunc<string>;
    property?: ValOrFunc<[TTarget, number | Extract<keyof TTarget, string>]>;
    readOnly?: ValOrFunc<boolean>;
    sendArgs?: ValOrFunc<boolean>;
    setValue?: ((value: T, ...args: ChangeArgs) => void);
    stepSize?: ValOrFunc<number>;
    tags?: ValOrArr<string>;
    type?: TType;
    uiRef?: any;
    uiRefType?: string;
    uiRefresh?: ((deep?: boolean, mode?: TUiRefreshModes | "immediate", delay?: number) => void);
    uuid?: string;
    value?: T;
    [id: string]: any;
}

Type Parameters

Indexable

  • [id: string]: any

    Individual components can support custom options. These can be added to the config object.

Properties

binding? bounds? children? disabled? dispatchMode? domChildren? expanded? getValue? hidden? inlinePicker? label? onChange? onClick? onExpand? parentOnChange? path? property? readOnly? sendArgs? setValue? stepSize? tags? type? uiRef? uiRefType? uiRefresh? uuid? value?

Properties

Optionalbinding

binding?: ValOrFunc<[TTarget, Extract<keyof TTarget, string>]>

Alias for property

Optionalbounds

bounds?: ValOrFunc<number[]>

bounds for the value of the object. This is used for numeric inputs like number and sliders. This can be an array of [min, max] or a function that returns an array of [min, max].

Optionalchildren

children?: (UiObjectConfig<any, string, any> | Fof<ValOrArrOp<UiObjectConfig<any, string, any>>>)[]

Children of this object. This is used for folders and dropdowns. This can be an array of UiObjectConfig objects, or an array of functions that returns an array of UiObjectConfig objects. Note: it could be a function that returns an array as well, but its not added to the type yet.

Optionaldisabled

disabled?: ValOrFunc<boolean>

The Ui input will be disabled if this is true, i.e. the user will not be able to change the value. This can be a boolean or a function that returns a boolean.

OptionaldispatchMode

dispatchMode?: TUiRefreshModes | "immediate"

This is used to specify when to change the values and/or call the function(like onClick) or change events. Default is 'postFrame'

OptionaldomChildren

domChildren?: HTMLElement[] | (() => HTMLElement[])

Extra HTMLElements to be added to the UI element. This is used for customizing the UI. This can be an array of HTMLElement or a function that returns an array of HTMLElement.

Optionalexpanded

expanded?: ValOrFunc<boolean>

Only for folders. The Ui element will be expanded if this is true. This can be a boolean or a function that returns a boolean. If this is not set to a function, config.expanded can be read to get the current state.

OptionalgetValue

getValue?: (() => T)

getValue function. This is used for inputs, if property, value is not specified. This is called to get the value of the input on each render/update. It is ignored if property or value is specified.

Optionalhidden

hidden?: ValOrFunc<boolean>

The Ui element will be hidden if this is true. This can be a boolean or a function that returns a boolean.

OptionalinlinePicker

inlinePicker?: ValOrFunc<boolean>

Only for elements with inline picker support This can be a boolean or a function that returns a boolean.

Optionallabel

label?: ValOrFunc<string>

The label to use for the object. This is used as the title for folders, and as the label for inputs. This can be a string or a function that returns a string. If not provided, the label will be determined automatically, by the key of the property or sets to defaults

OptionalonChange

onChange?: ValOrArrOp<((...args: ChangeArgs) => void)>

onChange callbacks can be added to the config object to be called when the value of the object changes. This can be a function or an array of functions. When it's specified with a container(with children) object, it will be called when any of the children change, and the config of the child that's changed will be available in the arguments

OptionalonClick

onClick?: ((...args: any[]) => void)

A function to be called when the Ui element is clicked. Only for buttons. This is an alias of config.value or config.property for buttons.

OptionalonExpand

onExpand?: ((c: UiObjectConfig<any, string, any>) => void)

Only for folders. The callback called when a folder is expanded or collapsed.

Optional InternalparentOnChange

parentOnChange?: ((...args: ChangeArgs) => void)

Can be set by the parent, if this is a child object.

Optionalpath

path?: ValOrFunc<string>

Path of the binding inside the value. (dot separated json path) In case of property it is appended to the property path.

Optionalproperty

property?: ValOrFunc<[TTarget, number | Extract<keyof TTarget, string>]>

The property to bind to. This is used for inputs. This can be an array of [target, key] or a function that returns an array of [target, key]. key can be a number for arrays, or a dot separated path for json objects.

OptionalreadOnly

readOnly?: ValOrFunc<boolean>

The Ui input will be read-only if this is true, i.e. the user will not be able to change the value. This can be a boolean or a function that returns a boolean. This can also be achieved by setting specifying a getValue function, but not a setValue function. Or by setting disabled to true.

OptionalsendArgs

sendArgs?: ValOrFunc<boolean>

Specifies whether to send the click event etc to the onClick/value function. Only for buttons, and only if the value is a function. This can be a boolean or a function that returns a boolean. Default is false.

OptionalsetValue

setValue?: ((value: T, ...args: ChangeArgs) => void)

setValue function. This is used for inputs, if property, value is not specified. This is called when the value of the input changes. It is ignored if property or value is specified.

Type declaration

    • (value, ...args): void

    • Parameters

      • value: T

        The value to set

      • Rest...args: ChangeArgs

        other arguments like the config, renderer, etc. See source code for details.

      Returns void

OptionalstepSize

stepSize?: ValOrFunc<number>

stepSize for specifying the min change in the value. This is used for numeric inputs like number and slider. The value will be rounded to the nearest multiple of stepSize. This can be a number or a function that returns a number.

Optionaltags

tags?: ValOrArr<string>

tags can be added to the config object to be used for filtering, like rendering only objects with a certain tag. This can be a string or an array of strings.

Optionaltype

type?: TType

The type of the object. This is used to determine the component to use. Examples: 'button', 'slider', 'dropdown', 'folder', 'input' etc

OptionaluiRef

uiRef?: any

After initial rendering, config.uiRef will be set to the instance of the UI component that's created. The type of this will depend on the type of the component and the base UI library used. This can be used to access the UI component directly, for example to add event listeners. Note that the uiRef might change on render.

OptionaluiRefType

uiRefType?: string

The type of the UI component that's referenced by config.uiRef. This is set during rendering and used to re-render the UI if config.type changes.

OptionaluiRefresh

uiRefresh?: ((deep?: boolean, mode?: TUiRefreshModes | "immediate", delay?: number) => void)

After initial rendering, config.uiRefresh will be set to a function that can be used to re-render the UI.

Type declaration

    • (deep?, mode?, delay?): void

    • Parameters

      • Optionaldeep: boolean

        If true, the UI will be re-rendered recursively, otherwise only the current object will be re-rendered.

      • Optionalmode: TUiRefreshModes | "immediate"

        The mode to re-render in. See TUiRefreshModes for details. Use when syncing with custom render loop

      • Optionaldelay: number

        The delay in ms to wait before re-rendering. This is useful if multiple changes are made in quick succession. If another refresh event is in the queue for the same object, it will be postponed by this amount. This is not exact for small values.

      Returns void

Optionaluuid

uuid?: string

An optional uuid to identify this object. If not provided, one will be generated during first render. This must be provided if a new UiObjectConfig object is generated each time the config is rendered.

Optionalvalue

value?: T

The value of the object. This is used for inputs, if property is not provided.

Settings

Member Visibility

On This Page

Properties