UNPKG

@hhgtech/hhg-components

Version:
51 lines (47 loc) 2.04 kB
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 };