xxf_react 0.2.7 → 0.2.9

package/dist/media/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/media/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/media/index.ts"],"names":[],"mappings":"AAEA,cAAc,eAAe,CAAC"}

package/dist/media/index.js

@@ -1 +1,2 @@
+'use client';
 export * from './video-state';

package/dist/refresh/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/refresh/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/refresh/index.ts"],"names":[],"mappings":"AAEA,cAAc,iBAAiB,CAAC"}

package/dist/refresh/index.js

@@ -1 +1,2 @@
+'use client';
 export * from './LoadMoreAsync';

package/dist/responsive/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/responsive/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/responsive/index.ts"],"names":[],"mappings":"AAEA,cAAc,iBAAiB,CAAC"}

package/dist/responsive/index.js

@@ -1 +1,2 @@
+'use client';
 export * from './ScreenAdapter';

package/dist/sse/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/sse/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/sse/index.ts"],"names":[],"mappings":"AAEA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC"}

package/dist/sse/index.js

@@ -1,3 +1,4 @@
+'use client';
 export * from './SSEStatus';
 export * from './SSEManager';
 export * from './SSERegistry';

package/dist/utils/index.d.ts

@@ -1,2 +1,2 @@
-export * from './TestUtils';
+export * from './scroll-to-center';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAEA,cAAc,oBAAoB,CAAA"}

package/dist/utils/index.js

@@ -1 +1,2 @@
-export * from './TestUtils';
+'use client';
+export * from './scroll-to-center';

package/dist/utils/scroll-to-center.d.ts

@@ -0,0 +1,72 @@
+/** 滚动对齐方式 */
+type ScrollAlign = 'center' | 'start' | 'end' | 'nearest';
+/** 滚动配置选项 */
+interface ScrollOptions {
+    /** 滚动行为：'smooth' 平滑滚动 | 'instant' 瞬间滚动 | 'auto' 自动，默认 'smooth' */
+    behavior?: ScrollBehavior;
+    /** 对齐方式：'center' 居中 | 'start' 起始 | 'end' 末尾 | 'nearest' 最近可见，默认 'center' */
+    align?: ScrollAlign;
+}
+/**
+ * 将元素滚动到容器指定位置
+ * @param element - 要滚动到的目标元素，为 null 时不执行滚动
+ * @param container - 可滚动的容器元素，为 null 时不执行滚动
+ * @param options - 滚动配置选项
+ * @param options.behavior - 滚动行为，默认 'smooth'
+ * @param options.align - 对齐方式，默认 'center'
+ */
+export declare const scrollToElement: (element: HTMLElement | null, container: HTMLElement | null, options?: ScrollOptions) => void;
+/**
+ * scrollToElement 的别名，保持向后兼容
+ * @deprecated 请使用 {@link scrollToElement} 代替
+ */
+export declare const scrollToCenter: (element: HTMLElement | null, container: HTMLElement | null, options?: ScrollOptions) => void;
+/** useScrollToCenter Hook 的配置选项 */
+interface UseScrollToCenterOptions {
+    /** 初始值，用于首次渲染时自动滚动到该值对应的元素（通过 data-value 属性匹配） */
+    initialValue?: string | number;
+    /** 对齐方式：'center' 居中 | 'start' 起始 | 'end' 末尾 | 'nearest' 最近可见，默认 'center' */
+    align?: ScrollAlign;
+    /** 滚动行为：'smooth' 平滑滚动 | 'instant' 瞬间滚动 | 'auto' 自动，默认 'smooth' */
+    behavior?: ScrollBehavior;
+}
+/**
+ * Hook: 用于可滚动 Tabs 的自动居中
+ * https://www.radix-ui.com/primitives/docs/components/tabs
+ *
+ * @param options - 配置选项
+ * @param options.initialValue - 初始值，首次渲染时自动滚动到该值对应的元素
+ * @param options.align - 对齐方式，默认 'center'
+ * @param options.behavior - 滚动行为，默认 'smooth'
+ *
+ * @returns 返回对象包含：
+ * - `containerRef` - 绑定到可滚动容器的 ref
+ * - `scrollToValue` - 滚动到指定 data-value 值的元素
+ * - `scrollTo` - 滚动到指定 HTMLElement 元素
+ *
+ * @example
+ * ```tsx
+ * const { containerRef, scrollToValue } = useScrollToCenter({
+ *   initialValue: activeTab,  // 首次渲染时滚动到初始值
+ * });
+ *
+ * <Tabs.List ref={containerRef}>
+ *   <Tabs.Trigger data-value="tab1">Tab 1</Tabs.Trigger>
+ * </Tabs.List>
+ *
+ * 如果<Tabs.List 里面又嵌套了可以滚动的div,那么ref必须绑定在可以滚动的div上
+ *
+ * // 切换时调用
+ * scrollToValue('tab1');
+ * ```
+ */
+export declare const useScrollToCenter: <T extends string | number = string>(options?: UseScrollToCenterOptions) => {
+    /** 绑定到可滚动容器的 ref */
+    containerRef: import("react").RefObject<HTMLDivElement | null>;
+    /** 滚动到指定 data-value 值的元素 */
+    scrollToValue: (value: T, scrollOptions?: ScrollOptions) => void;
+    /** 滚动到指定 HTMLElement 元素 */
+    scrollTo: (element: HTMLElement | null, scrollOptions?: ScrollOptions) => void;
+};
+export {};
+//# sourceMappingURL=scroll-to-center.d.ts.map

