cloud-b2b 1.1.52 → 1.1.53

package/lib/SuperForm/SuperForm.js

@@ -0,0 +1,605 @@
+"use strict";
+
+var _typeof3 = require("@babel/runtime-corejs3/helpers/typeof");
+var _Reflect$construct = require("@babel/runtime-corejs3/core-js-stable/reflect/construct");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+var _some = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/some"));
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _row = _interopRequireDefault(require("antd/lib/row"));
+var _col = _interopRequireDefault(require("antd/lib/col"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _checkbox = _interopRequireDefault(require("antd/lib/checkbox"));
+var _icon = _interopRequireDefault(require("antd/lib/icon"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/typeof"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _form = _interopRequireDefault(require("antd/lib/form"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _helper = _interopRequireDefault(require("../helper"));
+var _Control = _interopRequireWildcard(require("../Control"));
+var _variables = _interopRequireDefault(require("../variables"));
+function _getRequireWildcardCache(e) { if ("function" != typeof _WeakMap) return null; var r = new _WeakMap(), t = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? _Object$getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? _Object$defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty2(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context17, _context18; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context17 = ownKeys(Object(t), !0)).call(_context17, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context18 = ownKeys(Object(t))).call(_context18, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var FormItem = _form["default"].Item;
+var defaultSize = 'small';
+var defaultColNum = 4;
+var TYPE = ['readonly', 'text', 'search', 'searchText', 'select', 'selectText', 'radioGroup', 'number', 'date', 'textArea', 'password', 'editor', 'selectWriting', 'selectSearch', 'empty', 'area', 'uploadImg', 'cascader', 'treeSelect'];
+
+/**
+ * key：[必须]，用于唯一标识该Form下的一个表单元素
+ * title：[必须]，表单元素的标签
+ * type：[必须]，表单元素类型
+ * required: [可选]，是否为必填项
+ * options: [可选]，对象数组(type为readonly，radio，search, searchText，select, selectText时有效)
+ * span: [可选]，占据的列数，默认为1
+ * showAdd: [可选]，是否显示+号，点击+号会触发onAdd事件，默认为false
+ * rule: [可选]，用于设置校验规则
+ * highLightKeys: [可选]，用于设置高亮样式，仅只读字段生效
+ */
+var ControlType = {
+  key: _propTypes["default"].string.isRequired,
+  title: _propTypes["default"].string,
+  type: _propTypes["default"].oneOf(TYPE).isRequired,
+  required: _propTypes["default"].bool,
+  options: _propTypes["default"].array,
+  span: _propTypes["default"].number,
+  onCheckItem: _propTypes["default"].any,
+  showAdd: _propTypes["default"].any,
+  rule: _propTypes["default"].object,
+  props: _propTypes["default"].object
+};
+var Controlled = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Controlled, _React$Component);
+  var _super = _createSuper(Controlled);
+  function Controlled(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, Controlled);
+    _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (value) {
+      var onChange = _this.props.onChange;
+      _this.setState({
+        value: value
+      });
+      onChange && onChange(value);
+    });
+    _this.state = {
+      value: props.value
+    };
+    return _this;
+  }
+  (0, _createClass2["default"])(Controlled, [{
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      if (this.props.value !== nextProps.value) {
+        this.setState({
+          value: nextProps.value
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var props = _objectSpread(_objectSpread({}, this.props), {}, {
+        value: this.state.value,
+        onChange: this.onChange
+      });
+      return /*#__PURE__*/_react["default"].createElement(_Control["default"], props);
+    }
+  }]);
+  return Controlled;
+}(_react["default"].Component);
+/**
+ * colNum：[可选]，表单的列数，默认为4
+ * readonly: [可选]，为true时，所有表单元素都是只读的; 为字符串数组时，用于指定key的表单元素是只读的
+ * hideControls: [可选]，指定key的表单元素被隐藏
+ * options: [可选]，键值对，值与ControlType中options作用相同，但优先级更高
+ * onChange：内容改变时触发，原型为func(key, value)
+ * onSearch：搜索框中用户输入时触发，原型为func(key, title, control)
+ * onAdd: 点击+号时触发，原型为func(key)
+ * checkable:是否显示checkbox选择框
+ * onOpenChange:控制日期框显示隐藏回调func(key, open)
+ * onAreaSearch:联级选择器触发，原型为func(key - 当前联级key, title - 输入值, parentKey - 主体联级key)
+ * OnFileChange:上传组件触发,原型为func（key,{fileList, fileDeleteList}）
+ */
+var SuperForm = /*#__PURE__*/function (_React$Component2) {
+  (0, _inherits2["default"])(SuperForm, _React$Component2);
+  var _super2 = _createSuper(SuperForm);
+  function SuperForm() {
+    var _context;
+    var _this2;
+    (0, _classCallCheck2["default"])(this, SuperForm);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this2 = _super2.call.apply(_super2, (0, _concat["default"])(_context = [this]).call(_context, args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onAdd", function (key, title) {
+      var onAdd = _this2.props.onAdd;
+      onAdd && onAdd(key, title);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onChange", function (key, value) {
+      var onChange = _this2.props.onChange;
+      if (onChange) {
+        _this2.onExitValid(key);
+        onChange(key, value);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onBlur", function (key, value) {
+      var onChange = _this2.props.onChange;
+      if (onChange) {
+        _this2.onExitValid(key);
+        onChange(key, value);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onExitValid", function (key, value) {
+      if (key === _this2.validKey) {
+        _this2.validKey = '';
+        _this2.props.onExitValid();
+      }
+      _this2.props.onChangeOperate && _this2.props.onChangeOperate(key, value);
+    });
+    // 动态生成getValidState方法
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "initValidState", function () {
+      var _this2$props = _this2.props,
+        value = _this2$props.value,
+        valid = _this2$props.valid;
+      var invalid = function invalid() {
+        return null;
+      };
+      var _valid = function _valid(_ref) {
+        var key = _ref.key,
+          required = _ref.required;
+        if (required) {
+          if (!value || _helper["default"].isEmpty2(value[key]) || !(0, _isArray["default"])(value[key]) && (0, _typeof2["default"])(value[key]) === 'object' && _helper["default"].isEmpty(value[key].value)) {
+            _this2.getValidState = invalid;
+            _this2.validKey = key;
+            return 'error';
+          }
+        }
+        return null;
+      };
+      _this2.getValidState = valid ? _valid : invalid;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "validDate", function (_ref2) {
+      var key = _ref2.key,
+        type = _ref2.type;
+      return function (date) {
+        var _this2$props$value = _this2.props.value,
+          value = _this2$props$value === void 0 ? {} : _this2$props$value;
+        if (!date || !value[key]) {
+          return false;
+        } else {
+          if (type === '>') {
+            return date.format('YYYY-MM-DD') <= value[key];
+          } else if (type === '<') {
+            return date.format('YYYY-MM-DD') >= value[key];
+          } else {
+            return false;
+          }
+        }
+      };
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "getPopupContainer", function () {
+      var container = _this2.props.container;
+      if (typeof container === 'undefined') {
+        return _reactDom["default"].findDOMNode((0, _assertThisInitialized2["default"])(_this2));
+      } else if (typeof container === 'boolean') {
+        return document.body;
+      } else {
+        return _reactDom["default"].findDOMNode(container);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "getMaxWidth", function () {
+      var _this2$props$colNum = _this2.props.colNum,
+        colNum = _this2$props$colNum === void 0 ? defaultColNum : _this2$props$colNum;
+      return colNum * 250;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "getContainer", function () {
+      return _this2.props.getContainer;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "getControls", function () {
+      var _this2$props2 = _this2.props,
+        hideControls = _this2$props2.hideControls,
+        controls = _this2$props2.controls;
+      if (!hideControls) {
+        return controls;
+      } else {
+        return (0, _filter["default"])(controls).call(controls, function (control) {
+          return !(0, _some["default"])(hideControls).call(hideControls, function (key) {
+            return control.key === key;
+          });
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "getType", function (_ref3) {
+      var _context2;
+      var key = _ref3.key,
+        type = _ref3.type;
+      var readonly = _this2.props.readonly;
+      if ((0, _includes["default"])(_context2 = ['area', 'uploadImg']).call(_context2, type)) {
+        return type;
+      } else if (!readonly) {
+        return type;
+      } else if (readonly === true) {
+        return 'readonly';
+      } else if ((0, _isArray["default"])(readonly) && (0, _some["default"])(readonly).call(readonly, function (readonlyKey) {
+        return readonlyKey === key;
+      })) {
+        return 'readonly';
+      } else {
+        return type;
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "specialProps", function (type, _ref4) {
+      var key = _ref4.key,
+        _ref4$props = _ref4.props,
+        props = _ref4$props === void 0 ? {} : _ref4$props,
+        originType = _ref4.type;
+      if (type === 'readonly') {
+        var _this2$props$highLigh = _this2.props.highLightKeys,
+          highLightKeys = _this2$props$highLigh === void 0 ? [] : _this2$props$highLigh;
+        var style = (0, _includes["default"])(highLightKeys).call(highLightKeys, key) ? {
+          backgroundColor: 'red',
+          color: 'white'
+        } : {
+          backgroundColor: '#f0f0f0'
+        };
+        if (originType === 'textArea') {
+          var _context3;
+          return {
+            type: 'textArea',
+            readonly: true,
+            style: style,
+            onBlur: (0, _bind["default"])(_context3 = _this2.onExitValid).call(_context3, (0, _assertThisInitialized2["default"])(_this2), key)
+          };
+        } else {
+          var _context4;
+          return {
+            style: style,
+            onBlur: (0, _bind["default"])(_context4 = _this2.onExitValid).call(_context4, (0, _assertThisInitialized2["default"])(_this2), key)
+          };
+        }
+      } else if (type === 'text' || type === 'textArea') {
+        var _context5, _context6;
+        return _objectSpread(_objectSpread({}, props), {}, {
+          onChange: (0, _bind["default"])(_context5 = _this2.onExitValid).call(_context5, (0, _assertThisInitialized2["default"])(_this2), key),
+          onBlur: (0, _bind["default"])(_context6 = _this2.onChange).call(_context6, (0, _assertThisInitialized2["default"])(_this2), key)
+        });
+      } else if (type === 'date') {
+        var _context7, _context8;
+        var propsObj = _objectSpread(_objectSpread({}, props), {}, {
+          onChange: (0, _bind["default"])(_context7 = _this2.onBlur).call(_context7, (0, _assertThisInitialized2["default"])(_this2), key),
+          onBlur: (0, _bind["default"])(_context8 = _this2.onExitValid).call(_context8, (0, _assertThisInitialized2["default"])(_this2), key)
+        });
+        if (_this2.props.onOpenChange && typeof _this2.props.onOpenChange === 'function') {
+          var _context9;
+          propsObj.onOpenChange = (0, _bind["default"])(_context9 = _this2.props.onOpenChange).call(_context9, (0, _assertThisInitialized2["default"])(_this2), key);
+        }
+        return propsObj;
+      } else if (type === 'area') {
+        var _context10, _context11;
+        return _objectSpread(_objectSpread({}, props), {}, {
+          onChange: (0, _bind["default"])(_context10 = _this2.onBlur).call(_context10, (0, _assertThisInitialized2["default"])(_this2), key),
+          onBlur: (0, _bind["default"])(_context11 = _this2.onExitValid).call(_context11, (0, _assertThisInitialized2["default"])(_this2), key),
+          onAreaSearch: _this2.props.onAreaSearch
+        });
+      } else {
+        var _context12, _context13;
+        return _objectSpread(_objectSpread({}, props), {}, {
+          onChange: (0, _bind["default"])(_context12 = _this2.onBlur).call(_context12, (0, _assertThisInitialized2["default"])(_this2), key),
+          onBlur: (0, _bind["default"])(_context13 = _this2.onExitValid).call(_context13, (0, _assertThisInitialized2["default"])(_this2), key)
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "getControlProps", function (control, status) {
+      var _this2$props$value2 = _this2.props.value,
+        value = _this2$props$value2 === void 0 ? {} : _this2$props$value2;
+      var type = _this2.getType(control);
+      var props = _this2.specialProps(type, control);
+      return _objectSpread(_objectSpread({
+        autoFocus: !!status,
+        type: type
+      }, props), {}, {
+        size: defaultSize,
+        value: (0, _Control.makeString)(value[control.key])
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "getOptions", function (key, options) {
+      var higher = _this2.props.options || {};
+      return higher[key] || options;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "toEmpty", function (props) {});
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "toText", function (props) {
+      return /*#__PURE__*/_react["default"].createElement(Controlled, props);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "toPassword", function (props) {
+      return /*#__PURE__*/_react["default"].createElement(Controlled, props);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "toEditor", function (props, control) {
+      props.inputKey = control.key;
+      return /*#__PURE__*/_react["default"].createElement(Controlled, props);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "toSelectWriting", function (props, control) {
+      return /*#__PURE__*/_react["default"].createElement(Controlled, props);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "toTextArea", function (props, control) {
+      if (control.allFullFather) {
+        props.rows = control.rows;
+        props.maxLength = control.maxLength;
+        props.style = {
+          'resize': 'none'
+        };
+      } else {
+        props.autoSize = {
+          minRows: 1,
+          maxRows: 5
+        };
+      }
+      return /*#__PURE__*/_react["default"].createElement(Controlled, props);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "toNumber", function (props) {
+      props.defaultValue = props.value;
+      delete props.value;
+      return /*#__PURE__*/_react["default"].createElement(_Control["default"], props);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "toSelect", function (props, _ref5) {
+      var options = _ref5.options,
+        key = _ref5.key;
+      props.getPopupContainer = _this2.getPopupContainer;
+      props.options = _this2.getOptions(key, options);
+      props.dropdownMatchSelectWidth = false;
+      return /*#__PURE__*/_react["default"].createElement(_Control["default"], props);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "createSearchEvent", function (control) {
+      if (_this2.props.onSearch) {
+        return function (value) {
+          return _this2.props.onSearch(control.key, value, control);
+        };
+      } else {
+        return null;
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "toSearch", function (props, control) {
+      props.getPopupContainer = _this2.getPopupContainer;
+      props.options = _this2.getOptions(control.key, control.options);
+      props.onSearch = _this2.createSearchEvent(control);
+      props.dropdownMatchSelectWidth = false;
+      return /*#__PURE__*/_react["default"].createElement(_Control["default"], props);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "toDate", function (props, _ref6) {
+      var rule = _ref6.rule;
+      props.getCalendarContainer = _this2.getPopupContainer;
+      props.style = {
+        width: '100%'
+      };
+      rule && (props.disabledDate = _this2.validDate(rule));
+      return /*#__PURE__*/_react["default"].createElement(_Control["default"], props);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "toRadioGroup", function (props, _ref7) {
+      var key = _ref7.key,
+        options = _ref7.options;
+      props.options = _this2.getOptions(key, options);
+      return /*#__PURE__*/_react["default"].createElement(_Control["default"], props);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "toReadonly", function (props, _ref8) {
+      var options = _ref8.options,
+        key = _ref8.key;
+      props.value = (0, _Control.getTitle)(props.value, _this2.getOptions(key, options));
+      return /*#__PURE__*/_react["default"].createElement(_Control["default"], props);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "selectSearch", function (props, control) {
+      props.getPopupContainer = _this2.getPopupContainer;
+      props.options = _this2.getOptions(control.key, control.options);
+      props.onSearch = _this2.createSearchEvent(control);
+      props.dropdownMatchSelectWidth = false;
+      return /*#__PURE__*/_react["default"].createElement(_Control["default"], props);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "area", function (props, _ref9) {
+      var key = _ref9.key,
+        options = _ref9.options;
+      var readonly = _this2.props.readonly;
+      props.parentKey = key;
+      props.options = _this2.getOptions(key, options);
+      props.dropdownMatchSelectWidth = false;
+      props.readonly = readonly === true || (0, _isArray["default"])(readonly) && (0, _some["default"])(readonly).call(readonly, function (readonlyKey) {
+        return readonlyKey === key;
+      }) ? true : false;
+      return /*#__PURE__*/_react["default"].createElement(_Control["default"], props);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "uploadImg", function (props, control) {
+      var _context14;
+      var readonly = _this2.props.readonly;
+      props.required = control.required || false;
+      props.onFileChange = (0, _bind["default"])(_context14 = _this2.onFileChange).call(_context14, (0, _assertThisInitialized2["default"])(_this2), control);
+      props.readonly = readonly === true || (0, _isArray["default"])(readonly) && (0, _some["default"])(readonly).call(readonly, function (readonlyKey) {
+        return readonlyKey === control.key;
+      }) ? true : false;
+      return /*#__PURE__*/_react["default"].createElement(_Control["default"], props);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "toCascader", function (props, control) {
+      var container = _this2.getContainer();
+      container && (props.getPopupContainer = container);
+      props.options = control.options || [];
+      props.onSearch = _this2.createSearchEvent(control);
+      props.placeholder = props.placeholder || '';
+      props.loadData = _this2.createSearchEvent(control);
+      return /*#__PURE__*/_react["default"].createElement(_Control["default"], props);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "toTreeSelect", function (props, filter) {
+      var container = _this2.getContainer();
+      container && (props.getPopupContainer = container);
+      props.options = _this2.getOptions(filter);
+      props.onSearch = _this2.createSearchEvent(filter);
+      props.placeholder = filter.placeholder || '';
+      return /*#__PURE__*/_react["default"].createElement(_Control["default"], props);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "toControl", function (props, control) {
+      switch (props.type) {
+        case 'readonly':
+          return _this2.toReadonly(props, control);
+        case 'text':
+          return _this2.toText(props, control);
+        case 'number':
+          return _this2.toNumber(props, control);
+        case 'select':
+        case 'selectText':
+          return _this2.toSelect(props, control);
+        case 'search':
+        case 'searchText':
+          return _this2.toSearch(props, control);
+        case 'date':
+          return _this2.toDate(props, control);
+        case 'radioGroup':
+          return _this2.toRadioGroup(props, control);
+        case 'textArea':
+          return _this2.toTextArea(props, control);
+        case 'password':
+          return _this2.toPassword(props, control);
+        case 'editor':
+          return _this2.toEditor(props, control);
+        case 'selectWriting':
+          return _this2.toSelectWriting(props, control);
+        case 'selectSearch':
+          return _this2.selectSearch(props, control);
+        case 'empty':
+          return _this2.toEmpty(props, control);
+        case 'area':
+          return _this2.area(props, control);
+        case 'uploadImg':
+          return _this2.uploadImg(props, control);
+        case 'cascader':
+          return _this2.toCascader(props, control);
+        case 'treeSelect':
+          return _this2.toTreeSelect(props, control);
+        default:
+          return 'type error';
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "toLabel", function (_ref10, type) {
+      var title = _ref10.title,
+        showAdd = _ref10.showAdd,
+        key = _ref10.key;
+      if (showAdd && type !== 'readonly') {
+        var _context15;
+        var onClick = (0, _bind["default"])(_context15 = _this2.onAdd).call(_context15, (0, _assertThisInitialized2["default"])(_this2), key, title);
+        return /*#__PURE__*/_react["default"].createElement("span", null, title, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+          role: "add",
+          type: "plus-circle-o",
+          onClick: onClick
+        }));
+      } else {
+        return title;
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "toCol", function (span, control) {
+      var factor = control.span || 1;
+      var status = _this2.getValidState(control);
+      var controlProps = _this2.getControlProps(control, status);
+      var itemProps = {
+        label: _this2.toLabel(control, controlProps.type),
+        required: control.required,
+        validateStatus: status
+      };
+      var _this2$props3 = _this2.props,
+        checkable = _this2$props3.checkable,
+        onCheckItem = _this2$props3.onCheckItem;
+      return control.type !== 'empty' ? /*#__PURE__*/_react["default"].createElement(_col["default"], {
+        span: span * factor,
+        key: control.key
+      }, checkable && /*#__PURE__*/_react["default"].createElement(_checkbox["default"], {
+        className: (0, _variables["default"])('SuperForm').checkbox,
+        onChange: (0, _bind["default"])(onCheckItem).call(onCheckItem, (0, _assertThisInitialized2["default"])(_this2), control),
+        checked: control.checked
+      }), /*#__PURE__*/_react["default"].createElement(FormItem, (0, _extends2["default"])({}, itemProps, {
+        className: checkable ? (0, _variables["default"])('SuperForm').formItemWithCheckbox : ''
+      }), _this2.toControl(controlProps, control))) : /*#__PURE__*/_react["default"].createElement(_col["default"], {
+        span: span * factor,
+        key: control.key,
+        style: {
+          height: '44px'
+        }
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "toCols", function () {
+      var _context16;
+      var _this2$props4 = _this2.props,
+        _this2$props4$colNum = _this2$props4.colNum,
+        colNum = _this2$props4$colNum === void 0 ? defaultColNum : _this2$props4$colNum,
+        allFullFather = _this2$props4.allFullFather;
+      if (allFullFather) {
+        colNum = 1;
+      }
+      var span = 24 / colNum;
+      return (0, _map["default"])(_context16 = _this2.getControls()).call(_context16, function (control) {
+        if (allFullFather) {
+          control.allFullFather = allFullFather;
+        }
+        return _this2.toCol(span, control);
+      });
+    });
+    return _this2;
+  }
+  (0, _createClass2["default"])(SuperForm, [{
+    key: "render",
+    value: function render() {
+      this.initValidState();
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _variables["default"])('SuperForm')
+      }, /*#__PURE__*/_react["default"].createElement(_form["default"], {
+        layout: "vertical",
+        style: {
+          maxWidth: this.props.allFullFather ? '100%' : this.getMaxWidth()
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_row["default"], {
+        gutter: 20
+      }, this.toCols())));
+    }
+  }]);
+  return SuperForm;
+}(_react["default"].Component);
+(0, _defineProperty2["default"])(SuperForm, "propTypes", {
+  controls: _propTypes["default"].arrayOf(_propTypes["default"].shape(ControlType)).isRequired,
+  value: _propTypes["default"].object,
+  colNum: _propTypes["default"].number,
+  valid: _propTypes["default"].bool,
+  readonly: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].array]),
+  hideControls: _propTypes["default"].array,
+  options: _propTypes["default"].object,
+  onChange: _propTypes["default"].func,
+  onSearch: _propTypes["default"].func,
+  onExitValid: _propTypes["default"].func,
+  onAdd: _propTypes["default"].func,
+  checkable: _propTypes["default"].bool,
+  onOpenChange: _propTypes["default"].func,
+  onAreaSearch: _propTypes["default"].func,
+  OnFileChange: _propTypes["default"].func
+});
+var _default = exports["default"] = SuperForm;

package/lib/SuperForm/SuperForm.less

@@ -0,0 +1,52 @@
+@import '../variables.less';
+
+.@{cloudlink-prefix}-SuperForm {
+  position: relative;
+
+  > form {
+    overflow: hidden;
+
+    > div {
+      margin-bottom: -6px;
+    }
+
+    [role='add'] {
+      cursor: pointer;
+      margin-left: 4px;
+      color: @primary-color;
+    }
+
+    :global(.ant-form-item-label) {
+      line-height: 16px;
+    }
+
+    :global(.ant-form-item-control) > span > textArea {
+      min-height: 22px !important;
+      margin-bottom: 0 !important;
+    }
+
+    :global(.ant-form-item-control) input,
+    :global(.ant-calendar-picker),
+    :global(.ant-select) {
+      display: block;
+    }
+
+    :global(.ant-select-selection--multiple) {
+      border-top-width: 1px;
+    }
+
+    :global(.ant-radio-group-small) {
+      display: block;
+      height: @input-height-sm;
+    }
+
+    .checkbox {
+      position: absolute;
+      top:15px;
+    }
+
+    .formItemWithCheckbox{
+      margin-left: 20px;
+    }
+  }
+}

package/lib/SuperForm/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "SuperForm",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./SuperForm.js"
+}