@pisell/materials 3.3.77 → 3.3.79

package/lib/components/PisellScrollView/PisellScrollView.stories.js

@@ -0,0 +1,535 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PisellScrollView/PisellScrollView.stories.tsx
+var PisellScrollView_stories_exports = {};
+__export(PisellScrollView_stories_exports, {
+  BackToTop: () => BackToTop,
+  BothDirections: () => BothDirections,
+  CustomSize: () => CustomSize,
+  Default: () => Default,
+  HiddenScrollbar: () => HiddenScrollbar,
+  HorizontalScroll: () => HorizontalScroll,
+  HorizontalTabs: () => HorizontalTabs,
+  IntersectionObserver: () => IntersectionObserver,
+  LeftRightArrows: () => LeftRightArrows,
+  ProductList: () => ProductList,
+  RefMethods: () => RefMethods,
+  RenderTest: () => RenderTest,
+  RightArrows: () => RightArrows,
+  ScrollButtonTest: () => ScrollButtonTest,
+  ScrollEvents: () => ScrollEvents,
+  ScrollToElement: () => ScrollToElement,
+  SnapScrollHorizontal: () => SnapScrollHorizontal,
+  SnapScrollVertical: () => SnapScrollVertical,
+  ThinScrollbar: () => ThinScrollbar,
+  default: () => PisellScrollView_stories_default
+});
+module.exports = __toCommonJS(PisellScrollView_stories_exports);
+var import_test = require("@storybook/test");
+var import_antd = require("antd");
+var import_react = require("react");
+var import_PisellScrollView = __toESM(require("./PisellScrollView"));
+var meta = {
+  title: "Pro Components/PisellScrollView",
+  component: import_PisellScrollView.default,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: "滚动视图组件，提供丰富的滚动功能，支持多种滚动方向、滚动条样式、滚动按钮和滚动事件监听。"
+      }
+    }
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    overflow: {
+      control: "select",
+      options: ["auto", "scroll", "hidden", "x", "y", "both"],
+      description: "滚动方向"
+    },
+    scrollbarStyle: {
+      control: "select",
+      options: ["default", "thin", "minimal", "rounded", "overlay", "custom", "none"],
+      description: "滚动条样式"
+    },
+    width: {
+      control: "text",
+      description: "容器宽度"
+    },
+    height: {
+      control: "text",
+      description: "容器高度"
+    }
+  }
+};
+var PisellScrollView_stories_default = meta;
+var Default = {
+  args: {
+    width: "100%",
+    height: 400,
+    overflow: "y",
+    children: /* @__PURE__ */ React.createElement("div", { style: { padding: 20 } }, Array.from({ length: 20 }, (_, i) => /* @__PURE__ */ React.createElement(import_antd.Card, { key: i, style: { marginBottom: 16 } }, /* @__PURE__ */ React.createElement("h3", null, "卡片 ", i + 1), /* @__PURE__ */ React.createElement("p", null, "这是第 ", i + 1, " 个卡片内容，用于演示垂直滚动效果。"))))
+  }
+};
+var HorizontalScroll = {
+  args: {
+    width: "100%",
+    height: 300,
+    overflow: "x",
+    children: /* @__PURE__ */ React.createElement("div", { style: { display: "flex", padding: 20, gap: 16 } }, Array.from({ length: 10 }, (_, i) => /* @__PURE__ */ React.createElement(
+      import_antd.Card,
+      {
+        key: i,
+        style: {
+          minWidth: 300,
+          flexShrink: 0
+        }
+      },
+      /* @__PURE__ */ React.createElement("h3", null, "卡片 ", i + 1),
+      /* @__PURE__ */ React.createElement("p", null, "这是第 ", i + 1, " 个卡片，用于演示水平滚动效果。")
+    )))
+  }
+};
+var BothDirections = {
+  args: {
+    width: "100%",
+    height: 400,
+    overflow: "both",
+    children: /* @__PURE__ */ React.createElement("div", { style: { padding: 20, width: 2e3, height: 2e3 } }, /* @__PURE__ */ React.createElement("h2", null, "双向滚动内容"), /* @__PURE__ */ React.createElement("p", null, "这个区域可以同时进行水平和垂直滚动。"), /* @__PURE__ */ React.createElement("div", { style: { marginTop: 100, marginLeft: 500 } }, /* @__PURE__ */ React.createElement(import_antd.Card, null, /* @__PURE__ */ React.createElement("h3", null, "右下角内容"), /* @__PURE__ */ React.createElement("p", null, "滚动到这里可以看到双向滚动的效果。"))))
+  }
+};
+var ThinScrollbar = {
+  args: {
+    width: "100%",
+    height: 400,
+    overflow: "y",
+    scrollbarStyle: "thin",
+    children: /* @__PURE__ */ React.createElement("div", { style: { padding: 20 } }, Array.from({ length: 15 }, (_, i) => /* @__PURE__ */ React.createElement(import_antd.Card, { key: i, style: { marginBottom: 16 } }, /* @__PURE__ */ React.createElement("h3", null, "卡片 ", i + 1), /* @__PURE__ */ React.createElement("p", null, "使用细滚动条样式。"))))
+  }
+};
+var HiddenScrollbar = {
+  args: {
+    width: "100%",
+    height: 400,
+    overflow: "y",
+    scrollbarStyle: "none",
+    children: /* @__PURE__ */ React.createElement("div", { style: { padding: 20 } }, Array.from({ length: 15 }, (_, i) => /* @__PURE__ */ React.createElement(import_antd.Card, { key: i, style: { marginBottom: 16 } }, /* @__PURE__ */ React.createElement("h3", null, "卡片 ", i + 1), /* @__PURE__ */ React.createElement("p", null, "滚动条已隐藏，但仍可滚动。"))))
+  }
+};
+var RightArrows = {
+  args: {
+    width: "100%",
+    height: 400,
+    overflow: "x",
+    scrollActionsConfig: {
+      show: true,
+      type: "rArrows",
+      scrollDistance: 300
+    },
+    children: /* @__PURE__ */ React.createElement("div", { style: { display: "flex", padding: 20, gap: 16 } }, Array.from({ length: 10 }, (_, i) => /* @__PURE__ */ React.createElement(
+      import_antd.Card,
+      {
+        key: i,
+        style: {
+          minWidth: 300,
+          flexShrink: 0
+        }
+      },
+      /* @__PURE__ */ React.createElement("h3", null, "卡片 ", i + 1),
+      /* @__PURE__ */ React.createElement("p", null, "点击右侧箭头按钮可以滚动。")
+    )))
+  }
+};
+var LeftRightArrows = {
+  args: {
+    width: "100%",
+    height: 400,
+    overflow: "x",
+    scrollActionsConfig: {
+      show: true,
+      type: "lrArrows",
+      scrollDistance: 300
+    },
+    children: /* @__PURE__ */ React.createElement("div", { style: { display: "flex", padding: 20, gap: 16 } }, Array.from({ length: 10 }, (_, i) => /* @__PURE__ */ React.createElement(
+      import_antd.Card,
+      {
+        key: i,
+        style: {
+          minWidth: 300,
+          flexShrink: 0
+        }
+      },
+      /* @__PURE__ */ React.createElement("h3", null, "卡片 ", i + 1),
+      /* @__PURE__ */ React.createElement("p", null, "点击左右箭头按钮可以滚动。")
+    )))
+  }
+};
+var BackToTop = {
+  args: {
+    width: "100%",
+    height: 400,
+    overflow: "y",
+    scrollActionsConfig: {
+      show: true,
+      type: "backTop"
+    },
+    children: /* @__PURE__ */ React.createElement("div", { style: { padding: 20 } }, Array.from({ length: 30 }, (_, i) => /* @__PURE__ */ React.createElement(import_antd.Card, { key: i, style: { marginBottom: 16 } }, /* @__PURE__ */ React.createElement("h3", null, "卡片 ", i + 1), /* @__PURE__ */ React.createElement("p", null, "滚动到底部后，点击返回顶部按钮可以快速回到顶部。"))))
+  }
+};
+var ScrollEvents = {
+  args: {
+    width: "100%",
+    height: 400,
+    overflow: "y",
+    onScroll: (data) => {
+      console.log("滚动中:", data);
+    },
+    onScrollStart: (data) => {
+      console.log("开始滚动:", data);
+    },
+    onScrollEnd: (data) => {
+      console.log("滚动结束:", data);
+    },
+    onReachTop: (data) => {
+      console.log("到达顶部:", data);
+    },
+    onReachBottom: (data) => {
+      console.log("到达底部:", data);
+    },
+    children: /* @__PURE__ */ React.createElement("div", { style: { padding: 20 } }, Array.from({ length: 20 }, (_, i) => /* @__PURE__ */ React.createElement(import_antd.Card, { key: i, style: { marginBottom: 16 } }, /* @__PURE__ */ React.createElement("h3", null, "卡片 ", i + 1), /* @__PURE__ */ React.createElement("p", null, "滚动时查看控制台输出，可以看到滚动事件数据。"))))
+  }
+};
+var SnapScrollVertical = {
+  args: {
+    width: "100%",
+    height: 400,
+    overflow: "y",
+    snapScroll: {
+      enabled: true,
+      type: "mandatory"
+    },
+    scrollActionsConfig: {
+      show: true,
+      type: "tbArrows"
+    },
+    children: /* @__PURE__ */ React.createElement("div", { style: { padding: 20 } }, Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ React.createElement(
+      import_antd.Card,
+      {
+        key: i,
+        id: `snap-item-${i}`,
+        style: {
+          marginBottom: 16,
+          height: 350,
+          scrollSnapAlign: "start"
+        }
+      },
+      /* @__PURE__ */ React.createElement("h2", null, "吸附卡片 ", i + 1),
+      /* @__PURE__ */ React.createElement("p", null, "滚动时会自动吸附到每个卡片的开始位置。")
+    )))
+  }
+};
+var SnapScrollHorizontal = {
+  args: {
+    width: "100%",
+    height: 400,
+    overflow: "x",
+    snapScroll: {
+      enabled: true,
+      type: "mandatory"
+    },
+    scrollActionsConfig: {
+      show: true,
+      type: "lrArrows"
+    },
+    children: /* @__PURE__ */ React.createElement("div", { style: { display: "flex", padding: 20, gap: 16 } }, Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ React.createElement(
+      import_antd.Card,
+      {
+        key: i,
+        id: `snap-item-${i}`,
+        style: {
+          minWidth: "calc(100% - 40px)",
+          flexShrink: 0,
+          scrollSnapAlign: "start"
+        }
+      },
+      /* @__PURE__ */ React.createElement("h2", null, "吸附卡片 ", i + 1),
+      /* @__PURE__ */ React.createElement("p", null, "滚动时会自动吸附到每个卡片的开始位置。")
+    )))
+  }
+};
+var IntersectionObserver = {
+  args: {
+    width: "100%",
+    height: 400,
+    overflow: "y",
+    intersection: {
+      enabled: true,
+      threshold: 0.5,
+      onEnterViewport: (entry, element) => {
+        console.log("元素进入视图:", element.id);
+      },
+      onLeaveViewport: (entry, element) => {
+        console.log("元素离开视图:", element.id);
+      },
+      targetSelector: ".observe-item"
+    },
+    children: /* @__PURE__ */ React.createElement("div", { style: { padding: 20 } }, Array.from({ length: 10 }, (_, i) => /* @__PURE__ */ React.createElement(
+      import_antd.Card,
+      {
+        key: i,
+        id: `observe-item-${i}`,
+        className: "observe-item",
+        style: { marginBottom: 16, minHeight: 200 }
+      },
+      /* @__PURE__ */ React.createElement("h3", null, "可观察卡片 ", i + 1),
+      /* @__PURE__ */ React.createElement("p", null, "当这个卡片进入或离开视图时，会在控制台输出日志。")
+    )))
+  }
+};
+var RefMethods = {
+  render: () => {
+    const scrollViewRef = (0, import_react.useRef)(null);
+    const handleScrollToTop = () => {
+      var _a;
+      (_a = scrollViewRef.current) == null ? void 0 : _a.scrollToTop("smooth");
+    };
+    const handleScrollToBottom = () => {
+      var _a;
+      (_a = scrollViewRef.current) == null ? void 0 : _a.scrollToBottom("smooth");
+    };
+    const handleScrollTo50Percent = () => {
+      var _a;
+      (_a = scrollViewRef.current) == null ? void 0 : _a.scrollToPercentage({ percentY: 50, behavior: "smooth" });
+    };
+    const handleGetScrollData = () => {
+      var _a;
+      const data = (_a = scrollViewRef.current) == null ? void 0 : _a.getScrollData();
+      console.log("当前滚动数据:", data);
+      alert(`滚动位置: ${(data == null ? void 0 : data.scrollTop) || 0}px
+滚动百分比: ${(data == null ? void 0 : data.percentY) || 0}%`);
+    };
+    return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(import_antd.Space, { style: { marginBottom: 16 } }, /* @__PURE__ */ React.createElement(import_antd.Button, { onClick: handleScrollToTop }, "滚动到顶部"), /* @__PURE__ */ React.createElement(import_antd.Button, { onClick: handleScrollToBottom }, "滚动到底部"), /* @__PURE__ */ React.createElement(import_antd.Button, { onClick: handleScrollTo50Percent }, "滚动到 50%"), /* @__PURE__ */ React.createElement(import_antd.Button, { onClick: handleGetScrollData }, "获取滚动数据")), /* @__PURE__ */ React.createElement(
+      import_PisellScrollView.default,
+      {
+        ref: scrollViewRef,
+        width: "100%",
+        height: 400,
+        overflow: "y"
+      },
+      /* @__PURE__ */ React.createElement("div", { style: { padding: 20 } }, Array.from({ length: 20 }, (_, i) => /* @__PURE__ */ React.createElement(import_antd.Card, { key: i, style: { marginBottom: 16 } }, /* @__PURE__ */ React.createElement("h3", null, "卡片 ", i + 1), /* @__PURE__ */ React.createElement("p", null, "使用上方的按钮可以控制滚动位置。"))))
+    ));
+  }
+};
+var ScrollToElement = {
+  render: () => {
+    const scrollViewRef = (0, import_react.useRef)(null);
+    const handleScrollToElement = (index) => {
+      var _a;
+      (_a = scrollViewRef.current) == null ? void 0 : _a.scrollToElement({
+        targetId: `target-item-${index}`,
+        align: "start",
+        behavior: "smooth"
+      });
+    };
+    return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(import_antd.Space, { style: { marginBottom: 16 } }, /* @__PURE__ */ React.createElement(import_antd.Button, { onClick: () => handleScrollToElement(0) }, "滚动到第 1 项"), /* @__PURE__ */ React.createElement(import_antd.Button, { onClick: () => handleScrollToElement(4) }, "滚动到第 5 项"), /* @__PURE__ */ React.createElement(import_antd.Button, { onClick: () => handleScrollToElement(9) }, "滚动到第 10 项")), /* @__PURE__ */ React.createElement(
+      import_PisellScrollView.default,
+      {
+        ref: scrollViewRef,
+        width: "100%",
+        height: 400,
+        overflow: "y"
+      },
+      /* @__PURE__ */ React.createElement("div", { style: { padding: 20 } }, Array.from({ length: 15 }, (_, i) => /* @__PURE__ */ React.createElement(
+        import_antd.Card,
+        {
+          key: i,
+          id: `target-item-${i}`,
+          style: { marginBottom: 16, minHeight: 150 }
+        },
+        /* @__PURE__ */ React.createElement("h3", null, "目标卡片 ", i + 1),
+        /* @__PURE__ */ React.createElement("p", null, "点击上方按钮可以滚动到这个卡片。")
+      )))
+    ));
+  }
+};
+var CustomSize = {
+  args: {
+    width: 600,
+    height: 300,
+    maxWidth: "100%",
+    maxHeight: 500,
+    overflow: "y",
+    children: /* @__PURE__ */ React.createElement("div", { style: { padding: 20 } }, Array.from({ length: 10 }, (_, i) => /* @__PURE__ */ React.createElement(import_antd.Card, { key: i, style: { marginBottom: 16 } }, /* @__PURE__ */ React.createElement("h3", null, "卡片 ", i + 1), /* @__PURE__ */ React.createElement("p", null, "自定义尺寸的滚动容器。"))))
+  }
+};
+var ProductList = {
+  args: {
+    width: "100%",
+    height: 500,
+    overflow: "y",
+    scrollbarStyle: "thin",
+    scrollActionsConfig: {
+      show: true,
+      type: "backTop"
+    },
+    onReachBottom: (data) => {
+      console.log("已滚动到底部，可以加载更多商品");
+    },
+    children: /* @__PURE__ */ React.createElement("div", { style: { padding: 20 } }, /* @__PURE__ */ React.createElement("h2", { style: { marginBottom: 16 } }, "商品列表"), /* @__PURE__ */ React.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 } }, Array.from({ length: 30 }, (_, i) => /* @__PURE__ */ React.createElement(
+      import_antd.Card,
+      {
+        key: i,
+        hoverable: true,
+        cover: /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              height: 200,
+              background: `linear-gradient(135deg, #667eea 0%, #764ba2 100%)`,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "white",
+              fontSize: 24
+            }
+          },
+          "商品 ",
+          i + 1
+        )
+      },
+      /* @__PURE__ */ React.createElement(
+        import_antd.Card.Meta,
+        {
+          title: `商品标题 ${i + 1}`,
+          description: `这是商品 ${i + 1} 的描述信息，价格 ¥${(i + 1) * 10}`
+        }
+      )
+    ))))
+  }
+};
+var HorizontalTabs = {
+  args: {
+    width: "100%",
+    height: 400,
+    overflow: "x",
+    scrollbarStyle: "none",
+    scrollActionsConfig: {
+      show: true,
+      type: "lrArrows",
+      scrollDistance: 200
+    },
+    snapScroll: {
+      enabled: true,
+      type: "proximity"
+    },
+    children: /* @__PURE__ */ React.createElement("div", { style: { display: "flex", padding: 20, gap: 16 } }, ["全部", "推荐", "热门", "最新", "科技", "设计", "开发", "产品", "运营", "市场"].map(
+      (tab, i) => /* @__PURE__ */ React.createElement(
+        import_antd.Card,
+        {
+          key: i,
+          hoverable: true,
+          style: {
+            minWidth: 200,
+            flexShrink: 0,
+            scrollSnapAlign: "start"
+          }
+        },
+        /* @__PURE__ */ React.createElement("h3", null, tab),
+        /* @__PURE__ */ React.createElement("p", null, "这是 ", tab, " 标签页的内容")
+      )
+    ))
+  }
+};
+var RenderTest = {
+  args: {
+    width: "100%",
+    height: 400,
+    overflow: "y",
+    children: /* @__PURE__ */ React.createElement("div", { style: { padding: 20 } }, Array.from({ length: 10 }, (_, i) => /* @__PURE__ */ React.createElement(import_antd.Card, { key: i, style: { marginBottom: 16 } }, /* @__PURE__ */ React.createElement("h3", null, "卡片 ", i + 1), /* @__PURE__ */ React.createElement("p", null, "这是第 ", i + 1, " 个卡片内容"))))
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = (0, import_test.within)(canvasElement);
+    const scrollView = canvasElement.querySelector(".pisell-scroll-view");
+    await (0, import_test.expect)(scrollView).toBeInTheDocument();
+    await (0, import_test.expect)(canvas.getByText("卡片 1")).toBeInTheDocument();
+    await (0, import_test.expect)(canvas.getByText("卡片 10")).toBeInTheDocument();
+  }
+};
+var ScrollButtonTest = {
+  args: {
+    width: "100%",
+    height: 400,
+    overflow: "x",
+    scrollActionsConfig: {
+      show: true,
+      type: "lrArrows",
+      scrollDistance: 300
+    },
+    children: /* @__PURE__ */ React.createElement("div", { style: { display: "flex", padding: 20, gap: 16 } }, Array.from({ length: 10 }, (_, i) => /* @__PURE__ */ React.createElement(
+      import_antd.Card,
+      {
+        key: i,
+        style: {
+          minWidth: 300,
+          flexShrink: 0
+        }
+      },
+      /* @__PURE__ */ React.createElement("h3", null, "卡片 ", i + 1),
+      /* @__PURE__ */ React.createElement("p", null, "这是第 ", i + 1, " 个卡片")
+    )))
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = (0, import_test.within)(canvasElement);
+    const actions = canvasElement.querySelector(".pisell-scroll-view-actions");
+    await (0, import_test.expect)(actions).toBeInTheDocument();
+    await (0, import_test.expect)(canvas.getByText("卡片 1")).toBeInTheDocument();
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BackToTop,
+  BothDirections,
+  CustomSize,
+  Default,
+  HiddenScrollbar,
+  HorizontalScroll,
+  HorizontalTabs,
+  IntersectionObserver,
+  LeftRightArrows,
+  ProductList,
+  RefMethods,
+  RenderTest,
+  RightArrows,
+  ScrollButtonTest,
+  ScrollEvents,
+  ScrollToElement,
+  SnapScrollHorizontal,
+  SnapScrollVertical,
+  ThinScrollbar
+});

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