Interface ILayout<Data>

Represents the layout of a component.

interface ILayout<Data extends IAnything = IAnything> {
    autoFocus?: boolean;
    baseline?: boolean;
    blur?: (
        name: string,
        data: Data,
        payload: any,
        onValueChange: (value: Value) => void,
        onChange: (data: Data) => void,
    ) => void;
    bottom?: string | ISizeCallback<Data>;
    buttonColor?:
        | "error"
        | "inherit"
        | "primary"
        | "secondary"
        | "success"
        | "info"
        | "warning";
    buttonSize?: "small"
    | "medium"
    | "large";
    buttonVariant?: "outlined" | "text" | "contained";
    change?: (object: Data, invalidMap: Record<string, boolean>) => void;
    child?: IField<Data, any>;
    children: ReactElement[];
    choose?: (
        data: Data,
        payload: any,
    ) => null | string | string[] | Promise<null | string | string[]>;
    className?: string;
    click?: (
        name: string,
        e: MouseEvent<HTMLElement>,
        data: Data,
        payload: any,
        onValueChange: (value: Value) => void,
        onChange: (data: Data) => void,
    ) => void | Promise<void>;
    columns?: string;
    columnsOverride?: string;
    compute?: (v: Data, payload: any) => Value | Promise<Value>;
    condition?:
        | (data: Data, payload: any) => boolean
        | (data: Data, payload: any) => Promise<boolean>;
    conditionElse?: any;
    conditionLoading?: any;
    customLayout?: (
        props: PropsWithChildren<
            Data & {
                _fieldData: Data;
                _fieldParams: IField;
                _payload: Payload;
                onChange: (data: Partial<Data>) => void;
            },
        >,
    ) => ReactElement;
    debug?: (params: IDebug<Data, any>) => void;
    description?: string;
    desktopBottom?: string | ISizeCallback<Data>;
    desktopColumns?: string;
    desktopHeight?: string | ISizeCallback<Data>;
    desktopHidden?: boolean | (payload: any) => boolean;
    desktopLeft?: string | ISizeCallback<Data>;
    desktopMaxHeight?: string | ISizeCallback<Data>;
    desktopMaxWidth?: string | ISizeCallback<Data>;
    desktopMinHeight?: string | ISizeCallback<Data>;
    desktopMinWidth?: string | ISizeCallback<Data>;
    desktopRight?: string | ISizeCallback<Data>;
    desktopTop?: string | ISizeCallback<Data>;
    desktopWidth?: string | ISizeCallback<Data>;
    dictCreateButton?: any;
    dictDelay?: number;
    dictLimit?: number;
    dictOnAppend?: (
        search: string,
        data: Data,
        payload: any,
        onValueChange: (value: null | string) => void,
        onChange: (value: Data) => void,
    ) => void;
    dictOnItem?: (
        value: null | string,
        data: Data,
        payload: any,
        onValueChange: (value: null | string) => void,
        onChange: (data: Data) => void,
    ) => void;
    dictOnText?: (
        text: string,
        data: Data,
        payload: any,
        onValueChange: (value: null | string) => void,
        onChange: (data: Data) => void,
    ) => void;
    dictSearch?: (
        dto: {
            data: Data;
            initial: boolean;
            limit: number;
            offset: number;
            payload: any;
            rows: ISearchItem<any>[];
            search: string;
        },
    ) => ISearchItem<any>[]
    | Promise<ISearchItem<any>[]>;
    dictSearchItem?: any;
    dictSearchText?: (data: Data, payload: any) => string | Promise<string>;
    dictValue?: (
        value: string,
        data: Data,
        payload: any,
    ) => ISearchItem<any> | Promise<ISearchItem<any>>;
    dirty?: boolean;
    disabled?: boolean;
    element?: any;
    expansionOpened?: boolean;
    fallback: (e: Error) => void;
    features?: string[];
    fieldBottomMargin?: string;
    fieldRightMargin?: string;
    fields?: IField<Data, any>[];
    fileAccept?: string;
    focus?: (
        name: string,
        data: Data,
        payload: any,
        onValueChange: (value: Value) => void,
        onChange: (data: Data) => void,
    ) => void;
    freeSolo?: boolean;
    groupRef?: (element?: null | HTMLDivElement) => void;
    height?: string | ISizeCallback<Data>;
    heroInnerDesktopStyle?: any;
    heroInnerPhoneStyle?: any;
    heroInnerStyle?: any;
    heroInnerTabletStyle?: any;
    heroOuterDesktopStyle?: any;
    heroOuterPhoneStyle?: any;
    heroOuterStyle?: any;
    heroOuterTabletStyle?: any;
    hidden?: boolean | (payload: any) => boolean;
    icon?: any;
    iconBackground?:
        | "error"
        | "inherit"
        | "primary"
        | "secondary"
        | "success"
        | "info"
        | "warning";
    iconColor?: | "error"
    | "inherit"
    | "primary"
    | "secondary"
    | "success"
    | "info"
    | "warning"
    | "default";
    iconSize?: number;
    innerPadding?: string;
    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;
    inputRows?: number;
    inputType?:
        | "number"
        | "color"
        | "search"
        | "text"
        | "date"
        | "email"
        | "month"
        | "password"
        | "tel"
        | "time"
        | "url"
        | "week";
    invalidity: (name: string, msg: string, payload: any) => void;
    isBaselineAlign: boolean;
    isDisabled?: (v: Data, payload: any) => boolean;
    isIncorrect?: (v: Data, payload: any) => null | string;
    isInvalid?: (v: Data, payload: any) => null | string;
    isReadonly?: (v: Data, payload: any) => boolean;
    isVisible?: (v: Data, payload: any) => boolean;
    itemList?:
        | string[]
        | (data: Data, payload: any) => string[]
        | (data: Data, payload: any) => Promise<string[]>;
    itemTree?:
        | ITreeNode[]
        | (data: Data, payload: any) => ITreeNode[]
        | (data: Data, payload: any) => Promise<ITreeNode[]>;
    keepRaw?: boolean;
    labelFormatSlider?: (v: number) => string | number;
    labelShrink?: boolean;
    leadingIcon?: any;
    leadingIconClick?: (
        value: Value,
        data: Data,
        payload: any,
        onValueChange: (v: Value) => void,
        onChange: (data: Data) => void,
    ) => void;
    leadingIconRipple?: boolean;
    leadingIconTabIndex?: number;
    left?: string | ISizeCallback<Data>;
    lineTransparent?: boolean;
    map?: (data: Data, payload: any) => Data;
    maxHeight?: string | ISizeCallback<Data>;
    maxPercent?: number;
    maxSlider?: number;
    maxWidth?: string | ISizeCallback<Data>;
    menu?: (
        name: string,
        action: string,
        data: Data,
        payload: any,
        onValueChange: (value: Value) => void,
        onChange: (data: Data) => void,
    ) => void;
    menuItems?: IFieldMenu<any, any>[];
    minHeight?: string | ISizeCallback<Data>;
    minSlider?: number;
    minWidth?: string | ISizeCallback<Data>;
    name?: string;
    noBaseline?: boolean;
    noDeselect?: boolean;
    object: Data;
    outlined?: boolean;
    outlinePaper: boolean;
    phoneBottom?: string | ISizeCallback<Data>;
    phoneColumns?: string;
    phoneHeight?: string | ISizeCallback<Data>;
    phoneHidden?: boolean | (payload: any) => boolean;
    phoneLeft?: string | ISizeCallback<Data>;
    phoneMaxHeight?: string | ISizeCallback<Data>;
    phoneMaxWidth?: string | ISizeCallback<Data>;
    phoneMinHeight?: string | ISizeCallback<Data>;
    phoneMinWidth?: string | ISizeCallback<Data>;
    phoneRight?: string | ISizeCallback<Data>;
    phoneTop?: string | ISizeCallback<Data>;
    phoneWidth?: string | ISizeCallback<Data>;
    placeholder?: string;
    prefix: string;
    progressBarColor?: (v: number) => string;
    progressColor?: (v: number) => string;
    radioValue?: string;
    readonly?: boolean;
    readTransform?: (
        value: Value,
        name: string,
        data: Data,
        payload: any,
    ) => Value;
    ready: () => void;
    right?: string | ISizeCallback<Data>;
    shouldCondition?: (prevData: Data, nextData: Data, payload: any) => boolean;
    shouldRecompute?: (prevData: Data, nextData: Data, payload: any) => boolean;
    shouldUpdateItemList?: (
        prevData: Data,
        currentData: Data,
        payload: any,
    ) => boolean;
    shouldUpdateTr?: (
        prevArgs: [string, Data],
        currentArgs: [string, Data],
        payload: any,
    ) => boolean;
    showPercentLabel?: boolean;
    sliderRailColor?: (v: number) => string;
    sliderSteps?: { label: string; value: number }[];
    sliderThumbColor?: (v: number) => string;
    sliderTrackColor?: (v: number) => string;
    stepSlider?: number;
    style?: any;
    switchActiveLabel?: string;
    switchNoColor?: boolean;
    sx?: any;
    tabBackground?: boolean;
    tabChange?: (idx: number) => void;
    tabColor?: "primary" | "secondary";
    tabIndex?: number;
    tabKeepFlow?: boolean;
    tabletBottom?: string | ISizeCallback<Data>;
    tabletColumns?: string;
    tabletHeight?: string | ISizeCallback<Data>;
    tabletHidden?: boolean | (payload: any) => boolean;
    tabletLeft?: string | ISizeCallback<Data>;
    tabletMaxHeight?: string | ISizeCallback<Data>;
    tabletMaxWidth?: string | ISizeCallback<Data>;
    tabletMinHeight?: string | ISizeCallback<Data>;
    tabletMinWidth?: string | ISizeCallback<Data>;
    tabletRight?: string | ISizeCallback<Data>;
    tabletTop?: string | ISizeCallback<Data>;
    tabletWidth?: string | ISizeCallback<Data>;
    tabLine?: boolean;
    tabList?: string[];
    tabVariant?: "fullWidth" | "standard" | "scrollable";
    testId?: string;
    tip?:
        | string[]
        | (
            value: string,
            data: Data,
            payload: any,
        ) => string[] | Promise<string[]>;
    tipSelect?: (
        value: string,
        data: Data,
        payload: any,
        onChange: (data: Data) => void,
    ) => void;
    title?: string;
    top?: string | ISizeCallback<Data>;
    tr?:
        | (s: string, data: Data, payload: any) => string
        | (s: string, data: Data, payload: any) => Promise<string>;
    trailingIcon?: any;
    trailingIconClick?: (
        value: Value,
        data: Data,
        payload: any,
        onValueChange: (v: Value) => void,
        onChange: (data: Data) => void,
    ) => void;
    trailingIconRipple?: boolean;
    trailingIconTabIndex?: number;
    transparentPaper: boolean;
    type: FieldType;
    typoVariant?:
        | "h1"
        | "h2"
        | "h3"
        | "h4"
        | "h5"
        | "h6"
        | "subtitle1"
        | "subtitle2"
        | "body1"
        | "body2"
        | "caption";
    upload?: (file: File, data: Data, payload: any) => string | Promise<string>;
    validation?: IValidation;
    view?: (file: string, data: Data, payload: any) => void | Promise<void>;
    virtualListBox?: boolean;
    watchItemList?: boolean;
    watchItemTree?: boolean;
    watchOneContext?: boolean;
    width?: string | ISizeCallback<Data>;
    writeTransform?: (
        value: Value,
        name: string,
        data: Data,
        payload: any,
    ) => Value;
}

