@zat-design/sisyphus-react 4.0.0-beta.3 → 4.0.0-beta.5

package/lib/ProDrawerForm/components/ProDrawer/index.js

@@ -1,192 +1,266 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-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);
+"use strict";
 
-// src/ProDrawerForm/components/ProDrawer/index.tsx
-var ProDrawer_exports = {};
-__export(ProDrawer_exports, {
-  default: () => ProDrawer_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(ProDrawer_exports);
-var import_antd = require("antd");
-var import_react = __toESM(require("react"));
-var import_ahooks = require("ahooks");
-var import_classnames = __toESM(require("classnames"));
-var import_lodash = require("lodash");
-var import_react_svg = require("react-svg");
-var import_close = __toESM(require("../../../assets/close.svg"));
-var import_locale = __toESM(require("../../../locale"));
-var ProDrawer = ({
-  form,
-  title,
-  width,
-  footer,
-  open,
-  isView,
-  maskClosable,
-  isConfirmClose,
-  isConfirmCloseModalProps,
-  okText,
-  cancelText,
-  okLoading,
-  okDisabled,
-  onOk,
-  onCancel,
-  children,
-  className,
-  zIndex,
-  drawerProps
-}) => {
-  const ref = (0, import_react.useRef)(null);
-  const modalRef = (0, import_react.useRef)(null);
-  const { top } = (0, import_ahooks.useScroll)(ref) || {};
-  const [loading, toggleLoading] = (0, import_react.useState)(false);
-  const [initialSnapshot, setInitialSnapshot] = (0, import_react.useState)("");
-  const noRenderFooter = isView || footer === false || footer === null;
-  (0, import_react.useEffect)(() => {
+exports.default = void 0;
+require("antd/es/drawer/style");
+var _drawer = _interopRequireDefault(require("antd/es/drawer"));
+require("antd/es/button/style");
+var _button = _interopRequireDefault(require("antd/es/button"));
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+require("antd/es/modal/style");
+var _modal = _interopRequireDefault(require("antd/es/modal"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ahooks = require("ahooks");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _lodash = require("lodash");
+var _reactSvg = require("react-svg");
+var _close = _interopRequireDefault(require("../../../assets/close.svg"));
+var _locale = _interopRequireDefault(require("../../../locale"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 抽屉组件
+ */var ProDrawer = _ref => {
+  var form = _ref.form,
+    title = _ref.title,
+    width = _ref.width,
+    footer = _ref.footer,
+    open = _ref.open,
+    isView = _ref.isView,
+    maskClosable = _ref.maskClosable,
+    isConfirmClose = _ref.isConfirmClose,
+    isConfirmCloseModalProps = _ref.isConfirmCloseModalProps,
+    okText = _ref.okText,
+    cancelText = _ref.cancelText,
+    okLoading = _ref.okLoading,
+    okDisabled = _ref.okDisabled,
+    onOk = _ref.onOk,
+    onCancel = _ref.onCancel,
+    children = _ref.children,
+    className = _ref.className,
+    zIndex = _ref.zIndex,
+    drawerProps = _ref.drawerProps;
+  var ref = (0, _react.useRef)(null);
+  var modalRef = (0, _react.useRef)(null);
+  var _ref2 = (0, _ahooks.useScroll)(ref) || {},
+    top = _ref2.top;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    loading = _useState2[0],
+    toggleLoading = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    initialSnapshot = _useState4[0],
+    setInitialSnapshot = _useState4[1];
+  var noRenderFooter = isView || footer === false || footer === null;
+
+  // 使用 useEffect 在 open 变更时延迟捕获 初始DOM 快照
+  (0, _react.useEffect)(() => {
     if (open) {
-      const timeoutId = setTimeout(() => {
+      // 延迟到下一个事件循环，确保 Drawer 已经渲染
+      var timeoutId = setTimeout(() => {
         if (ref.current) {
-          setInitialSnapshot(ref.current.innerHTML);
+          setInitialSnapshot(ref.current.innerHTML); // 捕获 DOM 快照
         }
-      }, 100);
-      return () => clearTimeout(timeoutId);
+      }, 100); // 使用 setTimeout 让 DOM 渲染完成后再执行
+
+      return () => clearTimeout(timeoutId); // 清理定时器
     }
-    setInitialSnapshot("");
-  }, [open]);
-  const compareSnapshots = () => {
-    if (!ref.current)
-      return false;
+    setInitialSnapshot('');
+  }, [open]); // 当 open 变化时执行
+
+  // 快照对比
+  var compareSnapshots = () => {
+    if (!ref.current) return false;
     return ref.current.innerHTML === initialSnapshot;
   };
-  const onConfirm = (0, import_react.useCallback)(async () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    if (isView || !isConfirmClose || compareSnapshots()) {
-      onCancel && onCancel();
-    } else if (!modalRef.current) {
-      modalRef.current = import_antd.Modal.confirm({
-        className: "width430",
-        title: (_b = (_a = import_locale.default) == null ? void 0 : _a.ProDrawerForm) == null ? void 0 : _b.isSureClose,
-        okText: (_d = (_c = import_locale.default) == null ? void 0 : _c.ProDrawerForm) == null ? void 0 : _d.confirm,
-        cancelText: (_f = (_e = import_locale.default) == null ? void 0 : _e.ProDrawerForm) == null ? void 0 : _f.cancel,
-        content: (_h = (_g = import_locale.default) == null ? void 0 : _g.ProDrawerForm) == null ? void 0 : _h.secondTipsWhenSave,
-        onOk: () => {
-          onCancel && onCancel();
-        },
-        onCancel: () => {
-          modalRef.current = null;
-        },
-        ...isConfirmCloseModalProps
-      });
-    }
-  }, [onCancel, modalRef.current, ref.current]);
-  const handleFinish = (0, import_react.useCallback)(async () => {
-    try {
-      if (open) {
-        const values = await form.validateFields();
-        if (okLoading !== void 0) {
-          if (onOk && await onOk(values, form) === true) {
+  var onConfirm = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+    var _locale$ProDrawerForm, _locale$ProDrawerForm2, _locale$ProDrawerForm3, _locale$ProDrawerForm4;
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          // 如果当前是查看状态，或者不需要确认关闭，或者快照对比一致，则直接关闭
+          if (isView || !isConfirmClose || compareSnapshots()) {
             onCancel && onCancel();
+          } else if (!modalRef.current) {
+            modalRef.current = _modal.default.confirm((0, _objectSpread2.default)({
+              className: 'width430',
+              title: _locale.default === null || _locale.default === void 0 || (_locale$ProDrawerForm = _locale.default.ProDrawerForm) === null || _locale$ProDrawerForm === void 0 ? void 0 : _locale$ProDrawerForm.isSureClose,
+              okText: _locale.default === null || _locale.default === void 0 || (_locale$ProDrawerForm2 = _locale.default.ProDrawerForm) === null || _locale$ProDrawerForm2 === void 0 ? void 0 : _locale$ProDrawerForm2.confirm,
+              cancelText: _locale.default === null || _locale.default === void 0 || (_locale$ProDrawerForm3 = _locale.default.ProDrawerForm) === null || _locale$ProDrawerForm3 === void 0 ? void 0 : _locale$ProDrawerForm3.cancel,
+              content: _locale.default === null || _locale.default === void 0 || (_locale$ProDrawerForm4 = _locale.default.ProDrawerForm) === null || _locale$ProDrawerForm4 === void 0 ? void 0 : _locale$ProDrawerForm4.secondTipsWhenSave,
+              onOk: () => {
+                onCancel && onCancel();
+              },
+              onCancel: () => {
+                modalRef.current = null;
+              }
+            }, isConfirmCloseModalProps));
+          }
+        case 1:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), [onCancel, modalRef.current, ref.current]);
+  var handleFinish = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2() {
+    var values;
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _context2.prev = 0;
+          if (!open) {
+            _context2.next = 24;
+            break;
+          }
+          _context2.next = 4;
+          return form.validateFields();
+        case 4:
+          values = _context2.sent;
+          if (!(okLoading !== undefined)) {
+            _context2.next = 15;
+            break;
+          }
+          _context2.t0 = onOk;
+          if (!_context2.t0) {
+            _context2.next = 12;
+            break;
+          }
+          _context2.next = 10;
+          return onOk(values, form);
+        case 10:
+          _context2.t1 = _context2.sent;
+          _context2.t0 = _context2.t1 === true;
+        case 12:
+          if (!_context2.t0) {
+            _context2.next = 14;
+            break;
           }
-          return true;
-        }
-        toggleLoading(true);
-        if (onOk && await onOk(values, form) === true) {
           onCancel && onCancel();
-        }
+        case 14:
+          return _context2.abrupt("return", true);
+        case 15:
+          toggleLoading(true);
+          _context2.t2 = onOk;
+          if (!_context2.t2) {
+            _context2.next = 22;
+            break;
+          }
+          _context2.next = 20;
+          return onOk(values, form);
+        case 20:
+          _context2.t3 = _context2.sent;
+          _context2.t2 = _context2.t3 === true;
+        case 22:
+          if (!_context2.t2) {
+            _context2.next = 24;
+            break;
+          }
+          onCancel && onCancel();
+        case 24:
+          _context2.next = 29;
+          break;
+        case 26:
+          _context2.prev = 26;
+          _context2.t4 = _context2["catch"](0);
+          /** 使用setTimeout确保DOM已经更新，错误标记已经渲染 */
+          setTimeout(() => {
+            var _ref$current, _error$errorFields;
+            var errorElement = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector('[class*="form-item-has-error"]');
+            if (errorElement && _context2.t4 !== null && _context2.t4 !== void 0 && (_error$errorFields = _context2.t4.errorFields) !== null && _error$errorFields !== void 0 && _error$errorFields.length) {
+              errorElement.scrollIntoView({
+                behavior: 'smooth',
+                block: 'center'
+              });
+            }
+          }, 100);
+        case 29:
+          _context2.prev = 29;
+          toggleLoading(false);
+          return _context2.finish(29);
+        case 32:
+        case "end":
+          return _context2.stop();
       }
-    } catch (error) {
-      setTimeout(() => {
-        var _a, _b;
-        const errorElement = (_a = ref.current) == null ? void 0 : _a.querySelector('[class*="form-item-has-error"]');
-        if (errorElement && ((_b = error == null ? void 0 : error.errorFields) == null ? void 0 : _b.length)) {
-          errorElement.scrollIntoView({ behavior: "smooth", block: "center" });
-        }
-      }, 100);
-    } finally {
-      toggleLoading(false);
-    }
-  }, [onOk, onCancel, form]);
-  const defaultFooter = /* @__PURE__ */ import_react.default.createElement("div", { className: "pro-drawer-footer" }, /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Button,
-    {
+    }, _callee2, null, [[0, 26, 29, 32]]);
+  })), [onOk, onCancel, form]);
+
+  /**
+   * 描述：默认底部操作按钮
+   *
+   */
+  var defaultFooter = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "pro-drawer-footer",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
       type: "primary",
       onClick: handleFinish,
-      loading: okLoading ?? loading,
-      disabled: okDisabled ?? loading
-    },
-    okText
-  ), /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { onClick: onCancel }, cancelText));
-  const renderFooter = () => {
+      loading: okLoading !== null && okLoading !== void 0 ? okLoading : loading,
+      disabled: okDisabled !== null && okDisabled !== void 0 ? okDisabled : loading,
+      children: okText
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+      onClick: onCancel,
+      children: cancelText
+    })]
+  });
+  var renderFooter = () => {
     if (noRenderFooter) {
       return null;
     }
-    if (import_react.default.isValidElement(footer)) {
-      return /* @__PURE__ */ import_react.default.createElement("div", { className: "pro-drawer-footer" }, footer);
+    if ( /*#__PURE__*/_react.default.isValidElement(footer)) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "pro-drawer-footer",
+        children: footer
+      });
     }
