5.0.7 • Published 1 month ago
@gravity-ui/dialog-fields v5.0.7
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/classname@1.6 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.
5.0.7
1 month ago
4.3.7
2 months ago
5.0.6
2 months ago
4.3.6
2 months ago
4.3.5
2 months ago
5.0.5
2 months ago
5.0.4
2 months ago
4.3.4
2 months ago
4.3.3
2 months ago
5.0.3
2 months ago
4.3.2
2 months ago
5.0.0
2 months ago
4.3.1
2 months ago
4.3.0
5 months ago
3.0.2
7 months ago
3.1.0
6 months ago
3.0.1
7 months ago
3.0.0
8 months ago
4.1.0
5 months ago
4.0.0
5 months ago
4.2.0
5 months ago
2.0.1
9 months ago
2.0.0
10 months ago
1.1.1
1 year ago
1.1.0
1 year ago
1.0.1
1 year ago
1.0.0
1 year ago