Type Parameters

Data extends IAnything = IAnything
The type of data associated with the layout.

Hierarchy (View Summary)

IEntity<Data>
- ILayout

Index

Properties

autoFocus? baseline? blur? bottom? buttonColor? buttonSize? buttonVariant? change? child? children choose? className? click? columns? columnsOverride? compute? condition? conditionElse? conditionLoading? customLayout? debug? description? desktopBottom? desktopColumns? desktopHeight? desktopHidden? desktopLeft? desktopMaxHeight? desktopMaxWidth? desktopMinHeight? desktopMinWidth? desktopRight? desktopTop? desktopWidth? dictCreateButton? dictDelay? dictLimit? dictOnAppend? dictOnItem? dictOnText? dictSearch? dictSearchItem? dictSearchText? dictValue? dirty? disabled? element? expansionOpened? fallback features? fieldBottomMargin? fieldRightMargin? fields? fileAccept? focus? freeSolo? groupRef? height? heroInnerDesktopStyle? heroInnerPhoneStyle? heroInnerStyle? heroInnerTabletStyle? heroOuterDesktopStyle? heroOuterPhoneStyle? heroOuterStyle? heroOuterTabletStyle? hidden? icon? iconBackground? iconColor? iconSize? innerPadding? inputAutocomplete? inputFormatter? inputFormatterAllowed? inputFormatterReplace? inputFormatterSymbol? inputFormatterTemplate? inputMode? inputPattern? inputRef? inputRows? inputType? invalidity isBaselineAlign isDisabled? isIncorrect? isInvalid? isReadonly? isVisible? itemList? itemTree? keepRaw? labelFormatSlider? labelShrink? leadingIcon? leadingIconClick? leadingIconRipple? leadingIconTabIndex? left? lineTransparent? map? maxHeight? maxPercent? maxSlider? maxWidth? menu? menuItems? minHeight? minSlider? minWidth? name? noBaseline? noDeselect? object outlined? outlinePaper phoneBottom? phoneColumns? phoneHeight? phoneHidden? phoneLeft? phoneMaxHeight? phoneMaxWidth? phoneMinHeight? phoneMinWidth? phoneRight? phoneTop? phoneWidth? placeholder? prefix progressBarColor? progressColor? radioValue? readonly? readTransform? ready right? shouldCondition? shouldRecompute? shouldUpdateItemList? shouldUpdateTr? showPercentLabel? sliderRailColor? sliderSteps? sliderThumbColor? sliderTrackColor? stepSlider? style? switchActiveLabel? switchNoColor? sx? tabBackground? tabChange? tabColor? tabIndex? tabKeepFlow? tabletBottom? tabletColumns? tabletHeight? tabletHidden? tabletLeft? tabletMaxHeight? tabletMaxWidth? tabletMinHeight? tabletMinWidth? tabletRight? tabletTop? tabletWidth? tabLine? tabList? tabVariant? testId? tip? tipSelect? title? top? tr? trailingIcon? trailingIconClick? trailingIconRipple? trailingIconTabIndex? transparentPaper type typoVariant? upload? validation? view? virtualListBox? watchItemList? watchItemTree? watchOneContext? width? writeTransform?

