Interface IDictFieldProps<Data, Payload>

Props for the IDictField component.

interface IDictFieldProps<Data = IAnything, Payload = IAnything> {
    description?: string;
    dictCreateButton?: any;
    dictDelay?: number;
    dictLimit?: number;
    dictOnAppend?: (
        search: string,
        data: Data,
        payload: Payload,
        onValueChange: (value: null | string) => void,
        onChange: (value: Data) => void,
    ) => void;
    dictOnItem?: (
        value: null | string,
        data: Data,
        payload: Payload,
        onValueChange: (value: null | string) => void,
        onChange: (data: Data) => void,
    ) => void;
    dictOnText?: (
        text: string,
        data: Data,
        payload: Payload,
        onValueChange: (value: null | string) => void,
        onChange: (data: Data) => void,
    ) => void;
    dictSearch?: (
        dto: {
            data: Data;
            initial: boolean;
            limit: number;
            offset: number;
            payload: Payload;
            rows: ISearchItem<any>[];
            search: string;
        },
    ) => ISearchItem<any>[]
    | Promise<ISearchItem<any>[]>;
    dictSearchItem?: any;
    dictSearchText?: (data: Data, payload: Payload) => string | Promise<string>;
    dictValue?: (
        value: string,
        data: Data,
        payload: Payload,
    ) => ISearchItem<any> | Promise<ISearchItem<any>>;
    disabled?: boolean;
    groupRef?: (element?: null | HTMLDivElement) => void;
    inputAutocomplete?: "new-password" | "on" | "off" | "false";
    inputFormatter?: (input: string) => string;
    inputFormatterAllowed?: RegExp | (char: string, idx: number) => boolean;
    inputFormatterReplace?: (char: string) => null | string;
    inputFormatterSymbol?: string;
    inputFormatterTemplate?: string;
    inputMode?:
        | "search"
        | "text"
        | "email"
        | "tel"
        | "url"
        | "none"
        | "numeric"
        | "decimal";
    inputPattern?: string;
    inputRef?: (element?: null | HTMLInputElement) => void;
    inputType?:
        | "number"
        | "color"
        | "search"
        | "text"
        | "date"
        | "email"
        | "month"
        | "password"
        | "tel"
        | "time"
        | "url"
        | "week";
    leadingIcon?: any;
    leadingIconClick?: (
        value: Value,
        data: Data,
        payload: Payload,
        onValueChange: (v: Value) => void,
        onChange: (data: Data) => void,
    ) => void;
    leadingIconRipple?: boolean;
    leadingIconTabIndex?: number;
    outlined?: boolean;
    placeholder?: string;
    readonly?: boolean;
    title?: string;
    trailingIcon?: any;
    trailingIconClick?: (
        value: Value,
        data: Data,
        payload: Payload,
        onValueChange: (v: Value) => void,
        onChange: (data: Data) => void,
    ) => void;
    trailingIconRipple?: boolean;
    trailingIconTabIndex?: number;
    validation?: IValidation;
}

Type Parameters

  • Data = IAnything

    The data type of the field.

  • Payload = IAnything

    The payload type of the field.

Properties

description? dictCreateButton? dictDelay? dictLimit? dictOnAppend? dictOnItem? dictOnText? dictSearch? dictSearchItem? dictSearchText? dictValue? disabled? groupRef? inputAutocomplete? inputFormatter? inputFormatterAllowed? inputFormatterReplace? inputFormatterSymbol? inputFormatterTemplate? inputMode? inputPattern? inputRef? inputType? leadingIcon? leadingIconClick? leadingIconRipple? leadingIconTabIndex? outlined? placeholder? readonly? title? trailingIcon? trailingIconClick? trailingIconRipple? trailingIconTabIndex? validation?

Properties

Optionaldescription

description?: string

The description of the field.

OptionaldictCreateButton

dictCreateButton?: any

The button to create a new item in the dictionary.

OptionaldictDelay

dictDelay?: number

The delay between input and dictionary search.

OptionaldictLimit

dictLimit?: number

The limit of items shown in the dictionary.

OptionaldictOnAppend

dictOnAppend?: (
    search: string,
    data: Data,
    payload: Payload,
    onValueChange: (value: null | string) => void,
    onChange: (value: Data) => void,
) => void

The function called when an item is appended to the dictionary.

OptionaldictOnItem

dictOnItem?: (
    value: null | string,
    data: Data,
    payload: Payload,
    onValueChange: (value: null | string) => void,
    onChange: (data: Data) => void,
) => void

The function called when a dictionary item is selected.

OptionaldictOnText

dictOnText?: (
    text: string,
    data: Data,
    payload: Payload,
    onValueChange: (value: null | string) => void,
    onChange: (data: Data) => void,
) => void

The function called when the text of a dictionary item is updated.

OptionaldictSearch

dictSearch?: (
    dto: {
        data: Data;
        initial: boolean;
        limit: number;
        offset: number;
        payload: Payload;
        rows: ISearchItem<any>[];
        search: string;
    },
) => ISearchItem<any>[]
| Promise<ISearchItem<any>[]>

The search function for the dictionary.

OptionaldictSearchItem

dictSearchItem?: any

The item being searched in the dictionary.

OptionaldictSearchText

dictSearchText?: (data: Data, payload: Payload) => string | Promise<string>

The text being searched in the dictionary.

OptionaldictValue

dictValue?: (
    value: string,
    data: Data,
    payload: Payload,
) => ISearchItem<any> | Promise<ISearchItem<any>>

The selected value from the dictionary.

Optionaldisabled

disabled?: boolean

Whether the field should be disabled.

OptionalgroupRef

groupRef?: (element?: null | HTMLDivElement) => void

The ref for the group element.

OptionalinputAutocomplete

inputAutocomplete?: "new-password" | "on" | "off" | "false"

The autocomplete option for the input.

OptionalinputFormatter

inputFormatter?: (input: string) => string

The function to format the input value.

OptionalinputFormatterAllowed

inputFormatterAllowed?: RegExp | (char: string, idx: number) => boolean

The allowed characters for formatting.

OptionalinputFormatterReplace

inputFormatterReplace?: (char: string) => null | string

The replace option for formatting.

OptionalinputFormatterSymbol

inputFormatterSymbol?: string

The symbol used for formatting.

OptionalinputFormatterTemplate

inputFormatterTemplate?: string

The template for formatting.

OptionalinputMode

inputMode?:
    | "search"
    | "text"
    | "email"
    | "tel"
    | "url"
    | "none"
    | "numeric"
    | "decimal"

The input mode.

OptionalinputPattern

inputPattern?: string

The regex pattern for input validation.

OptionalinputRef

inputRef?: (element?: null | HTMLInputElement) => void

The ref for the input element.

OptionalinputType

inputType?:
    | "number"
    | "color"
    | "search"
    | "text"
    | "date"
    | "email"
    | "month"
    | "password"
    | "tel"
    | "time"
    | "url"
    | "week"

The type of input element.

OptionalleadingIcon

leadingIcon?: any

The icon element for the leading icon.

OptionalleadingIconClick

leadingIconClick?: (
    value: Value,
    data: Data,
    payload: Payload,
    onValueChange: (v: Value) => void,
    onChange: (data: Data) => void,
) => void

The function to call when the leading icon is clicked.

OptionalleadingIconRipple

leadingIconRipple?: boolean

Whether the leading icon should have ripple effect.

OptionalleadingIconTabIndex

leadingIconTabIndex?: number

Optionaloutlined

outlined?: boolean

Whether the field should be outlined.

Optionalplaceholder

placeholder?: string

The placeholder text for the input.

Optionalreadonly

readonly?: boolean

Whether the field should be read-only.

Optionaltitle

title?: string

The title of the field.

OptionaltrailingIcon

trailingIcon?: any

The icon element for the trailing icon.

OptionaltrailingIconClick

trailingIconClick?: (
    value: Value,
    data: Data,
    payload: Payload,
    onValueChange: (v: Value) => void,
    onChange: (data: Data) => void,
) => void

The function to call when the trailing icon is clicked.

OptionaltrailingIconRipple

trailingIconRipple?: boolean

Whether the trailing icon should have ripple effect.

OptionaltrailingIconTabIndex

trailingIconTabIndex?: number

Optionalvalidation

validation?: IValidation

Validation factory config

Template: IField

Type representing the field object.

Template: Data

Type representing the data object.

Template: Payload

Type representing the payload object.

Returns

The value of the "validation" property.

Settings

Member Visibility

On This Page

Properties