nowrapper-json/lib/antd/AntRepeater.js

nowrapper

var _typeof = require("@babel/runtime/helpers/typeof");

(function (global, factory) {
  if (typeof define === "function" && define.amd) {
    define(["exports", "@babel/runtime/helpers/extends", "@babel/runtime/helpers/defineProperty", "@babel/runtime/helpers/toConsumableArray", "@babel/runtime/helpers/slicedToArray", "react", "antd/lib/table", "antd/lib/tooltip", "./repeater", "noform-json"], factory);
  } else if (typeof exports !== "undefined") {
    factory(exports, require("@babel/runtime/helpers/extends"), require("@babel/runtime/helpers/defineProperty"), require("@babel/runtime/helpers/toConsumableArray"), require("@babel/runtime/helpers/slicedToArray"), require("react"), require("antd/lib/table"), require("antd/lib/tooltip"), require("./repeater"), require("noform-json"));
  } else {
    var mod = {
      exports: {}
    };
    factory(mod.exports, global._extends, global.defineProperty, global.toConsumableArray, global.slicedToArray, global.react, global.table, global.tooltip, global.repeater, global.noformJson);
    global.AntRepeater = mod.exports;
  }
})((typeof globalThis === "undefined" ? "undefined" : _typeof(globalThis)) === "object" ? globalThis : (typeof self === "undefined" ? "undefined" : _typeof(self)) === "object" ? self : this, function (_exports, _extends2, _defineProperty2, _toConsumableArray2, _slicedToArray2, _react, _table, _tooltip, _repeater, _noformJson) {
  "use strict";

  var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

  Object.defineProperty(_exports, "__esModule", {
    value: true
  });
  _exports.AntRepeater = AntRepeater;
  _exports["default"] = void 0;
  _extends2 = _interopRequireDefault(_extends2);
  _defineProperty2 = _interopRequireDefault(_defineProperty2);
  _toConsumableArray2 = _interopRequireDefault(_toConsumableArray2);
  _slicedToArray2 = _interopRequireDefault(_slicedToArray2);
  _react = _interopRequireWildcard(_react);
  _table = _interopRequireDefault(_table);
  _tooltip = _interopRequireDefault(_tooltip);

  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

  var isPromise = function isPromise(p) {
    return p && p.then && typeof p.then === "function";
  };

  function AntRepeater(props) {
    var _useState = (0, _react.useState)(1),
        _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
        page = _useState2[0],
        setPage = _useState2[1];

    var _useState3 = (0, _react.useState)(10),
        _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
        pageSize = _useState4[0],
        setPageSize = _useState4[1];

    var _useState5 = (0, _react.useState)([]),
        _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
        itemFormList = _useState6[0],
        setItemFormList = _useState6[1];

    var validate = (0, _react.useCallback)(function (cb, opts) {
      var _ref = opts || {},
          withRender = _ref.withRender;

      if (withRender || !opts) {
        var hasPromise = false;
        var promiseValidator = [];
        var hasScroll = false;
        itemFormList.forEach(function (item, coreIdx) {
          var result = null;
          result = item.validate().then(function (err) {
            /** 第一个滚 */
            if (err && !hasScroll) {
              item.scrollToError();
              hasScroll = true;
            }

            return err;
          });

          if (isPromise(result)) {
            hasPromise = true;
          }

          promiseValidator.push(result);
        });

        if (hasPromise) {
          return Promise.all(promiseValidator).then(handleFormError);
        }

        var errList = promiseValidator.map(handleFormError).filter(function (v) {
          return !!v;
        });
        return Promise.resolve(errList[0]);
      } else {
        return Promise.resolve(null);
      }
    }, [itemFormList]);
    (0, _react.useEffect)(function () {
      if (props.getValidate) {
        props.getValidate(validate);
      }
    }, [validate, props.getValidate]);
    var status = props.status,
        columnsMap = props.columnsMap,
        formConfig = props.formConfig,
        tableProps = props.tableProps,
        errorRender = props.errorRender,
        deleteText = props.deleteText,
        operateText = props.operateText;

    var _ref2 = tableProps || {},
        pagination = _ref2.pagination;

    var pageChange = function pageChange(page, curPageSize) {
      /** 把原本的 pagination onChange 抛给用户 */
      if (pagination && pagination.onChange) {
        pagination.onChange(page, pageSize);
      }

      setPage(page);

      if (curPageSize !== pageSize) {
        setPageSize(curPageSize || 10);
      }
    };

    var handleFormError = function handleFormError(error) {
      if (!error) return null;
      var err = null;

      if (Array.isArray(error)) {
        var errList = error.map(function (item) {
          return handleFormError(item);
        }).filter(function (v) {
          return !!v;
        });
        return errList[0];
      }

      Object.keys(error).forEach(function (key) {
        if (error[key] && !err) {
          err = error[key];
        }
      });
      return err;
    };

    var getEle = function getEle(child, name, core, propStatus) {
      var _ref3 = formConfig || {},
          v = _ref3.validateConfig,
          s = _ref3.status;

      var _child$props = child.props,
          validateConfig = _child$props.validateConfig,
          status = _child$props.status,
          props = _child$props.props;
      var values = core.getValues();
      return _react["default"].cloneElement(child, {
        label: undefined,
        // TODO: 双向绑定，但会触发onChange
        value: values[name],
        errorRender: errorRender ? errorRender : function (err) {
          return _react["default"].createElement(_tooltip["default"], {
            overlayClassName: "ant-repeater-error-tooltip",
            placement: "right",
            title: err
          }, err);
        },
        validateConfig: validateConfig ? typeof validateConfig === "function" ? validateConfig(values, core) : validateConfig : v && v[name] ? typeof v[name] === "function" ? v[name](values, core) : v[name] : undefined,
        status: status ? typeof status === "function" ? status(values, core) : status : s && s[name] ? typeof s[name] === "function" ? s[name](values, core) : s[name] : propStatus,
        props: props ? typeof props === "function" ? props(child.props, core) : props : undefined,
        error: core.getError(name)
      });
    };

    var onUnMount = function onUnMount(core) {
      setItemFormList(function (prev) {
        return prev.filter(function (cur) {
          return cur.id !== core.id;
        });
      });
    };

    var onMount = function onMount(core) {
      setItemFormList(function (prev) {
        return [].concat((0, _toConsumableArray2["default"])(prev), [core]);
      });
    };

    var commonProps = _objectSpread({}, props, {
      validate: validate,
      view: function view(formlist, core) {
        /** 获取Repeater form核心列表 */
        var coreList = core.getCoreList();
        /** 获取Repeater当前数据源 */

        var dataSource = core.getDataSource();
        var columnsWithRender = [];

        _react["default"].Children.map(props.children, function (child, childIndex) {
          var _child$props2 = child.props,
              name = _child$props2.name,
              label = _child$props2.label,
              children = _child$props2.children,
              required = _child$props2.required,
              _render = _child$props2.render,
              renderCell = _child$props2.renderCell;
          var dataIndex = name;
          var key = name;
          /** 处理 required 样式 */

          var title = required ? _react["default"].createElement("span", {
            className: "ant-repeater-th-required"
          }, label || "") : label || "";
          var type = child.type;
          /** If 处理 */

          if (type.displayName === "If") {
            label = children.props.label;
            name = children.props.name;
            required = children.props.required;
            dataIndex = name;
            key = name;
            title = required ? _react["default"].createElement("span", {
              className: "ant-repeater-th-required"
            }, label || "") : label || "";
          }

          columnsWithRender.push({
            title: title,
            dataIndex: dataIndex,
            key: key,
            render: function render(text, record, index) {
              /** 第几行 */
              var idx = (page - 1) * pageSize + index;
              var ele;
              var curCore = coreList[idx];

              if (curCore) {
                var coreValue = curCore.getValues();
                var canShow = true;
                /** render/renderCell */

                if (_render || renderCell) {
                  ele = _render ? _render(coreValue, curCore) : renderCell(coreValue[name], {
                    index: idx,
                    core: curCore,
                    values: coreValue
                  });
                } else {
                  /** If 控制显示隐藏 */
                  if (type.displayName === "If") {
                    var _children$props = children.props,
                        render = _children$props.render,
                        _renderCell = _children$props.renderCell;
                    canShow = child.props.when(coreValue, curCore);

                    if (canShow) {
                      if (render || _renderCell) {
                        ele = render ? render(coreValue, curCore) : _renderCell(coreValue[name], {
                          index: idx,
                          core: curCore,
                          values: coreValue
                        });
                      } else {
                        ele = getEle(children, name, curCore, status);
                      }
                    } else {
                      ele = null;
                    }
                  } else {
                    ele = getEle(child, name, curCore, status);
                  }
                }

                var _ref4 = formConfig || {},
                    globalStatus = _ref4.globalStatus;
                /** 各个item core 初始化 */


                var _core = new _noformJson.FormCore(_objectSpread({
                  autoValidate: true
                }, formConfig, {
                  globalStatus: props.multiple === false ? "preview" : globalStatus,
                  disabledSyncChildForm: true
                }));

                return _react["default"].createElement(_noformJson.Form, {
                  overWrite: true,
                  core: _core,
                  onUnMount: onUnMount,
                  onMount: onMount,
                  onChange: function onChange(values) {
                    var newValue = _objectSpread({}, values);

                    _react["default"].Children.map(props.children, function (child) {
                      var when = child.props.when;

                      if (when && !when(newValue, curCore)) {
                        var _name = child.props.children.props.name;

                        if (newValue[_name]) {
                          delete newValue[_name];
                        }
                      }
                    });

                    var repeaterValues = coreList.map(function (core, index) {
                      return index === idx ? newValue : core.getValues();
                    });

                    if (props.onChange) {
                      props.onChange(repeaterValues);
                    }
                  } // IMP: 保证删除行时不会触发渲染不必要的错误提示
                  ,
                  value: _objectSpread({}, coreValue, (0, _defineProperty2["default"])({}, name, text))
                }, ele);
              } else {
                // FIX: 删除当前页最后一条数据
                pageChange(page - 1);
                return null;
              }
            }
          });
        });

        if (status !== "preview" && status !== "disabled") {
          columnsWithRender.push({
            dataIndex: "operation",
            key: "operation",
            title: operateText || "操作",
            fixed: "right",
            align: "center",
            render: function render(t, v, index) {
              return _react["default"].createElement("div", null, props.multiple === false && _react["default"].createElement(_repeater.ActionButton, {
                type: "update",
                core: coreList[(page - 1) * pageSize + index]
              }, deleteText || "更新"), _react["default"].createElement(_repeater.ActionButton, {
                type: "delete",
                core: coreList[(page - 1) * pageSize + index]
              }, deleteText || "删除"));
            }
          });
        }
        /** columns 自定义处理 */


        if (columnsMap) {
          columnsWithRender = columnsMap(columnsWithRender);
        }

        return _react["default"].createElement(_table["default"], (0, _extends2["default"])({}, tableProps, {
          columns: columnsWithRender,
          dataSource: dataSource,
          pagination: typeof pagination === "boolean" ? pagination : _objectSpread({}, pagination, {
            onChange: pageChange
          }),
          className: tableProps && tableProps.className ? tableProps.className + " no-form-ant-repeater" : "no-form-ant-repeater"
        }));
      }
    });

    return props.multiple || props.multiple === undefined ? _react["default"].createElement(_repeater.InlineRepeater, (0, _extends2["default"])({}, commonProps, {
      multiple: true
    })) : _react["default"].createElement(_repeater.TableRepeater, commonProps);
  }

  var _default = AntRepeater;
  _exports["default"] = _default;
});