@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
45 lines • 1.62 kB
JavaScript
import React, { useMemo } from 'react';
import { ImageSize, StyledCornerImage, StyledGroupedImage, StyledGroupImageElement } from './GroupedImage.styles';
const GroupedImage = _ref => {
let {
cornerImage,
height = '40px',
imageBackground,
images,
onClick,
shouldPreventBackground = false,
shouldShowRoundImage = false
} = _ref;
const hasCornerImage = Boolean(cornerImage);
const hasMultipleImages = images.length > 1;
const imageSize = useMemo(() => {
if (hasCornerImage) {
return hasMultipleImages ? ImageSize.GroupedSmall : ImageSize.Small;
}
return hasMultipleImages ? ImageSize.Grouped : ImageSize.Full;
}, [hasCornerImage, hasMultipleImages]);
const imageElements = images.slice(0, 2) // Limit to 2 images for grouping
.map((src, index) => /*#__PURE__*/React.createElement(StyledGroupImageElement, {
$background: imageBackground,
$imageSize: imageSize,
$isSecondImage: index === 1,
$shouldPreventBackground: shouldPreventBackground,
$shouldShowRoundImage: shouldShowRoundImage
// eslint-disable-next-line react/no-array-index-key
,
key: index,
src: src
}));
return /*#__PURE__*/React.createElement(StyledGroupedImage, {
onClick: onClick,
$height: height
}, imageElements, hasCornerImage && /*#__PURE__*/React.createElement(StyledCornerImage, {
$background: imageBackground,
$shouldPreventBackground: shouldPreventBackground,
src: cornerImage,
key: "corner-image"
}));
};
GroupedImage.displayName = 'GroupedImage';
export default GroupedImage;
//# sourceMappingURL=GroupedImage.js.map