43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
|
/**
|
|||
|
|
* 响应式值选择器 Hook
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
import { useMemo } from 'react';
|
|||
|
|
import { useBreakpoint } from './useBreakpoint';
|
|||
|
|
import { ResponsiveValue, FineBreakpointKey, REVERSE_BREAKPOINT_ORDER } from './constants';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 根据当前断点从响应式值对象中选择合适的值
|
|||
|
|
*
|
|||
|
|
* @param value - 响应式值，可以是单一值或断点映射对象
|
|||
|
|
* @returns 选中的值
|
|||
|
|
*
|
|||
|
|
* @example
|
|||
|
|
* const padding = useResponsiveValue({ xs: 8, md: 16, lg: 24 });
|
|||
|
|
* // 在 xs 屏幕返回 8，md 屏幕返回 16，lg 及以上返回 24
|
|||
|
|
*/
|
|||
|
|
export function useResponsiveValue<T>(value: ResponsiveValue<T>): T {
|
|||
|
|
const { fineBreakpoint } = useBreakpoint();
|
|||
|
|
|
|||
|
|
return useMemo(() => {
|
|||
|
|
// 如果不是对象，直接返回
|
|||
|
|
if (typeof value !== 'object' || value === null || Array.isArray(value)) {
|
|||
|
|
return value as T;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const valueMap = value as Partial<Record<FineBreakpointKey, T>>;
|
|||
|
|
|
|||
|
|
// 从当前断点开始向下查找
|
|||
|
|
const currentIndex = REVERSE_BREAKPOINT_ORDER.indexOf(fineBreakpoint);
|
|||
|
|
for (let i = currentIndex; i < REVERSE_BREAKPOINT_ORDER.length; i++) {
|
|||
|
|
const bp = REVERSE_BREAKPOINT_ORDER[i];
|
|||
|
|
if (bp in valueMap) {
|
|||
|
|
return valueMap[bp]!;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果没找到，返回 xs 的值或第一个值
|
|||
|
|
return (valueMap.xs ?? Object.values(valueMap)[0]) as T;
|
|||
|
|
}, [value, fineBreakpoint]);
|
|||
|
|
}
|