@bifrostui/react 2.0.0-alpha.0 → 2.0.0-alpha.2

package/es/ScrollView/ScrollView.types.d.ts

@@ -1,195 +1,73 @@
 import React from 'react';
 import { OverrideProps } from '@bifrostui/types';
-interface ScrollViewScrollEvent extends Event {
+/**
+ * 滚动事件详情
+ */
+export interface ScrollViewScrollEvent extends Event {
     detail?: {
         scrollLeft: number;
         scrollTop: number;
         scrollHeight: number;
         scrollWidth: number;
-        deltaX?: number;
-        deltaY?: number;
-        isDrag?: boolean;
-    };
-}
-interface ScrollViewDragEvent extends Event {
-    detail?: {
-        /** 横向滚动条位置 */
-        scrollLeft?: number;
-        /** 竖向滚动条位置 */
-        scrollTop?: number;
-        /** 滚动速度 */
-        velocity?: number;
     };
 }
+/**
+ * ScrollIntoView 对齐方式
+ */
+export type ScrollIntoViewAlignment = 'start' | 'center' | 'end' | 'nearest';
+/**
+ * ScrollView 组件属性
+ */
 export type ScrollViewProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
     props: P & {
         /**
          * 允许横向滚动
          * @default false
-         * @type {boolean}
          */
         scrollX?: boolean;
         /**
          * 允许纵向滚动
          * @default false
-         * @type {boolean}
          */
         scrollY?: boolean;
-        /**
-         * 距顶部/左边多远时（单位px），触发 scrolltoupper 事件
-         * @default 50
-         * @type {number}
-         */
-        upperThreshold?: number;
-        /**
-         * 距底部/右边多远时（单位px），触发 scrolltolower 事件
-         * @default 50
-         * @type {number}
-         */
-        lowerThreshold?: number;
         /**
          * 设置竖向滚动条位置
-         * @type {number}
          */
         scrollTop?: number;
         /**
          * 设置横向滚动条位置
-         * @type {number}
          */
         scrollLeft?: number;
         /**
-         * 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
-         * @type {string}
+         * 滚动到指定元素（元素id，不能以数字开头）
          */
         scrollIntoView?: string;
         /**
-         * 在设置滚动条位置时使用动画过渡
-         * @default false
-         * @type {boolean}
-         */
-        scrollWithAnimation?: boolean;
-        /** 指定 scroll-into-view 目标节点在视口内的位置。
-         * start - 目标节点显示在视口开始处
-         * center - 目标节点显示在视口中间
-         * end - 目标节点显示在视口结束处
-         * nearest - 目标节点在就近的视口边缘显示，若节点已在视口内则不触发滚动
+         * 指定 scroll-into-view 目标节点在视口内的位置
          * @default 'start'
          */
-        scrollIntoViewAlignment?: ScrollLogicalPosition;
+        scrollIntoViewAlignment?: ScrollIntoViewAlignment;
         /**
-         * 滚动条返回顶部，只支持竖向
-         * @default false
-         * @type {boolean}
-         */
-        enableBackToTop?: boolean;
-        /** 启用 flexbox 布局。开启后，当前节点声明了 `display: flex` 就会成为 flex container，并作用于其孩子节点。
-         * 仅小程序可用
-         * @default false
-         */
-        enableFlex?: boolean;
-        /** 开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS `overflow-anchor` 属性。
-         * 仅小程序可用
-         * @default false
-         */
-        scrollAnchoring?: boolean;
-        /** 开启自定义下拉刷新
-         * 仅小程序可用
-         * @default false
-         */
-        refresherEnabled?: boolean;
-        /** 设置自定义下拉刷新默认样式，支持设置 `black | white | none`， none 表示不使用默认样式
-         * 仅小程序可用
-         * @default 'black'
-         */
-        refresherDefaultStyle?: string;
-        /** 设置自定义下拉刷新区域背景颜色
-         * 仅小程序可用
-         * @default '#FFF'
-         */
-        refresherBackground?: string;
-        /** 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
-         * 仅小程序可用
-         * @default false
-         */
-        refresherTriggered?: boolean;
-        /** 启用 scroll-view 增强特性
-         * 仅小程序可用
-         * @default false
-         */
-        enhanced?: boolean;
-        /** iOS 下 scroll-view 边界弹性控制 (同时开启 enhanced 属性后生效)
-         * 仅小程序可用
-         * @default true
-         */
-        bounces?: boolean;
-        /** 滚动条显隐控制 (同时开启 enhanced 属性后生效)
-         * 仅小程序可用
-         * @default true
-         */
-        showScrollbar?: boolean;
-        /** 分页滑动效果 (同时开启 enhanced 属性后生效)
-         * 仅小程序可用
-         * @default false
-         */
-        pagingEnabled?: boolean;
-        /** boolean	false	滑动减速速率控制 (同时开启 enhanced 属性后生效)
-         * 仅小程序可用
-         * @default false
-         */
-        fastDeceleration?: boolean;
-        /** 当 scroll-with-animation设置为 true 时，可以设置 scroll-animation-duration 来控制动画的执行时间，单位 ms。
-         * 仅小程序可用
-         */
-        scrollAnimationDuration?: number;
-        /** 纵向滚动时，当滚动到顶部或底部时，强制禁止触发页面滚动，仍然只触发 scroll-view 自身的滚动。
-         * 仅小程序可用
-         * @default false
-         */
-        trapScroll?: string;
-        /** 发生滚动前，对滚动方向进行判断，当方向是顶部/左边时，如果值为always将始终禁止滚动，如果值为out-of-bounds 且当前已经滚动到顶部/左边，禁止滚动。
-         * 仅小程序可用
-         */
-        disableLowerScroll?: string;
-        /** 发生滚动前，对滚动方向进行判断，当方向是底部/右边时，如果值为always将始终禁止滚动，如果值为out-of-bounds 且当前已经滚动到底部/右边，禁止滚动。
-         * 仅小程序可用
-         */
-        disableUpperScroll?: string;
-        /** 无障碍访问，（属性）元素的额外描述
-         * 仅小程序可用
-         */
-        ariaLabel?: string;
-        /** 开启 passive 特性，能优化一定的滚动性能
-         * 仅小程序可用
-         * @default false
-         */
-        enablePassive?: string;
-        /** 渲染模式
-         * list - 列表模式。只会渲染在屏节点，会根据直接子节点是否在屏来按需渲染，若只有一个直接子节点则性能会退化
-         * custom - 自定义模式。只会渲染在屏节点，子节点可以是 sticky-section list-view grid-view 等组件
-         * 仅小程序可用
-         * @default 'list'
-         */
-        type?: 'list' | 'custom';
-        /** 是否反向滚动。一般初始滚动位置是在顶部，反向滚动则是在底部。
-         * 仅小程序可用
+         * 在设置滚动条位置时使用动画过渡
          * @default false
          */
-        reverse?: boolean;
-        /** 指定视口外渲染区域的距离，默认情况下视口外节点不渲染。指定 cache-extent 可优化滚动体验和加载速度，但会提高内存占用且影响首屏速度，可按需启用。
-         * 仅小程序可用
+        scrollWithAnimation?: boolean;
+        /**
+         * 距顶部/左边多远时（单位px），触发 onScrollToUpper 事件
+         * @default 50
          */
-        cacheExtent?: number;
-        /** 只 scroll-into-view 到 cacheExtent 以内的目标节点，性能更佳
-         * 仅小程序可用
-         * @default false
+        upperThreshold?: number;
+        /**
+         * 距底部/右边多远时（单位px），触发 onScrollToLower 事件
+         * @default 50
          */
-        scrollIntoViewWithinExtent?: boolean;
+        lowerThreshold?: number;
         /**
-         * 滚动到顶部/左边，会触发 scrolltoupper 事件
+         * 滚动到顶部/左边时触发
          */
         onScrollToUpper?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
         /**
-         * 滚动到底部/右边，会触发 scrolltolower 事件
+         * 滚动到底部/右边时触发
          */
         onScrollToLower?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
         /**
@@ -197,62 +75,9 @@ export type ScrollViewProps<D extends React.ElementType = 'div', P = {}> = Overr
          */
         onScroll?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewScrollEvent>) => void;
         /**
-         * 触摸后移动
+         * 触摸移动时触发
          */
         onTouchMove?: (e: React.SyntheticEvent<HTMLDivElement, TouchEvent>) => void;
-        /** 滚动开始事件
-         * 仅小程序可用
-         */
-        onScrollStart?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewScrollEvent>) => void;
-        /** 滚动结束事件
-         * 仅小程序可用
-         */
-        onScrollEnd?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewScrollEvent>) => void;
-        /** 自定义下拉刷新控件被下拉
-         * 仅小程序可用
-         */
-        onRefresherPulling?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
-        /** 自定义下拉刷新被触发
-         * 仅小程序可用
-         */
-        onRefresherRefresh?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
-        /** 自定义下拉刷新被复位
-         * 仅小程序可用
-         */
-        onRefresherRestore?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
-        /** 自定义下拉刷新被中止
-         * 仅小程序可用
-         */
-        onRefresherAbort?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
-        /** 自定义下拉刷新即将触发刷新（拖动超过 refresher-threshold 时）的事件
-         * 仅小程序可用
-         */
-        onRefresherWillRefresh?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
-        /** 滑动开始事件 (同时开启 enhanced 属性后生效)
-         * 仅小程序可用
-         */
-        onDragStart?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewDragEvent>) => void;
-        /** 滑动事件 (同时开启 enhanced 属性后生效)
-         * 仅小程序可用
-         */
-        onDragging?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewDragEvent>) => void;
-        /** 滑动结束事件 (同时开启 enhanced 属性后生效)
-         * 仅小程序可用
-         */
-        onDragEnd?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewDragEvent>) => void;
-        /** 触摸动作开始。
-         * 仅小程序可用
-         */
-        onTouchStart?: (e: React.SyntheticEvent<HTMLDivElement, TouchEvent>) => void;
-        /** 触摸动作结束。
-         * 仅小程序可用
-         */
-        onTouchEnd?: (e: React.SyntheticEvent<HTMLDivElement, TouchEvent>) => void;
-        /** 触摸动作被打断，如来电提醒、弹窗。
-         * 仅小程序可用
-         */
-        onTouchCancel?: (e: React.SyntheticEvent<HTMLDivElement, TouchEvent>) => void;
     };
     defaultComponent: D;
 }, D>;