Properties

`Optional`autoFocus

autoFocus?: boolean

Автофокус и постоянное отключение поля

`Optional`baseline

baseline?: boolean

Принудительно включает нижний baseline для текущей компоновки

`Optional`blur

blur?: (
    name: string,
    data: Data,
    payload: any,
    onValueChange: (value: Value) => void,
    onChange: (data: Data) => void,
) => void

`Optional`bottom

bottom?: string | ISizeCallback<Data>

`Optional`buttonColor

Тип цвета кнопки для FieldType.Button

`Optional`buttonSize

buttonSize?: "small" | "medium" | "large"

Тип размера кнопки для FieldType.Button

`Optional`buttonVariant

buttonVariant?: "outlined" | "text" | "contained"

Тип заливки кнопки для FieldType.Button

`Optional`change

change?: (object: Data, invalidMap: Record<string, boolean>) => void

`Optional`child

child?: IField<Data, any>

children

children: ReactElement[]

`Optional`choose

Функция для выбора документа из справочника для useSearchModal

`Optional`className

className?: string

Наименование класса для корневого элемента поля (опционально)

`Optional`click

click?: (
    name: string,
    e: MouseEvent<HTMLElement>,
    data: Data,
    payload: any,
    onValueChange: (value: Value) => void,
    onChange: (data: Data) => void,
) => void | Promise<void>

Перехват клика по полю, следует использовать для копирования значения у карточек просмотра без редактирования

`Optional`columns

columns?: string

Колонки для One. Не используются в List (кроме фильтров). Если указано поле columns, то остальные приравниваются к его значению

`Optional`columnsOverride

columnsOverride?: string

Произвольное количество колонок в строке

`Optional`compute

compute?: (v: Data, payload: any) => Value | Promise<Value>

Функция, применяемая если значение поля вычисляется динамически. Включает readonly.

`Optional`condition

condition?:
| (data: Data, payload: any) => boolean
| (data: Data, payload: any) => Promise<boolean>

Предикат для компоновки Condition

`Optional`conditionElse

conditionElse?: any

Компонент отображения else для condition

`Optional`conditionLoading

conditionLoading?: any

Компонент отображения загрузки condition

`Optional`customLayout

customLayout?: (
    props: PropsWithChildren<
        Data & {
            _fieldData: Data;
            _fieldParams: IField;
            _payload: Payload;
            onChange: (data: Partial<Data>) => void;
        },
    >,
) => ReactElement

Коллбек, позволяющий применить собственную компоновку

`Optional`debug

debug?: (params: IDebug<Data, any>) => void

Коллбек для отладки

`Optional`description

description?: string

`Optional`desktopBottom

desktopBottom?: string | ISizeCallback<Data>

`Optional`desktopColumns

desktopColumns?: string

`Optional`desktopHeight

desktopHeight?: string | ISizeCallback<Data>

`Optional`desktopHidden

desktopHidden?: boolean | (payload: any) => boolean

Исключает группу из DOM древа на компьютере

`Optional`desktopLeft

desktopLeft?: string | ISizeCallback<Data>

`Optional`desktopMaxHeight

desktopMaxHeight?: string | ISizeCallback<Data>

`Optional`desktopMaxWidth

desktopMaxWidth?: string | ISizeCallback<Data>

`Optional`desktopMinHeight

desktopMinHeight?: string | ISizeCallback<Data>

`Optional`desktopMinWidth

desktopMinWidth?: string | ISizeCallback<Data>

`Optional`desktopRight

desktopRight?: string | ISizeCallback<Data>

`Optional`desktopTop

desktopTop?: string | ISizeCallback<Data>

`Optional`desktopWidth

desktopWidth?: string | ISizeCallback<Data>

`Optional`dictCreateButton

dictCreateButton?: any

Функция позволяет переопределить компонент создание записи в словарь из модалки

`Optional`dictDelay

dictDelay?: number

Позволяет задать задержку для api запросов поля справочника

`Optional`dictLimit

dictLimit?: number

Позволяет задать limit для поля справочника

`Optional`dictOnAppend

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

Поле справочника позволяет создавать новые записи, если поиск не дал результата

`Optional`dictOnItem

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

Функция вызывается на каждый выбор из модалки. Подразумевается запись в целевой объект. Для контекстного поиска по label, value можно записать в другое поле

`Optional`dictOnText

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

Функция вызывается на каждое изменение текста. Подразумевается запись в целевой объект. Для контекстного поиска по label, value можно записать в другое поле

`Optional`dictSearch

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

Обработчик запроса справочника. Если число объектов меньше dictLimit, подразумевается, что все данные выгружены на фронт и новые запросы не выполняются

`Optional`dictSearchItem

dictSearchItem?: any

Функция позволяет переопределить компонент элемента списка из модалки

`Optional`dictSearchText

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

Функция позволяет загрузить searchText для выбранного элемента асинхронно

`Optional`dictValue

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

Функция позволяет загрузить label для выбранного элемента асинхронно

`Optional`dirty

dirty?: boolean

Отменяет ожидание фокуса для валидации

`Optional`disabled

disabled?: boolean

`Optional`element

element?: any

Инъекция JSX для ComponentField

`Optional`expansionOpened

