form-render-v3 3.0.0-alpha.1 → 3.0.0-alpha.3

package/es/form-core/index.js

@@ -51,6 +51,7 @@ var FormCore = function FormCore(props) {
     schemProps = __rest(_f, ["type", "properties"]);
   var _transformProps = transformProps(Object.assign(Object.assign({}, props), schemProps)),
     formProps = _transformProps.formProps,
+    style = _transformProps.style,
     displayType = _transformProps.displayType,
     beforeFinish = _transformProps.beforeFinish,
     watch = _transformProps.watch,
@@ -281,7 +282,10 @@ var FormCore = function FormCore(props) {
   }
   return /*#__PURE__*/React.createElement(_Form, Object.assign({
     className: classNames('fr-form', _defineProperty({}, className, !!className)),
-    labelWrap: true
+    labelWrap: true,
+    style: Object.assign({
+      maxWidth: maxWidth
+    }, style)
   }, formProps, {
     disabled: disabled,
     form: form,

package/es/models/mapping.d.ts

@@ -23,7 +23,6 @@ export declare const mapping: {
     'string:quarter': string;
     'string:time': string;
     'string:textarea': string;
-    'string:color': string;
     'string:image': string;
     'range:time': string;
     'range:dateTime': string;
@@ -63,7 +62,6 @@ export declare function getWidgetName(schema: any, _mapping?: {
     'string:quarter': string;
     'string:time': string;
     'string:textarea': string;
-    'string:color': string;
     'string:image': string;
     'range:time': string;
     'range:dateTime': string;

package/es/models/mapping.js

@@ -23,7 +23,7 @@ export var mapping = {
   'string:quarter': 'datePicker',
   'string:time': 'timePicker',
   'string:textarea': 'textArea',
-  'string:color': 'color',
+  // 'string:color': 'color',
   'string:image': 'imageInput',
   'range:time': 'timeRange',
   'range:dateTime': 'dateRange',

package/es/models/transformProps.d.ts

@@ -27,6 +27,7 @@ declare const transformProps: (props: any) => {
     labelCol: any;
     fieldCol: any;
     maxWidth: any;
+    style: any;
     className: any;
     validateTrigger: any;
     antdVersion: any;

package/es/models/transformProps.js

@@ -6,6 +6,7 @@ var displayTypeEnum = {
 };
 var transformProps = function transformProps(props) {
   var schema = props.schema,
+    style = props.style,
     beforeFinish = props.beforeFinish,
     onMount = props.onMount,
     _props$displayType = props.displayType,
@@ -38,7 +39,7 @@ var transformProps = function transformProps(props) {
     className = props.className,
     validateTrigger = props.validateTrigger,
     antdVersion = props.antdVersion,
-    otherProps = __rest(props, ["schema", "beforeFinish", "onMount", "displayType", "watch", "removeHiddenData", "readOnly", "column", "mapping", "debugCss", "locale", "configProvider", "validateMessages", "debug", "id", "labelWidth", "maxWidth", "form", "onFinish", "onFinishFailed", "footer", "operateExtra", "logOnMount", "logOnSubmit", "labelCol", "fieldCol", "disabled", "className", "validateTrigger", "antdVersion"]);
+    otherProps = __rest(props, ["schema", "style", "beforeFinish", "onMount", "displayType", "watch", "removeHiddenData", "readOnly", "column", "mapping", "debugCss", "locale", "configProvider", "validateMessages", "debug", "id", "labelWidth", "maxWidth", "form", "onFinish", "onFinishFailed", "footer", "operateExtra", "logOnMount", "logOnSubmit", "labelCol", "fieldCol", "disabled", "className", "validateTrigger", "antdVersion"]);
   var formProps = Object.assign({}, otherProps);
   if (displayType) {
     formProps.layout = displayTypeEnum[displayType] || 'horizontal';
@@ -72,6 +73,7 @@ var transformProps = function transformProps(props) {
     labelCol: labelCol,
     fieldCol: fieldCol,
     maxWidth: maxWidth,
+    style: style,
     className: className,
     validateTrigger: validateTrigger,
     antdVersion: antdVersion

package/es/models/validates.js

@@ -7,7 +7,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
 function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
 import { __awaiter } from "tslib";
-import Color from 'color';
+// import Color from 'color';
 import { isUrl, isObject, isFunction } from '../utils';
 import { cloneDeep } from 'lodash-es';
 var insertLengthRule = function insertLengthRule(schema, rules) {
@@ -119,7 +119,7 @@ export var transformRules = function transformRules() {
   });
 };
 export default (function (_schema, form, methods, fieldRef) {
-  var _a, _b;
+  var _a;
   var schema = cloneDeep(_schema);
   var format = schema.format,
     _schema$rules = schema.rules,
@@ -132,18 +132,18 @@ export default (function (_schema, form, methods, fieldRef) {
   rules.push({
     validator: function validator(_) {
       return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regenerator().m(function _callee2() {
-        var _c, _d, res;
+        var _b, _c, res;
         return _regenerator().w(function (_context2) {
           while (1) switch (_context2.n) {
             case 0:
-              if (isFunction((_c = fieldRef === null || fieldRef === void 0 ? void 0 : fieldRef.current) === null || _c === void 0 ? void 0 : _c.validator)) {
+              if (isFunction((_b = fieldRef === null || fieldRef === void 0 ? void 0 : fieldRef.current) === null || _b === void 0 ? void 0 : _b.validator)) {
                 _context2.n = 1;
                 break;
               }
               return _context2.a(2, true);
             case 1:
               _context2.n = 2;
-              return (_d = fieldRef.current) === null || _d === void 0 ? void 0 : _d.validator();
+              return (_c = fieldRef.current) === null || _c === void 0 ? void 0 : _c.validator();
             case 2:
               res = _context2.v;
               return _context2.a(2, res);
@@ -184,18 +184,18 @@ export default (function (_schema, form, methods, fieldRef) {
       message: (_a = message === null || message === void 0 ? void 0 : message.email) !== null && _a !== void 0 ? _a : '请输入正确的图片格式'
     });
   }
-  if (format === 'color') {
-    rules.push({
-      validator: function validator(_, value) {
-        try {
-          Color(value || null); // 空字符串无法解析会报错，出现空的情况传 null
-          return true;
-        } catch (e) {
-          return false;
-        }
-      },
-      message: (_b = message === null || message === void 0 ? void 0 : message.color) !== null && _b !== void 0 ? _b : '请填写正确的颜色格式'
-    });
-  }
+  // if (format === 'color') {
+  //   rules.push({
+  //     validator: (_: any, value: any) => {
+  //       try {
+  //         Color(value || null); // 空字符串无法解析会报错，出现空的情况传 null
+  //         return true;
+  //       } catch (e) {
+  //         return false;
+  //       }
+  //     },
+  //     message: message?.color ?? '请填写正确的颜色格式'
+  //   });
+  // }
   return transformRules(rules, methods, form);
 });

package/es/render-core/FieldItem/field.js

@@ -13,8 +13,8 @@ export var FieldWrapperStatus = function FieldWrapperStatus(props) {
     fieldProps = props.fieldProps,
     maxWidth = props.maxWidth,
     initialValue = props.initialValue,
-    acitonRender = props.acitonRender,
-    otherProps = __rest(props, ["Field", "fieldProps", "maxWidth", "initialValue", "acitonRender"]);
+    actionRender = props.actionRender,
+    otherProps = __rest(props, ["Field", "fieldProps", "maxWidth", "initialValue", "actionRender"]);
   var onStatusChange = fieldProps.onStatusChange,
     addons = fieldProps.addons,
     otherFieldProps = __rest(fieldProps, ["onStatusChange", "addons"]);
@@ -33,17 +33,17 @@ export var FieldWrapperStatus = function FieldWrapperStatus(props) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Field, Object.assign({}, otherProps, otherFieldProps, {
     style: style,
     addons: addons
-  })), acitonRender && (/*#__PURE__*/React.createElement("span", {
+  })), actionRender && (/*#__PURE__*/React.createElement("span", {
     className: 'ant-form-item-actions'
-  }, acitonRender())));
+  }, actionRender())));
 };
 export var FieldWrapper = function FieldWrapper(props) {
   var Field = props.Field,
     fieldProps = props.fieldProps,
     maxWidth = props.maxWidth,
     initialValue = props.initialValue,
-    acitonRender = props.acitonRender,
-    otherProps = __rest(props, ["Field", "fieldProps", "maxWidth", "initialValue", "acitonRender"]);
+    actionRender = props.actionRender,
+    otherProps = __rest(props, ["Field", "fieldProps", "maxWidth", "initialValue", "actionRender"]);
   var addons = fieldProps.addons,
     schema = fieldProps.schema;
   var _style = maxWidth ? Object.assign({
@@ -75,7 +75,7 @@ export var FieldWrapper = function FieldWrapper(props) {
     danger: true
   }, removeBtn, {
     onClick: handleRemove
-  }), (removeBtn === null || removeBtn === void 0 ? void 0 : removeBtn.text) || t('delete'))), acitonRender && (/*#__PURE__*/React.createElement("span", {
+  }), (removeBtn === null || removeBtn === void 0 ? void 0 : removeBtn.text) || t('delete'))), actionRender && (/*#__PURE__*/React.createElement("span", {
     className: 'fr-item-actions'
-  }, acitonRender())));
+  }, actionRender())));
 };

package/es/render-core/FieldItem/main.js

@@ -197,7 +197,7 @@ export default (function (props) {
     fieldProps: fieldProps,
     maxWidth: maxWidth,
     initialValue: initialValue,
-    acitonRender: action ? function () {
+    actionRender: action ? function () {
       return action;
     } : undefined
   })) : (/*#__PURE__*/React.createElement(FieldWrapper, {
@@ -205,7 +205,7 @@ export default (function (props) {
     fieldProps: fieldProps,
     maxWidth: maxWidth,
     initialValue: initialValue,
-    acitonRender: action ? function () {
+    actionRender: action ? function () {
       return action;
     } : undefined
   })));

package/es/type.d.ts

@@ -22,7 +22,7 @@ export interface SchemaBase {
     title?: string;
     description?: string;
     descType?: 'text' | 'icon';
-    format?: 'image' | 'textarea' | 'color' | 'email' | 'url' | 'dateTime' | 'date' | 'time' | 'upload' | (string & {});
+    format?: 'image' | 'textarea' | 'email' | 'url' | 'dateTime' | 'date' | 'time' | 'upload' | (string & {});
     default?: any;
     /** 是否必填，支持 `'{{ formData.xxx === "" }}'` 形式的表达式 */
     required?: boolean | string;

package/es/widgets/boxCollapse/index.js

@@ -1,6 +1,6 @@
-import _DownOutlined from "@ant-design/icons/es/icons/DownOutlined";
 import "antd/es/collapse/style";
 import _Collapse from "antd/es/collapse";
+import _DownOutlined from "@ant-design/icons/es/icons/DownOutlined";
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -10,7 +10,6 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import React, { useState } from 'react';
 import "./index.css";
 import BoxPanel from '../components/PanelView';
-var Panel = _Collapse.Panel;
 /**
  * 折叠面板
  */
@@ -60,11 +59,13 @@ var BoxCollapse = function BoxCollapse(props) {
     expandIcon: renderExpandIcon,
     onChange: function onChange() {
       return setActiveKey(activeKey ? '' : 'single');
-    }
-  }, /*#__PURE__*/React.createElement(Panel, {
-    key: 'single',
-    header: collapseHeader,
-    forceRender: true
-  }, children));
+    },
+    items: [{
+      key: 'single',
+      forceRender: true,
+      label: collapseHeader,
+      children: children
+    }]
+  });
 };
 export default BoxCollapse;

package/es/widgets/fields/imageInput/index.js

@@ -1,5 +1,7 @@
 import "antd/es/input/style";
 import _Input from "antd/es/input";
+import "antd/es/space/style";
+import _Space from "antd/es/space";
 import _PictureOutlined from "@ant-design/icons/es/icons/PictureOutlined";
 import "antd/es/popover/style";
 import _Popover from "antd/es/popover";
@@ -28,11 +30,10 @@ var PreviewNode = function PreviewNode(_ref) {
 var ImageInput = function ImageInput(_a) {
   var value = _a.value,
     rest = __rest(_a, ["value"]);
-  return /*#__PURE__*/React.createElement(_Input, Object.assign({
-    value: value,
-    addonAfter: /*#__PURE__*/React.createElement(PreviewNode, {
-      value: value
-    })
-  }, rest));
+  return /*#__PURE__*/React.createElement(_Space.Compact, null, /*#__PURE__*/React.createElement(_Input, Object.assign({
+    value: value
+  }, rest)), /*#__PURE__*/React.createElement(PreviewNode, {
+    value: value
+  }));
 };
 export default withFieldWrap(ImageInput);

package/es/widgets/fields/urlInput/index.js

@@ -1,5 +1,7 @@
 import "antd/es/input/style";
 import _Input from "antd/es/input";
+import "antd/es/space/style";
+import _Space from "antd/es/space";
 import "antd/es/config-provider/style";
 import _ConfigProvider from "antd/es/config-provider";
 import { __rest } from "tslib";
@@ -49,15 +51,14 @@ var UrlInput = function UrlInput(_a) {
     }
     onChange === null || onChange === void 0 ? void 0 : onChange(_value);
   };
-  return /*#__PURE__*/React.createElement(_Input, Object.assign({
+  return /*#__PURE__*/React.createElement(_Space.Compact, null, /*#__PURE__*/React.createElement(_Input, Object.assign({
     value: _value,
     prefix: prefix,
     suffix: suffix,
-    onChange: handleChange,
-    addonAfter: /*#__PURE__*/React.createElement(UrlNode, {
-      value: value,
-      addonText: addonText
-    })
-  }, rest));
+    onChange: handleChange
+  }, rest)), /*#__PURE__*/React.createElement(UrlNode, {
+    value: value,
+    addonText: addonText
+  }));
 };
 export default withFieldWrap(UrlInput);

package/es/widgets/listCard/index.js

@@ -101,8 +101,8 @@ var CardList = function CardList(props) {
         'fr-list-item-operate-fixed': getOperateFixed(schema)
       }),
       style: getOperateStyle(schema),
-      split: operateBtnType !== 'icon' && /*#__PURE__*/React.createElement(_Divider, {
-        type: 'vertical'
+      separator: operateBtnType !== 'icon' && /*#__PURE__*/React.createElement(_Divider, {
+        orientation: 'vertical'
       })
     }, !hideMove && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FButton, Object.assign({
       disabled: name === 0,

package/es/widgets/listDrawer/index.js

@@ -206,8 +206,8 @@ var TableList = function TableList(props) {
       render: function render(_, field) {
         return /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(_Space, {
           className: 'fr-list-item-operate',
-          split: operateBtnType !== 'icon' && /*#__PURE__*/React.createElement(_Divider, {
-            type: 'vertical'
+          separator: operateBtnType !== 'icon' && /*#__PURE__*/React.createElement(_Divider, {
+            orientation: 'vertical'
           })
         }, !hideMove && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FButton, Object.assign({
           disabled: field.name === 0,

package/es/widgets/listSimple/index.js

@@ -81,8 +81,8 @@ var SimpleList = function SimpleList(props) {
       rootPath: [].concat(_toConsumableArray(rootPath), [name])
     }), /*#__PURE__*/React.createElement(_Space, {
       className: classnames('fr-list-item-operate'),
-      split: operateBtnType !== 'icon' && /*#__PURE__*/React.createElement(_Divider, {
-        type: 'vertical'
+      separator: operateBtnType !== 'icon' && /*#__PURE__*/React.createElement(_Divider, {
+        orientation: 'vertical'
       })
     }, !hideMove && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FButton, Object.assign({
       disabled: name === 0,

package/es/widgets/listTable/index.js

@@ -169,8 +169,8 @@ var TableList = function TableList(props) {
       render: function render(_, field) {
         return /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(_Space, {
           className: 'fr-list-item-operate',
-          split: operateBtnType !== 'icon' && /*#__PURE__*/React.createElement(_Divider, {
-            type: 'vertical'
+          separator: operateBtnType !== 'icon' && /*#__PURE__*/React.createElement(_Divider, {
+            orientation: 'vertical'
           })
         }, !hideMove && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FButton, Object.assign({
           disabled: field.name === 0,

package/es/widgets/listVirtual/index.js

@@ -159,8 +159,8 @@ var VirtualList = function VirtualList(props) {
       render: function render(_, field) {
         return /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(_Space, {
           className: 'fr-list-item-operate',
-          split: operateBtnType !== 'icon' && /*#__PURE__*/React.createElement(_Divider, {
-            type: 'vertical'
+          separator: operateBtnType !== 'icon' && /*#__PURE__*/React.createElement(_Divider, {
+            orientation: 'vertical'
           })
         }, !hideMove && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FButton, Object.assign({
           disabled: field.name === 0,

package/lib/form-core/index.js

@@ -59,6 +59,7 @@ var FormCore = function FormCore(props) {
     schemProps = (0, _tslib.__rest)(_f, ["type", "properties"]);
   var _transformProps = (0, _transformProps2.default)(Object.assign(Object.assign({}, props), schemProps)),
     formProps = _transformProps.formProps,
+    style = _transformProps.style,
     displayType = _transformProps.displayType,
     beforeFinish = _transformProps.beforeFinish,
     watch = _transformProps.watch,
@@ -289,7 +290,10 @@ var FormCore = function FormCore(props) {
   }
   return /*#__PURE__*/_react.default.createElement(_form.default, Object.assign({
     className: (0, _classnames.default)('fr-form', _defineProperty({}, className, !!className)),
-    labelWrap: true
+    labelWrap: true,
+    style: Object.assign({
+      maxWidth: maxWidth
+    }, style)
   }, formProps, {
     disabled: disabled,
     form: form,

package/lib/models/mapping.d.ts

@@ -23,7 +23,6 @@ export declare const mapping: {
     'string:quarter': string;
     'string:time': string;
     'string:textarea': string;
-    'string:color': string;
     'string:image': string;
     'range:time': string;
     'range:dateTime': string;
@@ -63,7 +62,6 @@ export declare function getWidgetName(schema: any, _mapping?: {
     'string:quarter': string;
     'string:time': string;
     'string:textarea': string;
-    'string:color': string;
     'string:image': string;
     'range:time': string;
     'range:dateTime': string;

package/lib/models/mapping.js

@@ -31,7 +31,7 @@ var mapping = exports.mapping = {
   'string:quarter': 'datePicker',
   'string:time': 'timePicker',
   'string:textarea': 'textArea',
-  'string:color': 'color',
+  // 'string:color': 'color',
   'string:image': 'imageInput',
   'range:time': 'timeRange',
   'range:dateTime': 'dateRange',

package/lib/models/transformProps.d.ts

@@ -27,6 +27,7 @@ declare const transformProps: (props: any) => {
     labelCol: any;
     fieldCol: any;
     maxWidth: any;
+    style: any;
     className: any;
     validateTrigger: any;
     antdVersion: any;

package/lib/models/transformProps.js

@@ -12,6 +12,7 @@ var displayTypeEnum = {
 };
 var transformProps = function transformProps(props) {
   var schema = props.schema,
+    style = props.style,
     beforeFinish = props.beforeFinish,
     onMount = props.onMount,
     _props$displayType = props.displayType,
@@ -44,7 +45,7 @@ var transformProps = function transformProps(props) {
     className = props.className,
     validateTrigger = props.validateTrigger,
     antdVersion = props.antdVersion,
-    otherProps = (0, _tslib.__rest)(props, ["schema", "beforeFinish", "onMount", "displayType", "watch", "removeHiddenData", "readOnly", "column", "mapping", "debugCss", "locale", "configProvider", "validateMessages", "debug", "id", "labelWidth", "maxWidth", "form", "onFinish", "onFinishFailed", "footer", "operateExtra", "logOnMount", "logOnSubmit", "labelCol", "fieldCol", "disabled", "className", "validateTrigger", "antdVersion"]);
+    otherProps = (0, _tslib.__rest)(props, ["schema", "style", "beforeFinish", "onMount", "displayType", "watch", "removeHiddenData", "readOnly", "column", "mapping", "debugCss", "locale", "configProvider", "validateMessages", "debug", "id", "labelWidth", "maxWidth", "form", "onFinish", "onFinishFailed", "footer", "operateExtra", "logOnMount", "logOnSubmit", "labelCol", "fieldCol", "disabled", "className", "validateTrigger", "antdVersion"]);
   var formProps = Object.assign({}, otherProps);
   if (displayType) {
     formProps.layout = displayTypeEnum[displayType] || 'horizontal';
@@ -78,6 +79,7 @@ var transformProps = function transformProps(props) {
     labelCol: labelCol,
     fieldCol: fieldCol,
     maxWidth: maxWidth,
+    style: style,
     className: className,
     validateTrigger: validateTrigger,
     antdVersion: antdVersion

package/lib/models/validates.js

@@ -5,10 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.transformRules = exports.default = void 0;
 var _tslib = require("tslib");
-var _color = _interopRequireDefault(require("color"));
 var _utils = require("../utils");
 var _lodashEs = require("lodash-es");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -16,7 +14,7 @@ function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Sym
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
-function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); } // import Color from 'color';
 var insertLengthRule = function insertLengthRule(schema, rules) {
   var type = schema.type,
     max = schema.max,
@@ -126,7 +124,7 @@ var transformRules = exports.transformRules = function transformRules() {
   });
 };
 var _default = exports.default = function _default(_schema, form, methods, fieldRef) {
-  var _a, _b;
+  var _a;
   var schema = (0, _lodashEs.cloneDeep)(_schema);
   var format = schema.format,
     _schema$rules = schema.rules,
@@ -139,18 +137,18 @@ var _default = exports.default = function _default(_schema, form, methods, field
   rules.push({
     validator: function validator(_) {
       return (0, _tslib.__awaiter)(void 0, void 0, void 0, /*#__PURE__*/_regenerator().m(function _callee2() {
-        var _c, _d, res;
+        var _b, _c, res;
         return _regenerator().w(function (_context2) {
           while (1) switch (_context2.n) {
             case 0:
-              if ((0, _utils.isFunction)((_c = fieldRef === null || fieldRef === void 0 ? void 0 : fieldRef.current) === null || _c === void 0 ? void 0 : _c.validator)) {
+              if ((0, _utils.isFunction)((_b = fieldRef === null || fieldRef === void 0 ? void 0 : fieldRef.current) === null || _b === void 0 ? void 0 : _b.validator)) {
                 _context2.n = 1;
                 break;
               }
               return _context2.a(2, true);
             case 1:
               _context2.n = 2;
-              return (_d = fieldRef.current) === null || _d === void 0 ? void 0 : _d.validator();
+              return (_c = fieldRef.current) === null || _c === void 0 ? void 0 : _c.validator();
             case 2:
               res = _context2.v;
               return _context2.a(2, res);
@@ -191,18 +189,18 @@ var _default = exports.default = function _default(_schema, form, methods, field
       message: (_a = message === null || message === void 0 ? void 0 : message.email) !== null && _a !== void 0 ? _a : '请输入正确的图片格式'
     });
   }
-  if (format === 'color') {
-    rules.push({
-      validator: function validator(_, value) {
-        try {
-          (0, _color.default)(value || null); // 空字符串无法解析会报错，出现空的情况传 null
-          return true;
-        } catch (e) {
-          return false;
-        }
-      },
-      message: (_b = message === null || message === void 0 ? void 0 : message.color) !== null && _b !== void 0 ? _b : '请填写正确的颜色格式'
-    });
-  }
+  // if (format === 'color') {
+  //   rules.push({
+  //     validator: (_: any, value: any) => {
+  //       try {
+  //         Color(value || null); // 空字符串无法解析会报错，出现空的情况传 null
+  //         return true;
+  //       } catch (e) {
+  //         return false;
+  //       }
+  //     },
+  //     message: message?.color ?? '请填写正确的颜色格式'
+  //   });
+  // }
   return transformRules(rules, methods, form);
 };

package/lib/render-core/FieldItem/field.js

@@ -22,8 +22,8 @@ var FieldWrapperStatus = exports.FieldWrapperStatus = function FieldWrapperStatu
     fieldProps = props.fieldProps,
     maxWidth = props.maxWidth,
     initialValue = props.initialValue,
-    acitonRender = props.acitonRender,
-    otherProps = (0, _tslib.__rest)(props, ["Field", "fieldProps", "maxWidth", "initialValue", "acitonRender"]);
+    actionRender = props.actionRender,
+    otherProps = (0, _tslib.__rest)(props, ["Field", "fieldProps", "maxWidth", "initialValue", "actionRender"]);
   var onStatusChange = fieldProps.onStatusChange,
     addons = fieldProps.addons,
     otherFieldProps = (0, _tslib.__rest)(fieldProps, ["onStatusChange", "addons"]);
@@ -42,17 +42,17 @@ var FieldWrapperStatus = exports.FieldWrapperStatus = function FieldWrapperStatu
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Field, Object.assign({}, otherProps, otherFieldProps, {
     style: style,
     addons: addons
-  })), acitonRender && (/*#__PURE__*/_react.default.createElement("span", {
+  })), actionRender && (/*#__PURE__*/_react.default.createElement("span", {
     className: 'ant-form-item-actions'
-  }, acitonRender())));
+  }, actionRender())));
 };
 var FieldWrapper = exports.FieldWrapper = function FieldWrapper(props) {
   var Field = props.Field,
     fieldProps = props.fieldProps,
     maxWidth = props.maxWidth,
     initialValue = props.initialValue,
-    acitonRender = props.acitonRender,
-    otherProps = (0, _tslib.__rest)(props, ["Field", "fieldProps", "maxWidth", "initialValue", "acitonRender"]);
+    actionRender = props.actionRender,
+    otherProps = (0, _tslib.__rest)(props, ["Field", "fieldProps", "maxWidth", "initialValue", "actionRender"]);
   var addons = fieldProps.addons,
     schema = fieldProps.schema;
   var _style = maxWidth ? Object.assign({
@@ -84,7 +84,7 @@ var FieldWrapper = exports.FieldWrapper = function FieldWrapper(props) {
     danger: true
   }, removeBtn, {
     onClick: handleRemove
-  }), (removeBtn === null || removeBtn === void 0 ? void 0 : removeBtn.text) || t('delete'))), acitonRender && (/*#__PURE__*/_react.default.createElement("span", {
+  }), (removeBtn === null || removeBtn === void 0 ? void 0 : removeBtn.text) || t('delete'))), actionRender && (/*#__PURE__*/_react.default.createElement("span", {
     className: 'fr-item-actions'
-  }, acitonRender())));
+  }, actionRender())));
 };

package/lib/render-core/FieldItem/main.js

@@ -205,7 +205,7 @@ var _default = exports.default = function _default(props) {
     fieldProps: fieldProps,
     maxWidth: maxWidth,
     initialValue: initialValue,
-    acitonRender: action ? function () {
+    actionRender: action ? function () {
       return action;
     } : undefined
   })) : (/*#__PURE__*/_react.default.createElement(_field.FieldWrapper, {
@@ -213,7 +213,7 @@ var _default = exports.default = function _default(props) {
     fieldProps: fieldProps,
     maxWidth: maxWidth,
     initialValue: initialValue,
-    acitonRender: action ? function () {
+    actionRender: action ? function () {
       return action;
     } : undefined
   })));

package/lib/type.d.ts

@@ -22,7 +22,7 @@ export interface SchemaBase {
     title?: string;
     description?: string;
     descType?: 'text' | 'icon';
-    format?: 'image' | 'textarea' | 'color' | 'email' | 'url' | 'dateTime' | 'date' | 'time' | 'upload' | (string & {});
+    format?: 'image' | 'textarea' | 'email' | 'url' | 'dateTime' | 'date' | 'time' | 'upload' | (string & {});
     default?: any;
     /** 是否必填，支持 `'{{ formData.xxx === "" }}'` 形式的表达式 */
     required?: boolean | string;

package/lib/widgets/boxCollapse/index.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _DownOutlined2 = _interopRequireDefault(require("@ant-design/icons/lib/icons/DownOutlined"));
 require("antd/es/collapse/style");
 var _collapse = _interopRequireDefault(require("antd/es/collapse"));
+var _DownOutlined2 = _interopRequireDefault(require("@ant-design/icons/lib/icons/DownOutlined"));
 var _react = _interopRequireWildcard(require("react"));
 require("./index.css");
 var _PanelView = _interopRequireDefault(require("../components/PanelView"));
@@ -19,7 +19,6 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-var Panel = _collapse.default.Panel;
 /**
  * 折叠面板
  */
@@ -69,11 +68,13 @@ var BoxCollapse = function BoxCollapse(props) {
     expandIcon: renderExpandIcon,
     onChange: function onChange() {
       return setActiveKey(activeKey ? '' : 'single');
-    }
-  }, /*#__PURE__*/_react.default.createElement(Panel, {
-    key: 'single',
-    header: collapseHeader,
-    forceRender: true
-  }, children));
+    },
+    items: [{
+      key: 'single',
+      forceRender: true,
+      label: collapseHeader,
+      children: children
+    }]
+  });
 };
 var _default = exports.default = BoxCollapse;

package/lib/widgets/fields/imageInput/index.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 require("antd/es/input/style");
 var _input = _interopRequireDefault(require("antd/es/input"));
+require("antd/es/space/style");
+var _space = _interopRequireDefault(require("antd/es/space"));
 var _PictureOutlined2 = _interopRequireDefault(require("@ant-design/icons/lib/icons/PictureOutlined"));
 require("antd/es/popover/style");
 var _popover = _interopRequireDefault(require("antd/es/popover"));
@@ -37,11 +39,10 @@ var PreviewNode = function PreviewNode(_ref) {
 var ImageInput = function ImageInput(_a) {
   var value = _a.value,
     rest = (0, _tslib.__rest)(_a, ["value"]);
-  return /*#__PURE__*/_react.default.createElement(_input.default, Object.assign({
-    value: value,
-    addonAfter: /*#__PURE__*/_react.default.createElement(PreviewNode, {
-      value: value
-    })
-  }, rest));
+  return /*#__PURE__*/_react.default.createElement(_space.default.Compact, null, /*#__PURE__*/_react.default.createElement(_input.default, Object.assign({
+    value: value
+  }, rest)), /*#__PURE__*/_react.default.createElement(PreviewNode, {
+    value: value
+  }));
 };
 var _default = exports.default = (0, _withFieldWrap.default)(ImageInput);

package/lib/widgets/fields/urlInput/index.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 require("antd/es/input/style");
 var _input = _interopRequireDefault(require("antd/es/input"));
+require("antd/es/space/style");
+var _space = _interopRequireDefault(require("antd/es/space"));
 require("antd/es/config-provider/style");
 var _configProvider = _interopRequireDefault(require("antd/es/config-provider"));
 var _tslib = require("tslib");
@@ -58,15 +60,14 @@ var UrlInput = function UrlInput(_a) {
     }
     onChange === null || onChange === void 0 ? void 0 : onChange(_value);
   };
-  return /*#__PURE__*/_react.default.createElement(_input.default, Object.assign({
+  return /*#__PURE__*/_react.default.createElement(_space.default.Compact, null, /*#__PURE__*/_react.default.createElement(_input.default, Object.assign({
     value: _value,
     prefix: prefix,
     suffix: suffix,
-    onChange: handleChange,
-    addonAfter: /*#__PURE__*/_react.default.createElement(UrlNode, {
-      value: value,
-      addonText: addonText
-    })
-  }, rest));
+    onChange: handleChange
+  }, rest)), /*#__PURE__*/_react.default.createElement(UrlNode, {
+    value: value,
+    addonText: addonText
+  }));
 };
 var _default = exports.default = (0, _withFieldWrap.default)(UrlInput);

package/lib/widgets/listCard/index.js

@@ -108,8 +108,8 @@ var CardList = function CardList(props) {
         'fr-list-item-operate-fixed': getOperateFixed(schema)
       }),
       style: getOperateStyle(schema),
-      split: operateBtnType !== 'icon' && /*#__PURE__*/_react.default.createElement(_divider.default, {
-        type: 'vertical'
+      separator: operateBtnType !== 'icon' && /*#__PURE__*/_react.default.createElement(_divider.default, {
+        orientation: 'vertical'
       })
     }, !hideMove && (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_FButton.default, Object.assign({
       disabled: name === 0,

package/lib/widgets/listDrawer/index.js

@@ -214,8 +214,8 @@ var TableList = function TableList(props) {
       render: function render(_, field) {
         return /*#__PURE__*/_react.default.createElement(_form.default.Item, null, /*#__PURE__*/_react.default.createElement(_space.default, {
           className: 'fr-list-item-operate',
-          split: operateBtnType !== 'icon' && /*#__PURE__*/_react.default.createElement(_divider.default, {
-            type: 'vertical'
+          separator: operateBtnType !== 'icon' && /*#__PURE__*/_react.default.createElement(_divider.default, {
+            orientation: 'vertical'
           })
         }, !hideMove && (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_FButton.default, Object.assign({
           disabled: field.name === 0,

package/lib/widgets/listSimple/index.js

@@ -88,8 +88,8 @@ var SimpleList = function SimpleList(props) {
       rootPath: [].concat(_toConsumableArray(rootPath), [name])
     }), /*#__PURE__*/_react.default.createElement(_space.default, {
       className: (0, _classnames.default)('fr-list-item-operate'),
-      split: operateBtnType !== 'icon' && /*#__PURE__*/_react.default.createElement(_divider.default, {
-        type: 'vertical'
+      separator: operateBtnType !== 'icon' && /*#__PURE__*/_react.default.createElement(_divider.default, {
+        orientation: 'vertical'
       })
     }, !hideMove && (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_FButton.default, Object.assign({
       disabled: name === 0,

package/lib/widgets/listTable/index.js

@@ -176,8 +176,8 @@ var TableList = function TableList(props) {
       render: function render(_, field) {
         return /*#__PURE__*/_react.default.createElement(_form.default.Item, null, /*#__PURE__*/_react.default.createElement(_space.default, {
           className: 'fr-list-item-operate',
-          split: operateBtnType !== 'icon' && /*#__PURE__*/_react.default.createElement(_divider.default, {
-            type: 'vertical'
+          separator: operateBtnType !== 'icon' && /*#__PURE__*/_react.default.createElement(_divider.default, {
+            orientation: 'vertical'
           })
         }, !hideMove && (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_FButton.default, Object.assign({
           disabled: field.name === 0,

package/lib/widgets/listVirtual/index.js

@@ -166,8 +166,8 @@ var VirtualList = function VirtualList(props) {
       render: function render(_, field) {
         return /*#__PURE__*/_react.default.createElement(_form.default.Item, null, /*#__PURE__*/_react.default.createElement(_space.default, {
           className: 'fr-list-item-operate',
-          split: operateBtnType !== 'icon' && /*#__PURE__*/_react.default.createElement(_divider.default, {
-            type: 'vertical'
+          separator: operateBtnType !== 'icon' && /*#__PURE__*/_react.default.createElement(_divider.default, {
+            orientation: 'vertical'
           })
         }, !hideMove && (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_FButton.default, Object.assign({
           disabled: field.name === 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-render-v3",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.3",
   "description": "通过 JSON Schema 生成标准 Form，常用于自定义搭建配置界面生成",
   "keywords": [
     "Form",