refactor: 优化代码，不需要this的组件使用 functional

1.不需要this的组件使用 functional 2.优化formUtils代码 3.更正补充文档

docs: 补充未完善文档

Author: lljj-x

packages/demo/src/index/views/Demo/schemaTypes/1.Simple/index.js

@@ -73,7 +73,9 @@ export default {
             'ui:options': {
                 placeholder: '请输入你的签名',
                 type: 'textarea',
-                rows: 6
+                attrs: {
+                    rows: 6
+                }
             }
         }
     },

packages/demo/src/index/views/Demo/schemaTypes/5.Widgets/index.js

@@ -104,7 +104,9 @@ export default {
             textarea: {
                 'ui:options': {
                     type: 'textarea',
-                    rows: 6,
+                    attrs: {
+                        rows: 6,
+                    },
                     autosize: {
                         minRows: 2,
                         maxRows: 4

packages/docs/docs/en/guide/basic-config.md

@@ -139,7 +139,6 @@ uiSchema = {
 
             // 其它所有参数会通过 props 传递给 widget 组件
             type: 'textarea',
-            rows: '6',
             placeholder: '请输入你的内容'
     }
 }
@@ -196,7 +195,8 @@ export default {
                     'ui:emptyValue': '',
                     'ui:options': {
                         attrs: {
-                            'autofocus': true
+                            'autofocus': true,
+                            rows: '6'
                         },
                         style: {
                             boxShadow: '0 0 6px 2px #2b9939'
@@ -205,7 +205,6 @@ export default {
                             className_hei: true
                         },
                         type: 'textarea',
-                        rows: '6',
                         placeholder: '请输入你的内容'
                     }
                 },

packages/docs/docs/zh/guide/basic-config.md

@@ -99,7 +99,7 @@ export default {
 * 默认值：`{}`
 
 >* `0.0.16` 之后版本支持配置 `uiSchema` 在 `schema` 参数中 [点击查看](#uischema配置在schema中)
->* `0.0.17` 之后版本支持配置 [errorSchema](#errorschema) 在 [uiSchema](#uischema) 中。（`uiSchema` 和 `errorSchema` 格式完全相同，且同属ui显示，一份可方便配置）
+>* `0.1.0` 之后版本支持配置 [errorSchema](#errorschema) 在 [uiSchema](#uischema) 中。（`uiSchema` 和 `errorSchema` 格式完全相同，且同属ui显示，一份可方便配置）
 
 用于配置表单展示样式，普通json数据，非 `JSON Schema` 规范
 
@@ -114,7 +114,7 @@ export default {
 * `ui:widget` `ui:field` `ui:fieldProps` 不支持配置在 `ui:options` 中
 :::
 
-参数格式如下：
+通用参数格式如下：
 ```js
 uiSchema = {
     'ui:title': '覆盖schema title', // 覆盖schema title
@@ -128,21 +128,35 @@ uiSchema = {
             showTitle: '是否显示标题', // 只对 type为`object`、`array` 类型有效
             showDescription: '是否显示描述信息', // 只对type为 `object`、`array` 类型有效
             attrs: {
-                // 通过 vue render函数 attrs 传递给 widget 组件
+                // 通过 vue render函数 attrs 传递给 Widget 组件，只能配置在叶子节点
                 autofocus: true
             },
             style: {
-                // 通过 vue render函数 style 传递给 widget 组件
+                // 通过 vue render函数 style 传递给 Widget 组件，只能配置在叶子节点
                 boxShadow: '0 0 6px 2px #2b9939'
             },
             class: {
-                // 通过 vue render函数 class 传递给 widget 组件
+                // 0.1.0 版本添加
+                // 通过 vue render函数 class 传递给 Widget 组件，只能配置在叶子节点
                 className_hei: true
             },
+            fieldStyle: {
+                // 0.1.0 版本添加
+                // 通过 vue render函数 style 传递给 Field 组件，支持所有field节点
+                background: 'red'
+            },
+            fieldClass: {
+                // 0.1.0 版本添加
+                // 通过 vue render函数 class 传递给 Field 组件，支持所有field节点
+                fieldClass: true
+            },
+            fieldAttrs: {
+                // 通过 vue render函数 attrs 传递给 Field 组件，支持所有field节点
+                'attr-x': 'xxx'
+            },
 
-            // 其它所有参数会通过 props 传递给 widget 组件
+            // 其它所有参数会通过 props 传递给 Widget 组件
             type: 'textarea',
-            rows: '6',
             placeholder: '请输入你的内容'
     }
 }
@@ -343,7 +357,7 @@ uiSchema = {
 * 默认值：`{}`
 
 >* `0.0.16` 之后版本支持配置 `errorSchema` 在 `schema` 参数中 [点击查看](#errorschema配置在schema中)
->* `0.0.17` 之后版本支持配置 [errorSchema](#errorschema) 在 [uiSchema](#uischema) 中。（`uiSchema` 和 `errorSchema` 格式完全相同，且同属ui显示，一份可方便配置）
+>* `0.1.0` 之后版本支持配置 [errorSchema](#errorschema) 在 [uiSchema](#uischema) 中。（`uiSchema` 和 `errorSchema` 格式完全相同，且同属ui显示，一份可方便配置）
 
 用于配置表单校验错误文案信息，普通json数据，非JSON Schema规范
 

packages/docs/docs/zh/guide/todo.md

@@ -19,9 +19,9 @@
 - [x] ui:widget 支持在array级别传入
 - [x] customRule 参数 支持
 - [x] 逐步开源发布
+- [x 优化源码 不需要this的组件调整为 functional
 
 - [ ] 添加代码测试
 - [ ] Ui配置，支持函数表达式配置，hidden title description placeholder等
-- [ ] 优化源码 不需要this的组件调整为 functional
 - [ ] 对照react schema from适配更多规则支持
 - [ ] 解耦elementUi 重新开发form 和formItem组件，通过配置化实现适配elementUi iView 等常用ui组件

packages/docs/docs/zh/rules/array.md

@@ -253,3 +253,18 @@
 ```
 :::
 
+## 其它配置
+* 支持通过配置 `uiSchema` `ui:addable`、`ui:sortable`、`ui:removable` 配置数组是否可添加/排序/移除
+* 参见 [uiSchema 配置](https://form.lljj.me/#/demo?type=Arrays)
+
+比如：
+```js
+// 支持 * 匹配其它值
+uiSchema = {
+    'ui:options': {
+        addable: false,
+        sortable: false,
+        removable: false
+    }
+}
+```

packages/lib/src/JsonSchemaForm/common/formUtils.js

@@ -4,38 +4,12 @@ import retrieveSchema from './schema/retriev';
 
 import { isObject, getSchemaType } from './utils';
 
-// 解析当前节点 ui widget
-export function getUiWidget({
-    schema = {},
-    uiSchema = {}
-}, fallback) {
-    // uiSchema 配置了widget 直接使用
-    const uiWidget = uiSchema['ui:widget'] || schema['ui:widget'];
-
-    if (uiWidget) {
-        return {
-            widget: uiWidget
-        };
-    }
-
-    if (fallback) {
-        // 没配置widget 回退到具体field方案配置
-        return fallback({ schema, uiSchema });
-    }
-
-    return {};
-}
-
 // 是否为 hidden Widget
 export function isHiddenWidget({
     schema = {},
     uiSchema = {}
 }) {
-    const { widget } = getUiWidget({
-        schema,
-        uiSchema,
-    });
-
+    const widget = uiSchema['ui:widget'] || schema['ui:widget'];
     return widget === 'HiddenWidget' || widget === 'hidden';
 }
 
@@ -90,7 +64,6 @@ export function getUserUiOptions({
             }
             return { ...options, [key.substring(3)]: value };
         }, {})));
-
 }
 
 // 解析当前节点的ui options参数
@@ -126,10 +99,6 @@ export function getUiOptions({
     return {
         title: schema.title, // 默认使用 schema 的配置
         description: schema.description,
-        hidden: isHiddenWidget({
-            schema,
-            uiSchema
-        }),
 
         // 特殊处理部分
         ...spec,
@@ -147,17 +116,19 @@ export function getUiOptions({
 export function getWidgetConfig({
     schema = {},
     uiSchema = {}
-}, fallback = () => {}) {
-    const widgetConfig = {
-        ...getUiOptions({
-            schema,
-            uiSchema
-        }),
-        ...getUiWidget({
+}, fallback = null) {
+    const uiOptions = getUiOptions({
+        schema,
+        uiSchema
+    });
+
+    // 没有配置 Widget ，各个Field组件根据类型判断
+    if (!uiOptions.widget && fallback) {
+        Object.assign(uiOptions, fallback({
             schema,
             uiSchema
-        }, fallback)
-    };
+        }));
+    }
 
     const {
         widget,
@@ -172,7 +143,7 @@ export function getWidgetConfig({
         fieldClass,
         emptyValue,
         ...uiProps
-    } = widgetConfig;
+    } = uiOptions;
 
     return {
         widget,

packages/lib/src/JsonSchemaForm/fields/ArrayField/arrayTypes/ArrayFieldDateRange.js

@@ -24,6 +24,7 @@ export default {
         return h(
             Widget,
             {
+                ...context.data,
                 props: {
                     ...context.props,
                     ...widgetConfig

packages/lib/src/JsonSchemaForm/fields/ArrayField/arrayTypes/ArrayFieldMultiSelect.js

@@ -14,21 +14,23 @@ import Widget from '../../../fieldComponents/Widget';
 
 export default {
     name: 'ArrayFieldMultiSelect',
+    functional: true,
     props: {
-        ...vueProps,
-        itemsFormData: {
-            type: Array,
-            default: () => []
-        }
+        ...vueProps
     },
-    render(h) {
+    render(h, context) {
+        const {
+            schema, rootSchema, uiSchema
+        } = context.props;
+
         // 这里需要索引当前节点，通过到schemaField组件的会统一处理
-        const itemsSchema = retrieveSchema(this.schema.items, this.rootSchema, this.itemsFormData);
-        const enumOptions = optionsList(itemsSchema, this.uiSchema);
+        const itemsSchema = retrieveSchema(schema.items, rootSchema);
+
+        const enumOptions = optionsList(itemsSchema, uiSchema);
 
         const widgetConfig = getWidgetConfig({
-            schema: this.schema,
-            uiSchema: this.uiSchema
+            schema,
+            uiSchema
         }, () => ({
             widget: WIDGET_MAP.common.checkboxGroup
         }));
@@ -41,8 +43,9 @@ export default {
         return h(
             Widget,
             {
+                ...context.data,
                 props: {
-                    ...this.$props,
+                    ...context.props,
                     ...widgetConfig
                 }
             }

packages/lib/src/JsonSchemaForm/fields/ArrayField/arrayTypes/ArrayFieldNormal.js

@@ -13,17 +13,18 @@ import vueProps from '../../props';
 
 export default {
     name: 'ArrayFieldNormal',
+    functional: true,
     props: {
         ...vueProps,
         itemsFormData: {
             type: Array,
             // default: () => []
         }
     },
-    render(h) {
+    render(h, context) {
         const {
-            schema, uiSchema, errorSchema
-        } = this.$props;
+            schema, uiSchema, curNodePath, itemsFormData, errorSchema
+        } = context.props;
 
         const {
             title,
@@ -41,19 +42,19 @@ export default {
             uiSchema
         });
 
-        const arrayItemsVNodeList = this.itemsFormData.map((item, index) => ({
+        const arrayItemsVNodeList = itemsFormData.map((item, index) => ({
             key: item.key,
             vNode: h(
                 SchemaField,
                 {
                     key: item.key,
                     props: {
-                        ...this.$props,
+                        ...context.props,
                         schema: schema.items,
                         required: !([].concat(schema.items.type).includes('null')),
                         uiSchema: uiSchema.items,
                         errorSchema: errorSchema.items,
-                        curNodePath: computedCurPath(this.curNodePath, index)
+                        curNodePath: computedCurPath(curNodePath, index)
                     }
                 }
             )
@@ -68,7 +69,10 @@ export default {
                     showTitle,
                     showDescription
                 },
-                class: fieldClass,
+                class: {
+                    ...context.data.class,
+                    ...fieldClass
+                },
                 attrs: fieldAttrs,
                 style: fieldStyle,
             },
@@ -84,7 +88,7 @@ export default {
                             maxItems: schema.maxItems,
                             minItems: schema.minItems,
                         },
-                        on: this.$listeners
+                        on: context.listeners
                     }
                 )
             ]