expansionOpened?: boolean

Поле для ExpansionLayout

fallback

fallback: (e: Error) => void

`Optional`features

features?: string[]

Список бизнес-функций, необходимых для отображения поля

`Optional`fieldBottomMargin

fieldBottomMargin?: string

`Optional`fieldRightMargin

fieldRightMargin?: string

Позволяет выключить отступ. Можно использовать по аналогии с исключением последней запятой при склеивании массива руками, если раздражает

`Optional`fields

fields?: IField<Data, any>[]

Дочерние поля для групп

`Optional`fileAccept

fileAccept?: string

mime тип выбираемого файла

`Optional`focus

focus?: (
    name: string,
    data: Data,
    payload: any,
    onValueChange: (value: Value) => void,
    onChange: (data: Data) => void,
) => void

Коллбеки, вызываемый при фокусировке и потере фокуса. Подразумевается изменение формы со стороны прикладного программиста, а не работа с полем ввода (например, обновление ссылки на изображение)

`Optional`freeSolo

freeSolo?: boolean

Поле, позволяющее передавать собственные значения в FieldType.Items и FieldType.Combo

`Optional`groupRef

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

Передает ссылку при перерисовках

`Optional`height

height?: string | ISizeCallback<Data>

`Optional`heroInnerDesktopStyle

heroInnerDesktopStyle?: any

`Optional`heroInnerPhoneStyle

heroInnerPhoneStyle?: any

`Optional`heroInnerStyle

heroInnerStyle?: any

`Optional`heroInnerTabletStyle

heroInnerTabletStyle?: any

`Optional`heroOuterDesktopStyle

heroOuterDesktopStyle?: any

`Optional`heroOuterPhoneStyle

heroOuterPhoneStyle?: any

`Optional`heroOuterStyle

heroOuterStyle?: any

`Optional`heroOuterTabletStyle

heroOuterTabletStyle?: any

`Optional`hidden

hidden?: boolean | (payload: any) => boolean

Флаг, убирающий поле из древа отрисовки. Следует использовать для создания динамических значений полей компонента

`Optional`icon

icon?: any

Иконка для FieldType.Button и FieldType.Icon

`Optional`iconBackground

Цвет фона иконки для FieldType.Icon

`Optional`iconColor

Цвет иконки для FieldType.Icon

`Optional`iconSize

iconSize?: number

Размер иконки для FieldType.Icon

`Optional`innerPadding

innerPadding?: string

Внутренние отступы для Paper

`Optional`inputAutocomplete

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

`Optional`inputFormatter

inputFormatter?: (input: string) => string

Форматтер, преобразующий пользовательский ввод к нужному шаблону

`Optional`inputFormatterAllowed

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

Разрешенные к вводу символы

`Optional`inputFormatterReplace

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

Замена символов для форматерра, например запятую на точку в числе

`Optional`inputFormatterSymbol

inputFormatterSymbol?: string

Разделитель шаблона форматтера, по дефолту 0

`Optional`inputFormatterTemplate

inputFormatterTemplate?: string

Шаблонов для форматтера

`Optional`inputMode

Поле inputmode для MatTextField

`Optional`inputPattern

inputPattern?: string

Паттерн для MatTextField (inputmode: 'decimal' и pattern: '[0-9.,]+' добавят запятую на iOS клавиатуре)

`Optional`inputRef

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

`Optional`inputRows

inputRows?: number

Делает TextField многострочным, если inputRows больше единицы

`Optional`inputType

Поле type для MatTextField

invalidity

invalidity: (name: string, msg: string, payload: any) => void

Коллбек, вызываемый у поля при не прохождении валидации

isBaselineAlign

isBaselineAlign: boolean

`Optional`isDisabled

isDisabled?: (v: Data, payload: any) => boolean

Функция, позволяющая отключить поле, исходя из целевого объекта

`Optional`isIncorrect

isIncorrect?: (v: Data, payload: any) => null | string

Функция, позволяющая огранизовать неблокирующую валидацию. Проверка правописания (spellcheck) должен быть отображен в UI, но не должен блокировать кнопку "Сохранить"

`Optional`isInvalid

isInvalid?: (v: Data, payload: any) => null | string

Функция, позволяющая организовать валидацию. Если возвращаемое значение не равно null, считается за ошибкую

`Optional`isReadonly

isReadonly?: (v: Data, payload: any) => boolean

Функция, позволяющая отключить ввод данных в поле, исходя из целевого объекта

`Optional`isVisible

isVisible?: (v: Data, payload: any) => boolean

Функция, позволяющая скрыть поле, исходя из целевого объекта

`Optional`itemList

itemList?:
    | string[]
    | (data: Data, payload: any) => string[]
    | (data: Data, payload: any) => Promise<string[]>

Варианты выбора для ComboField и ItemsField

`Optional`itemTree

itemTree?:
    | ITreeNode[]
    | (data: Data, payload: any) => ITreeNode[]
    | (data: Data, payload: any) => Promise<ITreeNode[]>

Вариант выбора для TreeField

