@pisell/materials 1.0.977 → 1.0.979

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

@@ -0,0 +1,303 @@
+import React from 'react';
+import type { ButtonProps } from 'antd';
+import type { PisellStepsProps, StepItem } from '../PisellSteps/types';
+/**
+ * 布局方向类型
+ */
+export declare type LayoutDirection = 'vertical' | 'horizontal';
+/**
+ * 操作区定位模式
+ */
+export declare type ActionMode = 'fixed' | 'embedded' | 'float';
+/**
+ * 操作区定位位置
+ */
+export declare type ActionPosition = 'bottom' | 'content' | 'summary';
+/**
+ * 头部固定模式
+ */
+export declare type HeaderFixed = boolean | 'scroll';
+/**
+ * 操作按钮配置项
+ */
+export interface ActionItem {
+    /** 唯一标识 */
+    key: string;
+    /** 按钮文本 */
+    label: React.ReactNode;
+    /** 按钮类型 */
+    type?: 'primary' | 'default' | 'dashed' | 'link' | 'text';
+    /** 点击回调 */
+    onClick?: () => void | Promise<void>;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否加载中 */
+    loading?: boolean;
+    /** 按钮图标 */
+    icon?: React.ReactNode;
+    /** 排序权重（越小越靠前） */
+    order?: number;
+    /** 是否隐藏 */
+    hidden?: boolean;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 其他按钮属性 */
+    [key: string]: any;
+}
+/**
+ * PisellProcedure 组件属性
+ */
+export interface PisellProcedureProps {
+    /** 当前步骤索引（从 0 开始） */
+    current?: number;
+    /** 步骤配置数组（传递给 PisellSteps 组件） */
+    steps: StepItem[];
+    /** 步骤改变时的回调 */
+    onStepChange?: (current: number) => void | Promise<void>;
+    /** 点击关闭按钮的回调 */
+    onClose?: () => void;
+    /** 点击上一步按钮的回调 */
+    onPrev?: () => void;
+    /** 内容区渲染函数 */
+    contentRender: (current: number) => React.ReactNode;
+    /** 信息总结区渲染函数 */
+    summaryRender?: (current: number) => React.ReactNode;
+    /** 操作按钮配置数组 */
+    actions?: ActionItem[];
+    /** 整体布局方向 */
+    layout?: LayoutDirection;
+    /** 主体区域布局方向 */
+    bodyLayout?: LayoutDirection;
+    /** 内容区宽度（百分比或固定值） */
+    contentWidth?: string | number;
+    /** 信息总结区宽度（固定值） */
+    summaryWidth?: string | number;
+    /** 是否显示头部区域 */
+    showHeader?: boolean;
+    /** 是否显示信息总结区 */
+    showSummary?: boolean;
+    /** 是否显示操作区 */
+    showAction?: boolean;
+    /** 是否显示上一步按钮 */
+    showPrevButton?: boolean;
+    /** 是否显示关闭按钮 */
+    showCloseButton?: boolean;
+    /** 头部区域是否固定定位 */
+    headerFixed?: HeaderFixed;
+    /** 操作区定位模式 */
+    actionMode?: ActionMode;
+    /** 操作区定位位置 */
+    actionPosition?: ActionPosition;
+    /** 信息总结区是否可折叠 */
+    summaryCollapsible?: boolean;
+    /** 信息总结区默认是否折叠 */
+    summaryDefaultCollapsed?: boolean;
+    /** 步骤切换前是否自动验证 */
+    validateOnStepChange?: boolean;
+    /** 步骤验证函数 */
+    onValidate?: (current: number) => boolean | Promise<boolean>;
+    /** 返回上一步是否清除当前步骤数据 */
+    clearOnBack?: boolean;
+    /** 数据改变影响当前步骤时是否弹窗确认 */
+    confirmOnDataChange?: boolean;
+    /** 头部区域自定义类名 */
+    headerClassName?: string;
+    /** 头部区域自定义样式 */
+    headerStyle?: React.CSSProperties;
+    /** 内容区自定义类名 */
+    contentClassName?: string;
+    /** 内容区自定义样式 */
+    contentStyle?: React.CSSProperties;
+    /** 信息总结区自定义类名 */
+    summaryClassName?: string;
+    /** 信息总结区自定义样式 */
+    summaryStyle?: React.CSSProperties;
+    /** 操作区自定义类名 */
+    actionClassName?: string;
+    /** 操作区自定义样式 */
+    actionStyle?: React.CSSProperties;
+    /** 组件根节点自定义类名 */
+    className?: string;
+    /** 组件根节点自定义样式 */
+    style?: React.CSSProperties;
+    /** 头部区域额外内容插槽 */
+    headerExtra?: React.ReactNode;
+    /** 信息总结区额外内容插槽 */
+    summaryExtra?: React.ReactNode;
+    /** 操作区额外内容插槽 */
+    actionExtra?: React.ReactNode;
+    /** 传递给 PisellSteps 组件的额外属性 */
+    stepsProps?: Partial<PisellStepsProps>;
+    /** 上一步按钮的属性 */
+    prevButtonProps?: ButtonProps;
+    /** 关闭按钮的属性 */
+    closeButtonProps?: ButtonProps;
+    /** 是否显示加载状态 */
+    loading?: boolean;
+    /** 是否禁用所有操作 */
+    disabled?: boolean;
+}
+/**
+ * ProcedureHeader 组件属性（内部子组件）
+ */
+export interface ProcedureHeaderProps {
+    /** 当前步骤索引 */
+    current: number;
+    /** 步骤配置数组 */
+    steps: StepItem[];
+    /** 传递给 PisellSteps 的额外属性 */
+    stepsProps?: Partial<PisellStepsProps>;
+    /** 是否显示上一步按钮 */
+    showPrevButton: boolean;
+    /** 是否显示关闭按钮 */
+    showCloseButton: boolean;
+    /** 点击上一步的回调 */
+    onPrev?: () => void;
+    /** 点击关闭的回调 */
+    onClose?: () => void;
+    /** 点击步骤的回调 */
+    onStepClick?: (index: number) => void;
+    /** 额外内容插槽 */
+    headerExtra?: React.ReactNode;
+    /** 上一步按钮属性 */
+    prevButtonProps?: ButtonProps;
+    /** 关闭按钮属性 */
+    closeButtonProps?: ButtonProps;
+    /** 是否固定定位 */
+    fixed?: HeaderFixed;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 是否禁用 */
+    disabled?: boolean;
+}
+/**
+ * ProcedureContent 组件属性（内部子组件）
+ */
+export interface ProcedureContentProps {
+    /** 当前步骤索引 */
+    current: number;
+    /** 内容渲染函数 */
+    contentRender: (current: number) => React.ReactNode;
+    /** 宽度 */
+    width?: string | number;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 是否加载中 */
+    loading?: boolean;
+}
+/**
+ * ProcedureSummary 组件属性（内部子组件）
+ */
+export interface ProcedureSummaryProps {
+    /** 当前步骤索引 */
+    current: number;
+    /** 信息总结区渲染函数 */
+    summaryRender?: (current: number) => React.ReactNode;
+    /** 宽度 */
+    width?: string | number;
+    /** 是否可折叠 */
+    collapsible?: boolean;
+    /** 默认是否折叠 */
+    defaultCollapsed?: boolean;
+    /** 折叠状态改变的回调 */
+    onCollapseChange?: (collapsed: boolean) => void;
+    /** 额外内容插槽 */
+    summaryExtra?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 是否显示 */
+    visible?: boolean;
+}
+/**
+ * ProcedureAction 组件属性（内部子组件）
+ */
+export interface ProcedureActionProps {
+    /** 操作按钮配置数组 */
+    actions: ActionItem[];
+    /** 定位模式 */
+    mode?: ActionMode;
+    /** 定位位置 */
+    position?: ActionPosition;
+    /** 额外内容插槽 */
+    actionExtra?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 是否禁用所有按钮 */
+    disabled?: boolean;
+    /** 是否加载中 */
+    loading?: boolean;
+}
+/**
+ * MobileSummaryDrawer 组件属性（内部子组件）
+ */
+export interface MobileSummaryDrawerProps {
+    /** 当前步骤索引 */
+    current: number;
+    /** 信息总结区渲染函数 */
+    summaryRender?: (current: number) => React.ReactNode;
+    /** 是否可见 */
+    visible: boolean;
+    /** 可见状态改变的回调 */
+    onVisibleChange: (visible: boolean) => void;
+    /** 额外内容插槽 */
+    summaryExtra?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+/**
+ * 响应式信息类型
+ */
+export interface ResponsiveInfo {
+    /** < 430px */
+    xs: boolean;
+    /** < 744px */
+    sm: boolean;
+    /** < 960px */
+    md: boolean;
+    /** < 1133px */
+    lg: boolean;
+    /** < 1366px */
+    xl: boolean;
+}
+/**
+ * 步骤验证结果
+ */
+export interface ValidationResult {
+    /** 是否验证通过 */
+    valid: boolean;
+    /** 错误信息 */
+    message?: string;
+    /** 错误字段 */
+    errors?: Record<string, string>;
+}
+/**
+ * 数据同步配置
+ */
+export interface DataSyncConfig {
+    /** 是否需要确认 */
+    needConfirm: boolean;
+    /** 确认标题 */
+    confirmTitle?: string;
+    /** 确认内容 */
+    confirmContent?: string;
+    /** 确认按钮文本 */
+    confirmOkText?: string;
+    /** 取消按钮文本 */
+    confirmCancelText?: string;
+}
+/**
+ * 导出所有类型
+ */
+export type { StepItem, PisellStepsProps, } from '../PisellSteps/types';

package/lib/components/PisellSteps/PisellSteps.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import './PisellSteps.less';
+import type { PisellStepsProps } from './types';
+/**
+ * PisellSteps 步骤条组件
+ *
+ * 基于 Ant Design Steps 组件进行二次封装和增强
+ * 支持多种展示样式、布局方式和丰富的交互功能
+ *
+ * @author Pisell Team
+ * @version 1.0.0
+ */
+declare const PisellSteps: React.FC<PisellStepsProps>;
+export default PisellSteps;

package/lib/components/PisellSteps/PisellSteps.js

@@ -32,137 +32,190 @@ __export(PisellSteps_exports, {
   default: () => PisellSteps_default
 });
 module.exports = __toCommonJS(PisellSteps_exports);
-var import_react = __toESM(require("react"));
 var import_antd = require("antd");
-var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
 var import_PisellSteps = require("./PisellSteps.less");
+var import_hooks = require("./hooks");
+var import_utils = require("./utils");
 var PisellSteps = ({
-  current = 0,
-  items = [],
+  // 基础属性
   type = "default",
-  size = "default",
+  current: controlledCurrent,
+  defaultCurrent = 0,
   direction = "horizontal",
+  size = "default",
   status = "process",
-  progressDot = false,
-  labelPlacement = "horizontal",
+  initial = 0,
+  items = [],
   percent,
+  labelPlacement = "horizontal",
   responsive = true,
   onChange,
   className,
   style,
+  progressDot,
+  // 扩展功能属性
+  clickable = false,
+  allowClickFinished = true,
+  showProgressPercent = false,
+  iconSize,
+  iconColor,
   connectorStyle,
-  showConnector = true,
-  iconPosition = "top",
+  connectorPosition = "center",
+  animated = true,
+  gridLayout = false,
+  gridColumns,
+  itemLayout = "horizontal",
+  itemGap,
+  enableAnchor = false,
+  anchorContainer,
+  // 低代码属性
+  __designMode,
+  __id,
+  other,
   ...restProps
 }) => {
-  const computedItems = (0, import_react.useMemo)(() => {
-    return items.map((item, index) => {
-      let itemStatus = item.status || "wait";
-      if (!item.status) {
-        if (index < current) {
-          itemStatus = "finish";
-        } else if (index === current) {
-          itemStatus = status;
-        } else {
-          itemStatus = "wait";
+  const [currentStep, setCurrentStep] = (0, import_hooks.useStepsState)(
+    controlledCurrent,
+    defaultCurrent,
+    onChange
+  );
+  const handleStepClick = (0, import_hooks.useStepClick)(
+    currentStep,
+    clickable,
+    allowClickFinished,
+    setCurrentStep
+  );
+  (0, import_hooks.useAnchor)(currentStep, enableAnchor, anchorContainer);
+  const isMobile = (0, import_hooks.useResponsive)(768);
+  const processedItems = (0, import_react.useMemo)(() => {
+    const visibleItems = items.filter((item) => !item.hidden);
+    if (__designMode === "design" && visibleItems.length === 0) {
+      return [
+        {
+          title: "步骤一",
+          description: "This is a description.",
+          status: "finish"
+        },
+        {
+          title: "步骤二",
+          description: "This is a description.",
+          status: "process"
+        },
+        {
+          title: "步骤三",
+          description: "This is a description.",
+          status: "wait"
         }
+      ];
+    }
+    return visibleItems.map((item, index) => {
+      const adjustedIndex = index + initial;
+      let stepStatus;
+      if (item.status) {
+        stepStatus = item.status;
+      } else if (adjustedIndex === currentStep) {
+        stepStatus = status;
+      } else {
+        stepStatus = (0, import_utils.getStepStatus)(adjustedIndex, currentStep);
       }
+      const stepClassName = (0, import_utils.mergeStepClassName)(
+        "pisell-steps-item",
+        stepStatus,
+        item.className
+      );
+      const handleClick = () => {
+        var _a;
+        if (!item.disabled) {
+          (_a = item.onClick) == null ? void 0 : _a.call(item);
+          handleStepClick(adjustedIndex, item);
+        }
+      };
       return {
         ...item,
-        status: itemStatus
+        status: stepStatus,
+        className: stepClassName,
+        onClick: clickable || item.onClick ? handleClick : void 0
       };
     });
-  }, [items, current, status]);
-  const handleStepClick = (0, import_react.useCallback)(
-    (index) => {
-      var _a;
-      const targetItem = items[index];
-      if (targetItem == null ? void 0 : targetItem.disabled) {
-        return;
-      }
-      if (index < current) {
-        onChange == null ? void 0 : onChange(index);
-      }
-      (_a = targetItem == null ? void 0 : targetItem.onClick) == null ? void 0 : _a.call(targetItem);
-    },
-    [items, current, onChange]
-  );
-  const antdItems = (0, import_react.useMemo)(() => {
-    return computedItems.map((item) => ({
-      title: item.title,
-      subTitle: item.subTitle,
-      description: item.description,
-      status: item.status,
-      icon: item.icon,
-      disabled: item.disabled,
-      className: (0, import_classnames.default)(item.className, {
-        "pisell-steps-item-clickable": !item.disabled && item.status === "finish"
-      }),
-      style: item.style
-    }));
-  }, [computedItems]);
-  const mergedStyle = (0, import_react.useMemo)(() => {
-    const baseStyle = {
-      ...style
-    };
-    if (connectorStyle) {
-      Object.entries(connectorStyle).forEach(([key, value]) => {
-        const cssVarKey = `--pisell-step-connector-${key.replace(/([A-Z])/g, "-$1").toLowerCase()}`;
-        baseStyle[cssVarKey] = value;
-      });
-    }
-    return baseStyle;
-  }, [style, connectorStyle]);
-  const mergedClassName = (0, import_react.useMemo)(() => {
-    return (0, import_classnames.default)(
-      "pisell-steps",
-      `pisell-steps-${type}`,
-      `pisell-steps-${size}`,
-      `pisell-steps-${direction}`,
-      {
-        "pisell-steps-dot": progressDot,
-        "pisell-steps-responsive": responsive,
-        "pisell-steps-no-connector": !showConnector,
-        "pisell-steps-label-vertical": labelPlacement === "vertical",
-        "pisell-steps-icon-bottom": iconPosition === "bottom"
-      },
-      className
-    );
   }, [
+    items,
+    currentStep,
+    initial,
+    status,
+    clickable,
+    handleStepClick,
+    __designMode
+  ]);
+  const wrapperClassName = (0, import_react.useMemo)(() => {
+    const classes = ["pisell-steps"];
+    if (className) classes.push(className);
+    if (type !== "default") classes.push(`pisell-steps-${type}`);
+    if (size !== "default") classes.push(`pisell-steps-${size}`);
+    if (direction === "vertical") classes.push("pisell-steps-vertical");
+    if (responsive) classes.push("pisell-steps-responsive");
+    if (animated) classes.push("pisell-steps-animated");
+    if (clickable) classes.push("pisell-steps-clickable");
+    if (gridLayout) classes.push("pisell-steps-grid-layout");
+    if (connectorPosition !== "center")
+      classes.push(`pisell-steps-connector-${connectorPosition}`);
+    if (itemLayout === "vertical") classes.push("pisell-steps-item-vertical");
+    return classes.join(" ");
+  }, [
+    className,
     type,
     size,
     direction,
-    progressDot,
     responsive,
-    showConnector,
-    labelPlacement,
-    iconPosition,
-    className
+    animated,
+    clickable,
+    gridLayout,
+    connectorPosition,
+    itemLayout
   ]);
-  const renderProgressDot = (0, import_react.useMemo)(() => {
-    if (typeof progressDot === "function") {
-      return progressDot;
+  const wrapperStyle = (0, import_react.useMemo)(() => {
+    const customStyle = { ...style };
+    if (iconSize) {
+      customStyle["--pisell-steps-icon-size"] = `${iconSize}px`;
     }
-    return progressDot;
-  }, [progressDot]);
+    if (iconColor) {
+      customStyle["--pisell-steps-icon-color"] = iconColor;
+    }
+    if (itemGap) {
+      customStyle["--pisell-steps-item-gap"] = `${itemGap}px`;
+    }
+    if (gridColumns && gridLayout) {
+      customStyle["--pisell-steps-grid-columns"] = gridColumns;
+    }
+    return customStyle;
+  }, [style, iconSize, iconColor, itemGap, gridColumns, gridLayout]);
+  const effectivePercent = showProgressPercent ? percent : void 0;
+  const antdType = type === "dot" ? "inline" : type === "navigation" ? "navigation" : "default";
   return /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Steps,
+    "div",
     {
-      ...restProps,
-      type,
-      current,
-      items: antdItems,
-      size,
-      direction,
-      status,
-      progressDot: renderProgressDot,
-      labelPlacement,
-      percent,
-      responsive,
-      onChange: handleStepClick,
-      className: mergedClassName,
-      style: mergedStyle
-    }
+      className: wrapperClassName,
+      style: wrapperStyle,
+      "data-component": "pisell-steps",
+      "data-id": __id
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Steps,
+      {
+        current: currentStep - initial,
+        direction,
+        size: size === "large" ? "default" : size,
+        status,
+        items: processedItems,
+        percent: effectivePercent,
+        labelPlacement,
+        type: antdType,
+        progressDot: type === "dot" ? progressDot : false,
+        ...restProps,
+        ...other
+      }
+    ),
+    showProgressPercent && percent !== void 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-steps-progress-info" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-steps-progress-percent" }, percent, "%"))
   );
 };
 PisellSteps.displayName = "PisellSteps";