@hhgtech/hhg-components
Version:
Hello Health Group common components
51 lines (47 loc) • 2.04 kB
JavaScript
import React__default, { useState, useEffect } from 'react';
import { B as Breakpoints } from './utils-538169b3.js';
import { _ as __rest } from './tslib.es6-00ab44b2.js';
import styled from '@emotion/styled';
const getIsMobile = () => {
return (typeof window !== 'undefined' &&
window.innerWidth < Breakpoints.BREAK_POINT_MOBILE);
};
const getIsLargeMobile = () => {
return (typeof window !== 'undefined' &&
window.innerWidth >= Breakpoints.BREAK_POINT_MOBILE &&
window.innerWidth < Breakpoints.BREAK_POINT_PC);
};
const useScreenSize = () => {
const [isMobile, setIsMobile] = useState(getIsMobile());
const [isLargeMobile, setIsLargeMobile] = useState(getIsLargeMobile());
useEffect(() => {
const handleResize = () => {
setIsMobile(getIsMobile());
setIsLargeMobile(getIsLargeMobile());
};
window.addEventListener('resize', handleResize, {
passive: true,
});
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);
return { isMobile, isLargeMobile };
};
const ImageWrap = (_a) => {
var { alt, backupSrc, src, placeholderSrc, style, ref } = _a, props = __rest(_a, ["alt", "backupSrc", "src", "placeholderSrc", "style", "ref"]);
const [hasError, setHasError] = useState(false);
return (React__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.img `
&[data-has-placeholder='true'] {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
`;
export { ImageWrap as I, useScreenSize as u };