@pisell/materials 6.7.4 → 6.8.2

package/lib/components/PisellProcedure/components/ProcedureBody.js

@@ -0,0 +1,157 @@
+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/components/PisellProcedure/components/ProcedureBody.tsx
+var ProcedureBody_exports = {};
+__export(ProcedureBody_exports, {
+  default: () => ProcedureBody_default
+});
+module.exports = __toCommonJS(ProcedureBody_exports);
+var import_react = __toESM(require("react"));
+var import_pisellLayout = __toESM(require("../../pisellLayout"));
+var import_ProcedureContent = __toESM(require("./ProcedureContent"));
+var import_ProcedureSidebar = __toESM(require("./ProcedureSidebar"));
+var import_ProcedureFooter = __toESM(require("./ProcedureFooter"));
+var import_utils = require("../utils");
+var ProcedureBody = ({
+  bodyProps,
+  footerProps,
+  footerPosition,
+  showFooter = true,
+  showSidebar = true,
+  className,
+  summaryModalOpen,
+  onOpenSummaryModal,
+  onCloseSummaryModal,
+  goPrev,
+  goNext,
+  mode = "page"
+}) => {
+  const direction = (bodyProps == null ? void 0 : bodyProps.direction) || "horizontal";
+  const contentOrder = (bodyProps == null ? void 0 : bodyProps.contentOrder) || "content-first";
+  const layoutMode = (bodyProps == null ? void 0 : bodyProps.layoutMode) || "fixed";
+  const layoutRatio = (bodyProps == null ? void 0 : bodyProps.layoutRatio) || "7:3";
+  const bodyCls = (0, import_react.useMemo)(() => {
+    return (0, import_utils.mergeClassNames)(
+      "pisell-procedure-body",
+      className,
+      bodyProps == null ? void 0 : bodyProps.className,
+      // 添加排列方向类名
+      `pisell-procedure-body--${direction}`,
+      // 添加布局模式类名
+      `pisell-procedure-body--${layoutMode}`,
+      // 添加内容顺序类名
+      `pisell-procedure-body--${contentOrder}`
+    );
+  }, [className, bodyProps == null ? void 0 : bodyProps.className, direction, layoutMode, contentOrder]);
+  const ratioStyles = (0, import_react.useMemo)(() => {
+    if (layoutMode !== "ratio") return null;
+    return (0, import_utils.generateRatioStyles)(layoutRatio, 16);
+  }, [layoutMode, layoutRatio]);
+  const contentStyle = (0, import_react.useMemo)(() => {
+    if (layoutMode === "ratio" && ratioStyles) {
+      return { ...ratioStyles.contentStyle, ...bodyProps == null ? void 0 : bodyProps.contentStyle };
+    }
+    return bodyProps == null ? void 0 : bodyProps.contentStyle;
+  }, [layoutMode, ratioStyles, bodyProps == null ? void 0 : bodyProps.contentStyle]);
+  const sidebarStyle = (0, import_react.useMemo)(() => {
+    if (layoutMode === "ratio" && ratioStyles) {
+      return { ...ratioStyles.sidebarStyle, ...bodyProps == null ? void 0 : bodyProps.sidebarStyle };
+    }
+    return bodyProps == null ? void 0 : bodyProps.sidebarStyle;
+  }, [layoutMode, ratioStyles, bodyProps == null ? void 0 : bodyProps.sidebarStyle]);
+  const sidebarContent = bodyProps == null ? void 0 : bodyProps.sidebarSlot;
+  const contentFooter = (0, import_react.useMemo)(() => {
+    if (!showFooter || !(0, import_utils.isFooterInContent)(footerPosition)) return null;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_ProcedureFooter.default,
+      {
+        footerProps,
+        position: footerPosition,
+        sidebarContent,
+        summaryModalOpen,
+        onOpenSummaryModal,
+        onCloseSummaryModal,
+        goPrev,
+        goNext,
+        mode
+      }
+    );
+  }, [showFooter, footerPosition, footerProps, sidebarContent, summaryModalOpen, onOpenSummaryModal, onCloseSummaryModal, goPrev, goNext, mode]);
+  const sidebarFooter = (0, import_react.useMemo)(() => {
+    if (!showFooter || !(0, import_utils.isFooterInSidebar)(footerPosition)) return null;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_ProcedureFooter.default,
+      {
+        footerProps,
+        position: footerPosition,
+        sidebarContent,
+        summaryModalOpen,
+        onOpenSummaryModal,
+        onCloseSummaryModal,
+        goPrev,
+        goNext,
+        mode
+      }
+    );
+  }, [showFooter, footerPosition, footerProps, sidebarContent, summaryModalOpen, onOpenSummaryModal, onCloseSummaryModal, goPrev, goNext, mode]);
+  const layoutStyle = (0, import_react.useMemo)(() => ({
+    flexDirection: direction === "vertical" ? "column" : "row"
+  }), [direction]);
+  const contentComponent = /* @__PURE__ */ import_react.default.createElement(
+    import_ProcedureContent.default,
+    {
+      className: bodyProps == null ? void 0 : bodyProps.contentClassName,
+      style: contentStyle,
+      extra: contentFooter
+    },
+    bodyProps == null ? void 0 : bodyProps.contentSlot
+  );
+  const sidebarComponent = showSidebar ? /* @__PURE__ */ import_react.default.createElement(
+    import_ProcedureSidebar.default,
+    {
+      className: bodyProps == null ? void 0 : bodyProps.sidebarClassName,
+      style: sidebarStyle,
+      extra: sidebarFooter,
+      isRatioMode: layoutMode === "ratio",
+      containerSelector: bodyProps == null ? void 0 : bodyProps.sidebarContainerSelector,
+      mode,
+      direction
+    },
+    bodyProps == null ? void 0 : bodyProps.sidebarSlot
+  ) : null;
+  const orderedChildren = (0, import_react.useMemo)(() => {
+    if (contentOrder === "sidebar-first") {
+      return [sidebarComponent, contentComponent].filter(Boolean);
+    }
+    return [contentComponent, sidebarComponent].filter(Boolean);
+  }, [contentOrder, contentComponent, sidebarComponent]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: bodyCls, style: bodyProps == null ? void 0 : bodyProps.style }, /* @__PURE__ */ import_react.default.createElement(import_pisellLayout.default, { style: layoutStyle }, orderedChildren));
+};
+ProcedureBody.displayName = "ProcedureBody";
+var ProcedureBody_default = ProcedureBody;

