@pisell/materials 6.7.4 → 6.8.2

package/es/components/PisellProcedure/components/ProcedureBody.js

@@ -0,0 +1,154 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { useMemo } from 'react';
+import PisellLayout from "../../pisellLayout";
+import ProcedureContent from "./ProcedureContent";
+import ProcedureSidebar from "./ProcedureSidebar";
+import ProcedureFooter from "./ProcedureFooter";
+import { mergeClassNames, isFooterInContent, isFooterInSidebar, generateRatioStyles } from "../utils";
+
+/**
+ * ProcedureBody 子组件 Props
+ */
+
+/**
+ * ProcedureBody 主体区域组件
+ * 
+ * @description 包含内容区和信息区的布局容器，支持固定宽度和比例两种布局模式
+ * @author Pisell Team
+ */
+var ProcedureBody = function ProcedureBody(_ref) {
+  var bodyProps = _ref.bodyProps,
+    footerProps = _ref.footerProps,
+    footerPosition = _ref.footerPosition,
+    _ref$showFooter = _ref.showFooter,
+    showFooter = _ref$showFooter === void 0 ? true : _ref$showFooter,
+    _ref$showSidebar = _ref.showSidebar,
+    showSidebar = _ref$showSidebar === void 0 ? true : _ref$showSidebar,
+    className = _ref.className,
+    summaryModalOpen = _ref.summaryModalOpen,
+    onOpenSummaryModal = _ref.onOpenSummaryModal,
+    onCloseSummaryModal = _ref.onCloseSummaryModal,
+    goPrev = _ref.goPrev,
+    goNext = _ref.goNext,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? 'page' : _ref$mode;
+  /** 排列方向，默认为横向 */
+  var direction = (bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.direction) || 'horizontal';
+  /** 内容顺序，默认为内容区在前 */
+  var contentOrder = (bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.contentOrder) || 'content-first';
+  /** 布局模式，默认为固定宽度 */
+  var layoutMode = (bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.layoutMode) || 'fixed';
+  /** 布局比例，默认为 7:3 */
+  var layoutRatio = (bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.layoutRatio) || '7:3';
+
+  /** 主体区域类名 */
+  var bodyCls = useMemo(function () {
+    return mergeClassNames('pisell-procedure-body', className, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.className, // 添加排列方向类名
+    "pisell-procedure-body--".concat(direction), // 添加布局模式类名
+    "pisell-procedure-body--".concat(layoutMode), // 添加内容顺序类名
+    "pisell-procedure-body--".concat(contentOrder));
+  }, [className, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.className, direction, layoutMode, contentOrder]);
+
+  /** 计算比例布局样式 */
+  var ratioStyles = useMemo(function () {
+    if (layoutMode !== 'ratio') return null;
+    return generateRatioStyles(layoutRatio, 16);
+  }, [layoutMode, layoutRatio]);
+
+  /** 内容区样式（合并比例样式和用户自定义样式） */
+  var contentStyle = useMemo(function () {
+    if (layoutMode === 'ratio' && ratioStyles) {
+      return _objectSpread(_objectSpread({}, ratioStyles.contentStyle), bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.contentStyle);
+    }
+    return bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.contentStyle;
+  }, [layoutMode, ratioStyles, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.contentStyle]);
+
+  /** 信息区样式（合并比例样式和用户自定义样式） */
+  var sidebarStyle = useMemo(function () {
+    if (layoutMode === 'ratio' && ratioStyles) {
+      return _objectSpread(_objectSpread({}, ratioStyles.sidebarStyle), bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.sidebarStyle);
+    }
+    return bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.sidebarStyle;
+  }, [layoutMode, ratioStyles, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.sidebarStyle]);
+
+  /** 信息区内容（用于移动端弹窗显示） */
+  var sidebarContent = bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.sidebarSlot;
+
+  /** 内容区底部 */
+  var contentFooter = useMemo(function () {
+    if (!showFooter || !isFooterInContent(footerPosition)) return null;
+    return /*#__PURE__*/React.createElement(ProcedureFooter, {
+      footerProps: footerProps,
+      position: footerPosition,
+      sidebarContent: sidebarContent,
+      summaryModalOpen: summaryModalOpen,
+      onOpenSummaryModal: onOpenSummaryModal,
+      onCloseSummaryModal: onCloseSummaryModal,
+      goPrev: goPrev,
+      goNext: goNext,
+      mode: mode
+    });
+  }, [showFooter, footerPosition, footerProps, sidebarContent, summaryModalOpen, onOpenSummaryModal, onCloseSummaryModal, goPrev, goNext, mode]);
+
+  /** 信息区底部 */
+  var sidebarFooter = useMemo(function () {
+    if (!showFooter || !isFooterInSidebar(footerPosition)) return null;
+    return /*#__PURE__*/React.createElement(ProcedureFooter, {
+      footerProps: footerProps,
+      position: footerPosition,
+      sidebarContent: sidebarContent,
+      summaryModalOpen: summaryModalOpen,
+      onOpenSummaryModal: onOpenSummaryModal,
+      onCloseSummaryModal: onCloseSummaryModal,
+      goPrev: goPrev,
+      goNext: goNext,
+      mode: mode
+    });
+  }, [showFooter, footerPosition, footerProps, sidebarContent, summaryModalOpen, onOpenSummaryModal, onCloseSummaryModal, goPrev, goNext, mode]);
+
+  /** PisellLayout 样式（根据排列方向设置 flex-direction） */
+  var layoutStyle = useMemo(function () {
+    return {
+      flexDirection: direction === 'vertical' ? 'column' : 'row'
+    };
+  }, [direction]);
+
+  /** 内容区组件 */
+  var contentComponent = /*#__PURE__*/React.createElement(ProcedureContent, {
+    className: bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.contentClassName,
+    style: contentStyle,
+    extra: contentFooter
+  }, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.contentSlot);
+
+  /** 信息区组件 */
+  var sidebarComponent = showSidebar ? /*#__PURE__*/React.createElement(ProcedureSidebar, {
+    className: bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.sidebarClassName,
+    style: sidebarStyle,
+    extra: sidebarFooter,
+    isRatioMode: layoutMode === 'ratio',
+    containerSelector: bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.sidebarContainerSelector,
+    mode: mode,
+    direction: direction
+  }, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.sidebarSlot) : null;
+
+  /** 根据 contentOrder 决定渲染顺序 */
+  var orderedChildren = useMemo(function () {
+    if (contentOrder === 'sidebar-first') {
+      return [sidebarComponent, contentComponent].filter(Boolean);
+    }
+    return [contentComponent, sidebarComponent].filter(Boolean);
+  }, [contentOrder, contentComponent, sidebarComponent]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: bodyCls,
+    style: bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.style
+  }, /*#__PURE__*/React.createElement(PisellLayout, {
+    style: layoutStyle
+  }, orderedChildren));
+};
+ProcedureBody.displayName = 'ProcedureBody';
+export default ProcedureBody;

