Dialog Fields

§简短描述

DFDialog 组件的目的是简化表单的创建，它内部使用了 react-final-form。 它支持几种预定义的字段类型，但用户可以通过使用 registerDialogControl 注册新的类型来扩展它。

§控件

• 基础控件
  • plain - 静态文本
  • text - 可编辑文本
  • multi-text - 用户定义的字符串数组
  • checkbox - 复选框
  • tumbler - 开关
  • radio - 单选按钮
  • editable-list - 可移除字符串列表
  • multi-editable-list - 多个可移除字符串列表
  • text area - 文本区域
  • select - 选择器
  • block - 允许添加 ReactNode
• 自定义控件注册

§特性

• 内嵌和模态视图
• 单标签页和多标签页表单
• 垂直/水平标签页
• 隐藏字段和标签页
• 按值链接的字段
• 字段级验证
• 表单级验证
• 虚拟化标签页
• 可克隆标签页
• 分组字段

§安装

$ npm install @gravity-ui/dialog-fields
# 如果你尚未安装 react/react-dom，请使用所需版本
$ npm install @gravity-ui/dialog-fields react@18 react-dom@18

根据您的包管理器，您可能需要手动安装 peerDependencies。

§使用方法

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',
        },
      ]}
    />
  );
}

在 storybook 中查看更多示例。