clxx 2.1.2 → 2.1.4

package/build/Dialog/style.js

@@ -1,103 +1,103 @@
 import { css, keyframes } from "@emotion/react";
-const maskShow = keyframes `
-	from {
-		opacity: 0;
-	}
-	to {
-		opacity: 1;
-	}
+const maskShow = keyframes `
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
 `;
-export const maskHide = keyframes `
-	from {
-		opacity: 1;
-	}
-	to {
-		opacity: 0;
-	}
+export const maskHide = keyframes `
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
 `;
-const pullUpShow = keyframes `
-	from {
-		transform: translateY(100%);
-	}
-	to {
-		transform: translateY(0);
-	}
+const pullUpShow = keyframes `
+	from {
+		transform: translateY(100%);
+	}
+	to {
+		transform: translateY(0);
+	}
 `;
-const pullUpHide = keyframes `
-	from {
-		transform: translateY(0);
-	}
-	to {
-		transform: translateY(100%);
-	}
+const pullUpHide = keyframes `
+	from {
+		transform: translateY(0);
+	}
+	to {
+		transform: translateY(100%);
+	}
 `;
-const pullDownShow = keyframes `
-	from {
-		transform: translateY(-100%);
-	}
-	to {
-		transform: translateY(0);
-	}
+const pullDownShow = keyframes `
+	from {
+		transform: translateY(-100%);
+	}
+	to {
+		transform: translateY(0);
+	}
 `;
-const pullDownHide = keyframes `
-	from {
-		transform: translateY(0);
-	}
-	to {
-		transform: translateY(-100%);
-	}
+const pullDownHide = keyframes `
+	from {
+		transform: translateY(0);
+	}
+	to {
+		transform: translateY(-100%);
+	}
 `;
-const pullLeftShow = keyframes `
-	from {
-		transform: translateX(100%);
-	}
-	to {
-		transform: translateX(0);
-	}
+const pullLeftShow = keyframes `
+	from {
+		transform: translateX(100%);
+	}
+	to {
+		transform: translateX(0);
+	}
 `;
-const pullLeftHide = keyframes `
-	from {
-		transform: translateX(0);
-	}
-	to {
-		transform: translateX(100%);
-	}
+const pullLeftHide = keyframes `
+	from {
+		transform: translateX(0);
+	}
+	to {
+		transform: translateX(100%);
+	}
 `;
-const pullRightShow = keyframes `
-	from {
-		transform: translateX(-100%);
-	}
-	to {
-		transform: translateX(0);
-	}
+const pullRightShow = keyframes `
+	from {
+		transform: translateX(-100%);
+	}
+	to {
+		transform: translateX(0);
+	}
 `;
-const pullRightHide = keyframes `
-	from {
-		transform: translateX(0);
-	}
-	to {
-		transform: translateX(-100%);
-	}
+const pullRightHide = keyframes `
+	from {
+		transform: translateX(0);
+	}
+	to {
+		transform: translateX(-100%);
+	}
 `;
