@pisell/materials 1.8.1 → 1.8.2

package/es/components/PisellProcedure/utils/classNames.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 类名合并工具函数
+ * @description 用于合并多个类名，过滤掉 undefined、null、空字符串
+ */
+/**
+ * 合并类名
+ * @param classNames 类名数组
+ * @returns 合并后的类名字符串
+ * @example
+ * mergeClassNames('base', 'active', undefined, 'extra')
+ * // => 'base active extra'
+ */
+export declare const mergeClassNames: (...classNames: (string | undefined | null | false)[]) => string;
+/**
+ * 生成带前缀的类名
+ * @param prefix 前缀
+ * @param suffix 后缀（可选）
+ * @returns 类名字符串
+ * @example
+ * prefixClassName('pisell-procedure', 'header')
+ * // => 'pisell-procedure-header'
+ */
+export declare const prefixClassName: (prefix: string, suffix?: string) => string;
+/**
+ * 生成带修饰符的 BEM 类名
+ * @param block 块名
+ * @param modifier 修饰符
+ * @returns 类名字符串
+ * @example
+ * modifierClassName('pisell-procedure-footer', 'float-sidebar')
+ * // => 'pisell-procedure-footer--float-sidebar'
+ */
+export declare const modifierClassName: (block: string, modifier?: string) => string;

package/es/components/PisellProcedure/utils/extractText.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+/**
+ * 从 React 节点中提取文本内容
+ * @param node React 节点
+ * @returns 提取的文本字符串
+ * @example
+ * extractTextFromNode(<span>Hello</span>) // => 'Hello'
+ * extractTextFromNode('Hello') // => 'Hello'
+ * extractTextFromNode([<span>Hello</span>, ' ', <span>World</span>]) // => 'Hello World'
+ */
+export declare const extractTextFromNode: (node: React.ReactNode) => string;
+/**
+ * 从按钮 props 中提取显示文本
+ * @param buttonProps 按钮的 props
+ * @param fallback 默认文本
+ * @returns 显示文本
+ */
+export declare const extractButtonLabel: (buttonProps: {
+    children?: React.ReactNode;
+} | undefined, fallback: string) => string;

package/es/components/PisellProcedure/utils/footerPosition.d.ts

@@ -0,0 +1,41 @@
+import type { FooterPositionMode } from '../types';
+/**
+ * 底部位置判断工具函数
+ * @description 用于判断底部操作区的位置模式
+ */
+/**
+ * 判断底部是否在内容区
+ * @param position 底部位置模式
+ * @returns 是否在内容区
+ */
+export declare const isFooterInContent: (position: FooterPositionMode) => boolean;
+/**
+ * 判断底部是否在信息区
+ * @param position 底部位置模式
+ * @returns 是否在信息区
+ */
+export declare const isFooterInSidebar: (position: FooterPositionMode) => boolean;
+/**
+ * 判断底部是否全局显示
+ * @param position 底部位置模式
+ * @returns 是否全局显示
+ */
+export declare const isFooterGlobal: (position: FooterPositionMode) => boolean;
+/**
+ * 判断底部是否固定模式
+ * @param position 底部位置模式
+ * @returns 是否固定模式
+ */
+export declare const isFooterFixed: (position: FooterPositionMode) => boolean;
+/**
+ * 判断底部是否悬浮模式
+ * @param position 底部位置模式
+ * @returns 是否悬浮模式
+ */
+export declare const isFooterFloat: (position: FooterPositionMode) => boolean;
+/**
+ * 获取底部位置的目标区域
+ * @param position 底部位置模式
+ * @returns 目标区域: 'content' | 'sidebar' | 'global'
+ */
+export declare const getFooterTargetArea: (position: FooterPositionMode) => 'content' | 'sidebar' | 'global';

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

@@ -0,0 +1,8 @@
+/**
+ * PisellProcedure 工具函数导出
+ */
+export { mergeClassNames, prefixClassName, modifierClassName, } from './classNames';
+export { wrapSlotWithClick, isValidSlot, renderSlotOrDefault, } from './slotHelper';
+export { isFooterInContent, isFooterInSidebar, isFooterGlobal, isFooterFixed, isFooterFloat, getFooterTargetArea, } from './footerPosition';
+export { extractTextFromNode, extractButtonLabel, } from './extractText';
+export { parseLayoutRatio, calculateRatioPercent, generateRatioStyles, LAYOUT_RATIO_PRESETS, } from './layoutRatio';

