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

package/lib/ProStepTab/index.js

@@ -1,199 +1,330 @@
-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);
-
-// src/ProStepTab/index.ts
-var ProStepTab_exports = {};
-__export(ProStepTab_exports, {
-  default: () => ProStepTab_default,
-  useStepTab: () => useStepTab,
-  useStepTabInstance: () => useStepTabInstance
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(ProStepTab_exports);
-var import_react = __toESM(require("react"));
-var import_lodash = require("lodash");
-var StepTabInstanceContext = (0, import_react.createContext)(null);
+exports.default = void 0;
+exports.useStepTab = useStepTab;
+exports.useStepTabInstance = useStepTabInstance;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = require("lodash");
+var _excluded = ["children"];
+// 存储当前的 StepTab 实例
+var StepTabInstanceContext = /*#__PURE__*/(0, _react.createContext)(null);
+
+/**
+ * 使用原生 JS 获取 URL 搜索参数
+ * @returns 当前 URL 的搜索参数和路径
+ */
 var useNativeLocation = () => {
-  const [location, setLocation] = (0, import_react.useState)({
-    search: window.location.search,
-    pathname: window.location.pathname
-  });
-  (0, import_react.useEffect)(() => {
-    const handleLocationChange = () => {
+  var _useState = (0, _react.useState)({
+      search: window.location.search,
+      pathname: window.location.pathname
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    location = _useState2[0],
+    setLocation = _useState2[1];
+
+  // 监听 popstate 事件，更新 location 状态
+  (0, _react.useEffect)(() => {
+    var handleLocationChange = () => {
       setLocation({
         search: window.location.search,
         pathname: window.location.pathname
       });
     };
-    window.addEventListener("popstate", handleLocationChange);
+    window.addEventListener('popstate', handleLocationChange);
     return () => {
-      window.removeEventListener("popstate", handleLocationChange);
+      window.removeEventListener('popstate', handleLocationChange);
     };
   }, []);
   return location;
 };
-function useStepTab(props = {}) {
-  const {
-    routerKeep = false,
-    routerSearchKey = "tab",
-    validate = true,
-    onBeforeChange,
-    onAfterChange,
-    defaultActiveKey,
-    defaultStep = 1,
-    queueSteps,
-    autoNext = false
-  } = props;
-  const [handlesState, setHandlesState] = (0, import_react.useState)({});
-  const location = useNativeLocation();
-  const getInitialActiveKey = (0, import_react.useCallback)(() => {
+
+/**
+ * 步骤化Tab管理钩子，用于管理多步骤表单或流程的切换和验证
+ *
+ * @param {ProStepTabType} props 配置参数
+ * @returns {ProStepTabResultType} 返回步骤Tab相关方法和状态
+ */
+function useStepTab() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _props$routerKeep = props.routerKeep,
+    routerKeep = _props$routerKeep === void 0 ? false : _props$routerKeep,
+    _props$routerSearchKe = props.routerSearchKey,
+    routerSearchKey = _props$routerSearchKe === void 0 ? 'tab' : _props$routerSearchKe,
+    _props$validate = props.validate,
+    validate = _props$validate === void 0 ? true : _props$validate,
+    onBeforeChange = props.onBeforeChange,
+    onAfterChange = props.onAfterChange,
+    defaultActiveKey = props.defaultActiveKey,
+    _props$defaultStep = props.defaultStep,
+    defaultStep = _props$defaultStep === void 0 ? 1 : _props$defaultStep,
+    queueSteps = props.queueSteps,
+    _props$autoNext = props.autoNext,
+    autoNext = _props$autoNext === void 0 ? false : _props$autoNext;
+
+  // 内部状态，避免全局污染
+  var _useState3 = (0, _react.useState)({}),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    handlesState = _useState4[0],
+    setHandlesState = _useState4[1];
+  var location = useNativeLocation();
+
+  // 获取初始激活的tab key
+  var getInitialActiveKey = (0, _react.useCallback)(() => {
     if (routerKeep) {
-      const urlSearchParams = new URLSearchParams(location.search);
-      const tabValue = urlSearchParams.get(routerSearchKey);
+      var urlSearchParams = new URLSearchParams(location.search);
+      var tabValue = urlSearchParams.get(routerSearchKey);
       if (tabValue) {
         return tabValue;
       }
     }
-    return defaultActiveKey || "1";
+    return defaultActiveKey || '1';
   }, [routerKeep, routerSearchKey, location.search, defaultActiveKey]);
-  const getInitialStep = (0, import_react.useCallback)(() => {
+
+  // 获取初始激活的步骤
+  var getInitialStep = (0, _react.useCallback)(() => {
     if (routerKeep) {
-      const urlSearchParams = new URLSearchParams(location.search);
-      const stepValue = urlSearchParams.get(routerSearchKey);
-      if (stepValue && !(0, import_lodash.isNaN)(Number(stepValue))) {
+      var urlSearchParams = new URLSearchParams(location.search);
+      var stepValue = urlSearchParams.get(routerSearchKey);
+      // 如果stepValue是数字，则返回数字
+      if (stepValue && !(0, _lodash.isNaN)(Number(stepValue))) {
         return Number(stepValue);
       }
     }
     return defaultStep;
   }, [routerKeep, routerSearchKey, location.search, defaultStep]);
-  const [activeKey, setActiveKeyState] = (0, import_react.useState)(getInitialActiveKey());
-  const [step, setStepState] = (0, import_react.useState)(getInitialStep());
-  const [loading, setLoading] = (0, import_react.useState)(false);
-  (0, import_react.useEffect)(() => {
+  var _useState5 = (0, _react.useState)(getInitialActiveKey()),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    activeKey = _useState6[0],
+    setActiveKeyState = _useState6[1];
+  var _useState7 = (0, _react.useState)(getInitialStep()),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    step = _useState8[0],
+    setStepState = _useState8[1]; // 当前已激活步骤
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    loading = _useState10[0],
+    setLoading = _useState10[1];
+
+  // 同步URL参数
+  (0, _react.useEffect)(() => {
     if (routerKeep && activeKey) {
-      const urlSearchParams = new URLSearchParams(location.search);
+      // 更新URL参数
+      var urlSearchParams = new URLSearchParams(location.search);
       urlSearchParams.set(routerSearchKey, activeKey);
-      const newUrl = `${location.pathname}?${urlSearchParams.toString()}`;
-      window.history.replaceState(null, "", newUrl);
+
+      // 使用原生 history API 更新 URL
+      var newUrl = `${location.pathname}?${urlSearchParams.toString()}`;
+      window.history.replaceState(null, '', newUrl);
     }
   }, [activeKey, routerKeep, routerSearchKey, location]);
-  const wrapHandleWithLoading = (0, import_react.useCallback)((fn) => {
-    return async () => {
-      setLoading(true);
-      try {
-        const result = await fn();
-        setLoading(false);
-        return result;
-      } catch (error) {
-        setLoading(false);
-        return false;
-      }
-    };
+
+  // 创建一个包装函数，自动处理loading状态
+  var wrapHandleWithLoading = (0, _react.useCallback)(fn => {
+    return /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+      var result;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setLoading(true);
+            _context.prev = 1;
+            _context.next = 4;
+            return fn();
+          case 4:
+            result = _context.sent;
+            setLoading(false);
+            return _context.abrupt("return", result);
+          case 9:
+            _context.prev = 9;
+            _context.t0 = _context["catch"](1);
+            setLoading(false);
+            return _context.abrupt("return", false);
+          case 13:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[1, 9]]);
+    }));
   }, []);
-  const registerHandle = (0, import_react.useCallback)((key, handler) => {
-    setHandlesState((prev) => ({
-      ...prev,
+
+  // 注册步骤处理函数
+  var registerHandle = (0, _react.useCallback)((key, handler) => {
+    // 使用wrapHandleWithLoading包装处理函数
+    setHandlesState(prev => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
       [key]: wrapHandleWithLoading(handler)
     }));
   }, [wrapHandleWithLoading]);
-  const getHandle = (0, import_react.useCallback)((key) => {
+
+  // 获取步骤处理函数
+  var getHandle = (0, _react.useCallback)(key => {
     return handlesState[key];
   }, [handlesState]);
-  const validateAndChange = (0, import_react.useCallback)(
-    async (targetKey) => {
-      if (targetKey === activeKey)
-        return true;
-      try {
-        const currentHandler = handlesState[activeKey];
-        if (currentHandler && validate) {
-          const handleResult = await currentHandler();
-          if (!handleResult) {
-            return false;
-          }
-        }
-        if (onBeforeChange) {
-          const beforeResult = await onBeforeChange(activeKey, targetKey);
-          if (beforeResult === false) {
-            return false;
-          }
+
+  // 处理表单验证和切换（内部使用）
+  var validateAndChange = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2(targetKey) {
+      var currentHandler, handleResult, beforeResult;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!(targetKey === activeKey)) {
+              _context2.next = 2;
+              break;
+            }
+            return _context2.abrupt("return", true);
+          case 2:
+            _context2.prev = 2;
+            // 执行当前步骤的保存处理, 如果validate为true，则执行验证
+            currentHandler = handlesState[activeKey];
+            if (!(currentHandler && validate)) {
+              _context2.next = 10;
+              break;
+            }
+            _context2.next = 7;
+            return currentHandler();
+          case 7:
+            handleResult = _context2.sent;
+            if (handleResult) {
+              _context2.next = 10;
+              break;
+            }
+            return _context2.abrupt("return", false);
+          case 10:
+            if (!onBeforeChange) {
+              _context2.next = 16;
+              break;
+            }
+            _context2.next = 13;
+            return onBeforeChange(activeKey, targetKey);
+          case 13:
+            beforeResult = _context2.sent;
+            if (!(beforeResult === false)) {
+              _context2.next = 16;
+              break;
+            }
+            return _context2.abrupt("return", false);
+          case 16:
+            // 更新激活的key
+            setActiveKeyState(targetKey);
+
+            // 执行切换后回调
+            if (onAfterChange) {
+              onAfterChange(targetKey);
+            }
+            return _context2.abrupt("return", true);
+          case 21:
+            _context2.prev = 21;
+            _context2.t0 = _context2["catch"](2);
+            // 验证失败
+            console.error('Tab切换验证失败:', _context2.t0);
+            return _context2.abrupt("return", false);
+          case 25:
+          case "end":
+            return _context2.stop();
         }
-        setActiveKeyState(targetKey);
-        if (onAfterChange) {
-          onAfterChange(targetKey);
+      }, _callee2, null, [[2, 21]]);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [activeKey, validate, onBeforeChange, onAfterChange, handlesState]);
+
+  // 设置激活的key
+  var setCheckActiveKey = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee3(targetKey, validate) {
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            if (!(validate === false)) {
+              _context3.next = 3;
+              break;
+            }
+            setActiveKeyState(targetKey);
+            return _context3.abrupt("return", true);
+          case 3:
+            return _context3.abrupt("return", validateAndChange(targetKey));
+          case 4:
+          case "end":
+            return _context3.stop();
         }
-        return true;
-      } catch (error) {
-        console.error("Tab切换验证失败:", error);
-        return false;
-      }
-    },
-    [activeKey, validate, onBeforeChange, onAfterChange, handlesState]
-  );
-  const setCheckActiveKey = (0, import_react.useCallback)(
-    async (targetKey, validate2) => {
-      if (validate2 === false) {
-        setActiveKeyState(targetKey);
-        return true;
-      }
-      return validateAndChange(targetKey);
-    },
-    [validateAndChange]
-  );
-  const saveHandle = (0, import_react.useCallback)(async () => {
-    const handler = handlesState[activeKey];
-    if (handler) {
-      const result = await handler();
-      if (result && autoNext) {
-        const currentKeyNum = Number(activeKey);
-        if (!(0, import_lodash.isNaN)(currentKeyNum)) {
-          let nextKey = String(currentKeyNum + 1);
+      }, _callee3);
+    }));
+    return function (_x2, _x3) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), [validateAndChange]);
+
+  // 执行当前步骤处理函数
+  var saveHandle = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee4() {
+    var handler, result, currentKeyNum, nextKey;
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          handler = handlesState[activeKey];
+          if (!handler) {
+            _context4.next = 15;
+            break;
+          }
+          _context4.next = 4;
+          return handler();
+        case 4:
+          result = _context4.sent;
+          if (!(result && autoNext)) {
+            _context4.next = 12;
+            break;
+          }
+          // 只有当activeKey能转换为数字时才执行自动跳转
+          currentKeyNum = Number(activeKey);
+          if ((0, _lodash.isNaN)(currentKeyNum)) {
+            _context4.next = 12;
+            break;
+          }
+          nextKey = String(currentKeyNum + 1);
           if (Number(nextKey) > queueSteps) {
             nextKey = String(queueSteps);
           }
-          await setCheckActiveKey(nextKey, false);
-        }
-      }
-      if (result === false) {
-        return Promise.reject();
+          // 自动跳转到下一个tab
+          _context4.next = 12;
+          return setCheckActiveKey(nextKey, false);
+        case 12:
+          if (!(result === false)) {
+            _context4.next = 14;
+            break;
+          }
+          return _context4.abrupt("return", Promise.reject());
+        case 14:
+          return _context4.abrupt("return", result);
+        case 15:
+          return _context4.abrupt("return", Promise.resolve(true));
+        case 16:
+        case "end":
+          return _context4.stop();
       }
-      return result;
-    }
-    return Promise.resolve(true);
-  }, [activeKey, handlesState, autoNext, queueSteps, setCheckActiveKey]);
-  const setStep = (0, import_react.useCallback)((step2) => {
-    if (step2 > queueSteps) {
+    }, _callee4);
+  })), [activeKey, handlesState, autoNext, queueSteps, setCheckActiveKey]);
+
+  // 拦截setStep, 最大值是queueSteps
+  var setStep = (0, _react.useCallback)(step => {
+    if (step > queueSteps) {
       return;
     }
-    setStepState(step2);
+    setStepState(step);
   }, [queueSteps]);
-  const resetHandles = (0, import_react.useCallback)(() => {
+
+  // 重置handles，用于清空或组件卸载时调用
+  var resetHandles = (0, _react.useCallback)(() => {
     setHandlesState({});
   }, []);
-  const stepTabInstance = {
+  var stepTabInstance = {
     activeKey,
     setCheckActiveKey,
     loading,
@@ -208,25 +339,35 @@ function useStepTab(props = {}) {
   };
   return stepTabInstance;
 }
+
+/**
+ * 在子组件中获取父级 StepTab 实例的钩子
+ * @returns {ProStepTabResultType} 步骤Tab实例
+ */
 function useStepTabInstance() {
-  const context = (0, import_react.useContext)(StepTabInstanceContext);
+  var context = (0, _react.useContext)(StepTabInstanceContext);
   if (context === null) {
-    throw new Error("useStepTabInstance must be used inside a ProStepTab component");
+    throw new Error('useStepTabInstance must be used inside a ProStepTab component');
   }
   return context;
 }
-var ProStepTab = ({ children, ...rest }) => {
-  const stepTabInstance = useStepTab(rest);
-  return import_react.default.createElement(
-    StepTabInstanceContext.Provider,
-    { value: stepTabInstance },
-    children
-  );
+
+// 扩展FC类型，添加静态方法
+
+/**
+ * ProStepTab 组件
+ */
+var ProStepTab = _ref5 => {
+  var children = _ref5.children,
+    rest = (0, _objectWithoutProperties2.default)(_ref5, _excluded);
+  var stepTabInstance = useStepTab(rest);
+  return /*#__PURE__*/_react.default.createElement(StepTabInstanceContext.Provider, {
+    value: stepTabInstance
+  }, children);
 };
+
+// 将 useStepTabInstance 挂载到 ProStepTab 上作为静态方法
 ProStepTab.useStepTabInstance = useStepTabInstance;
-var ProStepTab_default = ProStepTab;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  useStepTab,
-  useStepTabInstance
-});
+
+// 导出默认组件
+var _default = exports.default = ProStepTab;

package/lib/ProStepTab/propsType.js

@@ -1,17 +1,5 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/ProStepTab/propsType.ts
-var propsType_exports = {};
-module.exports = __toCommonJS(propsType_exports);
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});