61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import {
|
|
RotateLeftOutlined,
|
|
RotateRightOutlined,
|
|
SwapOutlined,
|
|
ZoomInOutlined,
|
|
ZoomOutOutlined,
|
|
} from "@ant-design/icons";
|
|
import React, { useState } from "react";
|
|
import { Image, Space } from "antd";
|
|
import { CiImageOff } from "react-icons/ci"; // Assuming you're using this icon from react-icons
|
|
|
|
const ColumnsImage = ({ src }: any) => {
|
|
const [hasError, setHasError] = useState(false); // Track if the image has an error
|
|
|
|
const imageUrl = src;
|
|
|
|
if (hasError) {
|
|
// If there is an error, display the fallback icon
|
|
return <CiImageOff />;
|
|
}
|
|
if(!imageUrl){
|
|
return <CiImageOff />;
|
|
}
|
|
return (
|
|
<Image
|
|
width={45}
|
|
height={45}
|
|
src={imageUrl}
|
|
className="p-1 mb-1 columnImage"
|
|
onError={() => setHasError(true)} // Triggered when image fails to load
|
|
preview={{
|
|
toolbarRender: (
|
|
_,
|
|
{
|
|
transform: { scale },
|
|
actions: {
|
|
onFlipY,
|
|
onFlipX,
|
|
onRotateLeft,
|
|
onRotateRight,
|
|
onZoomOut,
|
|
onZoomIn,
|
|
},
|
|
},
|
|
) => (
|
|
<Space size={12} className="toolbar-wrapper">
|
|
<SwapOutlined rotate={90} onClick={onFlipY} />
|
|
<SwapOutlined onClick={onFlipX} />
|
|
<RotateLeftOutlined onClick={onRotateLeft} />
|
|
<RotateRightOutlined onClick={onRotateRight} />
|
|
<ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} />
|
|
<ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} />
|
|
</Space>
|
|
),
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default ColumnsImage;
|