@hhgtech/hhg-components/build/useScreenSize-30f50b76.js

Hello Health Group common components

'use strict';

var tslib_es6 = require('./tslib.es6-92cccef3.js');
var React = require('react');
var styled = require('@emotion/styled');
var utils = require('./utils-7ba0038a.js');

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

var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);

const ImageWrap = (_a) => {
    var { alt, backupSrc, src, placeholderSrc, style, ref } = _a, props = tslib_es6.__rest(_a, ["alt", "backupSrc", "src", "placeholderSrc", "style", "ref"]);
    const [hasError, setHasError] = React.useState(false);
    return (React__default["default"].createElement(StyledImage, Object.assign({ loading: "lazy", alt: alt, onError: () => !hasError && setHasError(true), src: hasError ? backupSrc || src : src || backupSrc, style: Object.assign(Object.assign({}, (placeholderSrc
            ? {
                backgroundImage: `url(${placeholderSrc})`,
            }
            : {})), style), "data-has-placeholder": !!placeholderSrc, ref: ref }, props)));
};
const StyledImage = styled__default["default"].img `
  &[data-has-placeholder='true'] {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
`;

const getIsMobile = () => {
    return (typeof window !== 'undefined' &&
        window.innerWidth < utils.Breakpoints.BREAK_POINT_MOBILE);
};
const getIsLargeMobile = () => {
    return (typeof window !== 'undefined' &&
        window.innerWidth >= utils.Breakpoints.BREAK_POINT_MOBILE &&
        window.innerWidth < utils.Breakpoints.BREAK_POINT_PC);
};
const useScreenSize = () => {
    const [isMobile, setIsMobile] = React.useState(getIsMobile());
    const [isLargeMobile, setIsLargeMobile] = React.useState(getIsLargeMobile());
    React.useEffect(() => {
        const handleResize = () => {
            setIsMobile(getIsMobile());
            setIsLargeMobile(getIsLargeMobile());
        };
        window.addEventListener('resize', handleResize, {
            passive: true,
        });
        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, []);
    return { isMobile, isLargeMobile };
};

exports.ImageWrap = ImageWrap;
exports.useScreenSize = useScreenSize;