package/lib/components/PisellProcedure/components/ProcedureContent.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+/**
+ * ProcedureContent 子组件 Props
+ */
+export interface ProcedureContentProps {
+    /** 内容区类名 */
+    className?: string;
+    /** 内容区样式 */
+    style?: CSSProperties;
+    /** 内容区插槽 */
+    children?: ReactNode;
+    /** 额外内容（如底部操作区） */
+    extra?: ReactNode;
+}
+/**
+ * ProcedureContent 内容区组件
+ *
+ * @description 流程容器的主要内容展示区域
+ * @author Pisell Team
+ */
+declare const ProcedureContent: React.FC<ProcedureContentProps>;
+export default ProcedureContent;

package/lib/components/PisellProcedure/components/ProcedureContent.js

@@ -0,0 +1,50 @@
+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/components/PisellProcedure/components/ProcedureContent.tsx
+var ProcedureContent_exports = {};
+__export(ProcedureContent_exports, {
+  default: () => ProcedureContent_default
+});
+module.exports = __toCommonJS(ProcedureContent_exports);
+var import_react = __toESM(require("react"));
+var import_content = __toESM(require("../../pisellLayout/content"));
+var import_utils = require("../utils");
+var ProcedureContent = ({
+  className,
+  style,
+  children,
+  extra
+}) => {
+  const contentCls = (0, import_react.useMemo)(() => {
+    return (0, import_utils.mergeClassNames)("pisell-procedure-content", className);
+  }, [className]);
+  return /* @__PURE__ */ import_react.default.createElement(import_content.default, { className: contentCls, style }, children, extra);
+};
+ProcedureContent.displayName = "ProcedureContent";
+var ProcedureContent_default = ProcedureContent;

