Update from Vibe Studio

node_modules/@ant-design/pro-table/lib/components/Form/FormRender.d.ts

@@ -0,0 +1,31 @@
+import type { BaseQueryFilterProps, ProFormInstance, ProFormProps } from '@ant-design/pro-form';
+import type { ProSchemaComponentTypes } from '@ant-design/pro-utils';
+import type { FormItemProps } from 'antd';
+import React from 'react';
+import type { ActionType, ProColumns, ProTableProps } from '../../typing';
+export type SearchConfig = BaseQueryFilterProps & {
+    filterType?: 'query' | 'light';
+};
+export type TableFormItem<T, U = any> = {
+    onSubmit?: (value: T, firstLoad: boolean) => void;
+    onReset?: (value: T) => void;
+    form?: Omit<ProFormProps, 'form'>;
+    type?: ProSchemaComponentTypes;
+    dateFormatter?: ProTableProps<T, U, any>['dateFormatter'];
+    search?: false | SearchConfig;
+    columns: ProColumns<U, any>[];
+    formRef: React.MutableRefObject<ProFormInstance | undefined>;
+    submitButtonLoading?: boolean;
+    manualRequest?: boolean;
+    bordered?: boolean;
+    action: React.MutableRefObject<ActionType | undefined>;
+    ghost?: boolean;
+} & Omit<FormItemProps, 'children' | 'onReset'>;
+/**
+ * 这里会把 列配置转化为 form 表单
+ *
+ * @param param0
+ * @returns
+ */
+declare const FormRender: <T, U = any>({ onSubmit, formRef, dateFormatter, type, columns, action, ghost, manualRequest, onReset, submitButtonLoading, search: searchConfig, form: formConfig, bordered, }: TableFormItem<T, U>) => import("react/jsx-runtime").JSX.Element;
+export default FormRender;

node_modules/@ant-design/pro-table/lib/components/Form/FormRender.js