-    if ((0, import_lodash.isArray)(footer) && (footer == null ? void 0 : footer.length)) {
-      return /* @__PURE__ */ import_react.default.createElement("div", { className: "pro-drawer-footer" }, footer.map((item) => {
-        if (import_react.default.isValidElement(item)) {
-          return item;
-        }
-        return false;
-      }));
+    if ((0, _lodash.isArray)(footer) && footer !== null && footer !== void 0 && footer.length) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "pro-drawer-footer",
+        children: footer.map(item => {
+          if ( /*#__PURE__*/_react.default.isValidElement(item)) {
+            return item;
+          }
+          return false;
+        })
+      });
     }
     return defaultFooter;
   };
-  return /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Drawer,
-    {
-      width,
-      open,
-      maskClosable,
-      placement: "right",
-      rootClassName: (0, import_classnames.default)(className, "pro-drawer"),
-      closable: false,
-      onClose: onCancel,
-      zIndex,
-      ...drawerProps
-    },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "pro-drawer-close", onClick: onConfirm }, /* @__PURE__ */ import_react.default.createElement(import_react_svg.ReactSVG, { className: "close-icon", src: import_close.default })),
-    title ? /* @__PURE__ */ import_react.default.createElement("div", { className: `pro-drawer-title ${top > 0 ? "pro-drawer-scrolling" : ""}` }, title) : null,
-    /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        ref,
-        className: "pro-drawer-content",
-        style: {
-          marginTop: title ? 64 : 0,
-          paddingBottom: noRenderFooter ? 0 : 64,
-          height: `calc(100% - ${title ? 64 : 0}px)`
-        }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_drawer.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    width: width,
+    open: open,
+    maskClosable: maskClosable,
+    placement: "right",
+    rootClassName: (0, _classnames.default)(className, 'pro-drawer'),
+    closable: false,
+    onClose: onCancel,
+    zIndex: zIndex
+  }, drawerProps), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "pro-drawer-close",
+      onClick: onConfirm,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, {
+        className: "close-icon",
+        src: _close.default
+      })
+    }), title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: `pro-drawer-title ${top > 0 ? 'pro-drawer-scrolling' : ''}`,
+      children: title
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: ref,
+      className: "pro-drawer-content",
+      style: {
+        marginTop: title ? 64 : 0,
+        paddingBottom: noRenderFooter ? 0 : 64,
+        height: `calc(100% - ${title ? 64 : 0}px)`
       },
-      children
-    ),
-    renderFooter()
-  );
+      children: children
+    }), renderFooter()]
+  }));
 };
-var ProDrawer_default = ProDrawer;
+var _default = exports.default = ProDrawer;