package/lib/components/PisellProcedure/components/ProcedureFooter.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { ProcedureFooterProps as FooterProps, FooterPositionMode, ProcedureMode } from '../types';
+import type { ReactNode } from 'react';
+/**
+ * ProcedureFooter 子组件 Props
+ */
+export interface ProcedureFooterProps {
+    /** 底部配置 */
+    footerProps?: FooterProps;
+    /** 底部位置模式 */
+    position: FooterPositionMode;
+    /** 自定义类名 */
+    className?: string;
+    /** 是否作为全局底部（使用 PisellFooter 包裹） */
+    isGlobal?: boolean;
+    /** 信息区内容（用于移动端弹窗展示） */
+    sidebarContent?: ReactNode;
+    /** 移动端弹窗是否打开（受控） */
+    summaryModalOpen?: boolean;
+    /** 打开移动端弹窗 */
+    onOpenSummaryModal?: () => void;
+    /** 关闭移动端弹窗 */
+    onCloseSummaryModal?: () => void;
+    /** 上一步回调 */
+    goPrev?: () => void;
+    /** 下一步回调 */
+    goNext?: () => void;
+    /** 组件使用模式 */
+    mode?: ProcedureMode;
+}
+/**
+ * ProcedureFooter 底部操作区组件
+ *
+ * @description 包含左侧自定义内容和右侧操作按钮（支持溢出收纳功能）
+ * @author Pisell Team
+ */
+declare const ProcedureFooter: React.FC<ProcedureFooterProps>;
+export default ProcedureFooter;

package/lib/components/PisellProcedure/components/ProcedureFooter.js

@@ -0,0 +1,156 @@
+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/components/PisellProcedure/components/ProcedureFooter.tsx
+var ProcedureFooter_exports = {};
+__export(ProcedureFooter_exports, {
+  default: () => ProcedureFooter_default
+});
+module.exports = __toCommonJS(ProcedureFooter_exports);
+var import_react = __toESM(require("react"));
+var import_footer = __toESM(require("../../pisellLayout/footer"));
+var import_pisellModal = __toESM(require("../../pisellModal"));
+var import_FooterActions = __toESM(require("./FooterActions"));
+var import_utils = require("../utils");
+var ProcedureFooter = ({
+  footerProps,
+  position,
+  className,
+  isGlobal = false,
+  sidebarContent,
+  summaryModalOpen = false,
+  onOpenSummaryModal,
+  onCloseSummaryModal,
+  goPrev,
+  goNext,
+  mode = "page"
+}) => {
+  const footerCls = (0, import_react.useMemo)(() => {
+    return (0, import_utils.mergeClassNames)(
+      "pisell-procedure-footer",
+      className,
+      footerProps == null ? void 0 : footerProps.className,
+      (0, import_utils.modifierClassName)("pisell-procedure-footer", position)
+    );
+  }, [className, footerProps == null ? void 0 : footerProps.className, position]);
+  const processedActions = (0, import_react.useMemo)(() => {
+    const actions = footerProps == null ? void 0 : footerProps.actions;
+    if (!actions) return null;
+    const childrenArray = import_react.Children.toArray(actions);
+    if (childrenArray.length === 0) return null;
+    return import_react.Children.map(actions, (child, index) => {
+      if (!(0, import_react.isValidElement)(child)) return child;
+      const childProps = child.props;
+      const dataAction = childProps == null ? void 0 : childProps["data-action"];
+      const originalOnClick = childProps == null ? void 0 : childProps.onClick;
+      let injectedAction;
+      if (dataAction === "prev") {
+        injectedAction = goPrev;
+      } else if (dataAction === "next") {
+        injectedAction = goNext;
+      }
+      if (injectedAction) {
+        return (0, import_react.cloneElement)(child, {
+          onClick: (...args) => {
+            originalOnClick == null ? void 0 : originalOnClick(...args);
+            injectedAction == null ? void 0 : injectedAction();
+          }
+        });
+      }
+      return child;
+    });
+  }, [footerProps == null ? void 0 : footerProps.actions, goPrev, goNext]);
+  const actionsContent = processedActions;
+  const wrappedSummaryButton = (0, import_react.useMemo)(() => {
+    var _a;
+    const button = footerProps == null ? void 0 : footerProps.summaryButton;
+    if (!button || !(0, import_react.isValidElement)(button)) return button;
+    const originalOnClick = (_a = button.props) == null ? void 0 : _a.onClick;
+    return (0, import_react.cloneElement)(button, {
+      onClick: (e) => {
+        if (typeof originalOnClick === "function") {
+          originalOnClick(e);
+        }
+        onOpenSummaryModal == null ? void 0 : onOpenSummaryModal();
+      }
+    });
+  }, [footerProps == null ? void 0 : footerProps.summaryButton, onOpenSummaryModal]);
+  const footerContent = (0, import_react.useMemo)(() => {
+    const hasSummaryButton = mode === "modal" ? false : !!wrappedSummaryButton;
+    const hasLeftSlot = (footerProps == null ? void 0 : footerProps.leftSlot) !== void 0 && (footerProps == null ? void 0 : footerProps.leftSlot) !== null;
+    const hasActions = actionsContent !== null && actionsContent !== void 0;
+    if (!hasSummaryButton && !hasLeftSlot && !hasActions) {
+      return null;
+    }
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, hasSummaryButton && wrappedSummaryButton && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-footer__summary" }, wrappedSummaryButton), (hasLeftSlot || hasActions) && ((footerProps == null ? void 0 : footerProps.enableOverflow) !== false ? /* @__PURE__ */ import_react.default.createElement(
+      import_FooterActions.default,
+      {
+        leftSlot: footerProps == null ? void 0 : footerProps.leftSlot,
+        moreText: footerProps == null ? void 0 : footerProps.moreText
+      },
+      actionsContent
+    ) : /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-footer__content" }, (footerProps == null ? void 0 : footerProps.leftSlot) && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-footer__left" }, footerProps.leftSlot), hasActions && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-footer__actions" }, actionsContent))));
+  }, [
+    mode,
+    wrappedSummaryButton,
+    footerProps == null ? void 0 : footerProps.enableOverflow,
+    footerProps == null ? void 0 : footerProps.leftSlot,
+    footerProps == null ? void 0 : footerProps.moreText,
+    actionsContent
+  ]);
+  const summaryModal = (0, import_react.useMemo)(() => {
+    if (!(footerProps == null ? void 0 : footerProps.summaryButton) || !sidebarContent) return null;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_pisellModal.default,
+      {
+        open: summaryModalOpen,
+        onCancel: onCloseSummaryModal,
+        title: (footerProps == null ? void 0 : footerProps.summaryModalTitle) || "详情",
+        platform: "h5",
+        footer: null,
+        destroyOnClose: true
+      },
+      sidebarContent
+    );
+  }, [
+    footerProps == null ? void 0 : footerProps.summaryButton,
+    footerProps == null ? void 0 : footerProps.summaryModalTitle,
+    sidebarContent,
+    summaryModalOpen,
+    onCloseSummaryModal
+  ]);
+  if (!footerContent) {
+    return null;
+  }
+  if (isGlobal) {
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_footer.default, { className: footerCls, style: footerProps == null ? void 0 : footerProps.style }, footerContent), summaryModal);
+  }
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: footerCls, style: footerProps == null ? void 0 : footerProps.style }, footerContent), summaryModal);
+};
+ProcedureFooter.displayName = "ProcedureFooter";
+var ProcedureFooter_default = ProcedureFooter;

