@razorpay/blade
Version:
The Design System that powers Razorpay
143 lines (140 loc) • 6.99 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import 'react';
import styled from 'styled-components';
import { chatMessageToken } from './token.js';
import '../Box/BaseBox/index.js';
import '../Typography/index.js';
import '../../utils/index.js';
import '../../utils/metaAttribute/index.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { makeSize } from '../../utils/makeSize/makeSize.js';
import { Text } from '../Typography/Text/Text.js';
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var imagePreviewToken = chatMessageToken.imagePreview;
var resolveThumbnailItem = function resolveThumbnailItem(thumbnail, originalIndex) {
var _thumbnail$id, _thumbnail$alt;
return {
id: (_thumbnail$id = thumbnail.id) !== null && _thumbnail$id !== void 0 ? _thumbnail$id : "thumbnail-".concat(originalIndex, "-").concat(thumbnail.url),
url: thumbnail.url,
alt: (_thumbnail$alt = thumbnail.alt) !== null && _thumbnail$alt !== void 0 ? _thumbnail$alt : '',
originalIndex: originalIndex,
originalThumbnail: thumbnail
};
};
var getCardStyle = function getCardStyle(stackIndex, isSingleThumbnail) {
var _imagePreviewToken$st;
if (isSingleThumbnail) {
return imagePreviewToken.singleCardStyle;
}
return (_imagePreviewToken$st = imagePreviewToken.stackCardStyles[stackIndex]) !== null && _imagePreviewToken$st !== void 0 ? _imagePreviewToken$st : imagePreviewToken.stackCardStyles[imagePreviewToken.stackCardStyles.length - 1];
};
var StyledPreviewImage = /*#__PURE__*/styled.img.withConfig({
displayName: "ThumbnailPreviewweb__StyledPreviewImage",
componentId: "sc-1mentjq-0"
})({
width: '100%',
height: '100%',
aspectRatio: '1 / 1',
objectFit: 'cover',
display: 'block'
});
var ThumbnailPreview = function ThumbnailPreview(_ref) {
var thumbnails = _ref.thumbnails,
onThumbnailClick = _ref.onThumbnailClick;
var resolvedThumbnails = thumbnails.map(resolveThumbnailItem);
var previewThumbnails = resolvedThumbnails.slice(0, imagePreviewToken.maxVisibleStackImages);
var isSingleThumbnail = previewThumbnails.length === 1;
var overflowCount = Math.max(resolvedThumbnails.length - imagePreviewToken.maxVisibleStackImages, 0);
// Absolutely positioned cards don't affect parent height,
// so compute a deterministic min height from card offsets.
// For a single card, use the image size directly.
// For stacked cards, calculate based on bottom offsets plus image size and stack offset.
var stackHeight = isSingleThumbnail ? imagePreviewToken.previewImageSizePx : Math.max.apply(Math, _toConsumableArray(previewThumbnails.map(function (_, stackIndex) {
return getCardStyle(stackIndex, isSingleThumbnail).bottom + imagePreviewToken.previewImageSizePx;
})).concat([0])) + imagePreviewToken.stackHeightOffset;
return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({}, metaAttribute({
name: MetaConstants.ChatMessageThumbnailPreview
})), {}, {
children: /*#__PURE__*/jsxs(BaseBox, {
as: onThumbnailClick ? 'button' : 'div',
type: onThumbnailClick ? 'button' : undefined,
onClick: onThumbnailClick,
cursor: onThumbnailClick ? 'pointer' : 'default',
position: "relative",
width: isSingleThumbnail ? imagePreviewToken.previewImageSize : '188px',
height: makeSize(stackHeight),
border: "none",
padding: "spacing.0",
margin: "spacing.0",
backgroundColor: "transparent",
children: [
// Render back cards first and front card last (top-most in DOM paint order).
// `reverse()` mutates, so clone first to preserve `previewThumbnails`.
// Data mapping example for `previewThumbnails = [A, B, C]`:
// - A = thumbnails[0], B = thumbnails[1], C = thumbnails[2]
// - Render loop iterates `[C, B, A]`
// - Computed stackIndex becomes 2, 1, 0 respectively
// => C uses style slot 2, B uses style slot 1, A uses style slot 0
// This preserves stack positioning by original order while controlling paint order.
_toConsumableArray(previewThumbnails).reverse().map(function (_ref2, reverseIndex) {
var id = _ref2.id,
url = _ref2.url,
alt = _ref2.alt;
var stackIndex = previewThumbnails.length - reverseIndex - 1;
var cardStyle = getCardStyle(stackIndex, isSingleThumbnail);
return /*#__PURE__*/jsx(BaseBox, {
position: "absolute",
width: imagePreviewToken.previewImageSize,
height: imagePreviewToken.previewImageSize,
borderRadius: "small",
overflow: "hidden",
padding: "spacing.0",
bottom: makeSize(cardStyle.bottom),
right: makeSize(cardStyle.right),
transform: cardStyle.transform,
zIndex: cardStyle.zIndex,
elevation: "midRaised",
border: "thin",
borderColor: "interactive.border.staticWhite.default",
backgroundColor: "surface.background.gray.moderate",
children: /*#__PURE__*/jsx(StyledPreviewImage, {
src: url,
alt: alt
})
}, "".concat(id, "-").concat(stackIndex));
}), overflowCount > 0 ? /*#__PURE__*/jsx(BaseBox, {
position: "absolute",
right: makeSize(10),
bottom: makeSize(0),
width: makeSize(40),
height: makeSize(40),
borderRadius: "max",
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: "surface.background.gray.moderate",
elevation: "lowRaised",
border: "thin",
borderColor: "surface.border.gray.muted",
style: {
zIndex: 4
},
children: /*#__PURE__*/jsxs(Text, {
color: "surface.text.gray.muted",
size: "medium",
weight: "medium",
textAlign: "center",
marginRight: "spacing.1",
children: ["+", overflowCount]
})
}) : null]
})
}));
};
export { ThumbnailPreview };
//# sourceMappingURL=ThumbnailPreview.web.js.map