@razorpay/blade/build/lib/native/utils/useBreakpoint/useBreakpoint.js

The Design System that powers Razorpay

import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { useMemo, useCallback, useState } from 'react';
import { getPlatformType } from '../getPlatformType/getPlatformType.js';
import { getMediaQuery } from '../getMediaQuery/getMediaQuery.js';
import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect.js';

var deviceType={desktop:'desktop',mobile:'mobile'};var useBreakpoint=function useBreakpoint(_ref){var _window;var breakpoints=_ref.breakpoints;var supportsMatchMedia=typeof document!=='undefined'&&typeof window!=='undefined'&&typeof((_window=window)==null?void 0:_window.matchMedia)==='function';var breakpointsTokenAndQueryCollection=useMemo(function(){return supportsMatchMedia?Object.entries(breakpoints).map(function(_ref2,index,breakpointsArray){var _breakpointsArray;var _ref3=_slicedToArray(_ref2,2),token=_ref3[0],screenSize=_ref3[1];var min=screenSize;var maxValue=(_breakpointsArray=breakpointsArray[index+1])==null?void 0:_breakpointsArray[1];var mediaQuery=getMediaQuery({min:min,max:maxValue?maxValue-1:undefined});return {token:token,screenSize:screenSize,mediaQuery:mediaQuery};}):[];},[breakpoints,supportsMatchMedia]);var getMatchedDeviceType=useCallback(function(matchedBreakpoint){var matchedDeviceType=deviceType.mobile;var platform=getPlatformType();if(platform==='react-native'){matchedDeviceType=deviceType.mobile;}else if(platform==='browser'){if(matchedBreakpoint&&['base','xs','s'].includes(matchedBreakpoint)){matchedDeviceType=deviceType.mobile;}else {matchedDeviceType=deviceType.desktop;}}else if(platform==='node'){matchedDeviceType=deviceType.desktop;}return matchedDeviceType;},[]);var getMatchedBreakpoint=useCallback(function(event){var _breakpointsTokenAndQ,_breakpointsTokenAndQ2;var matchedBreakpoint=(_breakpointsTokenAndQ=(_breakpointsTokenAndQ2=breakpointsTokenAndQueryCollection.find(function(_ref4){var _ref4$mediaQuery=_ref4.mediaQuery,mediaQuery=_ref4$mediaQuery===void 0?'':_ref4$mediaQuery;if((event==null?void 0:event.media)===mediaQuery){return true;}if(window.matchMedia(mediaQuery).matches){return true;}return false;}))==null?void 0:_breakpointsTokenAndQ2.token)!=null?_breakpointsTokenAndQ:undefined;return matchedBreakpoint;},[breakpointsTokenAndQueryCollection]);var _useState=useState({matchedBreakpoint:undefined,matchedDeviceType:deviceType.desktop}),_useState2=_slicedToArray(_useState,2),breakpointAndDevice=_useState2[0],setBreakpointAndDevice=_useState2[1];useIsomorphicLayoutEffect(function(){setBreakpointAndDevice(function(){var matchedBreakpoint=getMatchedBreakpoint();var matchedDeviceType=getMatchedDeviceType(matchedBreakpoint);return {matchedBreakpoint:matchedBreakpoint,matchedDeviceType:matchedDeviceType};});if(!supportsMatchMedia){return undefined;}var handleMediaQueryChange=function handleMediaQueryChange(event){setBreakpointAndDevice(function(){var matchedBreakpoint=getMatchedBreakpoint(event);var matchedDeviceType=getMatchedDeviceType(matchedBreakpoint);return {matchedBreakpoint:matchedBreakpoint,matchedDeviceType:matchedDeviceType};});};var mediaQueryInstances=breakpointsTokenAndQueryCollection.map(function(_ref5){var _ref5$mediaQuery=_ref5.mediaQuery,mediaQuery=_ref5$mediaQuery===void 0?'':_ref5$mediaQuery;var mediaQueryInstance=window.matchMedia(mediaQuery);if(mediaQueryInstance.addEventListener){mediaQueryInstance.addEventListener('change',handleMediaQueryChange);}else {mediaQueryInstance.addListener(handleMediaQueryChange);}return mediaQueryInstance;});return function(){mediaQueryInstances.forEach(function(mediaQueryInstance){if(mediaQueryInstance.removeEventListener){mediaQueryInstance.removeEventListener('change',handleMediaQueryChange);}else {mediaQueryInstance.removeListener(handleMediaQueryChange);}});};},[breakpointsTokenAndQueryCollection,getMatchedBreakpoint,getMatchedDeviceType,supportsMatchMedia]);return breakpointAndDevice;};

export { useBreakpoint };
//# sourceMappingURL=useBreakpoint.js.map