The purpose of DFDialog
component is to ease of creating of forms, it is used react-final-form internally.
It supports several predefined types of fields but user can extend it by registering new ones by using registerDialogControl
.
-
Base controls
-
plain
- static text -
text
- editable text -
multi-text
- user defined array of string -
checkbox
- checkbox -
tumbler
- tumbler -
radio
- radio button -
editable-list
- list of removable strings -
multi-editable-list
- multi list of removable strings -
text area
- text area -
select
- select -
block
- allows to add ReactNode
-
- Custom control registration
- Inplace and modal view
- One tab and several tab forms
- Vertical/Horizontal tabs
- Hidden fields and tabs
- Linked fields by values
- Field-level validation
- Form-level validation
- Virtualized tabs
- Cloneable tabs
- Groupped fields
$ npm install @gravity-ui/dialog-fields
Also you have to install all required peer-dependencies
$ npm install -D @gravity-ui/uikit@^5 @bem-react/classname@1.6 react@^17
import {DFDialog, FormApi} from '@gravity-ui/dialog-fields';
interface FormValues {
firstName: string;
lastName: string;
}
function MyForm() {
return (
<DFDialog<FormValues>
visible={true}
headerProps={{
title: 'My form',
}}
onAdd={(form) => {
console.log(form.getState().values);
return Promise.resolve();
}}
fields={[
{
name: 'firstName',
type: 'text',
caption: 'First name',
tooltip: 'Description for first name field',
},
{
name: 'lastName',
type: 'text',
caption: 'LastName',
tooltip: 'Description for last name field',
},
]}
/>
);
}
See more examples in storybook.