`Optional`keepRaw

keepRaw?: boolean

Отключает fulltext фильтр для FieldType.Complete

`Optional`labelFormatSlider

labelFormatSlider?: (v: number) => string | number

`Optional`labelShrink

labelShrink?: boolean

Флаг, удерживающий подпись текстового поля при пустом значении

`Optional`leadingIcon

leadingIcon?: any

Иконки для MatTextField

`Optional`leadingIconClick

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

При клике на иконку мы можем запросить данные из модального окна, расположенного в коде прикладного программиста. Коллбек получает на вход текущее значение поля и функцию onChange...

`Optional`leadingIconRipple

leadingIconRipple?: boolean

Ripple эффект для иконок

`Optional`leadingIconTabIndex

leadingIconTabIndex?: number

Если нужно убрать фокус после нажатия tab

`Optional`left

left?: string | ISizeCallback<Data>

`Optional`lineTransparent

lineTransparent?: boolean

Отключает отчерк у линии

`Optional`map

map?: (data: Data, payload: any) => Data

Коллбек для 2Way биндингов. Вызывается если поле валидно перед применением нового целевого объекта при исходящем изменении

`Optional`maxHeight

maxHeight?: string | ISizeCallback<Data>

`Optional`maxPercent

maxPercent?: number

Максимальное число для высчитывания процента (минимальное число всегда ноль)

`Optional`maxSlider

maxSlider?: number

`Optional`maxWidth

maxWidth?: string | ISizeCallback<Data>

`Optional`menu

menu?: (
    name: string,
    action: string,
    data: Data,
    payload: any,
    onValueChange: (value: Value) => void,
    onChange: (data: Data) => void,
) => void

Коллбек для обработки клика по элементу контекстного меню

`Optional`menuItems

menuItems?: IFieldMenu<any, any>[]

Позволяет создать контекстное меню

`Optional`minHeight

minHeight?: string | ISizeCallback<Data>

`Optional`minSlider

minSlider?: number

Поля, специфичные для SliderField

`Optional`minWidth

minWidth?: string | ISizeCallback<Data>

`Optional`name

name?: string

Общие поля. Поле name позволяет задать забор поля из целевого объекта, не нужен для group, expansion и line.

`Optional`noBaseline

noBaseline?: boolean

Отключает нижний baseline для текущей компоновки

`Optional`noDeselect

noDeselect?: boolean

Отключает возможность сброса выбора значения для Items и Combo

object

object: Data

`Optional`outlined

outlined?: boolean

outlinePaper

outlinePaper: boolean

Превращает FieldType.Paper в FieldType.Outline

`Optional`phoneBottom

phoneBottom?: string | ISizeCallback<Data>

`Optional`phoneColumns

phoneColumns?: string

`Optional`phoneHeight

phoneHeight?: string | ISizeCallback<Data>

`Optional`phoneHidden

phoneHidden?: boolean | (payload: any) => boolean

Исключает группу из DOM древа на телефоне

`Optional`phoneLeft

phoneLeft?: string | ISizeCallback<Data>

`Optional`phoneMaxHeight

phoneMaxHeight?: string | ISizeCallback<Data>

`Optional`phoneMaxWidth

phoneMaxWidth?: string | ISizeCallback<Data>

`Optional`phoneMinHeight

phoneMinHeight?: string | ISizeCallback<Data>

`Optional`phoneMinWidth

phoneMinWidth?: string | ISizeCallback<Data>

`Optional`phoneRight

phoneRight?: string | ISizeCallback<Data>

`Optional`phoneTop

phoneTop?: string | ISizeCallback<Data>

`Optional`phoneWidth

phoneWidth?: string | ISizeCallback<Data>

`Optional`placeholder

placeholder?: string

placeholder для TextField, ComboField, ItemsField

prefix

prefix: string

`Optional`progressBarColor

progressBarColor?: (v: number) => string

`Optional`progressColor

progressColor?: (v: number) => string

Коллбеки, позволяющие перекрасить ProgressField. Работают только если заданы все вместе
ВНИМАНИЕ! Потенциально возможна просадка производительности, так как осуществляет рекомпиляцию стилей material-ui

`Optional`radioValue

radioValue?: string

Поле, специфичное для RadioField и позволяющее задать значение при выборе элемента кликом

`Optional`readonly

readonly?: boolean

Флаг только на чтение и "круглой окаймовки"

`Optional`readTransform

readTransform?: (value: Value, name: string, data: Data, payload: any) => Value

ready

ready: () => void

`Optional`right

right?: string | ISizeCallback<Data>

`Optional`shouldCondition

shouldCondition?: (prevData: Data, nextData: Data, payload: any) => boolean

Позволяет мемоизировать вызов condition

`Optional`shouldRecompute

shouldRecompute?: (prevData: Data, nextData: Data, payload: any) => boolean

Позволяет мемоизировать вызов compute

`Optional`shouldUpdateItemList

shouldUpdateItemList?: (
    prevData: Data,
    currentData: Data,
    payload: any,
) => boolean