@@ -0,0 +1,214 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _proForm = require("@ant-design/pro-form");
+var _proProvider = require("@ant-design/pro-provider");
+var _antd = require("antd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
+var _react = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function toLowerLine(str) {
+  var temp = str.replace(/[A-Z]/g, function (match) {
+    return "-".concat(match.toLowerCase());
+  });
+  if (temp.startsWith('-')) {
+    // 如果首字母是大写，执行replace时会多一个_，这里需要去掉
+    temp = temp.slice(1);
+  }
+  return temp;
+}
+/**
+ * 获取当前选择的 Form Layout 配置
+ *
+ * @param isForm
+ * @param searchConfig
+ * @returns LightFilter | QueryFilter | ProForm
+ */
+var getFormCompetent = function getFormCompetent(isForm, searchConfig) {
+  if (!isForm && searchConfig !== false) {
+    if ((searchConfig === null || searchConfig === void 0 ? void 0 : searchConfig.filterType) === 'light') {
+      return 'LightFilter';
+    }
+    return 'QueryFilter';
+  }
+  return 'Form';
+};
+
+/**
+ * 获取需要传给相应表单的props
+ *
+ * @param searchConfig
+ * @param name
+ */
+var getFromProps = function getFromProps(isForm, searchConfig, name) {
+  if (!isForm && name === 'LightFilter') {
+    // 传给 lightFilter 的问题
+    return (0, _omit.default)((0, _objectSpread2.default)({}, searchConfig), ['labelWidth', 'defaultCollapsed', 'filterType']);
+  }
+  if (!isForm) {
+    // 传给 QueryFilter 的配置
+    return (0, _omit.default)((0, _objectSpread2.default)({
+      labelWidth: searchConfig ? searchConfig === null || searchConfig === void 0 ? void 0 : searchConfig.labelWidth : undefined,
+      defaultCollapsed: true
+    }, searchConfig), ['filterType']);
+  }
+  return {};
+};
+
+/**
+ * 从formConfig中获取传给相应表单的配置
+ *
+ * @param isForm
+ * @param formConfig
+ */
+var getFormConfigs = function getFormConfigs(isForm, formConfig) {
+  if (isForm) {
+    // 传给Form的配置
+    return (0, _omit.default)(formConfig, ['ignoreRules']);
+  }
+  // 传给Filter的配置
+  return (0, _objectSpread2.default)({
+    ignoreRules: true
+  }, formConfig);
+};
+/**
+ * 这里会把 列配置转化为 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)(_proProvider.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.hideInSearch || item.search === false) && type !== 'form') {
+        return false;
+      }
+      if (type === 'form' && item.hideInForm) {
+        return false;
+      }
+      return true;
+    }).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: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item.proFieldProps), {}, {
+          proFieldKey: columnKey ? "table-field-".concat(columnKey) : undefined
+        })
+      });
+    });
+  }, [columns, type]);
+  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__*/(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)(_proForm.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 _default = exports.default = FormRender;

node_modules/@ant-design/pro-table/lib/components/Form/index.d.ts

@@ -0,0 +1,39 @@
+import type { TablePaginationConfig } from 'antd';
+import React from 'react';
+import type { ActionType, ProTableProps } from '../../typing';
+type BaseFormProps<T, U> = {
+    pagination?: TablePaginationConfig | false;
+    beforeSearchSubmit?: (params: Partial<U>) => any;
+    action: React.MutableRefObject<ActionType | undefined>;
+    onSubmit?: (params: U) => void;
+    onReset?: () => void;
+    loading: boolean;
+    onFormSearchSubmit: (params: U) => void;
+    columns: ProTableProps<T, U, any>['columns'];
+    dateFormatter: ProTableProps<T, U, any>['dateFormatter'];
+    formRef: ProTableProps<T, U, any>['formRef'];
+    type: ProTableProps<T, U, any>['type'];
+    cardBordered: ProTableProps<T, U, any>['cardBordered'];
+    form: ProTableProps<T, U, any>['form'];
+    search: ProTableProps<T, U, any>['search'];
+    manualRequest: ProTableProps<T, U, any>['manualRequest'];
+};
+declare class FormSearch<T, U> extends React.Component<BaseFormProps<T, U> & {
+    ghost?: boolean;
+}> {
+    /** 查询表单相关的配置 */
+    onSubmit: (value: U, firstLoad: boolean) => void;
+    onReset: (value: Partial<U>) => void;
+    /**
+     * 只 Diff 需要用的 props，能减少 5 次左右的render
+     *
+     * @param next
+     * @see 因为 hooks 每次的 setFormSearch 都是新的，所以每次都触发 render
+     * @see action 也是同样的原因
+     * @returns
+     */
+    isEqual: (next: BaseFormProps<T, U>) => boolean;
+    shouldComponentUpdate: (next: BaseFormProps<T, U>) => boolean;
+    render: () => import("react/jsx-runtime").JSX.Element;
+}
+export default FormSearch;

node_modules/@ant-design/pro-table/lib/components/Form/index.js

@@ -0,0 +1,175 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _proUtils = require("@ant-design/pro-utils");
+var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
+var _react = _interopRequireDefault(require("react"));
+var _index = require("../../utils/index");
+var _FormRender = _interopRequireDefault(require("./FormRender"));
+var _jsxRuntime = require("react/jsx-runtime");
+var FormSearch = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(FormSearch, _React$Component);
+  var _super = (0, _createSuper2.default)(FormSearch);
+  function FormSearch() {
+    var _this;
+    (0, _classCallCheck2.default)(this, FormSearch);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    /** 查询表单相关的配置 */
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSubmit", function (value, firstLoad) {
+      var _this$props = _this.props,
+        pagination = _this$props.pagination,
+        _this$props$beforeSea = _this$props.beforeSearchSubmit,
+        beforeSearchSubmit = _this$props$beforeSea === void 0 ? function (searchParams) {
+          return searchParams;
+        } : _this$props$beforeSea,
+        action = _this$props.action,
+        onSubmit = _this$props.onSubmit,
+        onFormSearchSubmit = _this$props.onFormSearchSubmit;
+      // 只传入 pagination 中的 current 和 pageSize 参数
+      var pageInfo = pagination ? (0, _proUtils.omitUndefined)({
+        current: pagination.current,
+        pageSize: pagination.pageSize
+      }) : {};
+      var submitParams = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, value), {}, {
+        _timestamp: Date.now()
+      }, pageInfo);
+      var omitParams = (0, _omit.default)(beforeSearchSubmit(submitParams), Object.keys(pageInfo));
+      onFormSearchSubmit(omitParams);
+      if (!firstLoad) {
+        var _action$current, _action$current$setPa;
+        // back first page
+        (_action$current = action.current) === null || _action$current === void 0 || (_action$current$setPa = _action$current.setPageInfo) === null || _action$current$setPa === void 0 || _action$current$setPa.call(_action$current, {
+          current: 1
+        });
+      }
+      // 不是第一次提交就不触发，第一次提交是 js 触发的
+      // 为了解决 https://github.com/ant-design/pro-components/issues/579
+      if (onSubmit && !firstLoad) {
+        onSubmit === null || onSubmit === void 0 || onSubmit(value);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onReset", function (value) {
+      var _action$current2, _action$current2$setP;
+      var _this$props2 = _this.props,
+        pagination = _this$props2.pagination,
+        _this$props2$beforeSe = _this$props2.beforeSearchSubmit,
+        beforeSearchSubmit = _this$props2$beforeSe === void 0 ? function (searchParams) {
+          return searchParams;
+        } : _this$props2$beforeSe,
+        action = _this$props2.action,
+        onFormSearchSubmit = _this$props2.onFormSearchSubmit,
+        onReset = _this$props2.onReset;
+      var pageInfo = pagination ? (0, _proUtils.omitUndefined)({
+        current: pagination.current,
+        pageSize: pagination.pageSize
+      }) : {};
+      var omitParams = (0, _omit.default)(beforeSearchSubmit((0, _objectSpread2.default)((0, _objectSpread2.default)({}, value), pageInfo)), Object.keys(pageInfo));
+      onFormSearchSubmit(omitParams);
+      // back first page
+      (_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, {
+        current: 1
+      });
+      onReset === null || onReset === void 0 || onReset();
+    });
+    /**
+     * 只 Diff 需要用的 props，能减少 5 次左右的render
+     *
+     * @param next
+     * @see 因为 hooks 每次的 setFormSearch 都是新的，所以每次都触发 render
+     * @see action 也是同样的原因
+     * @returns
+     */
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isEqual", function (next) {
+      var _this$props3 = _this.props,
+        columns = _this$props3.columns,
+        loading = _this$props3.loading,
+        formRef = _this$props3.formRef,
+        type = _this$props3.type,
+        cardBordered = _this$props3.cardBordered,
+        dateFormatter = _this$props3.dateFormatter,
+        form = _this$props3.form,
+        search = _this$props3.search,
+        manualRequest = _this$props3.manualRequest;
+      var diffProps = {
+        columns: columns,
+        loading: loading,
+        formRef: formRef,
+        type: type,
+        cardBordered: cardBordered,
+        dateFormatter: dateFormatter,
+        form: form,
+        search: search,
+        manualRequest: manualRequest
+      };
+      return !(0, _proUtils.isDeepEqualReact)(diffProps, {
+        columns: next.columns,
+        formRef: next.formRef,
+        loading: next.loading,
+        type: next.type,
+        cardBordered: next.cardBordered,
+        dateFormatter: next.dateFormatter,
+        form: next.form,
+        search: next.search,
+        manualRequest: next.manualRequest
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "shouldComponentUpdate", function (next) {
+      return _this.isEqual(next);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "render", function () {
+      var _this$props4 = _this.props,
+        columns = _this$props4.columns,
+        loading = _this$props4.loading,
+        formRef = _this$props4.formRef,
+        type = _this$props4.type,
+        action = _this$props4.action,
+        cardBordered = _this$props4.cardBordered,
+        dateFormatter = _this$props4.dateFormatter,
+        form = _this$props4.form,
+        search = _this$props4.search,
+        pagination = _this$props4.pagination,
+        ghost = _this$props4.ghost,
+        manualRequest = _this$props4.manualRequest;
+      var pageInfo = pagination ? (0, _proUtils.omitUndefined)({
+        current: pagination.current,
+        pageSize: pagination.pageSize
+      }) : {};
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormRender.default, {
+        submitButtonLoading: loading,
+        columns: columns,
+        type: type,
+        ghost: ghost,
+        formRef: formRef,
+        onSubmit: _this.onSubmit,
+        manualRequest: manualRequest,
+        onReset: _this.onReset,
+        dateFormatter: dateFormatter,
+        search: search,
+        form: (0, _objectSpread2.default)((0, _objectSpread2.default)({
+          autoFocusFirstInput: false
+        }, form), {}, {
+          extraUrlParams: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pageInfo), form === null || form === void 0 ? void 0 : form.extraUrlParams)
+        }),
+        action: action,
+        bordered: (0, _index.isBordered)('search', cardBordered)
+      });
+    });
+    return _this;
+  }
+  return (0, _createClass2.default)(FormSearch);
+}(_react.default.Component);
+var _default = exports.default = FormSearch;