package/es/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/es/components/PisellProcedure/components/ProcedureContent.js

@@ -0,0 +1,30 @@
+import React, { useMemo } from 'react';
+import PisellContent from "../../pisellLayout/content";
+import { mergeClassNames } from "../utils";
+
+/**
+ * ProcedureContent 子组件 Props
+ */
+
+/**
+ * ProcedureContent 内容区组件
+ * 
+ * @description 流程容器的主要内容展示区域
+ * @author Pisell Team
+ */
+var ProcedureContent = function ProcedureContent(_ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    children = _ref.children,
+    extra = _ref.extra;
+  /** 内容区类名 */
+  var contentCls = useMemo(function () {
+    return mergeClassNames('pisell-procedure-content', className);
+  }, [className]);
+  return /*#__PURE__*/React.createElement(PisellContent, {
+    className: contentCls,
+    style: style
+  }, children, extra);
+};
+ProcedureContent.displayName = 'ProcedureContent';
+export default ProcedureContent;

package/es/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/es/components/PisellProcedure/components/ProcedureFooter.js

@@ -0,0 +1,169 @@
+import React, { useMemo, isValidElement, cloneElement, Children } from 'react';
+import PisellFooter from "../../pisellLayout/footer";
+import PisellModal from "../../pisellModal";
+import FooterActions from "./FooterActions";
+import { mergeClassNames, modifierClassName } from "../utils";
+
+/**
+ * ProcedureFooter 子组件 Props
+ */
+
+/**
+ * ProcedureFooter 底部操作区组件
+ * 
+ * @description 包含左侧自定义内容和右侧操作按钮（支持溢出收纳功能）
+ * @author Pisell Team
+ */
+var ProcedureFooter = function ProcedureFooter(_ref) {
+  var footerProps = _ref.footerProps,
+    position = _ref.position,
+    className = _ref.className,
+    _ref$isGlobal = _ref.isGlobal,
+    isGlobal = _ref$isGlobal === void 0 ? false : _ref$isGlobal,
+    sidebarContent = _ref.sidebarContent,
+    _ref$summaryModalOpen = _ref.summaryModalOpen,
+    summaryModalOpen = _ref$summaryModalOpen === void 0 ? false : _ref$summaryModalOpen,
+    onOpenSummaryModal = _ref.onOpenSummaryModal,
+    onCloseSummaryModal = _ref.onCloseSummaryModal,
+    goPrev = _ref.goPrev,
+    goNext = _ref.goNext,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? 'page' : _ref$mode;
+  /** 底部区域类名 */
+  var footerCls = useMemo(function () {
+    return mergeClassNames('pisell-procedure-footer', className, footerProps === null || footerProps === void 0 ? void 0 : footerProps.className, modifierClassName('pisell-procedure-footer', position));
+  }, [className, footerProps === null || footerProps === void 0 ? void 0 : footerProps.className, position]);
+
+  /**
+   * 处理操作按钮
+   * @description 根据 data-action 属性注入对应的事件
+   * - data-action="prev"：注入上一步事件（goPrev）
+   * - data-action="next"：注入下一步事件（goNext）
+   * - 无 data-action 且是最后一个按钮：默认注入下一步事件（goNext）
+   */
+  var processedActions = useMemo(function () {
+    var actions = footerProps === null || footerProps === void 0 ? void 0 : footerProps.actions;
+    if (!actions) return null;
+
+    // 将 actions 转换为数组
+    var childrenArray = Children.toArray(actions);
+    if (childrenArray.length === 0) return null;
+
+    // 处理每个子元素
+    return Children.map(actions, function (child, index) {
+      // 不是有效的 React 元素，直接返回
+      if (! /*#__PURE__*/isValidElement(child)) return child;
+      var childProps = child.props;
+      var dataAction = childProps === null || childProps === void 0 ? void 0 : childProps['data-action'];
+      var originalOnClick = childProps === null || childProps === void 0 ? void 0 : childProps.onClick;
+
+      // 根据 data-action 属性决定注入哪个事件
+      var injectedAction;
+      if (dataAction === 'prev') {
+        injectedAction = goPrev;
+      } else if (dataAction === 'next') {
+        injectedAction = goNext;
+      }
+
+      // 如果需要注入事件，则包装 onClick
+      if (injectedAction) {
+        return /*#__PURE__*/cloneElement(child, {
+          onClick: function onClick() {
+            var _injectedAction;
+            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+              args[_key] = arguments[_key];
+            }
+            // 先执行原有的 onClick
+            originalOnClick === null || originalOnClick === void 0 || originalOnClick.apply(void 0, args);
+            // 再执行注入的事件
+            (_injectedAction = injectedAction) === null || _injectedAction === void 0 || _injectedAction();
+          }
+        });
+      }
+      return child;
+    });
+  }, [footerProps === null || footerProps === void 0 ? void 0 : footerProps.actions, goPrev, goNext]);
+
+  /** 获取操作按钮内容 */
+  var actionsContent = processedActions;
+
+  /**
+   * 包装 summaryButton 添加点击事件
+   * 如果用户传入的按钮已有 onClick，则先执行用户的 onClick，再打开弹窗
+   */
+  var wrappedSummaryButton = useMemo(function () {
+    var _button$props;
+    var button = footerProps === null || footerProps === void 0 ? void 0 : footerProps.summaryButton;
+    if (!button || ! /*#__PURE__*/isValidElement(button)) return button;
+    var originalOnClick = (_button$props = button.props) === null || _button$props === void 0 ? void 0 : _button$props.onClick;
+    return /*#__PURE__*/cloneElement(button, {
+      onClick: function onClick(e) {
+        // 先执行原有的点击事件
+        if (typeof originalOnClick === 'function') {
+          originalOnClick(e);
+        }
+        // 打开弹窗
+        onOpenSummaryModal === null || onOpenSummaryModal === void 0 || onOpenSummaryModal();
+      }
+    });
+  }, [footerProps === null || footerProps === void 0 ? void 0 : footerProps.summaryButton, onOpenSummaryModal]);
+
+  /** 渲染底部操作区内容 */
+  var footerContent = useMemo(function () {
+    // 弹窗模式下不显示移动端总结按钮
+    var hasSummaryButton = mode === 'modal' ? false : !!wrappedSummaryButton;
+    var hasLeftSlot = (footerProps === null || footerProps === void 0 ? void 0 : footerProps.leftSlot) !== undefined && (footerProps === null || footerProps === void 0 ? void 0 : footerProps.leftSlot) !== null;
+    var hasActions = actionsContent !== null && actionsContent !== undefined;
+
+    // 如果没有任何内容，返回 null
+    if (!hasSummaryButton && !hasLeftSlot && !hasActions) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, hasSummaryButton && wrappedSummaryButton && /*#__PURE__*/React.createElement("div", {
+      className: "pisell-procedure-footer__summary"
+    }, wrappedSummaryButton), (hasLeftSlot || hasActions) && ((footerProps === null || footerProps === void 0 ? void 0 : footerProps.enableOverflow) !== false ? /*#__PURE__*/React.createElement(FooterActions, {
+      leftSlot: footerProps === null || footerProps === void 0 ? void 0 : footerProps.leftSlot,
+      moreText: footerProps === null || footerProps === void 0 ? void 0 : footerProps.moreText
+    }, actionsContent) : /*#__PURE__*/React.createElement("div", {
+      className: "pisell-procedure-footer__content"
+    }, (footerProps === null || footerProps === void 0 ? void 0 : footerProps.leftSlot) && /*#__PURE__*/React.createElement("div", {
+      className: "pisell-procedure-footer__left"
+    }, footerProps.leftSlot), hasActions && /*#__PURE__*/React.createElement("div", {
+      className: "pisell-procedure-footer__actions"
+    }, actionsContent))));
+  }, [mode, wrappedSummaryButton, footerProps === null || footerProps === void 0 ? void 0 : footerProps.enableOverflow, footerProps === null || footerProps === void 0 ? void 0 : footerProps.leftSlot, footerProps === null || footerProps === void 0 ? void 0 : footerProps.moreText, actionsContent]);
+
+  /** 移动端信息区弹窗 */
+  var summaryModal = useMemo(function () {
+    if (!(footerProps !== null && footerProps !== void 0 && footerProps.summaryButton) || !sidebarContent) return null;
+    return /*#__PURE__*/React.createElement(PisellModal, {
+      open: summaryModalOpen,
+      onCancel: onCloseSummaryModal,
+      title: (footerProps === null || footerProps === void 0 ? void 0 : footerProps.summaryModalTitle) || '详情',
+      platform: "h5",
+      footer: null,
+      destroyOnClose: true
+    }, sidebarContent);
+  }, [footerProps === null || footerProps === void 0 ? void 0 : footerProps.summaryButton, footerProps === null || footerProps === void 0 ? void 0 : footerProps.summaryModalTitle, sidebarContent, summaryModalOpen, onCloseSummaryModal]);
+
+  // 如果没有内容，不渲染底部区域
+  if (!footerContent) {
+    return null;
+  }
+
+  // 全局底部使用 PisellFooter 组件包裹
+  if (isGlobal) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PisellFooter, {
+      className: footerCls,
+      style: footerProps === null || footerProps === void 0 ? void 0 : footerProps.style
+    }, footerContent), summaryModal);
+  }
+
+  // 内嵌底部使用 div 包裹
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: footerCls,
+    style: footerProps === null || footerProps === void 0 ? void 0 : footerProps.style
+  }, footerContent), summaryModal);
+};
+ProcedureFooter.displayName = 'ProcedureFooter';
+export default ProcedureFooter;

package/es/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;