package/es/components/PisellProcedure/utils/layoutRatio.d.ts

@@ -0,0 +1,42 @@
+import type { BodyLayoutRatio } from '../types';
+/**
+ * 布局比例工具函数
+ * @description 用于解析和计算内容区与信息区的布局比例
+ */
+/**
+ * 解析比例字符串
+ * @param ratio 比例字符串，如 '7:3'
+ * @returns [内容区比例, 信息区比例]
+ * @example
+ * parseLayoutRatio('7:3') // => [7, 3]
+ * parseLayoutRatio('6:4') // => [6, 4]
+ */
+export declare const parseLayoutRatio: (ratio: BodyLayoutRatio) => [number, number];
+/**
+ * 计算百分比
+ * @param ratio 比例字符串，如 '7:3'
+ * @returns { contentPercent, sidebarPercent }
+ * @example
+ * calculateRatioPercent('7:3') // => { contentPercent: 70, sidebarPercent: 30 }
+ */
+export declare const calculateRatioPercent: (ratio: BodyLayoutRatio) => {
+    contentPercent: number;
+    sidebarPercent: number;
+};
+/**
+ * 生成 flex 比例样式
+ * @param ratio 比例字符串，如 '7:3'
+ * @param gap 间距（px）
+ * @returns { contentStyle, sidebarStyle }
+ */
+export declare const generateRatioStyles: (ratio: BodyLayoutRatio, gap?: number) => {
+    contentStyle: React.CSSProperties;
+    sidebarStyle: React.CSSProperties;
+};
+/**
+ * 预设比例选项
+ */
+export declare const LAYOUT_RATIO_PRESETS: {
+    label: string;
+    value: BodyLayoutRatio;
+}[];

package/es/components/PisellProcedure/utils/slotHelper.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+/**
+ * 插槽包装工具函数
+ * @description 用于包装 React 插槽元素，添加额外的事件处理
+ */
+/**
+ * 包装插槽元素，添加点击事件
+ * @param slotContent 插槽内容
+ * @param onClick 点击回调
+ * @returns 包装后的插槽内容
+ * @example
+ * wrapSlotWithClick(leftSlot, handleBackClick)
+ */
+export declare const wrapSlotWithClick: (slotContent: React.ReactNode, onClick?: () => void | boolean) => React.ReactNode;
+/**
+ * 检查插槽是否为有效的 React 元素
+ * @param slotContent 插槽内容
+ * @returns 是否为有效元素
+ */
+export declare const isValidSlot: (slotContent: React.ReactNode) => boolean;
+/**
+ * 渲染插槽内容，如果为空则返回默认内容
+ * @param slotContent 插槽内容
+ * @param defaultContent 默认内容
+ * @returns 最终渲染内容
+ */
+export declare const renderSlotOrDefault: (slotContent: React.ReactNode, defaultContent?: React.ReactNode) => React.ReactNode;

package/es/components/PisellScrollView/PisellScrollView.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { PisellScrollViewProps, PisellScrollViewRef } from './types';
+import './PisellScrollView.less';
+declare const PisellScrollView: React.ForwardRefExoticComponent<Omit<PisellScrollViewProps, "ref"> & React.RefAttributes<PisellScrollViewRef>>;
+export default PisellScrollView;

