@pisell/materials 6.7.4 → 6.8.2

package/es/components/PisellProcedure/hooks/useResponsiveClass.js

@@ -0,0 +1,118 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState, useEffect, useRef } from 'react';
+
+/**
+ * 响应式断点常量
+ */
+var RESPONSIVE_BREAKPOINTS = {
+  lg: 1133,
+  // ≥1133px: 默认样式（405px）
+  md: 960,
+  // 960px-1133px: 376px ~ 405px 线性插值
+  sm: 744 // 744px-960px: 290px ~ 376px 线性插值
+};
+
+/**
+ * 响应式类名映射
+ */
+var RESPONSIVE_CLASSES = {
+  md: 'pisell-procedure-sidebar--responsive-md',
+  sm: 'pisell-procedure-sidebar--responsive-sm',
+  xs: 'pisell-procedure-sidebar--responsive-xs' // 最小宽度（< 744px）
+};
+
+/**
+ * 根据容器宽度获取响应式类名
+ */
+var getResponsiveClass = function getResponsiveClass(width) {
+  if (width === 0) return '';
+  if (width >= RESPONSIVE_BREAKPOINTS.lg) {
+    return ''; // 使用默认样式
+  }
+  if (width >= RESPONSIVE_BREAKPOINTS.md) {
+    return RESPONSIVE_CLASSES.md;
+  }
+  if (width >= RESPONSIVE_BREAKPOINTS.sm) {
+    return RESPONSIVE_CLASSES.sm;
+  }
+
+  // 容器宽度 < 744px，使用最小宽度样式
+  return RESPONSIVE_CLASSES.xs;
+};
+
+/**
+ * 使用响应式类名的 Hook
+ * 
+ * @description 根据容器宽度计算响应式类名，延迟应用以避免宽度抖动
+ */
+export var useResponsiveClass = function useResponsiveClass(containerWidth) {
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    responsiveCls = _useState2[0],
+    setResponsiveCls = _useState2[1];
+  var previousWidthRef = useRef(0);
+  var rafIdRef = useRef(null);
+  var stableCheckCountRef = useRef(0);
+  useEffect(function () {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    // 如果宽度为0，重置类名
+    if (containerWidth === 0) {
+      setResponsiveCls('');
+      previousWidthRef.current = 0;
+      stableCheckCountRef.current = 0;
+      return;
+    }
+
+    // 清除之前的动画帧
+    if (rafIdRef.current !== null) {
+      cancelAnimationFrame(rafIdRef.current);
+    }
+
+    /**
+     * 稳定性检查函数：连续3次检查宽度都稳定才应用类名
+     */
+    var checkStability = function checkStability() {
+      var currentWidth = containerWidth;
+      var previousWidth = previousWidthRef.current;
+
+      // 如果宽度变化超过5px，重置计数
+      if (Math.abs(currentWidth - previousWidth) >= 5) {
+        stableCheckCountRef.current = 0;
+        previousWidthRef.current = currentWidth;
+      }
+
+      // 连续3次检查宽度都相同（或变化很小），才应用类名
+      stableCheckCountRef.current += 1;
+      if (stableCheckCountRef.current >= 3) {
+        // 稳定了，应用类名
+        var newCls = getResponsiveClass(currentWidth);
+        setResponsiveCls(newCls);
+        previousWidthRef.current = currentWidth;
+        stableCheckCountRef.current = 0; // 重置计数
+      } else {
+        // 还未稳定，继续等待下一次重绘
+        rafIdRef.current = requestAnimationFrame(checkStability);
+      }
+    };
+
+    // 使用 requestAnimationFrame 确保在浏览器重绘后检查
+    rafIdRef.current = requestAnimationFrame(checkStability);
+
+    // 清理函数
+    return function () {
+      if (rafIdRef.current !== null) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = null;
+      }
+    };
+  }, [containerWidth]);
+  return responsiveCls;
+};

