@regenbio/regenbio-components-react 1.2.14 → 1.2.16

package/packages/form/src/components/SchemaForm/demos/steps-form.tsx

@@ -0,0 +1,203 @@
+import type {
+  FormInstance,
+  ProFormColumnsType,
+} from '@ant-design/pro-components';
+import { BetaSchemaForm } from '@ant-design/pro-components';
+import { message } from 'antd';
+import { useRef } from 'react';
+
+const valueEnum = {
+  all: { text: '全部', status: 'Default' },
+  open: {
+    text: '未解决',
+    status: 'Error',
+  },
+  closed: {
+    text: '已解决',
+    status: 'Success',
+    disabled: true,
+  },
+  processing: {
+    text: '解决中',
+    status: 'Processing',
+  },
+};
+
+type DataItem = {
+  name: string;
+  state: string;
+};
+
+const columns: ProFormColumnsType<DataItem>[][] = [
+  [
+    {
+      title: '标题',
+      dataIndex: 'title',
+      formItemProps: {
+        rules: [
+          {
+            required: true,
+            message: '此项为必填项',
+          },
+        ],
+      },
+      width: 'm',
+    },
+    {
+      title: '状态',
+      dataIndex: 'state',
+      valueType: 'select',
+      valueEnum,
+      width: 'm',
+    },
+  ],
+  [
+    {
+      title: '标签',
+      dataIndex: 'labels',
+      width: 'm',
+    },
+    {
+      title: '创建时间',
+      key: 'showTime',
+      dataIndex: 'createName',
+      valueType: 'date',
+    },
+    {
+      title: '分组',
+      valueType: 'group',
+      columns: [
+        {
+          title: '状态',
+          dataIndex: 'groupState',
+          valueType: 'select',
+          width: 'xs',
+          valueEnum,
+        },
+        {
+          title: '标题',
+          width: 'md',
+          dataIndex: 'groupTitle',
+          formItemProps: {
+            rules: [
+              {
+                required: true,
+                message: '此项为必填项',
+              },
+            ],
+          },
+        },
+      ],
+    },
+  ],
+  [
+    {
+      title: '列表',
+      valueType: 'formList',
+      dataIndex: 'list',
+      initialValue: [{ state: 'all', title: '标题' }],
+      columns: [
+        {
+          valueType: 'group',
+          columns: [
+            {
+              title: '状态',
+              dataIndex: 'state',
+              valueType: 'select',
+              width: 'xs',
+              valueEnum,
+            },
+            {
+              title: '标题',
+              dataIndex: 'title',
+              formItemProps: {
+                rules: [
+                  {
+                    required: true,
+                    message: '此项为必填项',
+                  },
+                ],
+              },
+              width: 'm',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      title: 'FormSet',
+      valueType: 'formSet',
+      dataIndex: 'formSet',
+      columns: [
+        {
+          title: '状态',
+          dataIndex: 'groupState',
+          valueType: 'select',
+          width: 'xs',
+          valueEnum,
+        },
+        {
+          title: '标题',
+          dataIndex: 'groupTitle',
+          tooltip: '标题过长会自动收缩',
+          formItemProps: {
+            rules: [
+              {
+                required: true,
+                message: '此项为必填项',
+              },
+            ],
+          },
+          width: 'm',
+        },
+      ],
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'created_at',
+      valueType: 'dateRange',
+      transform: (value) => {
+        return {
+          startTime: value[0],
+          endTime: value[1],
+        };
+      },
+    },
+  ],
+];
+
+export default () => {
+  const formRef = useRef<FormInstance>();
+
+  return (
+    <BetaSchemaForm<DataItem>
+      layoutType="StepsForm"
+      steps={[
+        {
+          title: '第一步',
+        },
+        {
+          title: '第二步',
+        },
+        {
+          title: '第三步',
+        },
+      ]}
+      onCurrentChange={(current) => {
+        console.log('current: ', current);
+      }}
+      formRef={formRef}
+      onFinish={async (values) => {
+        return new Promise((resolve) => {
+          console.log(values);
+          message.success('提交成功');
+          setTimeout(() => {
+            resolve(true);
+            formRef.current?.resetFields();
+          }, 2000);
+        });
+      }}
+      columns={columns}
+    />
+  );
+};

package/packages/form/src/components/SchemaForm/demos/valueType.tsx

@@ -0,0 +1,150 @@
+import type { ProFieldValueType } from '@ant-design/pro-components';
+import { BetaSchemaForm, ProFormSelect } from '@ant-design/pro-components';
+import { useState } from 'react';
+
+const valueEnum = {
+  all: { text: '全部', status: 'Default' },
+  open: {
+    text: '未解决',
+    status: 'Error',
+  },
+  closed: {
+    text: '已解决',
+    status: 'Success',
+    disabled: true,
+  },
+  processing: {
+    text: '解决中',
+    status: 'Processing',
+  },
+};
+
+const options = [
+  { value: `password`, label: `密码输入框`, initialValue: '123456' },
+  { value: `money`, label: `金额输入`, initialValue: '123456' },
+  { value: `textarea`, label: `文本域`, initialValue: '123456\n121212' },
+  { value: `date`, label: `日期`, initialValue: Date.now() },
+  { value: `dateTime`, label: `日期时间`, initialValue: Date.now() },
+  { value: `dateWeek`, label: `周`, initialValue: Date.now() },
+  { value: `dateMonth`, label: `月`, initialValue: Date.now() },
+  { value: `dateQuarter`, label: `季度输入`, initialValue: Date.now() },
+  { value: `dateYear`, label: `年份输入`, initialValue: Date.now() },
+  {
+    value: `dateRange`,
+    label: `日期区间`,
+    initialValue: [Date.now(), Date.now()],
+  },
+  {
+    value: `dateTimeRange`,
+    label: `日期时间区间`,
+    initialValue: [Date.now(), Date.now()],
+  },
+  { value: `time`, label: `时间`, initialValue: Date.now() },
+  {
+    value: `timeRange`,
+    label: `时间区间`,
+    initialValue: [Date.now(), Date.now()],
+  },
+  { value: `text`, label: `文本框`, initialValue: '123456' },
+  { value: `select`, label: `下拉框`, initialValue: 'open' },
+  { value: `checkbox`, label: `多选框`, initialValue: 'open' },
+  { value: `rate`, label: `星级组件`, initialValue: '' },
+  { value: `radio`, label: `单选框`, initialValue: 'open' },
+  { value: `radioButton`, label: `按钮单选框`, initialValue: 'open' },
+  { value: `progress`, label: `进度条`, initialValue: '10' },
+  { value: `percent`, label: `百分比组件`, initialValue: '20' },
+  { value: `digit`, label: `数字输入框`, initialValue: '200000' },
+  { value: `second`, label: `秒格式化`, initialValue: 20000 },
+  {
+    value: `avatar`,
+    label: `头像`,
+    initialValue:
+      'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
+  },
+  { value: `code`, label: `代码框`, initialValue: '# 2121' },
+  { value: `switch`, label: `开关`, initialValue: 'open' },
+  { value: `fromNow`, label: `相对于当前时间`, initialValue: Date.now() },
+  {
+    value: `image`,
+    label: `图片`,
+    initialValue:
+      'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
+  },
+  {
+    value: `jsonCode`,
+    label: `JSON代码框`,
+    initialValue: '{ "name":"qixian" }',
+  },
+  {
+    value: `color`,
+    label: `颜色选择器`,
+    initialValue: '#1890ff',
+  },
+];
+
+type DataItem = {
+  name: string;
+  state: string;
+};
+
+export default () => {
+  const [valueType, setValueType] = useState<ProFieldValueType>('text');
+  return (
+    <>
+      <ProFormSelect.SearchSelect
+        label="valueType 选择"
+        options={options}
+        width={200}
+        mode="single"
+        fieldProps={{
+          labelInValue: false,
+          value: valueType,
+          onChange: (value) => setValueType(value),
+        }}
+      />
+      <BetaSchemaForm<DataItem>
+        layoutType="Form"
+        onFinish={async (values) => {
+          console.log(values);
+        }}
+        initialValues={options.reduce((pre, item) => {
+          return {
+            ...pre,
+            [item.value]: item.initialValue,
+          };
+        }, {})}
+        columns={[
+          {
+            title: '分组',
+            valueType: 'group',
+            columns: [
+              {
+                valueType,
+                title: '编辑器',
+                dataIndex: valueType || 'text',
+                valueEnum,
+                formItemProps: {
+                  rules: [
+                    {
+                      required: true,
+                      message: '此项为必填项',
+                    },
+                  ],
+                },
+                width: 'm',
+              },
+              {
+                valueType,
+                title: '只读',
+                dataIndex: valueType || 'text',
+                valueEnum,
+                readonly: true,
+                width: 'm',
+              },
+            ],
+          },
+        ]}
+      />
+    </>
+  );
+};

package/packages/form/src/components/SchemaForm/index.en-US.md

@@ -0,0 +1,92 @@
+---
+title: Schema Form
+order: 1
+atomId: BetaSchemaForm
+nav:
+  title: component
+---
+
+# JSON form
+
+SchemaForm is a tool for generating forms based on JSON Schema. SchemaForm will be mapped into different [form items](/components/schema) according to valueType.
+
+> **Tips**： If you encounter a stuck problem or have higher performance requirements, you can [reference example](#high-performance-code-examples).
+
+## SchemaForm
+
+SchemaForm provides the same API as [ProForm](/components/form#proform), and adds some APIs, the following SchemaForm new APIs.
+
+| Field name | Type | Description |
+| --- | --- | --- |
+| `layoutType` | [`ProFormLayoutType`](/components/schema-form#proformlayouttype) | Form layout mode used |
+| `steps` | `StepFormProps[]` | The distributed form configuration in `layoutType=steps` needs to configure columns to be used as an array |
+| `columns` | [`ProFormColumnsType` \| `ProFormColumnsType[]`](/components/schema-form#schema-definition) | The definition of the form is generally a json object. If it is a distributed form, it needs to be generated using a json array Multiple forms |
+| `shouldUpdate` | `(newValues: Record<string, any>, oldValues: Record<string, any>) => boolean \| boolean` | Fine-grained control whether to render. <br /> When it is `true` the form items are automatically re-rendered. <br /> When it is `false` will not update the form item, but can use [dependencies to trigger the update](#combining-shouldupdatefalse-with-dependencies-to-trigger-updates). <br /> When it is `function`, judge whether to re-render according to the return value Renders the form item, equivalent to directly assigning `true` or `false`. [Reference Example](#dynamically-control-whether-to-re-render) |
+
+## ProFormLayoutType
+
+| Field name | Description |
+| --- | --- |
+| `Form` | [ProForm](/components/form) is the basic form type |
+| `ModalForm` | Pop-up form, after configuration, it supports all configurations of [ModalForm](/components/modal-form) |
+| `DrawerForm` | Drawer form, after configuration, it supports all configurations of [DrawerForm](/components/modal-form) |
+| `StepsForm`\|`StepForm` | After configuration, it is a step-by-step form. There are two modes: one is to use `steps` and `columns` to generate, the other is to use `layoutType=StepsForm` to nest `layoutType=StepForm` To achieve |
+| `LightFilter` | Lightweight filtering, after configuration, it supports all configurations of [`LightFilter`](/components/query-filter) |
+| `QueryFilter` | Query form, after configuration, all configurations of [`QueryFilter`](/components/query-filter) are supported |
+| `Embed` | Embedded mode, only generates form items, does not generate Form, can be mixed with other forms |
+
+## Schema definition
+
+The most important thing about the SchemaForm form is the type definition of the Schema. We use the same form definition as the table, while extending some fields.
+
+| Field name | Type | Description |
+| --- | --- | --- |
+| `key` | `React.key` | Determine the unique value of this column, generally used in the case of repeated dataIndex |
+| `dataIndex` | `React.key` \| `React.key[]` | The key mapped to the entity, the array will be converted `[a,b] => Entity.a.b` |
+| `valueType` | `ProFieldValueType` | The rendering method of data, we have part of it, you can customize the valueType |
+| `title` | `ReactNode` \|`(props,type,dom)=> ReactNode` | The content of the title, which is label in the form |
+| `tooltip` | `string` | An icon will be displayed next to the title, and it will be displayed after the mouse is floating |
+| `valueEnum` | `(Entity)=> ValueEnum` \| `ValueEnum` | Support object and Map, Map supports other basic types as keys |
+| `fieldProps` | `(form,config)=>fieldProps`\| `fieldProps` | The props passed to the rendered component, and also passed when customizing |
+| `formItemProps` | `(form,config)=>formItemProps` \| `formItemProps` | Configuration passed to Form.Item |
+| `renderText` | `(text: any, record: Entity, index: number, action: ProCoreActionType) => any` | The modified data will be consumed by the rendering component defined by valueType |
+| `render` | `(dom,entity,index, action, schema) => React.ReactNode` | custom read-only mode dom, read-only mode managed by `render` method only, edit mode needs to use `renderFormItem` |
+| `renderFormItem` | `(schema,config,form) => React.ReactNode` | Custom edit mode, return a ReactNode, will automatically wrap value and onChange. ~~If it returns false,null,undefined, the item will not be displayed~~ It is recommended to use dependent components to control whether to render or not |
+| `request` | `(params,props) => Promise<{label,value}[]>` | Request network data remotely, generally used to select class components |
+| `params` | `Record<string, any>` | The additional parameters passed to `request` will not be processed by the component, but changes will cause `request` to request data again |
+| `dependencies` | `string \| number \| (string \| number)[]` | After the dependent values changes, trigger renderFormItem, fieldProps, formItemProps to re-execute, and inject values into params [example](#use-dependencies-to-trigger-fieldprops-formitemprops-renderformitem-updates) |
+| `hideInDescriptions` | `boolean` | Hide in descriptions |
+| `hideInForm` | `boolean` | Hide in Form |
+| `hideInTable` | `boolean` | Hide in Table |
+| `hideInSearch` | `boolean` | Hide in the query form of Table |
+| `columns` | `ProFormColumnsType[] \| (values) => ProFormColumnsType[]` | nested，when valueType is dependency ，please use `(values) => ProFormColumnsType[]`, other valueType use `ProFormColumnsType[]` |
+| `rowProps` | Passed to `Row` when `grid` mode is enabled, Applies only to `ProFormGroup`, `ProFormList`, `ProFormFieldSet` | [RowProps](https://ant.design/components/grid/#Row) |
+| `colProps` | Passed to `Col` when `grid` mode is enabled | [ColProps](https://ant.design/components/grid/#Col) |
+
+## Code example
+
+### JSON to generate the form
+
+<code src="./demos/schema.tsx" oldtitle="schema form"></code>
+
+### JSON to generate distributed forms
+
+<code src="./demos/steps-form.tsx" oldtitle="schema form"></code>
+
+### Embed in ProForm
+
+<code src="./demos/embed.tsx" oldtitle="schema form"></code>
+
+### Use ProFormDependency
+
+<code src="./demos/dependency.tsx" oldtitle="schema dependency"></code>
+
+## High performance code examples
+
+### Combining shouldUpdate=false with dependencies to trigger updates
+
+<code src="./demos/dependencies.tsx" oldtitle="schema dependencies"></code>
+
+### Dynamically control whether to re-render
+
+<code src="./demos/dynamic-rerender.tsx" oldtitle="dynamic rerender"></code>

package/packages/form/src/components/SchemaForm/index.md

@@ -0,0 +1,84 @@
+---
+title: Schema Form - JSON 表单
+order: 1
+atomId: BetaSchemaForm
+---
+
+# Schema Form - JSON 表单
+
+SchemaForm 是根据 JSON Schema 来生成表单的工具。SchemaForm 会根据 valueType 来映射成不同的[表单项](/components/schema)。
+
+> **Tips**： 如您遇到卡顿问题或有更高的性能要求可[参考示例](#高性能代码示例)使用
+
+## API
+
+SchemaForm 提供了与 [ProForm](/components/form#proform) 相同的 API，并且增加了部分 API，以下的 SchemaForm 新增的 API。
+
+| 字段名称 | 类型 | 说明 |
+| --- | --- | --- |
+| `layoutType` | [`ProFormLayoutType`](/components/schema-form#proformlayouttype) | 使用的表单布局模式 |
+| `steps` | `StepFormProps[]` | `layoutType=steps`中的分步表单配置，需要配置 columns 为数组使用 |
+| `columns` | [`ProFormColumnsType` \| `ProFormColumnsType[]`](/components/schema-form#schema-定义) | 表单的定义，一般是 json 对象，如果是分步表单，需要使用 json 数组来生成多个表单 |
+| `shouldUpdate` | `(newValues: Record<string, any>, oldValues: Record<string, any>) => boolean \| boolean` | 细粒化控制是否渲染。<br /> 为`true`时会自动重新渲染表单项。<br /> 为`false`时不会更新表单项但可以使用[dependencies 触发更新](#结合-shouldupdatefalse-和-dependencies-触发更新)，<br /> 为`function` 时根据返回值判断是否重新渲染表单项，等同直接赋值 `true` 或 `false` [参考示例](#动态控制是否重渲染) |
+
+## ProFormLayoutType
+
+| 字段名称 | 说明 |
+| --- | --- |
+| `Form` | [ProForm](/components/form) 是基本的表单类型 |
+| `ModalForm` | 弹框表单，配置之后支持 [ModalForm](/components/modal-form) 的所有配置 |
+| `DrawerForm` | 抽屉表单，配置之后支持 [DrawerForm](/components/modal-form) 的所有配置 |
+| `StepsForm`\|`StepForm` | 配置之后为分步表单，有两种模式一种使用 `steps` 和 `columns` 来生成，一种是通过 `layoutType=StepsForm` 嵌套 `layoutType=StepForm` 来实现 |
+| `LightFilter` | 轻量筛选，配置之后支持 [`LightFilter`](/components/query-filter) 的所有配置 |
+| `QueryFilter` | 查询表单，配置之后支持 [`QueryFilter`](/components/query-filter) 的所有配置 |
+| `Embed` | 内嵌模式，只生成表单项，不生成 Form 可以混合使用 |
+
+## Schema 定义
+
+SchemaForm 表单最重要就是 Schema 的类型定义，我们使用了与 table 的相同的表单定义，同时扩展了部分字段。
+
+| 字段名称 | 类型 | 说明 |
+| --- | --- | --- |
+| `key` | `React.key` | 确定这个列的唯一值，一般用于 dataIndex 重复的情况 |
+| `dataIndex` | `React.key` \| `React.key[]` | 与实体映射的 key，数组会被转化 `[a,b] => Entity.a.b` |
+| `valueType` | `ProFieldValueType` | 数据的渲渲染方式，我们自带了一部分，你也可以自定义 valueType |
+| `title` | `ReactNode` \|`(props,type,dom)=> ReactNode` | 标题的内容，在 form 中是 label |
+| `tooltip` | `string` | 会在 title 旁边展示一个 icon，鼠标浮动之后展示 |
+| `valueEnum` | `(Entity)=> ValueEnum` \| `ValueEnum` | 支持 object 和 Map，Map 是支持其他基础类型作为 key |
+| `fieldProps` | `(form,config)=>fieldProps`\| `fieldProps` | 传给渲染的组件的 props，自定义的时候也会传递 |
+| `formItemProps` | `(form,config)=>formItemProps` \| `formItemProps` | 传递给 Form.Item 的配置 |
+| `formItemProps.rules` | `Rule[]` | 表单项的校验规则。需要注意的是，如果当前表单项为`formList`时，此规则仅校验列表是否为空，且仅接受元组`[{required: boolean, message: string}]`，用于开启和关闭非空校验及指定空列表提示消息 |
+| `proFieldProps` | `proFieldProps` | 设置到 `ProField` 上面的 `props`，内部属性 |
+| `renderText` | `(text: any, record: Entity, index: number, action: ProCoreActionType) => any` | 修改的数据是会被 valueType 定义的渲染组件消费 |
+| `render` | `(dom,entity,index, action, schema) => React.ReactNode` | 自定义只读模式的 dom,`render` 方法只管理的只读模式，编辑模式需要使用 `renderFormItem` |
+| `renderFormItem` | `(schema,config,form) => React.ReactNode` | 自定义编辑模式，返回一个 ReactNode，会自动包裹 value 和 onChange。~~如返回 false,null,undefined 将不展示表单项~~ 请使用 dependency 组件控制是否渲染列 |
+| `request` | `(params,props) => Promise<{label,value}[]>` | 从远程请求网络数据，一般用于选择类组件 |
+| `params` | `Record<string, any>` | 额外传递给 `request` 的参数，组件不做处理，但是变化会引起`request` 重新请求数据 |
+| `dependencies` | `string \| number \| (string \| number)[]` | 所依赖的 values 变化后，触发 renderFormItem，fieldProps，formItemProps 重新执行，并把 values 注入到 params 里 [示例](#使用-dependencies-触发-fieldpropsformitempropsrenderformitem-更新) |
+| `hideInDescriptions` | `boolean` | 在 descriptions 中隐藏 |
+| `hideInForm` | `boolean` | 在 Form 中隐藏 |
+| `hideInTable` | `boolean` | 在 Table 中隐藏 |
+| `hideInSearch` | `boolean` | 在 Table 的查询表格中隐藏 |
+| `columns` | `ProFormColumnsType[] \| (values) => ProFormColumnsType[]` | 嵌套子项，valueType 为 dependency 时，请使用`(values) => ProFormColumnsType[]`其他情况使用 `ProFormColumnsType[]` |
+| `colProps` | [ColProps](https://ant.design/components/grid/#Col) | 在开启 grid 模式时传递给 Col |
+| `rowProps` | [RowProps](https://ant.design/components/grid/#Row) | 开启栅格化模式时传递给 Row |
+
+## 代码示例
+
+<code src="./demos/schema.tsx" title="schema 表单"></code>
+
+<code src="./demos/ModalAndDrawerForm.tsx" title="浮层窗口"></code>
+
+<code src="./demos/steps-form.tsx" title="JSON 来生成分步表单"></code>
+
+<code src="./demos/embed.tsx" title="嵌入到 ProForm 中"></code>
+
+<code src="./demos/dependency.tsx" title="使用 ProFormDependency"></code>
+
+## 高性能代码示例
+
+<code src="./demos/dependencies.tsx" title="结合 shouldUpdate=false 和 dependencies 触发更新"></code>
+
+<code src="./demos/dynamic-rerender.tsx" title="动态控制是否重渲染"></code>
+
+<code src="./demos/form-list-required.tsx" title="required" debug  title="form-list-required"></code>