@gravity-ui/dialog-fields
v5.0.9
Published
The library helps to create dialogs with forms by using registered field-types. Also it is possible to extend it with your own field-types.
Downloads
404
Readme
Short description
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
.
Controls
- Base controls
plain
- static texttext
- editable textmulti-text
- user defined array of stringcheckbox
- checkboxtumbler
- tumblerradio
- radio buttoneditable-list
- list of removable stringsmulti-editable-list
- multi list of removable stringstext area
- text areaselect
- selectblock
- allows to add ReactNode
- Custom control registration
Features
- 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
Install
$ npm install @gravity-ui/dialog-fields
Also you have to install all required peer-dependencies
$ npm install -D @gravity-ui/uikit@^5 @bem-react/[email protected] react@^17
Usage
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.