package/es/components/PisellProcedure/hooks/useSidebarHeight.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 尺寸值接口
+ */
+interface SizeValues {
+    containerSelector?: string;
+    containerHeight?: number;
+    headerHeight?: number;
+    footerHeight: number;
+}
+/**
+ * 使用 Sidebar 高度的 Hook
+ *
+ * @description 计算并管理 Sidebar 的高度，确保在尺寸稳定后才应用
+ */
+export declare const useSidebarHeight: (isSizeStable: boolean, sizeValues: SizeValues) => number | undefined;
+export {};

package/es/components/PisellProcedure/hooks/useSidebarHeight.js

@@ -0,0 +1,130 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState, useEffect, useRef, useCallback } from 'react';
+
+/**
+ * 尺寸值接口
+ */
+
+/**
+ * 使用 Sidebar 高度的 Hook
+ * 
+ * @description 计算并管理 Sidebar 的高度，确保在尺寸稳定后才应用
+ */
+export var useSidebarHeight = function useSidebarHeight(isSizeStable, sizeValues) {
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    siderHeight = _useState2[0],
+    setSiderHeight = _useState2[1];
+  var hasInitializedRef = useRef(false);
+  var rafIdRef = useRef(null);
+  var stableCheckCountRef = useRef(0);
+  var previousSiderHeightRef = useRef(undefined);
+  var sizeValuesRef = useRef(sizeValues);
+
+  // 更新最新的尺寸值
+  useEffect(function () {
+    sizeValuesRef.current = sizeValues;
+  }, [sizeValues]);
+
+  /**
+   * 计算高度的函数
+   */
+  var calculateHeight = useCallback(function () {
+    var _sizeValuesRef$curren = sizeValuesRef.current,
+      containerSelector = _sizeValuesRef$curren.containerSelector,
+      containerHeight = _sizeValuesRef$curren.containerHeight,
+      headerHeight = _sizeValuesRef$curren.headerHeight,
+      footerHeight = _sizeValuesRef$curren.footerHeight;
+
+    // 优先使用容器高度，如果没有提供容器选择器或容器高度无效，则使用视口高度
+    var baseHeight;
+    if (containerSelector && containerSelector.trim() && containerHeight && containerHeight > 0) {
+      baseHeight = containerHeight;
+    } else {
+      baseHeight = typeof window !== 'undefined' ? window.innerHeight : 0;
+    }
+    var bodyPadding = 16 * 2; // 上下各16px
+    var headerHeightValue = headerHeight || 0;
+    var calculatedHeight = baseHeight - headerHeightValue - footerHeight - bodyPadding;
+    return calculatedHeight;
+  }, []);
+
+  // 使用 requestAnimationFrame 确保在浏览器重绘后计算，更稳定
+  useEffect(function () {
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+      return;
+    }
+
+    // 如果尺寸还未稳定，清除之前的动画帧，重置检查计数
+    if (!isSizeStable) {
+      hasInitializedRef.current = false;
+      stableCheckCountRef.current = 0;
+      if (rafIdRef.current !== null) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = null;
+      }
+      return;
+    }
+
+    // 清除之前的动画帧
+    if (rafIdRef.current !== null) {
+      cancelAnimationFrame(rafIdRef.current);
+    }
+
+    /**
+     * 稳定性检查函数：连续3次检查尺寸都稳定才认为真正稳定
+     */
+    var checkStability = function checkStability() {
+      // 再次检查尺寸是否稳定（防止在等待期间尺寸又变化了）
+      if (!isSizeStable) {
+        stableCheckCountRef.current = 0;
+        return;
+      }
+      var calculatedHeight = calculateHeight();
+
+      // 如果高度无效，重置计数
+      if (calculatedHeight <= 0) {
+        stableCheckCountRef.current = 0;
+        return;
+      }
+
+      // 获取上一次的高度用于比较
+      var previousHeight = previousSiderHeightRef.current;
+
+      // 如果已经初始化过，且高度变化小于阈值（10px），直接使用之前的高度
+      if (hasInitializedRef.current && previousHeight !== undefined && Math.abs(calculatedHeight - previousHeight) < 10) {
+        return; // 高度变化太小，不更新
+      }
+
+      // 连续3次检查高度都相同（或变化很小），才认为稳定
+      stableCheckCountRef.current += 1;
+      if (stableCheckCountRef.current >= 3) {
+        // 稳定了，应用高度
+        previousSiderHeightRef.current = calculatedHeight;
+        setSiderHeight(calculatedHeight);
+        hasInitializedRef.current = true;
+        stableCheckCountRef.current = 0; // 重置计数
+      } else {
+        // 还未稳定，继续等待下一次重绘
+        rafIdRef.current = requestAnimationFrame(checkStability);
+      }
+    };
+
+    // 使用 requestAnimationFrame 确保在浏览器重绘后检查
+    rafIdRef.current = requestAnimationFrame(checkStability);
+
+    // 清理函数
+    return function () {
+      if (rafIdRef.current !== null) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = null;
+      }
+    };
+  }, [isSizeStable, calculateHeight]);
+  return siderHeight;
+};