package/lib/components/PisellProcedure/components/ProcedureHeader.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { ProcedureHeaderProps as HeaderProps } from '../types';
+export declare type ActionType = 'cancel' | 'ok' | 'confirm';
+/**
+ * ProcedureHeader 子组件 Props
+ */
+export interface ProcedureHeaderProps {
+    /** 头部配置 */
+    headerProps?: HeaderProps;
+    /** 当前步骤索引 */
+    currentStep: number;
+    /** 自定义类名 */
+    className?: string;
+    /** 上一步回调 */
+    goPrev?: () => void;
+    /** 跳转到指定步骤 */
+    goToStep?: (step: number) => void;
+    /** 关闭回调 */
+    onClose?: () => void;
+    /** 首步返回回调 */
+    onFirstStepBack?: () => void;
+    /** 返回确认回调 */
+    onBackConfirm?: (action: ActionType) => void;
+    /** 关闭确认回调 */
+    onCloseConfirm?: (action: ActionType) => void;
+}
+/**
+ * ProcedureHeader 头部区域组件
+ *
+ * @description 包含左侧返回按钮、中间步骤条、右侧关闭按钮
+ * @author Pisell Team
+ */
+declare const ProcedureHeader: React.FC<ProcedureHeaderProps>;
+export default ProcedureHeader;