Позволяет мемоизировать список элементов

`Optional`shouldUpdateTr

shouldUpdateTr?: (
    prevArgs: [string, Data],
    currentArgs: [string, Data],
    payload: any,
) => boolean

Позволяет мемоизировать перевод

`Optional`showPercentLabel

showPercentLabel?: boolean

Показывает процент числом слева

`Optional`sliderRailColor

sliderRailColor?: (v: number) => string

`Optional`sliderSteps

sliderSteps?: { label: string; value: number }[]

Шаги для слайдера

`Optional`sliderThumbColor

sliderThumbColor?: (v: number) => string

Коллбеки, позволяющий перекрасить SliderField. Работают только если заданы все вместе
ВНИМАНИЕ! Потенциально возможна просадка производительности, так как осуществляет рекомпиляцию стилей material-ui

`Optional`sliderTrackColor

sliderTrackColor?: (v: number) => string

`Optional`stepSlider

stepSlider?: number

`Optional`style

style?: any

Стиль корневого элемента для поля (опционально)

`Optional`switchActiveLabel

switchActiveLabel?: string

Применяет к Switch второй title

`Optional`switchNoColor

switchNoColor?: boolean

Отключает цвет для Switch

`Optional`sx

sx?: any

Специальное поле только для MUI

`Optional`tabBackground

tabBackground?: boolean

Закрашивает фон TabLayout в темный цвет

`Optional`tabChange

tabChange?: (idx: number) => void

Событие изменения вкладки

`Optional`tabColor

tabColor?: "primary" | "secondary"

Цвет вкладок для TabLayout

`Optional`tabIndex

tabIndex?: number

Номер активной вкладки по-умолчанию

`Optional`tabKeepFlow

tabKeepFlow?: boolean

Позволяет содержимому растягивать высоту блока у TabLayout

`Optional`tabletBottom

tabletBottom?: string | ISizeCallback<Data>

`Optional`tabletColumns

tabletColumns?: string

`Optional`tabletHeight

tabletHeight?: string | ISizeCallback<Data>

`Optional`tabletHidden

tabletHidden?: boolean | (payload: any) => boolean

Исключает группу из DOM древа на планшете

`Optional`tabletLeft

tabletLeft?: string | ISizeCallback<Data>

`Optional`tabletMaxHeight

tabletMaxHeight?: string | ISizeCallback<Data>

`Optional`tabletMaxWidth

tabletMaxWidth?: string | ISizeCallback<Data>

`Optional`tabletMinHeight

tabletMinHeight?: string | ISizeCallback<Data>

`Optional`tabletMinWidth

tabletMinWidth?: string | ISizeCallback<Data>

`Optional`tabletRight

tabletRight?: string | ISizeCallback<Data>

`Optional`tabletTop

tabletTop?: string | ISizeCallback<Data>

`Optional`tabletWidth

tabletWidth?: string | ISizeCallback<Data>

`Optional`tabLine

tabLine?: boolean

Отделяет табы отчерком у TabLayout

`Optional`tabList

tabList?: string[]

Список вкладок для TabLayout

`Optional`tabVariant

tabVariant?: "fullWidth" | "standard" | "scrollable"

Вариант вывода вкладок для TabLayout

`Optional`testId

testId?: string

Атрибут, который будет передат в data-testid корневому элементу компоновки

`Optional`tip

tip?:
| string[]
| (value: string, data: Data, payload: any) => string[] | Promise<string[]>

Подсказки для CompleteField

`Optional`tipSelect

tipSelect?: (
    value: string,
    data: Data,
    payload: any,
    onChange: (data: Data) => void,
) => void

Коллбек выбора элемента из CompleteField

`Optional`title

title?: string

Заголовок и описание, если возможен вывод у поля

`Optional`top

top?: string | ISizeCallback<Data>

Свойства для компоновки Hero - инструмента настройки отступов

`Optional`tr

tr?:
| (s: string, data: Data, payload: any) => string
| (s: string, data: Data, payload: any) => Promise<string>

Позволяет перевести значения у ComboField и ItemsField из поле itemList на человеческий, если используются константы

`Optional`trailingIcon

trailingIcon?: any

`Optional`trailingIconClick

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

`Optional`trailingIconRipple

trailingIconRipple?: boolean

`Optional`trailingIconTabIndex

trailingIconTabIndex?: number

transparentPaper

transparentPaper: boolean

type

type: FieldType

Тип поля для логического ветвления при рендеринге

`Optional`typoVariant

typoVariant?:
    | "h1"
    | "h2"
    | "h3"
    | "h4"
    | "h5"
    | "h6"
    | "subtitle1"
    | "subtitle2"
    | "body1"
    | "body2"
    | "caption"

Шрифт для поля Typography

`Optional`upload

upload?: (file: File, data: Data, payload: any) => string | Promise<string>

Функция для загрузки файла на сервер

`Optional`validation

validation?: IValidation

Параметры фабрики для создания коллбека isInvalid

`Optional`view

view?: (file: string, data: Data, payload: any) => void | Promise<void>

