@pisell/materials 6.8.9 → 6.8.10

package/es/components/PisellScrollView/hooks/useScrollEvents.js

@@ -41,10 +41,19 @@ export var useScrollEvents = function useScrollEvents(_ref) {
     // 简单的方向计算需要依赖上一次状态，这里暂简化
     // 实际使用中 scrollState 的更新会有延迟，所以 callback 中的 data 最好实时计算
 
-    var maxScrollTop = scrollHeight - clientHeight;
-    var maxScrollLeft = scrollWidth - clientWidth;
+    var maxScrollTop = Math.max(0, scrollHeight - clientHeight);
+    var maxScrollLeft = Math.max(0, scrollWidth - clientWidth);
     var percentY = maxScrollTop > 0 ? scrollTop / maxScrollTop * 100 : 0;
     var percentX = maxScrollLeft > 0 ? scrollLeft / maxScrollLeft * 100 : 0;
+
+    // 计算边界状态
+    var isScrollToTop = scrollTop <= reachThreshold;
+    var isScrollToBottom = scrollTop + clientHeight >= scrollHeight - reachThreshold;
+    var isScrollToLeft = scrollLeft <= reachThreshold;
+    var isScrollToRight = scrollLeft + clientWidth >= scrollWidth - reachThreshold;
+
+    // 计算是否溢出
+    var isOverflows = scrollHeight > clientHeight || scrollWidth > clientWidth;
     var currentData = {
       scrollTop: scrollTop,
       scrollLeft: scrollLeft,
@@ -54,7 +63,13 @@ export var useScrollEvents = function useScrollEvents(_ref) {
       clientWidth: clientWidth,
       percentY: percentY,
       percentX: percentX,
-      direction: null // 在这里计算方向比较麻烦，可以使用 scrollState 中的（虽然有一点延迟）
+      direction: null,
+      // 在这里计算方向比较麻烦，可以使用 scrollState 中的（虽然有一点延迟）
+      isScrollToTop: isScrollToTop,
+      isScrollToBottom: isScrollToBottom,
+      isScrollToLeft: isScrollToLeft,
+      isScrollToRight: isScrollToRight,
+      isOverflows: isOverflows
     };
 
     // 触发 ScrollStart

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

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

package/es/components/PisellScrollView/index.js

@@ -1 +1,2 @@
-export { default as PisellScrollView } from "./PisellScrollView";
+import PisellScrollView from "./PisellScrollView";
+export default PisellScrollView;

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

@@ -0,0 +1,155 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PisellSteps from './PisellSteps';
+/**
+ * PisellSteps 步骤条组件
+ *
+ * 基于 Ant Design Steps 组件进行二次封装和增强
+ * 支持多种展示样式、布局方式和丰富的交互功能
+ */
+declare const meta: Meta<typeof PisellSteps>;
+export default meta;
+declare type Story = StoryObj<typeof PisellSteps>;
+/**
+ * 基础用法 - 默认步骤条
+ */
+export declare const Default: Story;
+/**
+ * 非受控模式
+ * @description 使用 defaultCurrent 设置初始步骤
+ */
+export declare const Uncontrolled: Story;
+/**
+ * 垂直方向
+ */
+export declare const Vertical: Story;
+/**
+ * 点状步骤条
+ * @description 通过 progressDot 属性启用点状样式
+ */
+export declare const Dot: Story;
+/**
+ * 自定义点状渲染
+ * @description 使用函数自定义点状图标的渲染
+ */
+export declare const CustomProgressDot: Story;
+/**
+ * 导航步骤条
+ */
+export declare const Navigation: Story;
+/**
+ * 小尺寸
+ */
+export declare const Small: Story;
+/**
+ * 大尺寸
+ */
+export declare const Large: Story;
+/**
+ * 标签垂直布局
+ * @description 标签在图标下方显示
+ */
+export declare const LabelVertical: Story;
+/**
+ * 错误状态
+ */
+export declare const ErrorStatus: Story;
+/**
+ * 自定义步骤状态
+ * @description 每个步骤可以单独设置状态
+ */
+export declare const CustomStatus: Story;
+/**
+ * 可点击步骤
+ */
+export declare const Clickable: Story;
+/**
+ * 禁止点击已完成步骤
+ * @description 设置 allowClickFinished 为 false
+ */
+export declare const DisallowClickFinished: Story;
+/**
+ * 禁用特定步骤
+ * @description 通过 disabled 属性禁用某个步骤
+ */
+export declare const DisabledStep: Story;
+/**
+ * 自定义图标
+ */
+export declare const CustomIcon: Story;
+/**
+ * 完成图标
+ */
+export declare const FinishIcon: Story;
+/**
+ * 栅格布局
+ * @description 启用栅格布局，自定义列数
+ */
+export declare const GridLayout: Story;
+/**
+ * 自定义图标与文本间距
+ * @description 通过 itemGap 属性自定义间距
+ */
+export declare const CustomItemGap: Story;
+/**
+ * 移动端 - 完整模式
+ * @description 移动端显示完整步骤条
+ */
+export declare const MobileModeFull: Story;
+/**
+ * 移动端 - 当前步骤模式
+ * @description 只显示当前步骤信息
+ */
+export declare const MobileModeCurrent: Story;
+/**
+ * 移动端 - 自动模式
+ * @description 根据屏幕宽度自动切换显示模式
+ */
+export declare const MobileModeAuto: Story;
+/**
+ * 自定义移动端断点
+ * @description 通过 mobileBreakpoint 自定义断点宽度
+ */
+export declare const CustomMobileBreakpoint: Story;
+/**
+ * 自定义起始索引
+ * @description 通过 initial 设置起始步骤索引
+ */
+export declare const InitialIndex: Story;
+/**
+ * 隐藏特定步骤
+ * @description 通过 hidden 属性动态隐藏步骤
+ */
+export declare const HiddenStep: Story;
+/**
+ * 带子标题
+ * @description 步骤可以包含子标题
+ */
+export declare const WithSubTitle: Story;
+/**
+ * 响应式步骤条
+ * @description 开启响应式后会自动调整布局
+ */
+export declare const Responsive: Story;
+/**
+ * 完整功能演示
+ * @description 展示多种功能的组合使用
+ */
+export declare const FullFeature: Story;
+/**
+ * 多步骤流程
+ * @description 更多步骤的场景
+ */
+export declare const ManySteps: Story;
+/**
+ * 购物流程示例
+ * @description 模拟真实的购物流程
+ */
+export declare const ShoppingFlow: Story;
+/**
+ * 交互测试 - 点击步骤
+ */
+export declare const InteractionTest: Story;
+/**
+ * 交互测试 - 验证组件渲染
+ */
+export declare const RenderTest: Story;