Interface UiObjectConfig<T, TType, TTarget>

interface UiObjectConfig<
    T = any,
    TType extends UiObjectType = UiObjectType,
    TTarget = any,
> {
    baseWidth?: ValOrFunc<string>;
    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?:
        | ((...args: ChangeArgs) => void)
        | (undefined | ((...args: ChangeArgs) => void))[]
        | (() => void)
        | (undefined | (() => void))[];
    onClick?:
        | ((...args: any[]) => OnClickReturnType)
        | ((...args: any[]) => Promise<OnClickReturnType>);
    onExpand?: (c: UiObjectConfig) => void;
    order?: ValOrFunc<number>;
    parentOnChange?: (...args: ChangeArgs) => void;
    parentProperty?: ValOrFunc<undefined | [any, string | number]>;
    path?: ValOrFunc<string>;
    property?: ValOrFunc<[TTarget, number | Extract<keyof TTarget, string>]>;
    readOnly?: ValOrFunc<boolean>;
    sendArgs?: ValOrFunc<boolean>;
    setValue?:
        | ((value: T, ...args: ChangeArgs | never[]) => void)
        | ((value: T) => void);
    stepSize?: ValOrFunc<number>;
    tags?: ValOrArr<string>;
    type?: TType;
    uiRef?: any;
    uiRefresh?: (
        deep?: boolean,
        mode?: TUiRefreshModes | "immediate",
        delay?: number,
    ) => void;
    uiRefType?: string;
    unwrapContents?: boolean;
    uuid?: string;
    value?: T;
    [id: string]: any;
}

Type Parameters

T = any
TType extends UiObjectType = UiObjectType
TTarget = any

Indexable

[id: string]: any
Individual components can support custom options. These can be added to the config object.

Properties

`Optional`baseWidth

baseWidth?: ValOrFunc<string>

Base width of the element as css string when rendered as a child of folder or panel. It is used as flex-basis property in css.

Only supported in react based renderers for now.

`Optional`binding

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

Alias for property

`Optional`bounds

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].

`Optional`children

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: technically, it could be a function that returns an array as well, but it's not added to the types, and should not be done. This is so that external plugins/code can append to the children array.

`Optional`disabled

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.

`Optional`dispatchMode

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'

`Optional`domChildren

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.

`Optional`expanded

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.

`Optional`getValue

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.

`Optional`hidden

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.

`Optional`inlinePicker

inlinePicker?: ValOrFunc<boolean>

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

`Optional`label

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

`Optional`onChange

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

`Optional`onClick

onClick?:
| ((...args: any[]) => OnClickReturnType)
| ((...args: any[]) => Promise<OnClickReturnType>)

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.

Return a function for undo, or (undo, redo) or (action, undo) for undo/redo support. action will be exec immediately and on undo

Param: args

`Optional`onExpand

onExpand?: (c: UiObjectConfig) => void

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

`Optional`order

order?: ValOrFunc<number>

The order of the element in the UI when rendered as a child of folder or panel, ideally controlled using css order property. Lower numbers will be rendered first.

Only supported in react based renderers for now.

`Optional` `Internal`parentOnChange

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

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

`Optional` `Internal`parentProperty

parentProperty?: ValOrFunc<undefined | [any, string | number]>

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

`Optional`path

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.

`Optional`property

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.

`Optional`readOnly

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.

`Optional`sendArgs

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.

`Optional`setValue

setValue?:
| ((value: T, ...args: ChangeArgs | never[]) => void)
| ((value: T) => 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.

Param: value

The value to set

Param: args

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

`Optional`stepSize

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.

`Optional`tags

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.

`Optional`type

type?: TType

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

`Optional`uiRef

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.

`Optional`uiRefresh

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?: boolean, mode?: TUiRefreshModes | "immediate", delay?: number): 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

`Optional`uiRefType

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.

`Optional`unwrapContents

unwrapContents?: boolean

If this is true, the contents of the folder will be unwrapped and rendered as children of the folder. Works only for one level at a time, and only in react based renderers. Prefer to use css based unwrapping for simple cases.

`Optional`uuid

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. This is similar to key in react.

`Optional`value

value?: T

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

Interface UiObjectConfig<T, TType, TTarget>

Type Parameters

Indexable

Index

Properties

Properties

OptionalbaseWidth

Optionalbinding

Optionalbounds

Optionalchildren

Optionaldisabled

OptionaldispatchMode

OptionaldomChildren

Optionalexpanded

OptionalgetValue

Optionalhidden

OptionalinlinePicker

Optionallabel

OptionalonChange

OptionalonClick

Param: args

OptionalonExpand

Optionalorder

Optional InternalparentOnChange

Optional InternalparentProperty

Optionalpath

Optionalproperty

OptionalreadOnly

OptionalsendArgs

OptionalsetValue

Param: value

Param: args

OptionalstepSize

Optionaltags

Optionaltype

OptionaluiRef

OptionaluiRefresh

Type declaration

Parameters

Returns void

OptionaluiRefType

OptionalunwrapContents

Optionaluuid

Optionalvalue

Settings

On This Page

`Optional`baseWidth

`Optional`binding

`Optional`bounds

`Optional`children

`Optional`disabled

`Optional`dispatchMode

`Optional`domChildren

`Optional`expanded

`Optional`getValue

`Optional`hidden

`Optional`inlinePicker

`Optional`label

`Optional`onChange

`Optional`onClick

`Optional`onExpand

`Optional`order

`Optional` `Internal`parentOnChange

`Optional` `Internal`parentProperty

`Optional`path

`Optional`property

`Optional`readOnly

`Optional`sendArgs

`Optional`setValue

`Optional`stepSize

`Optional`tags

`Optional`type

`Optional`uiRef

`Optional`uiRefresh

`Optional`uiRefType

`Optional`unwrapContents

`Optional`uuid

`Optional`value