refactor(MediaConsumer): update API to use eq function for media queries and add debounce support

Author: imagine10255

example/src/components/responsive/Media.stories.tsx

@@ -0,0 +1,69 @@
+import {GridThemeProvider, MediaConsumer} from '@acrool/react-grid';
+import type {Meta, StoryObj} from '@storybook/react';
+import React from 'react';
+
+const meta = {
+    title: 'Responsive/MediaConsumer',
+    parameters: {
+        docs: {
+            description: {
+                component: 'Media Query 觀察者模式，提供特定尺寸JS狀態更新 size'
+            },
+        },
+    },
+    tags: ['autodocs'],
+    decorators:  (Story) => (
+        <GridThemeProvider>
+            <Story />
+        </GridThemeProvider>
+    ),
+    args: {},
+} satisfies Meta<typeof MediaConsumer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+
+
+export const Media: Story = {
+    args: {},
+    render: function Render(args) {
+        return <MediaConsumer>
+            {eq => {
+                if(eq('xxl')){
+                    return <div className="bg-color-8 font-color-1">
+                        XXL
+                    </div>;
+                }
+                if(eq('xl')){
+                    return <div className="bg-color-7  font-color-1">
+                        XL
+                    </div>;
+                }
+                if(eq('lg')){
+                    return <div className="bg-color-6 font-color-1">
+                        LG
+                    </div>;
+                }
+                if(eq('md')){
+                    return <div className="bg-color-5">
+                        MD
+                    </div>;
+                }
+
+                if(eq('sm')){
+                    return <div className="bg-color-4">
+                        SM
+                    </div>;
+                }
+
+
+
+
+                return <div className="bg-color-2">
+                    XS
+                </div>;
+            }}
+        </MediaConsumer>;
+    },
+};

example/src/components/responsive/MediaConsumer.stories.tsx

@@ -1,12 +1,12 @@
 import {JSX} from 'react';
 
-import {NoXsMediaSize, TMediaSize} from '../types';
+import {NoXsMediaSize} from '../types';
 import useMedia from './useMedia';
 
 
 interface IProps {
-    children: (mediaSize: TMediaSize) => JSX.Element|null
-    sizes?: NoXsMediaSize[]
+    children: (eq: (size: NoXsMediaSize) => boolean) => JSX.Element|null
+    debounceDelay?: number
 }
 
 /**
@@ -16,14 +16,11 @@ interface IProps {
  */
 export const MediaConsumer = ({
     children,
-    sizes
+    debounceDelay,
 }: IProps) => {
-    const currentSize = useMedia(sizes);
+    const {eq} = useMedia(debounceDelay);
 
-    if(!currentSize){
-        return null;
-    }
-    return children(currentSize);
+    return children(eq);
 };
 
 export default MediaConsumer;

src/MediaConsumer/MediaConsumer.tsx

@@ -1,52 +1,82 @@
-import {useEffect, useState} from 'react';
+import {useCallback, useEffect, useRef,useState} from 'react';
 import {useTheme} from 'styled-components';
 
 import {themeName} from '../config';
-import {NoXsMediaSize, TMediaSize} from '../types';
+import {TMediaSize} from '../types';
 
 /**
- * 取得目前尺寸
- * @param sizes 要監聽的尺寸陣列，如果未提供則監聽所有尺寸
+ * 防抖 hook
+ * @param callback 要執行的回調函數
+ * @param delay 延遲時間（毫秒）
  */
-const useMedia = (sizes?: NoXsMediaSize[]) => {
+const useDebounce = (callback: () => void, delay: number) => {
+    const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    return useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(callback, delay);
+    }, [callback, delay]);
+};
+
+/**
+ * 媒體查詢 hook
+ * @param debounceDelay 防抖延遲時間（毫秒），預設為 150ms
+ * @returns 包含 isIn(size) 方法的物件
+ */
+const useMedia = (debounceDelay: number = 150) => {
     const theme = useTheme();
     const breakpoints = theme[themeName]?.gridBreakpoints;
+    const [windowWidth, setWindowWidth] = useState<number>(window.innerWidth ?? 0);
 
-    const getResize = () => {
-        if(typeof window === 'undefined'){
-            return null;
-        }
-        const width = window.innerWidth;
-        let size: TMediaSize = 'xs';
-
-        if ((!sizes || sizes?.includes('xxl')) && width >= breakpoints.xxl) {
-            size = 'xxl';
-        } else if ((!sizes || sizes?.includes('xl')) && width >= breakpoints.xl) {
-            size = 'xl';
-        } else if ((!sizes || sizes?.includes('lg')) && width >= breakpoints.lg) {
-            size = 'lg';
-        } else if ((!sizes || sizes?.includes('md')) && width >= breakpoints.md) {
-            size = 'md';
-        } else if ((!sizes || sizes?.includes('sm')) && width >= breakpoints.sm) {
-            size = 'sm';
-        }
+    // 初始化窗口寬度
+    useEffect(() => {
+        handleResize();
+    }, []);
 
-        return size;
-    };
+    const handleResize = useCallback(() => {
+        if (typeof window !== 'undefined') {
+            setWindowWidth(window.innerWidth);
+        }
+    }, []);
 
-    const [currentSize, setCurrentSize] = useState<TMediaSize|null>(getResize());
+    const debouncedHandleResize = useDebounce(handleResize, debounceDelay);
 
     useEffect(() => {
-        const handleResize = () => {
-            const size = getResize();
-            setCurrentSize(size);
-        };
+        if (typeof window === 'undefined') return;
+
+        window.addEventListener('resize', debouncedHandleResize);
+        return () => window.removeEventListener('resize', debouncedHandleResize);
+    }, [debouncedHandleResize]);
 
-        window.addEventListener('resize', handleResize);
-        return () => window.removeEventListener('resize', handleResize);
-    }, [breakpoints, sizes]);
+    /**
+     * 檢查當前尺寸是否在指定斷點範圍內
+     * @param size 要檢查的斷點尺寸
+     * @returns 如果當前尺寸符合斷點範圍則回傳 true
+     */
+    const eq = useCallback((size: TMediaSize): boolean => {
+        if (!breakpoints || windowWidth === 0) return false;
+
+        const width = windowWidth;
+
+        switch (size) {
+        case 'sm':
+            return width >= breakpoints.sm;
+        case 'md':
+            return width >= breakpoints.md;
+        case 'lg':
+            return width >= breakpoints.lg;
+        case 'xl':
+            return width >= breakpoints.xl;
+        case 'xxl':
+            return width >= breakpoints.xxl;
+        default:
+            return true;
+        }
+    }, [breakpoints, windowWidth]);
 
-    return currentSize;
+    return {eq};
 };
 
 export default useMedia;