package/es/components/PisellProcedure/hooks/useStepManager.d.ts

@@ -0,0 +1,50 @@
+import type { StepChangeResult } from '../types';
+import type { PisellStepsProps } from '../../PisellSteps/types';
+/**
+ * useStepManager Hook 配置
+ */
+export interface UseStepManagerOptions {
+    /** 步骤条配置 */
+    stepsProps?: PisellStepsProps;
+    /** 初始步骤索引 */
+    defaultCurrent?: number;
+    /** 上一步事件回调 */
+    onPrev?: (current: number) => boolean | void;
+    /** 下一步事件回调 */
+    onNext?: (current: number) => boolean | void;
+    /** 步骤变化回调 */
+    onStepsChange?: (result: StepChangeResult) => void;
+    /** 跳转到指定步骤 */
+    goToStep?: (step: number) => void;
+}
+/**
+ * useStepManager Hook 返回值
+ */
+export interface UseStepManagerReturn {
+    /** 当前步骤索引 */
+    currentStep: number;
+    /** 步骤列表 */
+    items: any[];
+    /** 步骤总数 */
+    totalSteps: number;
+    /** 上一步 */
+    goPrev: () => StepChangeResult | null;
+    /** 下一步 */
+    goNext: () => StepChangeResult | null;
+    /** 跳转到指定步骤 */
+    goToStep: (step: number) => StepChangeResult | null;
+}
+/**
+ * 步骤管理 Hook
+ *
+ * @description 管理多步骤流程的状态和操作
+ * @example
+ * const { currentStep, goPrev, goNext } = useStepManager({
+ *   stepsProps: { items: [...] },
+ *   defaultCurrent: 0,
+ *   onPrev: (current) => { ... },
+ *   onNext: (current) => { ... },
+ *   onStepsChange: (result) => { ... },
+ * });
+ */
+export declare const useStepManager: ({ stepsProps, defaultCurrent, onPrev, onNext, onStepsChange, }: UseStepManagerOptions) => UseStepManagerReturn;

package/es/components/PisellProcedure/hooks/useStepManager.js

