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
});
