@ant-design/pro-components 3.0.0-beta.1 → 3.0.0-beta.3

package/lib/table/components/Form/FormRender.js

@@ -1,239 +1,214 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
+"use strict";
 
-// src/table/components/Form/FormRender.tsx
-var FormRender_exports = {};
-__export(FormRender_exports, {
-  default: () => FormRender_default
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(FormRender_exports);
-var import_antd = require("antd");
-var import_classnames = __toESM(require("classnames"));
-var import_omit = __toESM(require("rc-util/lib/omit"));
-var import_react = __toESM(require("react"));
-var import_form = require("../../../form");
-var import_provider = require("../../../provider");
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _util = require("@rc-component/util");
+var _antd = require("antd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _form = require("../../../form");
+var _provider = require("../../../provider");
+var _jsxRuntime = require("react/jsx-runtime");
 function toLowerLine(str) {
-  let temp = str.replace(/[A-Z]/g, (match) => {
-    return `-${match.toLowerCase()}`;
+  var temp = str.replace(/[A-Z]/g, function (match) {
+    return "-".concat(match.toLowerCase());
   });
-  if (temp.startsWith("-")) {
+  if (temp.startsWith('-')) {
+    // 如果首字母是大写，执行replace时会多一个_，这里需要去掉
     temp = temp.slice(1);
   }
   return temp;
 }
-var getFormCompetent = (isForm, searchConfig) => {
+/**
+ * 获取当前选择的 Form Layout 配置
+ *
+ * @param isForm
+ * @param searchConfig
+ * @returns LightFilter | QueryFilter | ProForm
+ */
+var getFormCompetent = function getFormCompetent(isForm, searchConfig) {
   if (!isForm && searchConfig !== false) {
-    if ((searchConfig == null ? void 0 : searchConfig.filterType) === "light") {
-      return "LightFilter";
+    if ((searchConfig === null || searchConfig === void 0 ? void 0 : searchConfig.filterType) === 'light') {
+      return 'LightFilter';
     }
-    return "QueryFilter";
+    return 'QueryFilter';
   }
-  return "Form";
+  return 'Form';
 };
-var getFromProps = (isForm, searchConfig, name) => {
-  if (!isForm && name === "LightFilter") {
-    return (0, import_omit.default)(
-      __spreadValues({}, searchConfig),
-      ["labelWidth", "defaultCollapsed", "filterType"]
-    );
+
+/**
+ * 获取需要传给相应表单的props
+ *
+ * @param searchConfig
+ * @param name
+ */
+var getFromProps = function getFromProps(isForm, searchConfig, name) {
+  if (!isForm && name === 'LightFilter') {
+    // 传给 lightFilter 的问题
+    return (0, _util.omit)((0, _objectSpread2.default)({}, searchConfig), ['labelWidth', 'defaultCollapsed', 'filterType']);
   }
   if (!isForm) {
-    return (0, import_omit.default)(
-      __spreadValues({
-        labelWidth: searchConfig ? searchConfig == null ? void 0 : searchConfig.labelWidth : void 0,
-        defaultCollapsed: true
-      }, searchConfig),
-      ["filterType"]
-    );
+    // 传给 QueryFilter 的配置
+    return (0, _util.omit)((0, _objectSpread2.default)({
+      labelWidth: searchConfig ? searchConfig === null || searchConfig === void 0 ? void 0 : searchConfig.labelWidth : undefined,
+      defaultCollapsed: true
+    }, searchConfig), ['filterType']);
   }
   return {};
 };
-var getFormConfigs = (isForm, formConfig) => {
+
+/**
+ * 从formConfig中获取传给相应表单的配置
+ *
+ * @param isForm
+ * @param formConfig
+ */
+var getFormConfigs = function getFormConfigs(isForm, formConfig) {
   if (isForm) {
-    return (0, import_omit.default)(formConfig, ["ignoreRules"]);
+    // 传给Form的配置
+    return (0, _util.omit)(formConfig, ['ignoreRules']);
   }
-  return __spreadValues({ ignoreRules: true }, formConfig);
+  // 传给Filter的配置
+  return (0, _objectSpread2.default)({
+    ignoreRules: true
+  }, formConfig);
 };
-var FormRender = ({
-  onSubmit,
-  formRef,
-  dateFormatter = "string",
-  type,
-  columns,
-  action,
-  ghost,
-  manualRequest,
-  onReset,
-  submitButtonLoading,
-  search: searchConfig,
-  form: formConfig,
-  bordered
-}) => {
-  const { hashId } = (0, import_react.useContext)(import_provider.ProProvider);
-  const isForm = type === "form";
-  const submit = (values, firstLoad) => __async(void 0, null, function* () {
-    if (onSubmit) {
-      onSubmit(values, firstLoad);
-    }
-  });
-  const { getPrefixCls } = (0, import_react.useContext)(import_antd.ConfigProvider.ConfigContext);
-  const columnsList = (0, import_react.useMemo)(() => {
-    return columns.filter((item) => {
-      if (item === import_antd.Table.EXPAND_COLUMN || item === import_antd.Table.SELECTION_COLUMN) {
+/**
+ * 这里会把 列配置转化为 form 表单
+ *
+ * @param param0
+ * @returns
+ */
+var FormRender = function FormRender(_ref) {
+  var onSubmit = _ref.onSubmit,
+    formRef = _ref.formRef,
+    _ref$dateFormatter = _ref.dateFormatter,
+    dateFormatter = _ref$dateFormatter === void 0 ? 'string' : _ref$dateFormatter,
+    type = _ref.type,
+    columns = _ref.columns,
+    action = _ref.action,
+    ghost = _ref.ghost,
+    manualRequest = _ref.manualRequest,
+    _onReset = _ref.onReset,
+    submitButtonLoading = _ref.submitButtonLoading,
+    searchConfig = _ref.search,
+    formConfig = _ref.form,
+    bordered = _ref.bordered;
+  var _useContext = (0, _react.useContext)(_provider.ProProvider),
+    hashId = _useContext.hashId;
+  var isForm = type === 'form';
+  /** 提交表单，根据两种模式不同，方法不相同 */
+  var submit = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(values, firstLoad) {
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (onSubmit) {
+              onSubmit(values, firstLoad);
+            }
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function submit(_x, _x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var _useContext2 = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext2.getPrefixCls;
+  var columnsList = (0, _react.useMemo)(function () {
+    return columns.filter(function (item) {
+      if (item === _antd.Table.EXPAND_COLUMN || item === _antd.Table.SELECTION_COLUMN) {
         return false;
       }
-      if (item.search === false && type !== "form") {
+      if (item.search === false && type !== 'form') {
         return false;
       }
-      if (type === "form" && item.hideInForm) {
+      if (type === 'form' && item.hideInForm) {
         return false;
       }
       return true;
-    }).map((item) => {
-      var _a;
-      const finalValueType = !item.valueType || ["textarea", "jsonCode", "code"].includes(item == null ? void 0 : item.valueType) && type === "table" ? "text" : item == null ? void 0 : item.valueType;
-      const columnKey = (item == null ? void 0 : item.key) || ((_a = item == null ? void 0 : item.dataIndex) == null ? void 0 : _a.toString());
-      return __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, item), {
-        width: void 0
-      }), item.search && typeof item.search === "object" ? item.search : {}), {
+    }).map(function (item) {
+      var _item$dataIndex;
+      var finalValueType = !item.valueType || ['textarea', 'jsonCode', 'code'].includes(item === null || item === void 0 ? void 0 : item.valueType) && type === 'table' ? 'text' : item === null || item === void 0 ? void 0 : item.valueType;
+      var columnKey = (item === null || item === void 0 ? void 0 : item.key) || (item === null || item === void 0 || (_item$dataIndex = item.dataIndex) === null || _item$dataIndex === void 0 ? void 0 : _item$dataIndex.toString());
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+        width: undefined
+      }, item.search && (0, _typeof2.default)(item.search) === 'object' ? item.search : {}), {}, {
         valueType: finalValueType,
-        proFieldProps: __spreadProps(__spreadValues({}, item.proFieldProps), {
-          proFieldKey: columnKey ? `table-field-${columnKey}` : void 0
+        proFieldProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item.proFieldProps), {}, {
+          proFieldKey: columnKey ? "table-field-".concat(columnKey) : undefined
         })
       });
     });
   }, [columns, type]);
-  const className = getPrefixCls("pro-table-search");
-  const formClassName = getPrefixCls("pro-table-form");
-  const competentName = (0, import_react.useMemo)(
-    () => getFormCompetent(isForm, searchConfig),
-    [searchConfig, isForm]
-  );
-  const loadingProps = (0, import_react.useMemo)(
-    () => ({
+  var className = getPrefixCls('pro-table-search');
+  var formClassName = getPrefixCls('pro-table-form');
+  var competentName = (0, _react.useMemo)(function () {
+    return getFormCompetent(isForm, searchConfig);
+  }, [searchConfig, isForm]);
+
+  // 传给每个表单的配置，理论上大家都需要
+  var loadingProps = (0, _react.useMemo)(function () {
+    return {
       submitter: {
         submitButtonProps: {
           loading: submitButtonLoading
         }
       }
-    }),
-    [submitButtonLoading]
-  );
-  return /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      className: (0, import_classnames.default)(hashId, {
-        [getPrefixCls("pro-card")]: true,
-        [`${getPrefixCls("pro-card")}-border`]: !!bordered,
-        [`${getPrefixCls("pro-card")}-bordered`]: !!bordered,
-        [`${getPrefixCls("pro-card")}-ghost`]: !!ghost,
-        [className]: true,
-        [formClassName]: isForm,
-        [getPrefixCls(`pro-table-search-${toLowerLine(competentName)}`)]: true,
-        [`${className}-ghost`]: ghost,
-        [searchConfig == null ? void 0 : searchConfig.className]: searchConfig !== false && (searchConfig == null ? void 0 : searchConfig.className)
-      })
-    },
-    /* @__PURE__ */ import_react.default.createElement(
-      import_form.BetaSchemaForm,
-      __spreadProps(__spreadValues(__spreadValues(__spreadValues({
-        layoutType: competentName,
-        columns: columnsList,
-        type
-      }, loadingProps), getFromProps(isForm, searchConfig, competentName)), getFormConfigs(isForm, formConfig || {})), {
-        formRef,
-        action,
-        dateFormatter,
-        onInit: (values, form) => {
-          var _a, _b, _c;
-          formRef.current = form;
-          if (type !== "form") {
-            const pageInfo = (_a = action.current) == null ? void 0 : _a.pageInfo;
-            const {
-              current = pageInfo == null ? void 0 : pageInfo.current,
-              pageSize = pageInfo == null ? void 0 : pageInfo.pageSize
-            } = values;
-            (_c = (_b = action.current) == null ? void 0 : _b.setPageInfo) == null ? void 0 : _c.call(_b, __spreadProps(__spreadValues({}, pageInfo), {
-              current: parseInt(current, 10),
-              pageSize: parseInt(pageSize, 10)
-            }));
-            if (manualRequest)
-              return;
-            submit(values, true);
-          }
-        },
-        onReset: (values) => {
-          onReset == null ? void 0 : onReset(values);
-        },
-        onFinish: (values) => {
-          submit(values, false);
-        },
-        initialValues: formConfig == null ? void 0 : formConfig.initialValues
-      })
-    )
-  );
+    };
+  }, [submitButtonLoading]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)(hashId, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, getPrefixCls('pro-card'), true), "".concat(getPrefixCls('pro-card'), "-border"), !!bordered), "".concat(getPrefixCls('pro-card'), "-bordered"), !!bordered), "".concat(getPrefixCls('pro-card'), "-ghost"), !!ghost), className, true), formClassName, isForm), getPrefixCls("pro-table-search-".concat(toLowerLine(competentName))), true), "".concat(className, "-ghost"), ghost), searchConfig === null || searchConfig === void 0 ? void 0 : searchConfig.className, searchConfig !== false && (searchConfig === null || searchConfig === void 0 ? void 0 : searchConfig.className))),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_form.BetaSchemaForm, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
+      layoutType: competentName,
+      columns: columnsList,
+      type: type
+    }, loadingProps), getFromProps(isForm, searchConfig, competentName)), getFormConfigs(isForm, formConfig || {})), {}, {
+      formRef: formRef,
+      action: action,
+      dateFormatter: dateFormatter,
+      onInit: function onInit(values, form) {
+        formRef.current = form;
+        // 触发一个 submit，之所以这里触发是为了保证 value 都被 format了
+        if (type !== 'form') {
+          var _action$current, _action$current2, _action$current2$setP;
+          // 修改 pageSize，变成从 url 中获取的
+          var pageInfo = (_action$current = action.current) === null || _action$current === void 0 ? void 0 : _action$current.pageInfo;
+          // 从 values 里获取是因为有时候要从 url中获取的 pageSize。
+          var _ref3 = values,
+            _ref3$current = _ref3.current,
+            current = _ref3$current === void 0 ? pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.current : _ref3$current,
+            _ref3$pageSize = _ref3.pageSize,
+            pageSize = _ref3$pageSize === void 0 ? pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.pageSize : _ref3$pageSize;
+          (_action$current2 = action.current) === null || _action$current2 === void 0 || (_action$current2$setP = _action$current2.setPageInfo) === null || _action$current2$setP === void 0 || _action$current2$setP.call(_action$current2, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pageInfo), {}, {
+            current: parseInt(current, 10),
+            pageSize: parseInt(pageSize, 10)
+          }));
+          /** 如果是手动模式不需要提交 */
+          if (manualRequest) return;
+          submit(values, true);
+        }
+      },
+      onReset: function onReset(values) {
+        _onReset === null || _onReset === void 0 || _onReset(values);
+      },
+      onFinish: function onFinish(values) {
+        submit(values, false);
+      },
+      initialValues: formConfig === null || formConfig === void 0 ? void 0 : formConfig.initialValues
+    }))
+  });
 };
-var FormRender_default = FormRender;
+var _default = exports.default = FormRender;