package/es/components/PisellScrollView/PisellScrollView.stories.d.ts

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PisellScrollView from './PisellScrollView';
+/**
+ * PisellScrollView 滚动视图组件
+ *
+ * 提供丰富的滚动功能，包括滚动方向控制、滚动条样式、滚动按钮、滚动事件监听、
+ * 视图监听、吸附滚动等功能
+ */
+declare const meta: Meta<typeof PisellScrollView>;
+export default meta;
+declare type Story = StoryObj<typeof PisellScrollView>;
+/**
+ * 基础用法 - 垂直滚动
+ */
+export declare const Default: Story;
+/**
+ * 水平滚动
+ */
+export declare const HorizontalScroll: Story;
+/**
+ * 双向滚动
+ */
+export declare const BothDirections: Story;
+/**
+ * 滚动条样式 - 细滚动条
+ */
+export declare const ThinScrollbar: Story;
+/**
+ * 滚动条样式 - 隐藏滚动条
+ */
+export declare const HiddenScrollbar: Story;
+/**
+ * 滚动按钮 - 右侧箭头
+ */
+export declare const RightArrows: Story;
+/**
+ * 滚动按钮 - 左右箭头
+ */
+export declare const LeftRightArrows: Story;
+/**
+ * 滚动按钮 - 返回顶部
+ */
+export declare const BackToTop: Story;
+/**
+ * 滚动事件监听
+ */
+export declare const ScrollEvents: Story;
+/**
+ * 吸附滚动 - 垂直方向
+ */
+export declare const SnapScrollVertical: Story;
+/**
+ * 吸附滚动 - 水平方向
+ */
+export declare const SnapScrollHorizontal: Story;
+/**
+ * 视图监听 - IntersectionObserver
+ */
+export declare const IntersectionObserver: Story;
+/**
+ * Ref 方法调用
+ */
+export declare const RefMethods: Story;
+/**
+ * 滚动到指定元素
+ */
+export declare const ScrollToElement: Story;
+/**
+ * 自定义尺寸
+ */
+export declare const CustomSize: Story;
+/**
+ * 综合示例 - 商品列表
+ */
+export declare const ProductList: Story;
+/**
+ * 综合示例 - 横向标签页
+ */
+export declare const HorizontalTabs: Story;
+/**
+ * 交互测试 - 验证组件渲染
+ */
+export declare const RenderTest: Story;
+/**
+ * 交互测试 - 滚动按钮点击
+ */
+export declare const ScrollButtonTest: Story;

package/es/components/PisellScrollView/components/Actions/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ScrollEventData, PisellScrollViewProps, ScrollActionsConfig } from '../../types';
+import './index.less';
+interface ActionsContainerProps {
+    scrollState: ScrollEventData;
+    overflow: PisellScrollViewProps['overflow'];
+    scrollActionsConfig: ScrollActionsConfig;
+    containerRef: React.RefObject<HTMLDivElement>;
+    onClick: (direction: 'left' | 'right' | 'top' | 'bottom') => void;
+}
+declare const ActionsContainer: ({ containerRef, scrollState, overflow, scrollActionsConfig, onClick, }: ActionsContainerProps) => JSX.Element | null;
+export default ActionsContainer;

package/es/components/PisellScrollView/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useScrollState';
+export * from './useScrollEvents';
+export * from './useIntersection';

package/es/components/PisellScrollView/hooks/useIntersection.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+import { PisellScrollViewProps } from '../types';
+interface UseIntersectionProps {
+    containerRef: RefObject<HTMLElement>;
+    config?: PisellScrollViewProps['intersection'];
+}
+export declare const useIntersection: ({ containerRef, config }: UseIntersectionProps) => void;
+export {};

package/es/components/PisellScrollView/hooks/useScrollEvents.d.ts

@@ -0,0 +1,20 @@
+import { RefObject } from 'react';
+import { ScrollEventData, PisellScrollViewProps } from '../types';
+interface UseScrollEventsProps {
+    containerRef: RefObject<HTMLElement>;
+    onScroll?: PisellScrollViewProps['onScroll'];
+    onScrollStart?: PisellScrollViewProps['onScrollStart'];
+    onScrollEnd?: PisellScrollViewProps['onScrollEnd'];
+    onReachTop?: PisellScrollViewProps['onReachTop'];
+    onReachBottom?: PisellScrollViewProps['onReachBottom'];
+    onReachLeft?: PisellScrollViewProps['onReachLeft'];
+    onReachRight?: PisellScrollViewProps['onReachRight'];
+    reachThreshold?: number;
+    scrollEndDelay?: number;
+    updateScrollState: () => void;
+    scrollState: ScrollEventData;
+}
+export declare const useScrollEvents: ({ containerRef, onScroll, onScrollStart, onScrollEnd, onReachTop, onReachBottom, onReachLeft, onReachRight, reachThreshold, scrollEndDelay, updateScrollState, scrollState, }: UseScrollEventsProps) => {
+    handleScroll: () => void;
+};
+export {};