@@ -0,0 +1,122 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState, useCallback, useMemo, useEffect } from 'react';
+
+/**
+ * useStepManager Hook 配置
+ */
+
+/**
+ * useStepManager Hook 返回值
+ */
+
+/**
+ * 步骤管理 Hook
+ * 
+ * @description 管理多步骤流程的状态和操作
+ * @example
+ * const { currentStep, goPrev, goNext } = useStepManager({
+ *   stepsProps: { items: [...] },
+ *   defaultCurrent: 0,
+ *   onPrev: (current) => { ... },
+ *   onNext: (current) => { ... },
+ *   onStepsChange: (result) => { ... },
+ * });
+ */
+export var useStepManager = function useStepManager(_ref) {
+  var stepsProps = _ref.stepsProps,
+    _ref$defaultCurrent = _ref.defaultCurrent,
+    defaultCurrent = _ref$defaultCurrent === void 0 ? 0 : _ref$defaultCurrent,
+    onPrev = _ref.onPrev,
+    onNext = _ref.onNext,
+    onStepsChange = _ref.onStepsChange;
+  // 步骤列表
+  var items = Array.isArray(stepsProps === null || stepsProps === void 0 ? void 0 : stepsProps.items) ? stepsProps.items : [];
+  var totalSteps = items.length > 0 ? items.length : 1;
+
+  // 确保 defaultCurrent 是有效数字且在有效范围内
+  var safeDefaultCurrent = useMemo(function () {
+    var num = Number(defaultCurrent);
+    if (isNaN(num) || num < 0) return 0;
+    if (num >= totalSteps) return Math.max(0, totalSteps - 1);
+    return num;
+  }, [defaultCurrent, totalSteps]);
+  var _useState = useState(safeDefaultCurrent),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentStep = _useState2[0],
+    setCurrentStep = _useState2[1];
+
+  // 当 totalSteps 变化时，确保 currentStep 在有效范围内
+  useEffect(function () {
+    if (currentStep >= totalSteps) {
+      setCurrentStep(Math.max(0, totalSteps - 1));
+    }
+  }, [totalSteps, currentStep]);
+
+  /**
+   * 更新步骤
+   */
+  var updateStep = useCallback(function (step) {
+    // 确保步骤在有效范围内
+    var safeStep = Math.max(0, Math.min(totalSteps - 1, step));
+    setCurrentStep(safeStep);
+    var result = {
+      success: true,
+      currentStep: safeStep,
+      currentItem: items[safeStep] || null
+    };
+    onStepsChange === null || onStepsChange === void 0 || onStepsChange(result);
+    return result;
+  }, [items, totalSteps, onStepsChange]);
+
+  /**
+   * 上一步
+   */
+  var goPrev = useCallback(function () {
+    if (currentStep <= 0 || totalSteps === 0) return null;
+
+    // 触发 onPrev 事件，如果返回 false 则阻止步骤更新
+    var preventUpdate = onPrev === null || onPrev === void 0 ? void 0 : onPrev(currentStep);
+    if (preventUpdate === false) return null;
+    var newStep = Math.max(0, currentStep - 1);
+    return updateStep(newStep);
+  }, [currentStep, totalSteps, onPrev, updateStep]);
+
+  /**
+   * 下一步
+   */
+  var goNext = useCallback(function () {
+    if (currentStep >= totalSteps - 1 || totalSteps === 0) return null;
+
+    // 触发 onNext 事件，如果返回 false 则阻止步骤更新
+    var preventUpdate = onNext === null || onNext === void 0 ? void 0 : onNext(currentStep);
+    if (preventUpdate === false) return null;
+    var newStep = Math.min(totalSteps - 1, currentStep + 1);
+    return updateStep(newStep);
+  }, [currentStep, totalSteps, onNext, updateStep]);
+
+  /**
+   * 跳转到指定步骤
+   */
+  var goToStep = useCallback(function (step) {
+    // 验证步骤索引是否有效
+    if (totalSteps === 0) return null;
+    if (step < 0 || step >= totalSteps) return null;
+    if (step === currentStep) return null;
+
+    // 直接更新步骤，不触发 onPrev/onNext 事件
+    return updateStep(step);
+  }, [currentStep, totalSteps, updateStep]);
+  return {
+    currentStep: currentStep,
+    items: items,
+    totalSteps: totalSteps,
+    goPrev: goPrev,
+    goNext: goNext,
+    goToStep: goToStep
+  };
+};

package/es/components/PisellProcedure/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * PisellProcedure 组件导出
+ */
+export { default } from './PisellProcedure';
+export type { PisellProcedureProps, ProcedureHeaderProps, ProcedureBodyProps, ProcedureFooterProps, FooterPositionMode, BackConfirmModalConfig, BodyLayoutMode, BodyLayoutRatio, BodyDirection, StepItem, StepChangeResult, } from './types';

package/es/components/PisellProcedure/index.js

@@ -0,0 +1,4 @@
+/**
+ * PisellProcedure 组件导出
+ */
+export { default } from "./PisellProcedure";