@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
41 lines • 1.76 kB
JavaScript
import React, { useCallback, useState } from 'react';
import { StyledGridBottomRightImage, StyledGridImage, StyledGridLeftImage, StyledGridTopRightImage } from './GridImage.styles';
const GridImage = _ref => {
let {
background,
images,
shouldShowRoundImage,
size,
onClick
} = _ref;
const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);
const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);
const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);
const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);
const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);
const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);
const isGridImageHidden = !hasLoadedLeftImage || !hasLoadedTopRightImage || !hasLoadedBottomRightImage;
return /*#__PURE__*/React.createElement(StyledGridImage, {
$background: background,
$shouldShowRoundImage: shouldShowRoundImage,
$size: size,
onClick: typeof onClick === 'function' ? onClick : undefined
}, /*#__PURE__*/React.createElement(StyledGridLeftImage, {
$isHidden: isGridImageHidden,
onLoad: handleLeftImageLoaded,
$size: size,
src: images[0]
}), /*#__PURE__*/React.createElement(StyledGridTopRightImage, {
$isHidden: isGridImageHidden,
onLoad: handleTopRightImageLoaded,
$size: size,
src: images[1]
}), /*#__PURE__*/React.createElement(StyledGridBottomRightImage, {
$isHidden: isGridImageHidden,
onLoad: handleBottomRightImageLoaded,
src: images[2]
}));
};
GridImage.displayName = 'GridImage';
export default GridImage;
//# sourceMappingURL=GridImage.js.map