Skip to content

Latest commit

 

History

History
87 lines (73 loc) · 2.97 KB

README.md

File metadata and controls

87 lines (73 loc) · 2.97 KB

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 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

Features

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.