diff --git a/CHANGELOG.md b/CHANGELOG.md index 2341003cb..a435505db 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,16 @@ # Change Log +### 0.5.4 + +- [+] 很多同学反馈列表展示需要一个序号。新版默认会添加序号,并可以使用`hideIndex`属性关闭恢复到旧的无序号展示([84](https://github.com/alibaba/form-render/issues/84)) +- [!] 折叠的列表的展示更加优雅 + +- [!][breaking] 使用 antd 的 UI 时,列表 schema 的`ui:buttons`和`ui:itemButtons`属性里使用的 icon 的名称一律统一到 antd v4 的 icon 名称。详见[antd 文档-icon](https://ant.design/components/icon/)。旧用户如果有添加自定义按钮,那么图标的字段需要修改成新版名称,否则图标不会展示(并不影响使用)。这个决定出于两个原因:1. 新用户使用 icon 时不应该去翻找旧版 antd 的文档;2. antd 升级 4 后向前的兼容并不理想。 +- [!] schema 的 type 写错时,确保页面仍能展示并给出报错 + +- [!] switch 组件 label 展示恢复到左侧,与 checkbox 类区分。 + + ### 0.5.3 - [+] 新增了 `useLogger` 的全局 props。`useLogger={true}` 时,每当用户填写表单时,在 console 里的展示类似如下: diff --git a/demo/json/new-feature.json b/demo/json/new-feature.json index 47a1cf949..b6ce9aaf2 100644 --- a/demo/json/new-feature.json +++ b/demo/json/new-feature.json @@ -11,15 +11,25 @@ "a": { "title": "简单输入框", "type": "string" + }, + "b": { + "title": "是否判断", + "type": "boolean" + }, + "c": { + "title": "开关", + "type": "boolean", + "ui:widget": "switch" } } }, - "default": [{ "a": "happy" }], + "default": [{ "a": "happy", "b": false, "c": false }, {}], "ui:options": { + "foldable": true, "itemButtons": [ { "text": "复制", - "icon": "copy", + "icon": "UpCircleOutlined", "callback": "copyMe" } ] @@ -106,7 +116,8 @@ "description": "数组item中含有数组等", "type": "array", "ui:options": { - "foldable": true + "foldable": true, + "hideIndex": true }, "items": { "type": "object", diff --git a/docs/ui-schema.md b/docs/ui-schema.md index ddbe667cc..8fa8dd776 100644 --- a/docs/ui-schema.md +++ b/docs/ui-schema.md @@ -132,13 +132,14 @@ 1. **基本上所有`antd`/ `fusion`文档中组件的 props 都可以使用 `ui:options` 的方式来直接使用。** 2. form-render 也内置了几个的常用的`ui:options`: -| option | 类型 | 可用组件 | 说明 | -| ----------- | :----------------------------------------: | :-----------: | :-----------------------------------------------------------------------------: | -| foldable | boolean | 列表(array) | `{ foldable: true }`用于长列表的收起和展开 | -| hideDelete | boolean / (formData, rootValue) => boolean | 列表(array) | `{ hideDelete: true }`隐藏“删除”按钮。若要隐藏增删改查,使用`ui:readonly`: true | -| buttons | array | 列表(array) | 下详 (注 2) | -| itemButtons | array | 列表(array) | 下详 (注 3) | -| picker | "week"/"month"/"year" | 日期(date) | 使用 WeekPicker、MonthPicker 和 YearPicker (注 1) | +| option | 类型 | 可用组件 | 说明 | +| ----------- | :----------------------------------------: | :-----------: | :-------------------------------------------------------------------------: | +| foldable | boolean | 列表(array) | `{ foldable: true }`用于长列表的收起和展开 | +| hideDelete | boolean / (formData, rootValue) => boolean | 列表(array) | `{ hideDelete: true }`隐藏“删除”按钮。隐藏全部操作,使用`ui:readonly`: true | +| hideIndex | boolean | 列表(array) | 是否隐藏列表 item 的序号标 | +| buttons | array | 列表(array) | 下详 (注 2) | +| itemButtons | array | 列表(array) | 下详 (注 3) | +| picker | "week"/"month"/"year" | 日期(date) | 使用 WeekPicker、MonthPicker 和 YearPicker (注 1) | **注 1:** picker 的简单用法如下: diff --git a/package-lock.json b/package-lock.json index dbe3682f2..5da382312 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "form-render", - "version": "0.5.3", + "version": "0.5.4-beta", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 600d608f4..a353531e0 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "form-render", - "version": "0.5.4", + "version": "0.5.4-beta", "description": "通过 JSON Schema 生成标准 Form,常用于自定义搭建配置界面生成", "repository": { "type": "git", @@ -37,9 +37,8 @@ }, "dependencies": { "@alifd/next": "^1.x", - "@ant-design/compatible": "^1.0.1", "@ant-design/icons": "^4.0.2", - "antd": "4.0.0", + "antd": "^4.0.0", "moment": "^2.24.0", "pope": "^2.0.2", "prop-types": "^15.x", diff --git a/src/components/descList.jsx b/src/components/descList.jsx index d529c24ac..0bb7875ea 100644 --- a/src/components/descList.jsx +++ b/src/components/descList.jsx @@ -29,7 +29,7 @@ const DescriptionList = ({ schema = {}, value = [], index }) => { return item.title ? (
  • {item.title}: