@droppii-org/chat-sdk
Version:
Droppii React Chat SDK
24 lines (23 loc) • 1.57 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { MessageStatus } from "@openim/wasm-client-sdk";
import { Image, Spin } from "antd";
const min = (a, b) => (a > b ? b : a);
const ImageMessageItem = (props) => {
var _a, _b, _c, _d;
const { message } = props;
const imageHeight = message.pictureElem.sourcePicture.height;
const imageWidth = message.pictureElem.sourcePicture.width;
const snapshotMaxHeight = (_b = (_a = message.pictureElem.snapshotPicture) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : imageHeight;
const minHeight = min(200, imageWidth) * (imageHeight / imageWidth) + 2;
const adaptedHight = min(minHeight, snapshotMaxHeight) + 10;
const adaptedWidth = min(imageWidth, 200) + 10;
const sourceUrl = ((_c = message.pictureElem.sourcePicture) === null || _c === void 0 ? void 0 : _c.url) ||
((_d = message.pictureElem.snapshotPicture) === null || _d === void 0 ? void 0 : _d.url);
const isSending = message.status === MessageStatus.Sending;
const minStyle = {
minHeight: `${adaptedHight}px`,
minWidth: `${adaptedWidth}px`,
};
return (_jsx(Spin, { spinning: isSending, children: _jsx("div", { className: "relative max-w-[200px]", style: minStyle, children: _jsx(Image, { rootClassName: "message-image cursor-pointer", className: "rounded-md", src: sourceUrl, preview: true, placeholder: _jsx("div", { style: minStyle, className: "flex items-center justify-center", children: _jsx(Spin, {}) }) }) }) }));
};
export default ImageMessageItem;