admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

added ratoted image inside preview documents

Browse Source
This commit is contained in:
pramod.mahajan 2025-10-17 12:26:57 +05:30
parent dec959c495
commit 8f0ca4a9ca
1 changed files with 40 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/Expenses/PreviewDocument.jsx
View File

@ -1,24 +1,33 @@
import { useState } from 'react'; import { useState } from "react";
const PreviewDocument = ({ imageUrl }) => { const PreviewDocument = ({ imageUrl }) => {
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [rotation, setRotation] = useState(0); // Rotation angle const [rotation, setRotation] = useState(0);
return ( return (
<div className="d-flex flex-column justify-content-center align-items-center" style={{ minHeight: "50vh" }}> <>
{loading && ( <div className="d-flex justify-content-start">
<div className="text-secondary text-center mb-2"> <i
Loading... className="bx bx-rotate-right cursor-pointer"
onClick={() => setRotation((prev) => prev + 90)}
></i>
</div> </div>
<div
className="d-flex flex-column justify-content-center align-items-center"
style={{ minHeight: "60%" }}
>
{loading && (
<div className="text-secondary text-center mb-2">Loading...</div>
)} )}
<div className="mb-3 d-flex justify-content-center align-items-center">
<img <img
src={imageUrl} src={imageUrl}
alt="Full View" alt="Full View"
className="img-fluid" className="img-fluid"
style={{ style={{
maxHeight: "100vh", maxHeight: "80vh",
objectFit: "contain", objectFit: "contain",
display: loading ? "none" : "block", display: loading ? "none" : "block",
transform: `rotate(${rotation}deg)`, transform: `rotate(${rotation}deg)`,
@ -26,17 +35,20 @@ const PreviewDocument = ({ imageUrl }) => {
}} }}
onLoad={() => setLoading(false)} onLoad={() => setLoading(false)}
/> />
</div>
{/* Rotate Button */} <div className="d-flex justify-content-center gap-2">
<button <button
className="btn btn-secondary mt-3" className="btn btn-outline-secondary"
onClick={() => setRotation((prev) => prev + 90)} onClick={() => setRotation(0)}
title="Reset Rotation"
> >
Rotate <i className="bx bx-reset"></i> Reset
</button> </button>
</div> </div>
</div>
</>
); );
}; };
export default PreviewDocument; export default PreviewDocument;