@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
61 lines • 2.79 kB
JavaScript
import React, { useCallback, useState } from 'react';
import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
import { StyledGridBottomRightImage, StyledGridImage, StyledGridLeftImage, StyledGridTopRightImage } from './GridImage.styles';
const GridImage = ({
background,
images,
shouldShowRoundImage,
size,
onClick,
shouldEnableKeyboardHighlighting
}) => {
const colorScheme = useColorScheme();
const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;
const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);
const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);
const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);
const isClickable = typeof onClick === 'function';
const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlightingEffective;
const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(isKeyboardFocusable);
const handleKeyDown = useCallback(event => {
if (!isClickable) {
return;
}
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
onClick?.(event);
}
}, [isClickable, onClick]);
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,
$shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
$size: size,
onClick: isClickable ? onClick : undefined,
onKeyDown: isKeyboardFocusable ? handleKeyDown : undefined,
tabIndex: isKeyboardFocusable ? 0 : -1,
role: isClickable ? 'button' : 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