package/dist/utils/scroll-to-center.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-to-center.d.ts","sourceRoot":"","sources":["../../src/utils/scroll-to-center.ts"],"names":[],"mappings":"AAEA,aAAa;AACb,KAAK,WAAW,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;AAE1D,aAAa;AACb,UAAU,aAAa;IACnB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,4EAA4E;IAC5E,KAAK,CAAC,EAAE,WAAW,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,GACxB,SAAS,WAAW,GAAG,IAAI,EAC3B,WAAW,WAAW,GAAG,IAAI,EAC7B,UAAS,aAAkB,SAmD9B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,YA3Dd,WAAW,GAAG,IAAI,aAChB,WAAW,GAAG,IAAI,YACpB,aAAa,SAyDmB,CAAC;AAE9C,mCAAmC;AACnC,UAAU,wBAAwB;IAC9B,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,4EAA4E;IAC5E,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,EAChE,UAAS,wBAA6B;IA8DlC,oBAAoB;;IAEpB,4BAA4B;2BArCpB,CAAC,kBAAkB,aAAa;IAuCxC,2BAA2B;wBAjBjB,WAAW,GAAG,IAAI,kBAAkB,aAAa;CAoBlE,CAAC"}

package/dist/utils/scroll-to-center.js

@@ -0,0 +1,145 @@
+import { useRef, useCallback, useEffect } from 'react';
+/**
+ * 将元素滚动到容器指定位置
+ * @param element - 要滚动到的目标元素，为 null 时不执行滚动
+ * @param container - 可滚动的容器元素，为 null 时不执行滚动
+ * @param options - 滚动配置选项
+ * @param options.behavior - 滚动行为，默认 'smooth'
+ * @param options.align - 对齐方式，默认 'center'
+ */
+export const scrollToElement = (element, container, options = {}) => {
+    if (!element || !container)
+        return;
+    const { behavior = 'smooth', align = 'center' } = options;
+    // 使用 getBoundingClientRect 计算相对位置（更可靠，不受 DOM 层级影响）
+    const containerRect = container.getBoundingClientRect();
+    const elementRect = element.getBoundingClientRect();
+    const elementLeftRelative = elementRect.left - containerRect.left + container.scrollLeft;
+    const containerWidth = container.offsetWidth;
+    const elementWidth = element.offsetWidth;
+    const maxScroll = container.scrollWidth - containerWidth;
+    let scrollLeft;
+    switch (align) {
+        case 'start':
+            scrollLeft = elementLeftRelative;
+            break;
+        case 'end':
+            scrollLeft = elementLeftRelative - containerWidth + elementWidth;
+            break;
+        case 'nearest': {
+            const currentScroll = container.scrollLeft;
+            const elementRight = elementLeftRelative + elementWidth;
+            const visibleLeft = currentScroll;
+            const visibleRight = currentScroll + containerWidth;
+            if (elementLeftRelative < visibleLeft) {
+                scrollLeft = elementLeftRelative;
+            }
+            else if (elementRight > visibleRight) {
+                scrollLeft = elementRight - containerWidth;
+            }
+            else {
+                return; // 已在视口内，不滚动
+            }
+            break;
+        }
+        case 'center':
+        default:
+            scrollLeft = elementLeftRelative - containerWidth / 2 + elementWidth / 2;
+    }
+    // 限制在有效范围内
+    const clampedScroll = Math.max(0, Math.min(scrollLeft, maxScroll));
+    container.scrollTo({
+        left: clampedScroll,
+        behavior,
+    });
+};
+/**
+ * scrollToElement 的别名，保持向后兼容
+ * @deprecated 请使用 {@link scrollToElement} 代替
+ */
+export const scrollToCenter = scrollToElement;
+/**
+ * Hook: 用于可滚动 Tabs 的自动居中
+ * https://www.radix-ui.com/primitives/docs/components/tabs
+ *
+ * @param options - 配置选项
+ * @param options.initialValue - 初始值，首次渲染时自动滚动到该值对应的元素
+ * @param options.align - 对齐方式，默认 'center'
+ * @param options.behavior - 滚动行为，默认 'smooth'
+ *
+ * @returns 返回对象包含：
+ * - `containerRef` - 绑定到可滚动容器的 ref
+ * - `scrollToValue` - 滚动到指定 data-value 值的元素
+ * - `scrollTo` - 滚动到指定 HTMLElement 元素
+ *
+ * @example
+ * ```tsx
+ * const { containerRef, scrollToValue } = useScrollToCenter({
+ *   initialValue: activeTab,  // 首次渲染时滚动到初始值
+ * });
+ *
+ * <Tabs.List ref={containerRef}>
+ *   <Tabs.Trigger data-value="tab1">Tab 1</Tabs.Trigger>
+ * </Tabs.List>
+ *
+ * 如果<Tabs.List 里面又嵌套了可以滚动的div,那么ref必须绑定在可以滚动的div上
+ *
+ * // 切换时调用
+ * scrollToValue('tab1');
+ * ```
+ */
+export const useScrollToCenter = (options = {}) => {
+    const { initialValue, align = 'center', behavior = 'smooth' } = options;
+    const containerRef = useRef(null);
+    const initializedRef = useRef(false);
+    // 初始渲染时滚动到初始值（无动画）
+    useEffect(() => {
+        if (initializedRef.current || initialValue === undefined)
+            return;
+        initializedRef.current = true;
+        // 延迟执行，确保 DOM 渲染完成
+        requestAnimationFrame(() => {
+            const container = containerRef.current;
+            const element = container === null || container === void 0 ? void 0 : container.querySelector(`[data-value="${initialValue}"]`);
+            scrollToElement(element, container, { behavior: 'instant', align });
+        });
+    }, [initialValue, align]);
+    /**
+     * 滚动到指定 data-value 值的元素
+     * @param value - 目标元素的 data-value 属性值
+     * @param scrollOptions - 可选的滚动配置，覆盖默认配置
+     */
+    const scrollToValue = useCallback((value, scrollOptions) => {
+        requestAnimationFrame(() => {
+            const container = containerRef.current;
+            const element = container === null || container === void 0 ? void 0 : container.querySelector(`[data-value="${value}"]`);
+            scrollToElement(element, container, {
+                behavior,
+                align,
+                ...scrollOptions,
+            });
+        });
+    }, [align, behavior]);
+    /**
+     * 滚动到指定的 HTMLElement 元素
+     * @param element - 目标 HTMLElement 元素
+     * @param scrollOptions - 可选的滚动配置，覆盖默认配置
+     */
+    const scrollTo = useCallback((element, scrollOptions) => {
+        requestAnimationFrame(() => {
+            scrollToElement(element, containerRef.current, {
+                behavior,
+                align,
+                ...scrollOptions,
+            });
+        });
+    }, [align, behavior]);
+    return {
+        /** 绑定到可滚动容器的 ref */
+        containerRef,
+        /** 滚动到指定 data-value 值的元素 */
+        scrollToValue,
+        /** 滚动到指定 HTMLElement 元素 */
+        scrollTo,
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xxf_react",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "private": false,
 
   "type": "module",
@@ -63,6 +63,7 @@
 
   "dependencies": {
     "@microsoft/fetch-event-source": "^2.0.1",
+    "react-async-hook": "^4.0.0",
     "react-responsive": "^10.0.1",
     "react-toastify": "^11.0.5",
     "react-virtuoso": "^4.17.0",