package/es/components/PisellScrollView/hooks/useScrollState.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+import { ScrollEventData, PisellScrollViewProps } from '../types';
+/**
+ * 滚动状态管理 Hook
+ * @description 管理滚动容器的状态，包括滚动位置、溢出检测等
+ */
+export declare const useScrollState: ({ containerRef, overflow, }: {
+    containerRef: RefObject<HTMLElement>;
+    overflow: PisellScrollViewProps['overflow'];
+}) => {
+    scrollState: ScrollEventData;
+    updateScrollState: () => void;
+};

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

@@ -0,0 +1,3 @@
+import PisellScrollView from './PisellScrollView';
+export type { PisellScrollViewProps, PisellScrollViewRef } from './types';
+export default PisellScrollView;

package/es/components/PisellScrollView/types.d.ts

@@ -0,0 +1,203 @@
+import React, { ReactNode, CSSProperties } from 'react';
+/**
+ * 滚动位置配置
+ */
+export interface ScrollPosition {
+    /** 竖向滚动位置（像素） */
+    scrollTop?: number;
+    /** 横向滚动位置（像素） */
+    scrollLeft?: number;
+    /** 滚动行为 */
+    behavior?: 'auto' | 'smooth';
+}
+/**
+ * 滚动到元素配置
+ */
+export interface ScrollToElementConfig {
+    /** 目标元素 ID */
+    targetId: string;
+    /** 对齐方式 */
+    align?: 'start' | 'center' | 'end' | 'nearest';
+    /** 滚动行为 */
+    behavior?: 'auto' | 'smooth';
+    /** 偏移量 */
+    offset?: number;
+}
+/**
+ * 滚动百分比配置
+ */
+export interface ScrollPercentage {
+    /** 竖向滚动百分比 (0-100) */
+    percentY?: number;
+    /** 横向滚动百分比 (0-100) */
+    percentX?: number;
+    /** 滚动行为 */
+    behavior?: 'auto' | 'smooth';
+}
+/**
+ * 滚动按钮配置
+ */
+export interface ScrollActionsConfig {
+    show?: boolean;
+    /** 按钮类型 */
+    type: "backTop" | "rArrows" | "lrArrows" | "tbArrows" | "custom";
+    style?: CSSProperties;
+    scrollDistance?: number;
+    /** 按钮配置 根据type不同，配置不同 */
+    config?: any;
+}
+/**
+ * 滚动事件数据
+ */
+export interface ScrollEventData {
+    /** 当前滚动位置 */
+    scrollTop: number;
+    scrollLeft: number;
+    /** 滚动百分比 */
+    percentY: number;
+    percentX: number;
+    /** 可滚动高度/宽度 */
+    scrollHeight: number;
+    scrollWidth: number;
+    /** 容器尺寸 */
+    clientHeight: number;
+    clientWidth: number;
+    /** 滚动方向 */
+    direction: 'up' | 'down' | 'left' | 'right' | null;
+    /** 是否滚动到顶部 */
+    isScrollToTop: boolean;
+    /** 是否滚动到底部 */
+    isScrollToBottom: boolean;
+    /** 是否滚动到左边 */
+    isScrollToLeft: boolean;
+    /** 是否滚动到右边 */
+    isScrollToRight: boolean;
+    /** 是否已经产生滚动条 */
+    isOverflows: boolean;
+}
+/**
+ * 视图监听配置
+ */
+export interface IntersectionConfig {
+    /** 是否启用视图监听 */
+    enabled?: boolean;
+    /** 交叉阈值 (0-1) */
+    threshold?: number | number[];
+    /** 根边距 */
+    rootMargin?: string;
+    /** 元素进入视图回调 */
+    onEnterViewport?: (entry: IntersectionObserverEntry, element: Element) => void;
+    /** 元素离开视图回调 */
+    onLeaveViewport?: (entry: IntersectionObserverEntry, element: Element) => void;
+    /** 可见度变化回调 */
+    onVisibilityChange?: (entry: IntersectionObserverEntry, element: Element) => void;
+    /** 需要监听的元素选择器 */
+    targetSelector?: string;
+}
+/**
+ * 吸附滚动配置
+ */
+export interface SnapScrollConfig {
+    /** 是否启用吸附滚动 */
+    enabled?: boolean;
+    /** 吸附类型 */
+    type?: 'mandatory' | 'proximity';
+    /** 吸附对齐方式 */
+    align?: 'start' | 'center' | 'end';
+    /** 吸附开始回调 */
+    onSnapStart?: (targetIndex: number, targetPosition: number) => void;
+    /** 吸附结束回调 */
+    onSnapEnd?: (currentIndex: number, currentPosition: number) => void;
+}
+/**
+ * PisellScrollView 组件 Props
+ */
+export interface PisellScrollViewProps {
+    /** 子元素 */
+    children?: ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 滚动方向 */
+    overflow?: 'auto' | 'scroll' | 'hidden' | 'x' | 'y' | 'both';
+    /** 滚动条样式 */
+    scrollbarStyle?: 'default' | 'thin' | 'minimal' | 'rounded' | 'overlay' | 'custom' | 'none';
+    /** 自定义滚动条类名（当 scrollbarStyle 为 'custom' 时使用） */
+    scrollbarClassName?: string;
+    /** 是否显示滚动按钮 */
+    showScrollButtons?: boolean;
+    /** 箭头操作 */
+    scrollActionsConfig?: ScrollActionsConfig;
+    /** 滚动时触发 */
+    onScroll?: (data: ScrollEventData) => void;
+    /** 开始滚动时触发 */
+    onScrollStart?: (data: ScrollEventData) => void;
+    /** 滚动结束时触发（防抖延迟，默认 150ms） */
+    onScrollEnd?: (data: ScrollEventData) => void;
+    /** 滚动结束防抖延迟时间（ms） */
+    scrollEndDelay?: number;
+    /** 到达顶部时触发 */
+    onReachTop?: (data: ScrollEventData) => void;
+    /** 到达底部时触发 */
+    onReachBottom?: (data: ScrollEventData) => void;
+    /** 到达左边时触发 */
+    onReachLeft?: (data: ScrollEventData) => void;
+    /** 到达右边时触发 */
+    onReachRight?: (data: ScrollEventData) => void;
+    /** 边界阈值（到达边界的像素阈值） */
+    reachThreshold?: number;
+    /** IntersectionObserver 配置 */
+    intersection?: IntersectionConfig;
+    /** 吸附滚动配置 */
+    snapScroll?: SnapScrollConfig;
+    /** 容器宽度 */
+    width?: number | string;
+    /** 容器高度 */
+    height?: number | string;
+    /** 最大宽度 */
+    maxWidth?: number | string;
+    /** 最大高度 */
+    maxHeight?: number | string;
+    /** 最小宽度 */
+    minWidth?: number | string;
+    /** 最小高度 */
+    minHeight?: number | string;
+    /** Ref 引用 */
+    ref?: React.Ref<PisellScrollViewRef>;
+    /** 设计模式 */
+    __designMode?: boolean;
+}
+/**
+ * 组件暴露的方法
+ */
+export interface PisellScrollViewRef {
+    /** 滚动到指定位置 */
+    scrollTo: (position: ScrollPosition) => void;
+    /** 滚动到指定元素 */
+    scrollToElement: (config: ScrollToElementConfig) => void;
+    /** 滚动到百分比位置 */
+    scrollToPercentage: (percentage: ScrollPercentage) => void;
+    /** 滚动到顶部 */
+    scrollToTop: (behavior?: 'auto' | 'smooth') => void;
+    /** 滚动到底部 */
+    scrollToBottom: (behavior?: 'auto' | 'smooth') => void;
+    /** 滚动到最左侧 */
+    scrollToLeft: (behavior?: 'auto' | 'smooth') => void;
+    /** 滚动到最右侧 */
+    scrollToRight: (behavior?: 'auto' | 'smooth') => void;
+    /** 获取当前滚动信息 */
+    getScrollData: () => ScrollEventData;
+    /** 获取滚动容器 DOM 元素 */
+    getScrollContainer: () => HTMLElement | null;
+    /** 滚动到指定吸附点（索引） */
+    scrollToSnapPoint: (index: number, behavior?: 'auto' | 'smooth') => void;
+    /** 获取所有吸附点位置 */
+    getSnapPoints: () => number[];
+    /** 获取当前吸附点索引 */
+    getCurrentSnapIndex: () => number;
+    /** 滚动到下一个吸附点 */
+    scrollToNextSnap: (behavior?: 'auto' | 'smooth') => void;
+    /** 滚动到上一个吸附点 */
+    scrollToPrevSnap: (behavior?: 'auto' | 'smooth') => void;
+}

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