Forráskód Böngészése

docs: update form docs

pointhalo 3 éve
szülő
commit
da05f99477
2 módosított fájl, 37 hozzáadás és 13 törlés
  1. 27 10
      content/input/form/index.md
  2. 10 3
      content/start/update-to-v2/index.md

+ 27 - 10
content/input/form/index.md

@@ -807,7 +807,8 @@ import { Form } from '@douyinfe/semi-ui';
 
 ### 隐藏Label
 
-Form 会自动为 Field 控件插入 Label。如果你不需要自动插入 Label 模块, 可以通过在 Field 中设置`noLabel=true`将自动插入 Label 功能关闭
+Form 会自动为 Field 控件插入 Label。如果你不需要自动插入 Label 模块, 可以通过在 Field 中设置`noLabel=true`将自动插入 Label 功能关闭(此时 Field 仍然具备自动展示 ErrorMessage 的能力,因此 DOM 结构与原始控件依然会有区别)  
+如果你希望与原始控件保持 DOM 结构一致,可以使用 pure=true,此时除了数据流被接管外,DOM结构不会有任何变化(你需要自行负责 ErrorMessage的渲染,同时它也无法被 formProps.wrapperCol 属性影响)
 
 ```jsx live=true dir="column"
 import React from 'react';
@@ -816,12 +817,7 @@ import { Form } from '@douyinfe/semi-ui';
 () => (
     <Form onSubmit={(values) => console.log(values)} style={{ width: 400 }}>
         <Form.Input field='name' label='姓名' trigger='blur' noLabel={true} style={{ width: 250 }} placeholder='请输入姓名'/>
-        <Form.Select field="role" label='角色' style={{ width: '250px' }} noLabel={true} placeholder='请选择角色'>
-            <Form.Select.Option value="operate">运营</Form.Select.Option>
-            <Form.Select.Option value="rd">开发</Form.Select.Option>
-            <Form.Select.Option value="pm">产品</Form.Select.Option>
-            <Form.Select.Option value="ued">设计</Form.Select.Option>
-        </Form.Select>
+        <Form.Input field='purename' pure placeholder='DOM结构与普通 Input 组件完全一致'/>
     </Form>
 );
 ```
@@ -1443,9 +1439,6 @@ class PartValidAndResetDemo extends React.Component {
     }
 }
 ```
-
-
-
 ### 表单联动
 
 你可以通过监听 Field 的 onChange 事件,然后使用 formApi 进行相关修改,来使 Field 之间达到联动
@@ -2075,6 +2068,30 @@ import { Form, Button } from '@douyinfe/semi-ui';
 
 
 
+## ArrayField Props
+针对动态增删的数组类表单项,我们提供了 ArrayField 作用域来简化 add/remove 的操作
+
+| 属性                  | 说明                                                              | 类型      | 默认值     |
+| --------------------- | ---------------------------------------------------------------- | -------- | --------- |
+| field                 | 该表单控件的值在 formState.values 中的映射路径<br/>必填,例如存在 ArrayField负责 a[0].name、a[1].name、a[2].name三行渲染,他们的父级为a,此处props.field应为 a                                                                    | string                                                                                        |           |
+| initValue             | ArrayField的初始值,如果同时在 formProps.initValues 与 arrayFieldProps.initValue 中都配置了初始值,后者优先级更高  | Array                        | []
+| children              | ArrayField的内容,类型为 Function,函数入参为 add、addWithInitValue 等操作函数 及 arrayFields,执行后应当返回 ReactNode  | Function(ArrayFieldChildrenProps) => ReactNode  | 
+
+```ts
+interface ArrayFieldChildrenProps {
+    arrayFields: ArrayFieldItem<>;                               // 当前数组表单,可以用来执行map操作渲染出每一行
+    add: () => void;                                             // 新增空白行
+    addWithInitValue: (lineObject: Record<string, any>) => void; // 新增一个带初始值的行
+}
+
+interface ArrayFieldItem {
+    key: string;        // 一个用于标识当前行的key,应当绑定在当前行的 wrapper 上
+    field: string;      // 本行 fieldPath, 它等同于 ArrayFieldProps.field + [index]
+    remove: () => void; // 移除本行的操作函数,调用时将直接删除本行
+}
+```
+
+
 ## Form.Section
 
 ```jsx

+ 10 - 3
content/start/update-to-v2/index.md

@@ -108,7 +108,8 @@ const replaceReg = /--semi-$1/;
 
 ##### 5.更新主题包
 
-若你的项目中使用了自定义主题包,需要前往 [Semi DSM](https://semi.design/dsm) (即原 Semi 主题商店的升级版)进行 2.x 版本主题包的发布。并将新版主题 npm 包安装至项目内
+若你的项目中使用了自定义主题包,需要前往 [Semi DSM](https://semi.design/dsm) (即原 Semi 主题商店的升级版)进行 2.x 版本主题包的发布。并将新版主题 npm 包安装至项目内。
+注意 Semi V1 的主题包 与 Semi V2 并不兼容,请务必重新发布。
 
 ##### 6. 运行你的项目,进行dev构建。对抛出error的代码段 进行修改
 
@@ -197,15 +198,18 @@ import en_GB from '@douyinfe/semi-ui/lib/es/locale/source/en_GB';
 如果你使用 Semi 插件,如 `@ies/semi-ui-plugin-webpack` 或 `@ies/semi-ui-plugin-eden` 等进行了高级配置,需要了解以下变更:
 
 -   svg 相关
-    -   2.x 不再支持 iconLazyLoad、svgPaths、srcSvgPaths 配置;
+    -   2.x 不再支持 iconLazyLoad (因为已经支持Shaking)
+    -   svgPaths、srcSvgPaths 配置不再支持,你可以通过使用 svgr webpack 插件作为替换,详细可参考 [Icon组件](/zh-CN/basic/icon#%E4%BD%BF%E7%94%A8svgr%E5%B0%86svg%E6%96%87%E4%BB%B6%E8%BD%AC%E6%88%90ReactComponent)
+
 -   暗色模式相关
     -   2.x 默认已支持局部暗色模式、亮色模式,不再需要在插件配置 themeScope 属性。使用方式由添加 id #semi-always-xxx 更新为添加 class .semi-always-xxx。
 
+
 ### 其他调整
 
 #### Icon/插画使用调整
 
-在 0.x/1.x 版本的 Semi 中,我们强依赖 svg-sprite-loader 将 svg 文件转换为 svg symbol 并在运行时插入 body,使得我们可以仅通过 <Icon type='xxx' / > 以字符串的方式去使用 Icon 图标。在便捷使用的同时,也带来了一些问题:icon 默认全量引入,无法被 shaking;svg-sprite-loader 与 Webpack 强绑定,无法便捷地支持 Rollup、Vite、Snowpack 等其他构建方案。因此 2.0 中,我们去除了与 svg-sprite-loader 的强绑定,Icon 的消费方式需要变更:
+在 0.x/1.x 版本的 Semi 中,我们强依赖 svg-sprite-loader 将 svg 文件转换为 svg symbol 并在运行时插入 body,使得我们可以仅通过 <Icon type='xxx' / > 以字符串的方式去使用 Icon 图标。在便捷使用的同时,也带来了一些问题:icon 默认全量引入,无法被 shaking;svg-sprite-loader 与 Webpack 强绑定,无法便捷地支持 Rollup、Vite 等其他构建方案。因此 2.0 中,我们去除了与 svg-sprite-loader 的强绑定,Icon 的消费方式需要变更:
 
 Icon 使用调整:
 
@@ -270,6 +274,9 @@ id 具有语义上全局唯一的特点,class 则没有这个特点,使用 c
 
 使用插画时,1.x 的插画宽高是 `300 * 150px`,是由于插画 svg 外层嵌套 svg 导致,这一状况导致,原有的插画左右多了空白,不太符合预期。
 
+### 其他与字节内部框架的兼容问题?
+字节跳动用户,请查阅对应[飞书文档](https://bytedance.feishu.cn/docx/doxcnkrOpKFwK9ugkkcfAsUJqYd)
+ 
 ## 遇到问题
 
 我们列出了已知的所有不兼容变化和相关影响,但是有可能还是有一些场景我们没有考虑到。如果你在升级过程中遇到了问题,欢迎随时通过客服群进行反馈沟通