`Optional`virtualListBox

virtualListBox?: boolean

Позволяет включить виртуализацию для FieldType.List и FieldType.Combo

`Optional`watchItemList

watchItemList?: boolean

Включает change-detection для выпадающих меню. По умолчанию выключено

`Optional`watchItemTree

watchItemTree?: boolean

Включает change-detection для выпадающих меню. По умолчанию выключено

`Optional`watchOneContext

watchOneContext?: boolean

Включает change-detection для поля компонента. По умолчанию выключено

`Optional`width

width?: string | ISizeCallback<Data>

`Optional`writeTransform

writeTransform?: (value: Value, name: string, data: Data, payload: any) => Value

Interface ILayout<Data>

Type Parameters

Hierarchy (View Summary)

Index

Properties

Properties

OptionalautoFocus

Optionalbaseline

Optionalblur

Optionalbottom

OptionalbuttonColor

OptionalbuttonSize

OptionalbuttonVariant

Optionalchange

Optionalchild

children

Optionalchoose

OptionalclassName

Optionalclick

Optionalcolumns

OptionalcolumnsOverride

Optionalcompute

Optionalcondition

OptionalconditionElse

OptionalconditionLoading

OptionalcustomLayout

Optionaldebug

Optionaldescription

OptionaldesktopBottom

OptionaldesktopColumns

OptionaldesktopHeight

OptionaldesktopHidden

OptionaldesktopLeft

OptionaldesktopMaxHeight

OptionaldesktopMaxWidth

OptionaldesktopMinHeight

OptionaldesktopMinWidth

OptionaldesktopRight

OptionaldesktopTop

OptionaldesktopWidth

OptionaldictCreateButton

OptionaldictDelay

OptionaldictLimit

OptionaldictOnAppend

OptionaldictOnItem

OptionaldictOnText

OptionaldictSearch

OptionaldictSearchItem

OptionaldictSearchText

OptionaldictValue

Optionaldirty

Optionaldisabled

Optionalelement

OptionalexpansionOpened

fallback

Optionalfeatures

OptionalfieldBottomMargin

OptionalfieldRightMargin

Optionalfields

OptionalfileAccept

Optionalfocus

OptionalfreeSolo

OptionalgroupRef

Optionalheight

OptionalheroInnerDesktopStyle

OptionalheroInnerPhoneStyle

OptionalheroInnerStyle

OptionalheroInnerTabletStyle

OptionalheroOuterDesktopStyle

OptionalheroOuterPhoneStyle

OptionalheroOuterStyle

OptionalheroOuterTabletStyle

Optionalhidden

Optionalicon

OptionaliconBackground

OptionaliconColor

OptionaliconSize

OptionalinnerPadding

OptionalinputAutocomplete

OptionalinputFormatter

`Optional`autoFocus

`Optional`baseline

`Optional`blur

`Optional`bottom

`Optional`buttonColor

`Optional`buttonSize

`Optional`buttonVariant

`Optional`change

`Optional`child

`Optional`choose

`Optional`className

`Optional`click

`Optional`columns

`Optional`columnsOverride

`Optional`compute

`Optional`condition

`Optional`conditionElse

`Optional`conditionLoading

`Optional`customLayout

`Optional`debug

`Optional`description

`Optional`desktopBottom

`Optional`desktopColumns

`Optional`desktopHeight

`Optional`desktopHidden

`Optional`desktopLeft

`Optional`desktopMaxHeight

`Optional`desktopMaxWidth

`Optional`desktopMinHeight

`Optional`desktopMinWidth

`Optional`desktopRight

`Optional`desktopTop

`Optional`desktopWidth

`Optional`dictCreateButton

`Optional`dictDelay

`Optional`dictLimit

`Optional`dictOnAppend

`Optional`dictOnItem

`Optional`dictOnText

`Optional`dictSearch

`Optional`dictSearchItem

`Optional`dictSearchText

`Optional`dictValue

`Optional`dirty

`Optional`disabled

`Optional`element

`Optional`expansionOpened

`Optional`features

`Optional`fieldBottomMargin

`Optional`fieldRightMargin

`Optional`fields

`Optional`fileAccept

`Optional`focus

`Optional`freeSolo

`Optional`groupRef

`Optional`height

`Optional`heroInnerDesktopStyle

`Optional`heroInnerPhoneStyle

`Optional`heroInnerStyle

`Optional`heroInnerTabletStyle

`Optional`heroOuterDesktopStyle

`Optional`heroOuterPhoneStyle

`Optional`heroOuterStyle

`Optional`heroOuterTabletStyle

`Optional`hidden

`Optional`icon

`Optional`iconBackground

`Optional`iconColor

`Optional`iconSize

`Optional`innerPadding

`Optional`inputAutocomplete

`Optional`inputFormatter

`Optional`inputFormatterAllowed

`Optional`inputFormatterReplace

`Optional`inputFormatterSymbol

`Optional`inputFormatterTemplate

`Optional`inputMode

`Optional`inputPattern

`Optional`inputRef

`Optional`inputRows