-export {};

package/es/ScrollView/__tests__/fixtures/A11yDemos.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const BasicScrollViewDemo: React.FC;
+export declare const HorizontalScrollViewDemo: React.FC;
+export declare const ScrollEventsDemo: React.FC;
+export declare const ControlledScrollDemo: React.FC;
+export declare const BidirectionalScrollDemo: React.FC;
+export declare const ThresholdTestDemo: React.FC;

package/es/ScrollView/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,283 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import React from "react";
+import ScrollView from "../../ScrollView";
+const BasicScrollViewDemo = () => {
+  return /* @__PURE__ */ React.createElement(ScrollView, { scrollY: true, style: { height: "300px", width: "100%" } }, Array.from({ length: 50 }, (_, index) => /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      key: index,
+      style: { padding: "10px", borderBottom: "1px solid #eee" }
+    },
+    "Item ",
+    index + 1
+  )));
+};
+const HorizontalScrollViewDemo = () => {
+  return /* @__PURE__ */ React.createElement(ScrollView, { scrollX: true, style: { width: "300px" } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", width: "max-content" } }, Array.from({ length: 20 }, (_, index) => /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      key: index,
+      style: {
+        minWidth: "100px",
+        height: "80px",
+        margin: "0 5px",
+        padding: "10px",
+        backgroundColor: "#f0f0f0",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    },
+    "Item ",
+    index + 1
+  ))));
+};
+const ScrollEventsDemo = () => {
+  const [scrollInfo, setScrollInfo] = React.useState({
+    scrollTop: 0,
+    atTop: false,
+    atBottom: false
+  });
+  const handleScroll = (e) => {
+    var _a;
+    const event = e;
+    const scrollTop = ((_a = event.detail) == null ? void 0 : _a.scrollTop) || 0;
+    setScrollInfo((prev) => __spreadProps(__spreadValues({}, prev), {
+      scrollTop
+    }));
+  };
+  const handleScrollToUpper = () => {
+    setScrollInfo((prev) => __spreadProps(__spreadValues({}, prev), { atTop: true, atBottom: false }));
+  };
+  const handleScrollToLower = () => {
+    setScrollInfo((prev) => __spreadProps(__spreadValues({}, prev), { atTop: false, atBottom: true }));
+  };
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-testid": "scroll-info",
+      style: {
+        marginBottom: "10px",
+        padding: "10px",
+        backgroundColor: "#f9f9f9"
+      }
+    },
+    /* @__PURE__ */ React.createElement("p", null, "Scroll Top: ", scrollInfo.scrollTop),
+    /* @__PURE__ */ React.createElement("p", null, "At Top: ", scrollInfo.atTop ? "Yes" : "No"),
+    /* @__PURE__ */ React.createElement("p", null, "At Bottom: ", scrollInfo.atBottom ? "Yes" : "No")
+  ), /* @__PURE__ */ React.createElement(
+    ScrollView,
+    {
+      scrollY: true,
+      style: { height: "200px", width: "100%" },
+      onScroll: handleScroll,
+      onScrollToUpper: handleScrollToUpper,
+      onScrollToLower: handleScrollToLower,
+      upperThreshold: 30,
+      lowerThreshold: 30
+    },
+    Array.from({ length: 30 }, (_, index) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: index,
+        style: { padding: "15px", borderBottom: "1px solid #ddd" }
+      },
+      "Scroll Item ",
+      index + 1
+    ))
+  ));
+};
+const ControlledScrollDemo = () => {
+  const [scrollTop, setScrollTop] = React.useState(0);
+  const [scrollIntoView, setScrollIntoView] = React.useState("");
+  const scrollToPosition = (position) => {
+    setScrollIntoView("");
+    setScrollTop(position);
+  };
+  const scrollToElement = (elementId) => {
+    setScrollTop(0);
+    setScrollIntoView(elementId);
+  };
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        marginBottom: "10px",
+        padding: "10px",
+        backgroundColor: "#f5f5f5"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => scrollToPosition(0),
+        style: { marginRight: "5px" }
+      },
+      "Top"
+    ),
+    /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => scrollToPosition(200),
+        style: { marginRight: "5px" }
+      },
+      "200px"
+    ),
+    /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => scrollToElement("item-10"),
+        style: { marginRight: "5px" }
+      },
+      "Item 10"
+    ),
+    /* @__PURE__ */ React.createElement("button", { type: "button", onClick: () => scrollToElement("item-20") }, "Item 20")
+  ), /* @__PURE__ */ React.createElement(
+    ScrollView,
+    {
+      scrollY: true,
+      style: { height: "250px", width: "100%" },
+      scrollTop,
+      scrollIntoView,
+      scrollWithAnimation: true
+    },
+    Array.from({ length: 30 }, (_, index) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: index,
+        id: `item-${index + 1}`,
+        style: {
+          padding: "20px",
+          borderBottom: "1px solid #ccc",
+          backgroundColor: (index + 1) % 10 === 0 ? "#e6f3ff" : "white"
+        }
+      },
+      "Item ",
+      index + 1,
+      " ",
+      (index + 1) % 10 === 0 && "(Highlighted)"
+    ))
+  ));
+};
+const BidirectionalScrollDemo = () => {
+  return /* @__PURE__ */ React.createElement(
+    ScrollView,
+    {
+      scrollX: true,
+      scrollY: true,
+      style: {
+        width: "300px",
+        height: "200px",
+        border: "1px solid #ddd",
+        borderRadius: "4px"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          width: "600px",
+          height: "400px",
+          backgroundImage: "linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%)",
+          backgroundSize: "20px 20px",
+          backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
+          position: "relative"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            padding: "20px",
+            backgroundColor: "white",
+            border: "2px solid #007acc",
+            borderRadius: "8px",
+            boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
+          }
+        },
+        /* @__PURE__ */ React.createElement("h3", { style: { margin: "0 0 10px 0", color: "#007acc" } }, "Scroll in both directions!"),
+        /* @__PURE__ */ React.createElement("p", { style: { margin: 0, color: "#666" } }, "This content area is larger than the viewport")
+      )
+    )
+  );
+};
+const ThresholdTestDemo = () => {
+  const [thresholdEvents, setThresholdEvents] = React.useState([]);
+  const addEvent = (event) => {
+    setThresholdEvents((prev) => [
+      ...prev.slice(-4),
+      `${(/* @__PURE__ */ new Date()).toLocaleTimeString()}: ${event}`
+    ]);
+  };
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-testid": "threshold-events",
+      style: {
+        marginBottom: "10px",
+        padding: "10px",
+        backgroundColor: "#f0f8ff",
+        minHeight: "80px"
+      }
+    },
+    /* @__PURE__ */ React.createElement("strong", null, "Threshold Events:"),
+    thresholdEvents.map((event, index) => /* @__PURE__ */ React.createElement("div", { key: index, style: { fontSize: "12px", color: "#666" } }, event))
+  ), /* @__PURE__ */ React.createElement(
+    ScrollView,
+    {
+      scrollY: true,
+      style: { height: "150px", width: "100%" },
+      upperThreshold: 20,
+      lowerThreshold: 20,
+      onScrollToUpper: () => addEvent("Reached upper threshold (20px)"),
+      onScrollToLower: () => addEvent("Reached lower threshold (20px)")
+    },
+    Array.from({ length: 20 }, (_, index) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: index,
+        style: {
+          padding: "12px",
+          borderBottom: "1px solid #eee",
+          backgroundColor: index === 0 || index === 19 ? "#fff3cd" : "white"
+        }
+      },
+      index === 0 && "First Item (Top Threshold Test)",
+      index === 19 && "Last Item (Bottom Threshold Test)",
+      index !== 0 && index !== 19 && `Item ${index + 1}`
+    ))
+  ));
+};
+export {
+  BasicScrollViewDemo,
+  BidirectionalScrollDemo,
+  ControlledScrollDemo,
+  HorizontalScrollViewDemo,
+  ScrollEventsDemo,
+  ThresholdTestDemo
+};

package/es/ScrollView/useScrollView.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ScrollViewProps } from './ScrollView.types';
+export interface UseScrollViewParameters extends ScrollViewProps {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface UseScrollViewReturnValue {
+    getRootProps: (otherHandlers?: Record<string, unknown>) => Record<string, unknown>;
+    containerRef: React.RefCallback<HTMLDivElement>;
+}
+export declare function useScrollView(parameters: UseScrollViewParameters): UseScrollViewReturnValue;