diff --git a/docs/form-render/advanced/listDisplay.md b/docs/form-render/advanced/listDisplay.md index 1df03f399..0b4cbf5ef 100644 --- a/docs/form-render/advanced/listDisplay.md +++ b/docs/form-render/advanced/listDisplay.md @@ -77,6 +77,8 @@ export default Demo; ```jsx import React from 'react'; +import { PlusOutlined } from '@ant-design/icons'; +import { Button } from 'antd'; import Form from '../demo/display'; const schema = { @@ -87,6 +89,7 @@ const schema = { description: '对象数组嵌套功能', type: 'array', widget: 'simpleList', + 'add-widget': 'addBtn', items: { type: 'object', properties: { @@ -107,8 +110,16 @@ const schema = { }, }; +const AddBtn = props => { + return ( + + ); +}; + const Demo = () => { - return
; + return ; }; export default Demo; @@ -374,6 +385,7 @@ const Demo = () => { export default Demo; ``` +

@@ -410,4 +422,56 @@ const Demo = () => { }; export default Demo; -``` \ No newline at end of file +``` + +8. 自定义 onAdd(添加)、onRemove(删除) + +```jsx +import React from 'react'; +import Form from '../demo/display'; + +const schema = { + type: 'object', + properties: { + listName2: { + title: '礼物配置', + description: '可以有多套配置方案', + type: 'array', + widget: 'simpleList', + props: { + onAdd: 'addFunc', + onRemove: 'removeFunc' + }, + items: { + type: 'object', + properties: { + input1: { + title: '{{`配置方案${rootValue.index + 1}`}}', + type: 'string', + required: true, + }, + }, + }, + }, + }, +}; + +const Demo = () => { + const methods = { + addFunc: (cb, { schema }) => { + alert('自定义新增'); + // 处理完成,执行内置逻辑 + cb(); + }, + removeFunc: (cb, { schema }) => { + alert('自定义删除'); + // 处理完成,执行内置逻辑 + cb(); + } + }; + + return ; +}; + +export default Demo; +``` diff --git a/docs/form-render/api/props.md b/docs/form-render/api/props.md index d391c35a5..ea48eb300 100644 --- a/docs/form-render/api/props.md +++ b/docs/form-render/api/props.md @@ -20,7 +20,7 @@ toc: content | colon | 是否显示 label 后面的冒号 | `boolean` | true | | widgets | 自定义组件,当内置组件无法满足时使用,详见[Widgets](#widgets) | `Record` | - | | watch | 监听表单的数据变化,详见[Watch](#watch) | `Record void \| { handler:(val:any) => void,immediate?: boolean }>` | - | -| removeHiddenData | 提交数据的时候是否去掉已经被隐藏的元素的数据,默认不隐藏 | `boolean` | false | +| removeHiddenData | 提交数据的时候是否去掉已经被隐藏的元素的数据,默认不隐藏 | `boolean` | true | | readOnly | 只读模式,一般用于预览展示,全文 text 展示 | `boolean` | false | | className | 顶层 className | `string` | - | | style | 顶层 style | `CSSProperties` | - | diff --git a/package.json b/package.json index d1d63646d..1af12bba2 100644 --- a/package.json +++ b/package.json @@ -76,8 +76,8 @@ "prettier": "^2.6.0", "prettier-plugin-packagejson": "^2.2.16", "prismjs": "^1.27.0", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-monaco-editor": "^0.44.0", "react-simple-code-editor": "^0.11.0", "react-test-renderer": "^17.0.2", @@ -87,5 +87,5 @@ "typescript": "^4.6.2", "yorkie": "^2.0.0" }, - "version": "0.0.1" + "version": "0.0.1-0" } diff --git a/packages/form-render/CHANGELOG.md b/packages/form-render/CHANGELOG.md index b25c30d19..ded396b4c 100644 --- a/packages/form-render/CHANGELOG.md +++ b/packages/form-render/CHANGELOG.md @@ -1,5 +1,12 @@ # Changelog +## 1.13.17 + +- [+] `simpleList` 和 `cardList` 支持自定义新增按钮 +- [!] `removeHiddenData` 默认设置为 `true` +- [!] 修改 `onValuesChange` 入参形式 +- [+] 列表组件支持自定义增加与删除 + ## 1.13.15 - [+] 新增获取隐藏表单值的方法:`form.getHiddenValues()` @@ -383,7 +390,7 @@ ### 1.3.1 - [+] 列表支持 props/buttons 属性,用于添加更多的自定义操作按钮 ([#343](https://github.com/alibaba/x-render/issues/343)) -- [+] 添加了 `onValuesChange` 方法,用于时时更新的钩子,暂时不放文档,内部试验一下性能 +- [+] 添加了 `onValuesChange` 方法,用于实时更新的钩子,暂时不放文档,内部试验一下性能 - [+] 添加了 `className` 这个基础属性,用于样式覆盖特定的表单元素 - [!] 解决包体积大小问题 lodash -> lodash-es ([#341](https://github.com/alibaba/x-render/issues/341)) - [!] 修复颜色选择器无法选中透明度的问题 ([#349](https://github.com/alibaba/x-render/issues/349)) diff --git a/packages/form-render/README.md b/packages/form-render/README.md index 2ee0b4dd2..7cf7d1578 100644 --- a/packages/form-render/README.md +++ b/packages/form-render/README.md @@ -147,7 +147,7 @@ import Form, { useForm, connectForm } from 'form-render'; | colon | 表示是否显示 label 后面的冒号 | `boolean` | 否 | true | | widgets | 自定义组件,当内置组件无法满足时使用 | `object` | 否 | {} | | watch | 类似于 vue 的 watch 的用法,详见[表单监听 & 回调](/form-render/advanced/watch) | `object` | 否 | {} | -| removeHiddenData | 提交数据的时候是否去掉已经被隐藏的元素的数据,默认不隐藏 | `boolean` | 否 | false | +| removeHiddenData | 提交数据的时候是否去掉已经被隐藏的元素的数据,默认不隐藏 | `boolean` | 否 | true | | debug | 开启 debug 模式,时时显示表单内部状态,**开发的时候强烈建议打开** | `boolean` | 否 | false | | readOnly | 只读模式,一般用于预览展示,全文 text 展示 | `boolean` | 否 | false | diff --git a/packages/form-render/package.json b/packages/form-render/package.json index 85acc5451..f4bc36320 100644 --- a/packages/form-render/package.json +++ b/packages/form-render/package.json @@ -1,6 +1,6 @@ { "name": "form-render", - "version": "1.13.16", + "version": "1.13.17", "description": "通过 JSON Schema 生成标准 Form,常用于自定义搭建配置界面生成", "keywords": [ "Form", diff --git a/packages/form-render/src/form-render-core/src/core/RenderChildren/RenderList/CardList.js b/packages/form-render/src/form-render-core/src/core/RenderChildren/RenderList/CardList.js index 849c35000..b9ded3bcb 100644 --- a/packages/form-render/src/form-render-core/src/core/RenderChildren/RenderList/CardList.js +++ b/packages/form-render/src/form-render-core/src/core/RenderChildren/RenderList/CardList.js @@ -23,7 +23,11 @@ const CardList = ({ getFieldsProps, }) => { const { props = {}, itemProps, min = 0, max = 9999 } = schema; - const { methods } = useTools(); + const { methods, widgets } = useTools(); + + const CustomAddBtn = widgets[schema['add-widget']]; + + const AddWidget = CustomAddBtn || Button; let addBtnProps = { type: 'dashed', @@ -111,7 +115,7 @@ const CardList = ({
0 ? 0 : 8 }}> {!props.hideAdd && displayList.length < max && ( -