doc & changelog

thethreekingdoms · Apr 17, 2020 · 6174647 · 6174647
1 parent dd5fd70
commit 6174647
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 15 deletions.
diff --git 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)）
+- [!] 折叠的列表的展示更加优雅
+  <img src="https://img.alicdn.com/tfs/TB1INDcCxD1gK0jSZFKXXcJrVXa-1466-866.png" width="500" />
+- [!][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 写错时，确保页面仍能展示并给出报错
+  <img src="https://img.alicdn.com/tfs/TB1anq2CpT7gK0jSZFpXXaTkpXa-1916-214.png" width="500" />
+- [!] switch 组件 label 展示恢复到左侧，与 checkbox 类区分。
+  <img src="https://img.alicdn.com/tfs/TB1xXndCxv1gK0jSZFFXXb0sXXa-518-158.png" width="200" />
+
 ### 0.5.3
 
 - [+] 新增了 `useLogger` 的全局 props。`useLogger={true}` 时，每当用户填写表单时，在 console 里的展示类似如下：

diff --git 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
@@ -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
diff --git 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
@@ -29,7 +29,7 @@ const DescriptionList = ({ schema = {}, value = [], index }) => {
         return item.title ? (
           <li
             className="overflow-hidden truncate"
-            style={{ width: '33%' }}
+            style={{ width: '33%', paddingRight: 8 }}
             key={i}
           >
             <span className="fw5">{item.title}: </span>