49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
|
/**
|
||
|
|
* 响应式间距 Hook
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { useMemo } from 'react';
|
||
|
|
import { useBreakpoint } from './useBreakpoint';
|
||
|
|
import { FineBreakpointKey } from './constants';
|
||
|
|
|
||
|
|
const DEFAULT_SPACING_CONFIG: Record<FineBreakpointKey, number> = {
|
||
|
|
xs: 8,
|
||
|
|
sm: 8,
|
||
|
|
md: 12,
|
||
|
|
lg: 16,
|
||
|
|
xl: 20,
|
||
|
|
'2xl': 24,
|
||
|
|
'3xl': 32,
|
||
|
|
'4xl': 40,
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 响应式间距 Hook
|
||
|
|
*
|
||
|
|
* @param spacingConfig - 间距配置
|
||
|
|
* @returns 当前断点对应的间距值
|
||
|
|
*
|
||
|
|
* @example
|
||
|
|
* const gap = useResponsiveSpacing({ xs: 8, md: 16, lg: 24 });
|
||
|
|
*/
|
||
|
|
export function useResponsiveSpacing(
|
||
|
|
spacingConfig: Partial<Record<FineBreakpointKey, number>> = {}
|
||
|
|
): number {
|
||
|
|
const { fineBreakpoint } = useBreakpoint();
|
||
|
|
|
||
|
|
return useMemo(() => {
|
||
|
|
const config = { ...DEFAULT_SPACING_CONFIG, ...spacingConfig };
|
||
|
|
const breakpointOrder: FineBreakpointKey[] = ['4xl', '3xl', '2xl', 'xl', 'lg', 'md', 'sm', 'xs'];
|
||
|
|
const currentIndex = breakpointOrder.indexOf(fineBreakpoint);
|
||
|
|
|
||
|
|
for (let i = currentIndex; i < breakpointOrder.length; i++) {
|
||
|
|
const bp = breakpointOrder[i];
|
||
|
|
if (config[bp] !== undefined) {
|
||
|
|
return config[bp];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return DEFAULT_SPACING_CONFIG.xs;
|
||
|
|
}, [fineBreakpoint, spacingConfig]);
|
||
|
|
}
|