-const centerShow = keyframes `
-	from  {
-		transform: scale(0.8);
-		opacity: 0;
-	}
-	to {
-		transform: scale(1);
-		opacity: 1;
-	}
+const centerShow = keyframes `
+	from  {
+		transform: scale(0.8);
+		opacity: 0;
+	}
+	to {
+		transform: scale(1);
+		opacity: 1;
+	}
 `;
-const centerHide = keyframes `
-	from  {
-		transform: scale(1);
-		opacity: 1;
-	}
-	to {
-		transform: scale(0.8);
-		opacity: 0;
-	}
+const centerHide = keyframes `
+	from  {
+		transform: scale(1);
+		opacity: 1;
+	}
+	to {
+		transform: scale(0.8);
+		opacity: 0;
+	}
 `;
 export function getAnimation(type, status) {
     const animation = {

package/build/Effect/useInterval.d.ts

@@ -1 +1 @@
-export declare function useInterval(callback: Function, delay?: number | null): void;
+export declare function useInterval(callback: () => void, delay?: number | null): void;

package/build/Effect/useInterval.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 export function useInterval(callback, delay) {
-    const savedCallback = useRef(() => { });
+    const savedCallback = useRef(callback);
     savedCallback.current = callback;
     useEffect(() => {
         if (delay !== null) {

package/build/Effect/useUpdate.d.ts

@@ -2,4 +2,4 @@
  * 返回一个函数，调用该函数，组件会刷新一次
  * @returns
  */
-export default function useUpdate(): () => void;
+export declare function useUpdate(): () => void;

package/build/Effect/useUpdate.js

@@ -4,7 +4,7 @@ const updateReducer = (num) => (num + 1) % 1000000;
  * 返回一个函数，调用该函数，组件会刷新一次
  * @returns
  */
-export default function useUpdate() {
+export function useUpdate() {
     const [, update] = useReducer(updateReducer, 0);
     return update;
 }

package/build/Effect/useWindowResize.d.ts

@@ -1,5 +1,7 @@
 /**
- * 窗口尺寸变化时触发
- * @param onResize
+ * 窗口尺寸变化时触发（包括屏幕旋转）
+ * 注意：移动端 resize 事件通常只在旋转屏幕时触发，频率很低，不需要防抖
+ *
+ * @param onResize 窗口尺寸变化时的回调函数
  */
 export declare function useWindowResize(onResize: () => void): void;

package/build/Effect/useWindowResize.js

@@ -1,23 +1,40 @@
 import { useEffect, useRef } from "react";
 /**
- * 窗口尺寸变化时触发
- * @param onResize
+ * 窗口尺寸变化时触发（包括屏幕旋转）
+ * 注意：移动端 resize 事件通常只在旋转屏幕时触发，频率很低，不需要防抖
+ *
+ * @param onResize 窗口尺寸变化时的回调函数
  */
 export function useWindowResize(onResize) {
-    const resizeRef = useRef(onResize);
-    // 每次捕获最新的回调
-    resizeRef.current = onResize;
+    const callbackRef = useRef(onResize);
+    // 每次渲染都更新回调引用，避免闭包陈旧
+    callbackRef.current = onResize;
     useEffect(() => {
-        const callback = () => resizeRef.current();
+        const callback = () => callbackRef.current();
+        // 监听窗口大小变化
         window.addEventListener("resize", callback);
-        if (window.onorientationchange !== undefined) {
-            window.addEventListener("orientationchange", callback);
+        // 监听屏幕方向变化（使用现代 API）
+        const mediaQuery = window.matchMedia("(orientation: portrait)");
+        // 现代浏览器使用 change 事件
+        if (mediaQuery.addEventListener) {
+            mediaQuery.addEventListener("change", callback);
+        }
+        else {
+            // 降级处理：旧浏览器使用 addListener
+            // @ts-ignore
+            mediaQuery.addListener(callback);
         }
         return () => {
             window.removeEventListener("resize", callback);
-            if (window.onorientationchange !== undefined) {
-                window.removeEventListener("orientationchange", callback);
+            // 清理 orientation 监听器
+            if (mediaQuery.removeEventListener) {
+                mediaQuery.removeEventListener("change", callback);
+            }
+            else {
+                // 降级处理
+                // @ts-ignore
+                mediaQuery.removeListener(callback);
             }
         };
-    }, []);
+    }, []); // 空依赖数组，因为使用了 ref
 }

package/build/Flex/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as CSS from 'csstype';
 export interface FlexProps extends React.HTMLProps<HTMLDivElement> {
     children?: React.ReactNode;

package/build/Indicator/index.js

@@ -11,6 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { css } from '@emotion/react';
+import React from 'react';
 import { adaptive, normalizeUnit } from '../utils/cssUtil';
 import { getBarChangeKeyFrames } from './style';
 /**
@@ -20,32 +21,30 @@ import { getBarChangeKeyFrames } from './style';
 export function Indicator(props) {
     const { size, rounded = true, barWidth = 7, barHeight = 28, barColor = '#fff', barCount = 12, duration = 600, containerStyle } = props, attributes = __rest(props, ["size", "rounded", "barWidth", "barHeight", "barColor", "barCount", "duration", "containerStyle"]);
     const radius = rounded ? barWidth / 2 : 0;
-    const barList = [];
-    for (let i = 0; i < barCount; i++) {
-        barList.push(_jsx("rect", { x: (100 - barWidth) / 2, y: "0", rx: radius, ry: radius, width: barWidth, height: barHeight, transform: `rotate(${(360 / barCount) * i}, 50, 50)`, css: {
-                animationDelay: `${-(duration * (barCount - i)) / barCount}ms`,
-            } }, i));
-    }
-    const style = [
+    // 使用 useMemo 缓存 barList，避免每次渲染都重新生成
+    const barList = React.useMemo(() => {
+        const bars = [];
+        for (let i = 0; i < barCount; i++) {
+            bars.push(_jsx("rect", { x: (100 - barWidth) / 2, y: "0", rx: radius, ry: radius, width: barWidth, height: barHeight, transform: `rotate(${(360 / barCount) * i}, 50, 50)`, css: {
+                    animationDelay: `${-(duration * (barCount - i)) / barCount}ms`,
+                } }, i));
+        }
+        return bars;
+    }, [barCount, barWidth, barHeight, radius, duration]);
+    // 使用 useMemo 缓存样式，避免每次都重新计算
+    const style = React.useMemo(() => [
         {
             fontSize: 0,
         },
-    ];
-    if (typeof size !== 'undefined') {
-        const unitSize = normalizeUnit(size);
-        style.push({
-            width: unitSize,
-            height: unitSize,
-        });
-    }
-    else {
-        // 容器尺寸未传时，这里是默认的尺寸
-        style.push(adaptive({
+        typeof size !== 'undefined' ? {
+            width: normalizeUnit(size),
+            height: normalizeUnit(size),
+        } : adaptive({
             width: 60,
             height: 60,
-        }));
-    }
-    const svgStyle = css({
+        })
+    ], [size]);
+    const svgStyle = React.useMemo(() => css({
         width: '100%',
         height: '100%',
         rect: {
@@ -55,6 +54,6 @@ export function Indicator(props) {
             animationTimingFunction: 'linear',
             animationIterationCount: 'infinite',
         },
-    });
-    return (_jsx("div", Object.assign({ css: [style, containerStyle] }, attributes, { children: _jsx("svg", Object.assign({ viewBox: "0 0 100 100", css: svgStyle }, { children: barList })) })));
+    }), [barColor, duration]);
+    return (_jsx("div", Object.assign({ css: [style, containerStyle] }, attributes, { children: _jsx("svg", { viewBox: "0 0 100 100", css: svgStyle, children: barList }) })));
 }

package/build/Indicator/style.d.ts

@@ -2,4 +2,9 @@
  * 获取转圈每一条bar的过渡动画
  * @param color
  */
-export declare function getBarChangeKeyFrames(color: string): import("@emotion/serialize").Keyframes;
+export declare function getBarChangeKeyFrames(color: string): {
+    name: string;
+    styles: string;
+    anim: 1;
+    toString: () => string;
+} & string;

package/build/Indicator/style.js

@@ -4,12 +4,12 @@ import { keyframes } from '@emotion/react';
  * @param color
  */
 export function getBarChangeKeyFrames(color) {
-    return keyframes `
-  from {
-    fill: ${color};
-  }
-  to {
-    fill: transparent;
-  }
+    return keyframes `
+  from {
+    fill: ${color};
+  }
+  to {
+    fill: transparent;
+  }
   `;
 }

package/build/Loading/Wrapper.js

@@ -33,10 +33,10 @@ export function Wrapper(props) {
     };
     let box;
     if (hint && typeof hint === 'string') {
-        box = (_jsxs(RowCenter, Object.assign({ css: [style.boxCommon, style.boxWithExtra, animation, containerStyle], onAnimationEnd: animationEnd }, { children: [_jsx(Indicator, Object.assign({}, indicatorProps)), _jsx("div", Object.assign({ css: style.hint }, { children: hint }))] })));
+        box = (_jsxs(RowCenter, { css: [style.boxCommon, style.boxWithExtra, animation, containerStyle], onAnimationEnd: animationEnd, children: [_jsx(Indicator, Object.assign({}, indicatorProps)), _jsx("div", { css: style.hint, children: hint })] }));
     }
     else {
-        box = (_jsx(RowCenter, Object.assign({ css: [style.boxCommon, style.box, animation, containerStyle], onAnimationEnd: animationEnd }, { children: _jsx(Indicator, Object.assign({}, indicatorProps)) })));
+        box = (_jsx(RowCenter, { css: [style.boxCommon, style.box, animation, containerStyle], onAnimationEnd: animationEnd, children: _jsx(Indicator, Object.assign({}, indicatorProps)) }));
     }
     return _jsx(Overlay, Object.assign({}, overlayProps, { children: box }));
 }

package/build/Loading/style.d.ts

@@ -1,4 +1,14 @@
 import { Interpolation, Theme } from "@emotion/react";
-export declare const LoadingShow: import("@emotion/serialize").Keyframes;
-export declare const LoadingHide: import("@emotion/serialize").Keyframes;
+export declare const LoadingShow: {
+    name: string;
+    styles: string;
+    anim: 1;
+    toString: () => string;
+} & string;
+export declare const LoadingHide: {
+    name: string;
+    styles: string;
+    anim: 1;
+    toString: () => string;
+} & string;
 export declare const style: Record<string, Interpolation<Theme>>;

package/build/Loading/style.js

@@ -1,20 +1,20 @@
 import { keyframes } from "@emotion/react";
 import { adaptive } from "../utils/cssUtil";
-export const LoadingShow = keyframes `
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+export const LoadingShow = keyframes `
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 `;
-export const LoadingHide = keyframes `
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
+export const LoadingHide = keyframes `
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
 `;
 export const style = {
     boxCommon: adaptive({

package/build/Overlay/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 export interface OverlayProps extends React.HTMLProps<HTMLDivElement> {
     children?: React.ReactNode;
     outside?: boolean;

package/build/Overlay/index.js

@@ -10,17 +10,17 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { getContextValue } from '../context';
-import { useWindowResize } from '../Effect/useWindowResize';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { getContextValue } from "../context";
+import { useWindowResize } from "../Effect/useWindowResize";
 /**
  * 覆盖层，可以作为通用遮罩
  * @param props
  * @returns
  */
 export function Overlay(props) {
-    const { children, outside = false, centerContent = true, fullScreen = true, maskColor = 'rgba(0, 0, 0, .6)' } = props, extra = __rest(props, ["children", "outside", "centerContent", "fullScreen", "maskColor"]);
+    const { children, outside = false, centerContent = true, fullScreen = true, maskColor = "rgba(0, 0, 0, .6)" } = props, extra = __rest(props, ["children", "outside", "centerContent", "fullScreen", "maskColor"]);
     const [mount, setMount] = useState(null);
     const [innerWidth, setInnerWidth] = useState(window.innerWidth);
     // 这里是为了修复一个非挂载状态触发resize事件的bug
@@ -32,7 +32,7 @@ export function Overlay(props) {
     }, []);
     useLayoutEffect(() => {
         if (outside) {
-            const div = document.createElement('div');
+            const div = document.createElement("div");
             document.body.appendChild(div);
             setMount(div);
             return () => {
@@ -40,45 +40,49 @@ export function Overlay(props) {
             };
         }
     }, [outside]);
-    // 页面大小变化时，innerWidth也会更新
+    // 页面大小变化时，innerWidth 也会更新
     useWindowResize(() => {
         if (!isUnmount.current) {
             setInnerWidth(window.innerWidth);
         }
     });
     const ctx = getContextValue();
-    const style = [];
-    // 如果是全屏，设置全屏样式
-    if (fullScreen) {
-        // 获取宽度
-        let width = innerWidth;
-        if (width >= ctx.maxDocWidth) {
-            width = ctx.maxDocWidth;
+    // 使用 useMemo 缓存样式计算，避免每次渲染都重新计算
+    const style = useMemo(() => {
+        const styles = [];
+        // 如果是全屏，设置全屏样式
+        if (fullScreen) {
+            // 获取宽度
+            let width = innerWidth;
+            if (width >= ctx.maxDocWidth) {
+                width = ctx.maxDocWidth;
+            }
+            else if (width <= ctx.minDocWidth) {
+                width = ctx.minDocWidth;
+            }
+            styles.push({
+                zIndex: 9999,
+                position: "fixed",
+                top: 0,
+                left: "50%",
+                marginLeft: `-${width / 2}px`,
+                width: `${width}px`,
+                height: "100%",
+                maxWidth: `${ctx.maxDocWidth}px`,
+                minWidth: `${ctx.minDocWidth}px`,
+                backgroundColor: maskColor,
+            });
         }
-        else if (width <= ctx.minDocWidth) {
-            width = ctx.minDocWidth;
+        // 如果内容居中，设置内容居中样式
+        if (centerContent) {
+            styles.push({
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+            });
         }
-        style.push({
-            zIndex: 9999,
-            position: 'fixed',
-            top: 0,
-            left: '50%',
-            marginLeft: `-${width / 2}px`,
-            width: `${width}px`,
-            height: '100%',
-            maxWidth: `${ctx.maxDocWidth}px`,
-            minWidth: `${ctx.minDocWidth}px`,
-            backgroundColor: maskColor,
-        });
-    }
-    // 如果内容居中，设置内容居中有样式
-    if (centerContent) {
-        style.push({
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-        });
-    }
+        return styles;
+    }, [fullScreen, innerWidth, ctx.maxDocWidth, ctx.minDocWidth, maskColor, centerContent]);
     const content = (_jsx("div", Object.assign({ css: style }, extra, { children: children })));
     /**
      * 如果是挂载到当前位置，直接返回

package/build/SafeArea/index.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 export interface SafeAreaProps extends React.HTMLProps<HTMLDivElement> {
     children?: React.ReactNode;
-    type: 'top' | 'bottom';
+    type?: "top" | "bottom";
 }
 export declare function SafeArea(props: SafeAreaProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/build/SafeArea/index.js

@@ -10,12 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { useViewport } from '../Effect/useViewport';
+import { useViewport } from "../Effect/useViewport";
 export function SafeArea(props) {
-    const { children, type = 'bottom' } = props, extra = __rest(props, ["children", "type"]);
-    useViewport({ viewportFit: 'cover' });
-    let boxCss;
-    if (type === 'top') {
+    const { children, type = "bottom" } = props, extra = __rest(props, ["children", "type"]);
+    useViewport({ viewportFit: "cover" });
+    let boxCss = {};
+    if (type === "top") {
         boxCss = {
             height: [
                 `constant(safe-area-inset-top, 0)`,
@@ -23,7 +23,7 @@ export function SafeArea(props) {
             ],
         };
     }
-    else if (type === 'bottom') {
+    else if (type === "bottom") {
         boxCss = {
             height: [
                 `constant(safe-area-inset-bottom, 0)`,

package/build/ScrollView/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /** @jsx jsx */
 import { SerializedStyles } from "@emotion/react";
 import * as CSS from "csstype";
@@ -20,6 +19,7 @@ export interface ScrollViewProps extends Omit<React.HTMLProps<HTMLDivElement>, "
     showLoading?: boolean;
     loadingContent?: React.ReactNode;
     onScroll?: (event: ScrollEvent) => void;
+    scrollThrottle?: number;
     containerStyle?: SerializedStyles;
     wrapperStyle?: SerializedStyles;
     loadingStyle?: SerializedStyles;