@hhgtech/hhg-components/build/miscScreenSizeContext.js

Hello Health Group common components

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var throttle = require('lodash/throttle');
var utils = require('./utils-7ba0038a.js');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var throttle__default = /*#__PURE__*/_interopDefault(throttle);

const ScreenSizeContext = React.createContext({
    isInit: true,
});
const getWidthValue = (manualWidth) => typeof manualWidth === 'number'
    ? manualWidth
    : (typeof window !== 'undefined' && window.innerWidth) || 0;
// get from width passed in, else get from window.innerWidth
const getWindowSizeGroups = (manualWidth) => {
    const width = getWidthValue(manualWidth);
    return {
        smallMobile: width < utils.Breakpoints.BREAK_POINT_SMALL_MOBILE,
        mobile: width >= utils.Breakpoints.BREAK_POINT_SMALL_MOBILE &&
            width < utils.Breakpoints.BREAK_POINT_MOBILE,
        tablet: width >= utils.Breakpoints.BREAK_POINT_MOBILE &&
            width < utils.Breakpoints.BREAK_POINT_TABLET,
        pc: width >= utils.Breakpoints.BREAK_POINT_TABLET &&
            width < utils.Breakpoints.BREAK_POINT_PC,
        xl: width >= utils.Breakpoints.BREAK_POINT_PC,
    };
};
const ScreenSizeContextProvider = ({ children, }) => {
    const [screenSize, setScreenSize] = React.useState(() => ({
        isInit: true,
    }));
    React.useEffect(() => {
        const handleResize = throttle__default["default"](() => {
            setScreenSize({
                width: window.innerWidth,
                height: window.innerHeight,
                isInit: false,
            });
        }, 200);
        window.addEventListener('resize', handleResize, { passive: true });
        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, []);
    const sizeGroups = React.useMemo(() => getWindowSizeGroups(screenSize.width), [screenSize.width]);
    return (React__default["default"].createElement(ScreenSizeContext.Provider, { value: Object.assign(Object.assign({}, screenSize), { sizeGroups }) }, children));
};

exports.ScreenSizeContext = ScreenSizeContext;
exports.ScreenSizeContextProvider = ScreenSizeContextProvider;
exports.getWindowSizeGroups = getWindowSizeGroups;