Skip to content

Commit da9875a

Browse files
siyi98zhanbo.lh
siyi98
and
zhanbo.lh
authored
faet(fr): v1.13.17 (#941)
* feat: support react18 * feat(fr): cardList和simpleList支持自定义新增按钮 * feat(fr): update docs * feat(fr): 添加add-widget和methods类型声明 * list 增加 onAdd、onRemove 事件 * list 增加 onAdd、onRemove 事件 * 增加 列表展上文档，补充 onAdd、onRemove 扩展 * v1.1.0-beta.2 * v1.1.0-beta.1 * chore: 发布beta版本 * feat(fr): v1.13.17-beta.2 * docs(fr): udpate docs * feat: 修改 onValuesChange 入参形式 * 0.0.1-0 * feat(fr): v1.13.17-beta.3 * feat(fr): 更新 onValuesChange 类型声明 * feat(fr): v1.13.17-beta.4 * feat(fr): udpate changelog * feat(fr): v1.13.17 Co-authored-by: zhanbo.lh <[email protected]>
1 parent 19604e2 commit da9875a

File tree

13 files changed

+123
-18
lines changed

13 files changed

+123
-18
lines changed

‎docs/form-render/advanced/listDisplay.md

Lines changed: 66 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,8 @@ export default Demo;
7777

7878
```jsx
7979
import React from 'react';
80+
import { PlusOutlined } from '@ant-design/icons';
81+
import { Button } from 'antd';
8082
import Form from '../demo/display';
8183

8284
const schema = {
@@ -87,6 +89,7 @@ const schema = {
8789
description: '对象数组嵌套功能',
8890
type: 'array',
8991
widget: 'simpleList',
92+
'add-widget': 'addBtn',
9093
items: {
9194
type: 'object',
9295
properties: {
@@ -107,8 +110,16 @@ const schema = {
107110
},
108111
};
109112

113+
const AddBtn = props => {
114+
return (
115+
<Button {...props} style={{ width: '50%' }} icon={<PlusOutlined />}>
116+
新增一条
117+
</Button>
118+
);
119+
};
120+
110121
const Demo = () => {
111-
return <Form schema={schema} />;
122+
return <Form widgets={{ addBtn: AddBtn }} schema={schema} />;
112123
};
113124

114125
export default Demo;
@@ -374,6 +385,7 @@ const Demo = () => {
374385

375386
export default Demo;
376387
```
388+
377389
<br>
378390
<br>
379391

@@ -410,4 +422,56 @@ const Demo = () => {
410422
};
411423

412424
export default Demo;
413-
```
425+
```
426+
427+
8. 自定义 onAdd(添加)、onRemove(删除)
428+
429+
```jsx
430+
import React from 'react';
431+
import Form from '../demo/display';
432+
433+
const schema = {
434+
type: 'object',
435+
properties: {
436+
listName2: {
437+
title: '礼物配置',
438+
description: '可以有多套配置方案',
439+
type: 'array',
440+
widget: 'simpleList',
441+
props: {
442+
onAdd: 'addFunc',
443+
onRemove: 'removeFunc'
444+
},
445+
items: {
446+
type: 'object',
447+
properties: {
448+
input1: {
449+
title: '{{`配置方案${rootValue.index + 1}`}}',
450+
type: 'string',
451+
required: true,
452+
},
453+
},
454+
},
455+
},
456+
},
457+
};
458+
459+
const Demo = () => {
460+
const methods = {
461+
addFunc: (cb, { schema }) => {
462+
alert('自定义新增');
463+
// 处理完成，执行内置逻辑
464+
cb();
465+
},
466+
removeFunc: (cb, { schema }) => {
467+
alert('自定义删除');
468+
// 处理完成，执行内置逻辑
469+
cb();
470+
}
471+
};
472+
473+
return <Form schema={schema} methods={methods}/>;
474+
};
475+
476+
export default Demo;
477+
```

‎docs/form-render/api/props.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ toc: content
2020
| colon | 是否显示 label 后面的冒号 | `boolean` | true |
2121
| widgets | 自定义组件，当内置组件无法满足时使用，详见[Widgets](#widgets) | `Record<string, ReactNode>` | - |
2222
| watch | 监听表单的数据变化，详见[Watch](#watch) | `Record<string, (val: any) => void \| { handler:(val:any) => void,immediate?: boolean }>` | - |
23-
| removeHiddenData | 提交数据的时候是否去掉已经被隐藏的元素的数据，默认不隐藏 | `boolean` | false |
23+
| removeHiddenData | 提交数据的时候是否去掉已经被隐藏的元素的数据，默认不隐藏 | `boolean` | true |
2424
| readOnly | 只读模式，一般用于预览展示，全文 text 展示 | `boolean` | false |
2525
| className | 顶层 className | `string` | - |
2626
| style | 顶层 style | `CSSProperties` | - |

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,8 @@
7676
"prettier": "^2.6.0",
7777
"prettier-plugin-packagejson": "^2.2.16",
7878
"prismjs": "^1.27.0",
79-
"react": "^17.0.2",
80-
"react-dom": "^17.0.2",
79+
"react": "^18.2.0",
80+
"react-dom": "^18.2.0",
8181
"react-monaco-editor": "^0.44.0",
8282
"react-simple-code-editor": "^0.11.0",
8383
"react-test-renderer": "^17.0.2",
@@ -87,5 +87,5 @@
8787
"typescript": "^4.6.2",
8888
"yorkie": "^2.0.0"
8989
},
90-
"version": "0.0.1"
90+
"version": "0.0.1-0"
9191
}

‎packages/form-render/CHANGELOG.md

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
# Changelog
22

3+
## 1.13.17
4+
5+
- [+] `simpleList` 和 `cardList` 支持自定义新增按钮
6+
- [!] `removeHiddenData` 默认设置为 `true`
7+
- [!] 修改 `onValuesChange` 入参形式
8+
- [+] 列表组件支持自定义增加与删除
9+
310
## 1.13.15
411

512
- [+] 新增获取隐藏表单值的方法：`form.getHiddenValues()`
@@ -383,7 +390,7 @@
383390
### 1.3.1
384391

385392
- [+] 列表支持 props/buttons 属性，用于添加更多的自定义操作按钮 ([#343](https://github.com/alibaba/x-render/issues/343))
386-
- [+] 添加了 `onValuesChange` 方法，用于时时更新的钩子，暂时不放文档，内部试验一下性能
393+
- [+] 添加了 `onValuesChange` 方法，用于实时更新的钩子，暂时不放文档，内部试验一下性能
387394
- [+] 添加了 `className` 这个基础属性，用于样式覆盖特定的表单元素
388395
- [!] 解决包体积大小问题 lodash -> lodash-es ([#341](https://github.com/alibaba/x-render/issues/341))
389396
- [!] 修复颜色选择器无法选中透明度的问题 ([#349](https://github.com/alibaba/x-render/issues/349))

‎packages/form-render/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ import Form, { useForm, connectForm } from 'form-render';
147147
| colon | 表示是否显示 label 后面的冒号 | `boolean` | 否 | true |
148148
| widgets | 自定义组件，当内置组件无法满足时使用 | `object` | 否 | {} |
149149
| watch | 类似于 vue 的 watch 的用法，详见[表单监听 & 回调](/form-render/advanced/watch) | `object` | 否 | {} |
150-
| removeHiddenData | 提交数据的时候是否去掉已经被隐藏的元素的数据，默认不隐藏 | `boolean` | 否 | false |
150+
| removeHiddenData | 提交数据的时候是否去掉已经被隐藏的元素的数据，默认不隐藏 | `boolean` | 否 | true |
151151
| debug | 开启 debug 模式，时时显示表单内部状态，**开发的时候强烈建议打开** | `boolean` | 否 | false |
152152
| readOnly | 只读模式，一般用于预览展示，全文 text 展示 | `boolean` | 否 | false |
153153

‎packages/form-render/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "form-render",
3-
"version": "1.13.16",
3+
"version": "1.13.17",
44
"description": "通过 JSON Schema 生成标准 Form，常用于自定义搭建配置界面生成",
55
"keywords": [
66
"Form",

‎packages/form-render/src/form-render-core/src/core/RenderChildren/RenderList/CardList.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,11 @@ const CardList = ({
2323
getFieldsProps,
2424
}) => {
2525
const { props = {}, itemProps, min = 0, max = 9999 } = schema;
26-
const { methods } = useTools();
26+
const { methods, widgets } = useTools();
27+
28+
const CustomAddBtn = widgets[schema['add-widget']];
29+
30+
const AddWidget = CustomAddBtn || Button;
2731

2832
let addBtnProps = {
2933
type: 'dashed',
@@ -111,7 +115,7 @@ const CardList = ({
111115
</div>
112116
<div style={{ marginTop: displayList.length > 0 ? 0 : 8 }}>
113117
{!props.hideAdd && displayList.length < max && (
114-
<Button onClick={addItem} {...addBtnProps} />
118+
<AddWidget {...addBtnProps} />
115119
)}
116120
{Array.isArray(props.buttons)
117121
? props.buttons.map((item, idx) => {

‎packages/form-render/src/form-render-core/src/core/RenderChildren/RenderList/SimpleList.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
} from '@ant-design/icons';
77
import { Button, Popconfirm } from 'antd';
88
import React from 'react';
9+
import { useTools } from '../../../hooks';
910
import Core from '../../index';
1011

1112
const SimpleList = ({
@@ -21,6 +22,11 @@ const SimpleList = ({
2122
getFieldsProps,
2223
}) => {
2324
const { props = {}, itemProps, min = 0, max = 99999 } = schema;
25+
const { widgets } = useTools();
26+
27+
const CustomAddBtn = widgets[schema['add-widget']];
28+
29+
const AddWidget = CustomAddBtn || Button;
2430

2531
let addBtnProps = {
2632
type: 'dashed',
@@ -37,6 +43,8 @@ const SimpleList = ({
3743
addBtnProps = { ...addBtnProps, ...props.addBtnProps };
3844
}
3945

46+
addBtnProps.onClick = addItem;
47+
4048
if (props.delConfirmProps && typeof props.delConfirmProps === 'object') {
4149
delConfirmProps = { ...delConfirmProps, ...props.delConfirmProps };
4250
}
@@ -85,7 +93,7 @@ const SimpleList = ({
8593
})}
8694
<div style={{ marginTop: displayList.length > 0 ? 0 : 8 }}>
8795
{!props.hideAdd && displayList.length < max && (
88-
<Button onClick={addItem} {...addBtnProps} />
96+
<AddWidget {...addBtnProps} />
8997
)}
9098
{Array.isArray(props.buttons)
9199
? props.buttons.map((item, idx) => {

‎packages/form-render/src/form-render-core/src/core/RenderChildren/RenderList/index.js

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* eslint-disable jsx-a11y/anchor-is-valid */
2-
import { get } from 'lodash-es';
2+
import { get, isFunction } from 'lodash-es';
33
import React from 'react';
44
import { useStore, useTools } from '../../../hooks';
55
import {
@@ -128,7 +128,7 @@ const RenderList = ({
128128
};
129129
};
130130

131-
const displayProps = {
131+
let displayProps = {
132132
displayList,
133133
changeList,
134134
schema,
@@ -147,6 +147,18 @@ const RenderList = ({
147147
getFieldsProps,
148148
};
149149

150+
// 外部定义：添加按钮事件
151+
const onAdd = methods[props.onAdd];
152+
if (isFunction(onAdd)) {
153+
displayProps.addItem = () => onAdd(addItem, { schema });
154+
}
155+
156+
// 外部定义：删除按钮事件
157+
const onRemove = methods[props.onRemove];
158+
if (isFunction(onRemove)) {
159+
displayProps.deleteItem = (idx) => onRemove(() => deleteItem(idx), { schema })
160+
}
161+
150162
if (layoutWidgets && layoutWidgets[renderWidget]) {
151163
const Component = layoutWidgets[renderWidget];
152164
return <Component {...displayProps} />;

‎packages/form-render/src/form-render-core/src/core/RenderField/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ const RenderField = props => {
111111
}
112112
// 先不暴露给外部，这个api
113113
if (typeof onValuesChange === 'function') {
114-
onValuesChange({ [dataPath]: value }, formDataRef.current);
114+
onValuesChange({ dataPath, value, dataIndex }, formDataRef.current);
115115
}
116116

117117
validateField({

‎packages/form-render/src/form-render-core/src/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ function App({
5353
allCollapsed = false,
5454
onValuesChange,
5555
column,
56-
removeHiddenData = false,
56+
removeHiddenData = true,
5757
globalProps = {},
5858
methods = {},
5959
renderTitle,

‎packages/form-render/src/form-render-core/src/utils.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1063,7 +1063,6 @@ export const getHiddenData = (data, flatten) => {
10631063
hidden = parseSingleExpression(hidden, result, key);
10641064
}
10651065
if (hidden) {
1066-
debugger;
10671066
hiddenData[key] = result[key];
10681067
}
10691068
}

‎packages/form-render/src/index.d.ts

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,8 @@ export interface SchemaBase {
6262
enumNames: Array<string | number> | string;
6363
rules: RuleItem | RuleItem[];
6464
props: Record<string, any>;
65+
/**扩展字段 */
66+
'add-widget'?: string;
6567
}
6668

6769
export type Schema = Partial<SchemaBase>;
@@ -223,11 +225,20 @@ export interface FRProps {
223225
/** 表单提交后钩子 */
224226
onFinish?: (formData: any, error: Error[]) => void;
225227
/** 时时与外部更新同步的钩子 */
226-
onValuesChange?: (changedValues: any, formData: any) => void;
228+
onValuesChange?: (
229+
changedValues: {
230+
dataPath: string;
231+
value: any;
232+
dataIndex: number[] | unknown;
233+
},
234+
formData: any
235+
) => void;
227236
/** 隐藏的数据是否去掉，默认不去掉（false） */
228237
removeHiddenData?: boolean;
229238
/** 配置自定义layout组件 */
230239
layoutWidgets?: any;
240+
/** 扩展方法 */
241+
methods?: Record<string, Function>;
231242
}
232243

233244
declare const FR: React.FC<FRProps>;

0 commit comments

Comments
 (0)