@pisell/materials 1.0.983 → 1.0.988

package/lib/components/PisellProcedure/PisellProcedure.js

@@ -33,232 +33,148 @@ __export(PisellProcedure_exports, {
 });
 module.exports = __toCommonJS(PisellProcedure_exports);
 var import_react = __toESM(require("react"));
-var import_classnames = __toESM(require("classnames"));
-var import_ProcedureHeader = __toESM(require("./components/ProcedureHeader"));
-var import_ProcedureContent = __toESM(require("./components/ProcedureContent"));
-var import_ProcedureSummary = __toESM(require("./components/ProcedureSummary"));
-var import_ProcedureAction = __toESM(require("./components/ProcedureAction"));
-var import_useResponsive = require("./hooks/useResponsive");
+var import_pisellLayout = __toESM(require("../pisellLayout"));
+var import_components = require("./components");
+var import_hooks = require("./hooks");
+var import_utils = require("./utils");
+var import_useMobile = require("../../hooks/useMobile");
 var import_PisellProcedure = require("./PisellProcedure.less");
-var PisellProcedure = ({
-  // 基础配置
-  current: controlledCurrent,
-  steps,
-  onStepChange,
-  onClose,
-  onPrev,
-  // 内容渲染
-  contentRender,
-  summaryRender,
-  actions = [],
-  // 布局配置
-  layout = "vertical",
-  bodyLayout = "horizontal",
-  contentWidth = "auto",
-  summaryWidth = 405,
-  // 显示控制
-  showHeader = true,
-  showSummary = true,
-  showAction = true,
-  showPrevButton = true,
-  showCloseButton = true,
-  // 定位配置
-  headerFixed = false,
-  actionMode = "embedded",
-  actionPosition = "bottom",
-  // 交互配置
-  summaryCollapsible = false,
-  summaryDefaultCollapsed = false,
-  validateOnStepChange = true,
-  onValidate,
-  clearOnBack = false,
-  confirmOnDataChange = true,
-  // 样式配置
-  headerClassName,
-  headerStyle,
-  contentClassName,
-  contentStyle,
-  summaryClassName,
-  summaryStyle,
-  actionClassName,
-  actionStyle,
-  className,
-  style,
-  // 插槽配置
-  headerExtra,
-  summaryExtra,
-  actionExtra,
-  // 组件属性透传
-  stepsProps,
-  prevButtonProps,
-  closeButtonProps,
-  // 状态配置
-  loading = false,
-  disabled = false
-}) => {
-  const [internalCurrent, setInternalCurrent] = (0, import_react.useState)(0);
-  const current = controlledCurrent ?? internalCurrent;
-  const [isLoading, setIsLoading] = (0, import_react.useState)(false);
-  const [summaryCollapsed, setSummaryCollapsed] = (0, import_react.useState)(
-    summaryDefaultCollapsed
+var PisellProcedure = (0, import_react.forwardRef)((props, ref) => {
+  const {
+    // 通用属性
+    className,
+    style,
+    mode = "page",
+    showHeader = true,
+    showSidebar = true,
+    showFooter = true,
+    // 步骤控制
+    defaultCurrent = 0,
+    onStepsChange,
+    // 区域配置
+    headerProps,
+    bodyProps,
+    footerProps,
+    // 事件回调
+    onClose,
+    onPrev,
+    onNext,
+    onFirstStepBack,
+    onBackConfirm,
+    onCloseConfirm,
+    // 低代码属性
+    __designMode,
+    __id,
+    ...other
+  } = props;
+  const isMobileDetected = (0, import_useMobile.useMobile)(744);
+  const isMobile = mode === "modal" ? false : isMobileDetected;
+  const { currentStep, goPrev, goNext, goToStep } = (0, import_hooks.useStepManager)({
+    stepsProps: headerProps == null ? void 0 : headerProps.stepsProps,
+    defaultCurrent,
+    onPrev,
+    onNext,
+    onStepsChange
+  });
+  const [summaryModalOpen, setSummaryModalOpen] = (0, import_react.useState)(false);
+  const openSummaryModal = (0, import_react.useCallback)(() => setSummaryModalOpen(true), []);
+  const closeSummaryModal = (0, import_react.useCallback)(() => setSummaryModalOpen(false), []);
+  (0, import_react.useImperativeHandle)(
+    ref,
+    () => ({
+      /**
+       * 跳转到上一步
+       */
+      goPrev: () => goPrev(),
+      /**
+       * 跳转到下一步
+       */
+      goNext: () => goNext(),
+      /**
+       * 跳转到指定步骤
+       */
+      goToStep: (step) => goToStep(step),
+      /**
+       * 获取当前步骤索引
+       */
+      getCurrentStep: () => currentStep,
+      /**
+       * 打开移动端总结弹窗
+       */
+      openSummaryModal,
+      /**
+       * 关闭移动端总结弹窗
+       */
+      closeSummaryModal
+    }),
+    [goPrev, goNext, goToStep, currentStep, openSummaryModal, closeSummaryModal]
   );
-  const responsive = (0, import_useResponsive.useResponsive)();
-  const isMobile = responsive.sm;
-  const mergedLoading = loading || isLoading;
-  (0, import_react.useEffect)(() => {
-    document.body.id = "body";
-  }, []);
-  const showSummaryArea = (0, import_react.useMemo)(() => {
-    return showSummary && !isMobile;
-  }, [showSummary, isMobile]);
-  const bodyStyle = (0, import_react.useMemo)(() => {
-    const baseStyle = {
-      flexDirection: bodyLayout === "vertical" ? "column" : "row"
-    };
-    return baseStyle;
-  }, [bodyLayout]);
-  const mergedContentStyle = (0, import_react.useMemo)(() => {
-    const baseStyle = {
-      ...contentStyle
-    };
-    if (contentWidth !== "auto") {
-      baseStyle.width = typeof contentWidth === "number" ? `${contentWidth}px` : contentWidth;
-    }
-    return baseStyle;
-  }, [contentStyle, contentWidth]);
-  const mergedSummaryStyle = (0, import_react.useMemo)(() => {
-    const baseStyle = {
-      ...summaryStyle
-    };
-    if (summaryWidth) {
-      baseStyle.width = typeof summaryWidth === "number" ? `${summaryWidth}px` : summaryWidth;
-    }
-    return baseStyle;
-  }, [summaryStyle, summaryWidth]);
-  const handleStepChange = (0, import_react.useCallback)(
-    async (nextStep) => {
-      if (validateOnStepChange && onValidate) {
-        setIsLoading(true);
-        try {
-          const isValid = await onValidate(current);
-          if (!isValid) {
-            setIsLoading(false);
-            return;
-          }
-        } catch (error) {
-          console.error("Validation error:", error);
-          setIsLoading(false);
-          return;
-        }
+  const footerPosition = (0, import_react.useMemo)(() => {
+    if (isMobile && mode !== "modal") return "float-all";
+    return (footerProps == null ? void 0 : footerProps.position) || "float-sidebar";
+  }, [mode, isMobile, footerProps == null ? void 0 : footerProps.position]);
+  const containerCls = (0, import_react.useMemo)(() => {
+    return (0, import_utils.mergeClassNames)(
+      "pisell-procedure",
+      className,
+      // 弹窗模式添加 --modal 修饰类，用于禁用媒体查询
+      mode === "modal" && "pisell-procedure--modal",
+      (0, import_utils.modifierClassName)("pisell-procedure", `footer-${footerPosition}`)
+    );
+  }, [className, mode, footerPosition]);
+  const footerIsGlobal = (0, import_utils.isFooterGlobal)(footerPosition);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: containerCls,
+      style,
+      "data-component": "pisell-procedure",
+      "data-id": __id,
+      ...other
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_pisellLayout.default, null, showHeader && /* @__PURE__ */ import_react.default.createElement(
+      import_components.ProcedureHeader,
+      {
+        headerProps,
+        currentStep,
+        goPrev,
+        onClose,
+        onFirstStepBack,
+        onBackConfirm,
+        onCloseConfirm,
+        goToStep
       }
-      try {
-        await (onStepChange == null ? void 0 : onStepChange(nextStep));
-      } catch (error) {
-        console.error("Step change error:", error);
-        setIsLoading(false);
-        return;
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_components.ProcedureBody,
+      {
+        bodyProps,
+        footerProps,
+        footerPosition,
+        showFooter: showFooter && !footerIsGlobal,
+        showSidebar,
+        summaryModalOpen,
+        onOpenSummaryModal: openSummaryModal,
+        onCloseSummaryModal: closeSummaryModal,
+        goPrev,
+        goNext,
+        mode
       }
-      if (controlledCurrent === void 0) {
-        setInternalCurrent(nextStep);
+    ), showFooter && footerIsGlobal && /* @__PURE__ */ import_react.default.createElement(
+      import_components.ProcedureFooter,
+      {
+        footerProps,
+        position: footerPosition,
+        isGlobal: true,
+        sidebarContent: bodyProps == null ? void 0 : bodyProps.sidebarSlot,
+        summaryModalOpen,
+        onOpenSummaryModal: openSummaryModal,
+        onCloseSummaryModal: closeSummaryModal,
+        goPrev,
+        goNext,
+        mode
       }
-      setIsLoading(false);
-    },
-    [current, controlledCurrent, validateOnStepChange, onValidate, onStepChange]
+    ))
   );
-  const handlePrev = (0, import_react.useCallback)(() => {
-    if (current > 0) {
-      if (onPrev) {
-        onPrev();
-      } else {
-        handleStepChange(current - 1);
-      }
-    }
-  }, [current, onPrev, handleStepChange]);
-  const handleClose = (0, import_react.useCallback)(() => {
-    onClose == null ? void 0 : onClose();
-  }, [onClose]);
-  const handleSummaryCollapseChange = (0, import_react.useCallback)((collapsed) => {
-    setSummaryCollapsed(collapsed);
-  }, []);
-  const mergedClassName = (0, import_react.useMemo)(() => {
-    return (0, import_classnames.default)(
-      "pisell-procedure",
-      `pisell-procedure-layout-${layout}`,
-      `pisell-procedure-body-${bodyLayout}`,
-      {
-        "pisell-procedure-loading": mergedLoading,
-        "pisell-procedure-disabled": disabled,
-        "pisell-procedure-mobile": isMobile,
-        "pisell-procedure-header-fixed": headerFixed,
-        "pisell-procedure-action-float": actionMode === "float",
-        "pisell-procedure-action-embedded": actionMode === "embedded"
-      },
-      className
-    );
-  }, [
-    layout,
-    bodyLayout,
-    mergedLoading,
-    disabled,
-    isMobile,
-    headerFixed,
-    actionMode,
-    className
-  ]);
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: mergedClassName, style }, showHeader && /* @__PURE__ */ import_react.default.createElement(
-    import_ProcedureHeader.default,
-    {
-      current,
-      steps,
-      stepsProps,
-      showPrevButton,
-      showCloseButton,
-      onPrev: handlePrev,
-      onClose: handleClose,
-      onStepClick: handleStepChange,
-      headerExtra,
-      prevButtonProps,
-      closeButtonProps,
-      fixed: headerFixed,
-      className: headerClassName,
-      style: headerStyle,
-      disabled: disabled || mergedLoading
-    }
-  ), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-body", style: bodyStyle }, /* @__PURE__ */ import_react.default.createElement(
-    import_ProcedureContent.default,
-    {
-      current,
-      contentRender,
-      className: contentClassName,
-      style: mergedContentStyle,
-      loading: mergedLoading
-    }
-  ), showSummaryArea && summaryRender && /* @__PURE__ */ import_react.default.createElement(
-    import_ProcedureSummary.default,
-    {
-      current,
-      summaryRender,
-      collapsible: summaryCollapsible,
-      defaultCollapsed: summaryDefaultCollapsed,
-      onCollapseChange: handleSummaryCollapseChange,
-      summaryExtra,
-      className: summaryClassName,
-      style: mergedSummaryStyle,
-      visible: !summaryCollapsed
-    }
-  )), showAction && actions.length > 0 && /* @__PURE__ */ import_react.default.createElement(
-    import_ProcedureAction.default,
-    {
-      actions,
-      mode: actionMode,
-      position: actionPosition,
-      actionExtra,
-      className: actionClassName,
-      style: actionStyle,
-      disabled,
-      loading: mergedLoading
-    }
-  ));
-};
+});
 PisellProcedure.displayName = "PisellProcedure";
 var PisellProcedure_default = PisellProcedure;