@zat-design/sisyphus-react 3.13.14-deta.2 → 4.0.0-beta.3

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

@@ -1,264 +1,192 @@
-"use strict";
+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);
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
+// src/ProDrawerForm/components/ProDrawer/index.tsx
+var ProDrawer_exports = {};
+__export(ProDrawer_exports, {
+  default: () => ProDrawer_default
 });
-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 _isArray2 = _interopRequireDefault(require("lodash/isArray"));
-var _jsxRuntime = require("react/jsx-runtime");
-var _react = _interopRequireWildcard(require("react"));
-var _ahooks = require("ahooks");
-var _reactSvg = require("react-svg");
-var _close = _interopRequireDefault(require("../../../assets/close.svg"));
-var _locale = _interopRequireDefault(require("../../../locale"));
-/**
- * 抽屉组件
- */
-var ProDrawer = function ProDrawer(_ref) {
-  var form = _ref.form,
-    title = _ref.title,
-    width = _ref.width,
-    footer = _ref.footer,
-    visible = _ref.visible,
-    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 在 visible 变更时延迟捕获 初始DOM 快照
-  (0, _react.useEffect)(function () {
-    if (visible) {
-      // 延迟到下一个事件循环，确保 Drawer 已经渲染
-      var timeoutId = setTimeout(function () {
+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)(() => {
+    if (open) {
+      const timeoutId = setTimeout(() => {
         if (ref.current) {
-          setInitialSnapshot(ref.current.innerHTML); // 捕获 DOM 快照
+          setInitialSnapshot(ref.current.innerHTML);
         }
-      }, 100); // 使用 setTimeout 让 DOM 渲染完成后再执行
-      return function () {
-        return clearTimeout(timeoutId);
-      }; // 清理定时器
+      }, 100);
+      return () => clearTimeout(timeoutId);
     }
-    setInitialSnapshot('');
-  }, [visible]); // 当 visible 变化时执行
-  // 快照对比
-  var compareSnapshots = function compareSnapshots() {
-    if (!ref.current) return false;
+    setInitialSnapshot("");
+  }, [open]);
+  const compareSnapshots = () => {
+    if (!ref.current)
+      return false;
     return ref.current.innerHTML === initialSnapshot;
   };
-  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 ? 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 ? 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 ? 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 ? void 0 : (_locale$ProDrawerForm4 = _locale.default.ProDrawerForm) === null || _locale$ProDrawerForm4 === void 0 ? void 0 : _locale$ProDrawerForm4.secondTipsWhenSave,
-              onOk: function onOk() {
-                onCancel && onCancel();
-              },
-              onCancel: function 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 (!visible) {
-            _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;
-          }
+  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();
-        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: () => {
+          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) {
+            onCancel && onCancel();
           }
+          return true;
+        }
+        toggleLoading(true);
+        if (onOk && await onOk(values, form) === true) {
           onCancel && onCancel();
-        case 24:
-          _context2.next = 29;
-          break;
-        case 26:
-          _context2.prev = 26;
-          _context2.t4 = _context2["catch"](0);
-          /** 使用setTimeout确保DOM已经更新，错误标记已经渲染 */
-          setTimeout(function () {
-            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 ? void 0 : (_error$errorFields = _context2.t4.errorFields) === null || _error$errorFields === void 0 ? 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();
+        }
       }
-    }, _callee2, null, [[0, 26, 29, 32]]);
-  })), [onOk, onCancel, form]);
-  /**
-   * 描述：默认底部操作按钮
-   *
-   */
-  var defaultFooter = (0, _jsxRuntime.jsxs)("div", {
-    className: "pro-drawer-footer",
-    children: [(0, _jsxRuntime.jsx)(_button.default, {
+    } 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,
+    {
       type: "primary",
       onClick: handleFinish,
-      loading: okLoading !== null && okLoading !== void 0 ? okLoading : loading,
-      disabled: okDisabled !== null && okDisabled !== void 0 ? okDisabled : loading,
-      children: okText
-    }), (0, _jsxRuntime.jsx)(_button.default, {
-      onClick: onCancel,
-      children: cancelText
-    })]
-  });
-  var renderFooter = function renderFooter() {
+      loading: okLoading ?? loading,
+      disabled: okDisabled ?? loading
+    },
+    okText
+  ), /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { onClick: onCancel }, cancelText));
+  const renderFooter = () => {
     if (noRenderFooter) {
       return null;
     }
-    if (/*#__PURE__*/_react.default.isValidElement(footer)) {
-      return (0, _jsxRuntime.jsx)("div", {
-        className: "pro-drawer-footer",
-        children: footer
-      });
+    if (import_react.default.isValidElement(footer)) {
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: "pro-drawer-footer" }, footer);
     }
-    if ((0, _isArray2.default)(footer) && (footer === null || footer === void 0 ? void 0 : footer.length)) {
-      return (0, _jsxRuntime.jsx)("div", {
-        className: "pro-drawer-footer",
-        children: footer.map(function (item) {
-          if (/*#__PURE__*/_react.default.isValidElement(item)) {
-            return item;
-          }
-          return false;
-        })
-      });
+    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;
+      }));
     }
     return defaultFooter;
   };
-  return (0, _jsxRuntime.jsxs)(_drawer.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
-    width: width,
-    open: visible,
-    maskClosable: maskClosable,
-    placement: "right",
-    className: "pro-drawer ".concat(className !== null && className !== void 0 ? className : ''),
-    closable: false,
-    onClose: onCancel,
-    zIndex: zIndex
-  }, drawerProps), {}, {
-    children: [(0, _jsxRuntime.jsx)("div", {
-      className: "pro-drawer-close",
-      onClick: onConfirm,
-      children: (0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, {
-        className: "close-icon",
-        src: _close.default
-      })
-    }), title ? (0, _jsxRuntime.jsx)("div", {
-      className: "pro-drawer-title ".concat(top > 0 ? 'pro-drawer-scrolling' : ''),
-      children: title
-    }) : null, (0, _jsxRuntime.jsx)("div", {
-      ref: ref,
-      className: "pro-drawer-content",
-      style: {
-        marginTop: title ? 64 : 0,
-        paddingBottom: noRenderFooter ? 0 : 64,
-        height: "calc(100% - ".concat(title ? 64 : 0, "px)")
+  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)`
+        }
       },
-      children: children
-    }), renderFooter()]
-  }));
+      children
+    ),
+    renderFooter()
+  );
 };
-var _default = exports.default = ProDrawer;
+var ProDrawer_default = ProDrawer;