@patreon/studio/module/hooks/useCurrentResponsiveValue/index.js

Patreon Studio Design System

import { breakpointNames } from '../../utilities/breakpoint-definitions';
import { unwrapResponsive } from '../../utilities/opaque-responsive';
import { useCurrentBreakpoint, isBreakpointAvailable } from '../useCurrentBreakpoint';
/**
 * This helper returns true if the current responsive value result is available
 */
export function isResponsiveValueAvailable(result) {
    return result.state === 'available';
}
/**
 * This hook returns the current responsive value for a OpaqueResponsive
 * object when it is available.
 *
 * It will return a tagged object with a state of "inital" until the
 * value is hydrated on the client. Once the value is hydrated, the
 * hook will return the current responsive value with a state of "available".
 *
 * @warning `useCurrentReponsiveValue` is for working with OpaqueResponsive objects,
 * try `useCurrentBreakpoint` if you are simply after the current screen size.
 */
export function useCurrentResponsiveValue(values) {
    const currentBreakpoint = useCurrentBreakpoint();
    if (isBreakpointAvailable(currentBreakpoint)) {
        const unwrappedValues = unwrapResponsive(values);
        let latestValue;
        for (const breakpointName of breakpointNames) {
            latestValue = unwrappedValues[breakpointName] ?? latestValue;
            if (currentBreakpoint.value === breakpointName && latestValue !== undefined) {
                return { state: 'available', value: latestValue };
            }
        }
    }
    return { state: 'pending' };
}
//# sourceMappingURL=index.js.map