Rest Admin Doc
AdminCreateEditFieldsFiltersFormsInputsБазовые <Input> компонентыSelectInputTranslatableInputReferenceInputReferenceManyInputArrayInputListResourceShow

Комопненты <Inputs>

  • <AutoCompleteInput>
  • <CodeInput>
  • <DateInput>
  • <FileInput>
  • <GalleryInput>
  • <NumberInput>
  • <PasswordInput>
  • <RadioGroupInput>
  • <SelectInput>
  • <SwitchInput>
  • <TextInput>
  • <TranslatableInput>
  • <ReferenceInput>
  • <ReferenceManyInput>
  • <ReferenceArrayInput>
  • <Input>

Props

PropsТип
name (required)string

Базовые <Input> компоненты

  • <AutoCompleteInput>
  • <CodeInput>
  • <DateInput>
  • <FileInput>
  • <GalleryInput>
  • <NumberInput>
  • <PasswordInput>
  • <RadioGroupInput>
  • <SelectInput>
  • <SwitchInput>
  • <TextInput>

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

<Create>
    {(createProps) => (
        <SimpleForm
            {...createProps}
            initialValue={{
                title: '',
                body: '',
                date: '',
            }}
        >
            <Space direction="vertical">
                <TextInput label="Title" name="title" placeholder="Enter title" />
                <TextInput label="Body" name="body" placeholder="Enter body" />
                <DateInput name="date" />
            </Space>
        </SimpleForm>
    )}
</Create>

SelectInput

Пользователь может не передавать options, в этом случаи options будут вычислятся из данных, конкретного ресурса.

Для этого нужно передать два параметра:

  • valuePropName - ключ, по которому будут выбрано значение из записи и будет использоватся как значение для <option>

  • titlePropName - ключ, по которому будут выбрано значение из записи и будет использоватся как label для <option>

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

<Create>
    {(createProps) => (
        <SimpleForm
            {...createProps}
            initialValue={{
                author: '',
            }}
        >
            <Space direction="vertical">
                <SelectInput name="author" valuePropName="_id" titlePropName="username" />
            </Space>
        </SimpleForm>
    )}
</Create>

Также можно передать <options>, которые будут использоватся в <select>.

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

const options = [
    {value: "Value 1", title: "Title 1"},
    {value: "Value 2", title: "Title 2"},
    {value: "Value 3", title: "Title 3"},
]


<Create>
    {(createProps) => (
        <SimpleForm
            {...createProps}
            initialValue={{
                author: '',
            }}
        >
            <Space direction="vertical">
                <SelectInput name="author" options={options}/>
            </Space>
        </SimpleForm>
    )}
</Create>

TranslatableInput

Props

PropsТип
locales (required)object
children (required)(locale) => React Component

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

<Create>
    {(createProps) => (
        <SimpleForm
            {...createProps}
            initialValue={{
                author: '',
            }}
        >
            <Space direction="vertical">
                <TranslatableInput locales={locales}>
                    {(locale) => {
                        return (
                            <TextInput
                                name={`text.${locale}`}
                                label="Text"
                            />
                        );
                    }}
                </TranslatableInput>
            </Space>
        </SimpleForm>
    )}
</Create>

ReferenceInput

Компонент для получение одной записи из reference ресурса.

Props

PropsТип
source (required)string
reference (required)string
children (required)React Component

reference - название ресурса, где нужно получить данные

source - ключ, по которому нужно выбрать данные из reference

Компонент <ReferenceInput> использует dataProvider для того чтобы отправить getOne запрос с id. Полученные данные используються компонентом children.

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

<Create>
    {(createProps) => (
        <SimpleForm
            {...createProps}
            initialValue={{
                name: '',
            }}
        >
            <Space direction="vertical">
                <ReferenceInput
                    source="userId"
                    reference="users"
                >
                    <TextInput
                        label="Author"
                        name="name"
                        placeholder="Enter author name"
                    />
                </ReferenceInput>
            </Space>
        </SimpleForm>
    )}
</Create>

ReferenceManyInput

Компонент для получение нескольких записей из reference ресурса.

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

<Create>
    {(createProps) => (
        <SimpleForm
            {...createProps}
            initialValue={{
                author: '',
            }}
        >
            <Space direction="vertical">
                <ReferenceManyInput name="author" reference="users" label="Author">
                    <SelectInput name="author" valuePropName="_id" titlePropName="username" />
                </ReferenceManyInput>
            </Space>
        </SimpleForm>
    )}
</Create>

Для того чтобы использовать <ReferenceInput> нужно определить getMany метод в dataProvider. Если его нет пользователь получит сообщение об ошибке.

Компонент <ReferenceInput> использует dataProvider для того чтобы отправить getMany запрос с id. Полученные данные используються компонентом children.

ArrayInput

Компонент для управления массивом данных - добавлять, удалять, изменять позицию в массиве.

Props

PropsТип
name (required)string
pushHandler (optional)(arrayHelpers: Formik.ArrayHelpers) => React Component
removeHandler (optional)(arrayHelpers: Formik.ArrayHelpers) => React Component

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

<ArrayInput name="array">
    <InputsIterator>
    {
        ({ name }) => <TextInput label="Text 1" name={`${name}.text1`} />
    }
    </InputsIterator>
</ArrayInput>

InputsIterator

Компонент используется для формирования layout отображения списка записей, с возможностью удаления, добавления, изменения позиции - вверх или вниз.

Props

PropsТип
children (required)(name) => React Component or React.Component
direction (optional)vertical or horizontal
actions (optional)(arrayHelpers: Formik.ArrayHelpers) => React Component
actions (optional)(arrayHelpers: Formik.ArrayHelpers) => React Component
addButton (optional)(arrayHelpers: Formik.ArrayHelpers) => React Component
removeButton (optional)(arrayHelpers: Formik.ArrayHelpers) => React Component
moveUpButton (optional)(arrayHelpers: Formik.ArrayHelpers) => React Component
moveDownButton (optional)(arrayHelpers: Formik.ArrayHelpers) => React Component
title (optional)string
showActions (optional)"add", "remove", "up", "down"
actionPosition (optional)"header", "body"
customLayout (optional)(record, arrayName) => React Component