xxf_react 0.3.4 → 0.3.6

package/dist/utils/{reload.d.ts → Reload.d.ts}

@@ -59,4 +59,4 @@ interface UseReloadKeyReturn {
  */
 export declare function useReloadKey(options?: UseReloadKeyOptions): UseReloadKeyReturn;
 export {};
-//# sourceMappingURL=reload.d.ts.map
+//# sourceMappingURL=Reload.d.ts.map

package/dist/utils/{reload.d.ts.map → Reload.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"reload.d.ts","sourceRoot":"","sources":["../../src/utils/reload.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,UAAU,mBAAmB;IACzB,eAAe;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED;;GAEG;AACH,UAAU,kBAAkB;IACxB,iCAAiC;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,0BAA0B;IAC1B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,sBAAsB;IACtB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,+BAA+B;IAC/B,WAAW,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,mBAAwB,GAAG,kBAAkB,CA+BlF"}
+{"version":3,"file":"Reload.d.ts","sourceRoot":"","sources":["../../src/utils/Reload.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,UAAU,mBAAmB;IACzB,eAAe;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED;;GAEG;AACH,UAAU,kBAAkB;IACxB,iCAAiC;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,0BAA0B;IAC1B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,sBAAsB;IACtB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,+BAA+B;IAC/B,WAAW,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,mBAAwB,GAAG,kBAAkB,CA+BlF"}

package/dist/utils/{scroll-to-center.d.ts → ScrollToCenter.d.ts}

@@ -69,4 +69,4 @@ export declare const useScrollToCenter: <T extends string | number = string>(opt
     scrollTo: (element: HTMLElement | null, scrollOptions?: ScrollOptions) => void;
 };
 export {};
-//# sourceMappingURL=scroll-to-center.d.ts.map
+//# sourceMappingURL=ScrollToCenter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollToCenter.d.ts","sourceRoot":"","sources":["../../src/utils/ScrollToCenter.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/SizedContainer.d.ts

@@ -0,0 +1,60 @@
+import { ReactNode, CSSProperties, ElementType, ComponentPropsWithoutRef } from 'react';
+import React from "react";
+export interface ContainerSize {
+    width: number;
+    height: number;
+}
+interface SizedContainerProps<T extends ElementType = 'div'> {
+    /** 子元素渲染函数，接收容器尺寸和就绪状态 */
+    children: (size: ContainerSize & {
+        isReady: boolean;
+    }) => ReactNode;
+    /** 容器的 className */
+    className?: string;
+    /** 容器的 style */
+    style?: CSSProperties;
+    /** 自定义容器元素类型，默认 div */
+    as?: T;
+    /** 是否只监听宽度变化 */
+    widthOnly?: boolean;
+    /** 是否只监听高度变化 */
+    heightOnly?: boolean;
+    /** 防抖延迟（毫秒） */
+    debounce?: number;
+    /** 是否跳过首次挂载时的计算 */
+    skipOnMount?: boolean;
+    /** 尺寸未就绪时显示的占位内容 */
+    fallback?: ReactNode;
+    /** 尺寸变化时的回调 */
+    onResize?: (size: ContainerSize) => void;
+}
+/**
+ * 自动测量尺寸的容器组件
+ *
+ * @example
+ * // 基础用法
+ * <SizedContainer className="h-full w-full">
+ *   {({ width, height, isReady }) => (
+ *     <VirtuosoGrid style={{ width, height }} ... />
+ *   )}
+ * </SizedContainer>
+ *
+ * @example
+ * // 只监听高度，带防抖和占位符
+ * <SizedContainer
+ *   heightOnly
+ *   debounce={100}
+ *   fallback={<Skeleton />}
+ * >
+ *   {({ height }) => <List style={{ height }} />}
+ * </SizedContainer>
+ *
+ * @example
+ * // 自定义元素类型
+ * <SizedContainer as="section" className="h-full">
+ *   {({ width, height }) => <Chart width={width} height={height} />}
+ * </SizedContainer>
+ */
+export declare function SizedContainer<T extends ElementType = 'div'>({ children, className, style, as, widthOnly, heightOnly, debounce, skipOnMount, fallback, onResize, }: SizedContainerProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof SizedContainerProps<T>>): React.JSX.Element;
+export {};
+//# sourceMappingURL=SizedContainer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SizedContainer.d.ts","sourceRoot":"","sources":["../../src/utils/SizedContainer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,WAAW,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AACxF,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,aAAa;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,mBAAmB,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK;IACvD,0BAA0B;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,GAAG;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,SAAS,CAAC;IACpE,oBAAoB;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB;IAChB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,uBAAuB;IACvB,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,gBAAgB;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,eAAe;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CAC5C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,EACI,QAAQ,EACR,SAAS,EACT,KAAK,EACL,EAAE,EACF,SAAiB,EACjB,UAAkB,EAClB,QAAQ,EACR,WAAmB,EACnB,QAAQ,EACR,QAAQ,GACX,EAAE,mBAAmB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,mBAAmB,CAAC,CAAC,CAAC,CAAC,qBAmCxJ"}

package/dist/utils/SizedContainer.js

@@ -0,0 +1,60 @@
+'use client';
+import { useResizeDetector } from 'react-resize-detector';
+import React from "react";
+/**
+ * 自动测量尺寸的容器组件
+ *
+ * @example
+ * // 基础用法
+ * <SizedContainer className="h-full w-full">
+ *   {({ width, height, isReady }) => (
+ *     <VirtuosoGrid style={{ width, height }} ... />
+ *   )}
+ * </SizedContainer>
+ *
+ * @example
+ * // 只监听高度，带防抖和占位符
+ * <SizedContainer
+ *   heightOnly
+ *   debounce={100}
+ *   fallback={<Skeleton />}
+ * >
+ *   {({ height }) => <List style={{ height }} />}
+ * </SizedContainer>
+ *
+ * @example
+ * // 自定义元素类型
+ * <SizedContainer as="section" className="h-full">
+ *   {({ width, height }) => <Chart width={width} height={height} />}
+ * </SizedContainer>
+ */
+export function SizedContainer({ children, className, style, as, widthOnly = false, heightOnly = false, debounce, skipOnMount = false, fallback, onResize, }) {
+    const { width, height, ref } = useResizeDetector({
+        handleWidth: !heightOnly,
+        handleHeight: !widthOnly,
+        refreshMode: debounce ? 'debounce' : undefined,
+        refreshRate: debounce,
+        skipOnMount,
+        onResize: onResize
+            ? ({ width: w, height: h }) => {
+                if (w !== null && h !== null) {
+                    onResize({ width: w, height: h });
+                }
+            }
+            : undefined,
+    });
+    const size = {
+        width: width !== null && width !== void 0 ? width : 0,
+        height: height !== null && height !== void 0 ? height : 0,
+    };
+    // 根据监听模式判断是否就绪
+    const isReady = (() => {
+        if (widthOnly)
+            return size.width > 0;
+        if (heightOnly)
+            return size.height > 0;
+        return size.width > 0 && size.height > 0;
+    })();
+    const Component = as || 'div';
+    return (React.createElement(Component, { ref: ref, className: className, style: style }, isReady ? children({ ...size, isReady }) : fallback));
+}

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
-export * from './scroll-to-center';
-export * from './reload';
+export * from './ScrollToCenter';
+export * from './Reload';
+export * from './SizedContainer';
 //# 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":"AAEA,cAAc,oBAAoB,CAAA;AAClC,cAAc,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAEA,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,kBAAkB,CAAA"}

package/dist/utils/index.js

@@ -1,3 +1,4 @@
 'use client';
-export * from './scroll-to-center';
-export * from './reload';
+export * from './ScrollToCenter';
+export * from './Reload';
+export * from './SizedContainer';

package/package.json

@@ -1,13 +1,10 @@
 {
   "name": "xxf_react",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "private": false,
-
   "type": "module",
-
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -50,28 +47,26 @@
       "import": "./dist/foundation/index.js"
     }
   },
-
   "files": ["dist"],
-
   "scripts": {
     "build": "tsc"
   },
-
   "peerDependencies": {
     "react": ">=18"
   },
-
   "dependencies": {
     "@microsoft/fetch-event-source": "^2.0.1",
+    "@use-gesture/react": "^10.3.1",
+    "dayjs": "^1.11.19",
+    "mitt": "^3.0.1",
     "react-async-hook": "^4.0.0",
+    "react-resize-detector": "^12.3.0",
     "react-responsive": "^10.0.1",
     "react-toastify": "^11.0.5",
+    "react-virtualized-auto-sizer": "^2.0.2",
     "react-virtuoso": "^4.17.0",
-    "use-debounce": "^10.0.6",
-    "mitt": "^3.0.1",
-    "@use-gesture/react": "^10.3.1",
+    "tailwind-variants": "^3.2.2",
     "tiny-lru": "^11.4.7",
-    "dayjs": "^1.11.19",
-    "tailwind-variants": "^3.2.2"
+    "use-debounce": "^10.0.6"
   }
 }

package/dist/utils/TestUtils.d.ts

@@ -1,2 +0,0 @@
-export declare function test(): void;
-//# sourceMappingURL=TestUtils.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"TestUtils.d.ts","sourceRoot":"","sources":["../../src/utils/TestUtils.ts"],"names":[],"mappings":"AAAA,wBAAgB,IAAI,SAEnB"}

package/dist/utils/TestUtils.js

@@ -1,3 +0,0 @@
-export function test() {
-    console.log("==============>test success");
-}

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

@@ -1 +0,0 @@
-{"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/tailwind.d.ts

@@ -1,14 +0,0 @@
-import { type ClassValue } from 'clsx';
-/**
- * // ❌ 直接用 twMerge 很麻烦
- * twMerge(`base ${isActive ? 'bg-blue-500' : ''} ${isDisabled ? 'opacity-50' : ''}`)
- *
- * // ✅ 用 cn 更简洁
- * cn('base', isActive && 'bg-blue-500', isDisabled && 'opacity-50')
- * cn('base', { 'bg-blue-500': isActive, 'opacity-50': isDisabled })
- *
- * 合并css样式
- * @param inputs
- */
-export declare function cn(...inputs: ClassValue[]): string;
-//# sourceMappingURL=tailwind.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"tailwind.d.ts","sourceRoot":"","sources":["../../src/utils/tailwind.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,UAAU,EAAC,MAAM,MAAM,CAAA;AAI1C;;;;;;;;;;GAUG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/utils/tailwind.js

@@ -1,16 +0,0 @@
-import { clsx } from 'clsx';
-import { twMerge } from "tailwind-merge";
-/**
- * // ❌ 直接用 twMerge 很麻烦
- * twMerge(`base ${isActive ? 'bg-blue-500' : ''} ${isDisabled ? 'opacity-50' : ''}`)
- *
- * // ✅ 用 cn 更简洁
- * cn('base', isActive && 'bg-blue-500', isDisabled && 'opacity-50')
- * cn('base', { 'bg-blue-500': isActive, 'opacity-50': isDisabled })
- *
- * 合并css样式
- * @param inputs
- */
-export function cn(...inputs) {
-    return twMerge(clsx(inputs));
-}