140 lines
4.7 KiB
TypeScript
140 lines
4.7 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
|
|
|
|
import { FaSignature } from 'react-icons/fa'
|
|
import { IoIosDocument } from 'react-icons/io';
|
|
import { LuTableOfContents } from 'react-icons/lu';
|
|
import { MdKeyboardArrowDown } from 'react-icons/md'
|
|
import { RiResetLeftLine } from 'react-icons/ri';
|
|
import { FaCheck } from "react-icons/fa6";
|
|
|
|
|
|
interface FIT {
|
|
label: string,
|
|
value: number | null
|
|
}
|
|
|
|
const fitObj = [
|
|
{
|
|
label: "Fit",
|
|
value: "FIT"
|
|
},
|
|
{
|
|
label: "50%",
|
|
value: "50"
|
|
},
|
|
{
|
|
label: "100%",
|
|
value: "100"
|
|
},
|
|
{
|
|
label: "150%",
|
|
value: "150"
|
|
},
|
|
]
|
|
|
|
const DocView = () => {
|
|
const [nav2RecToggle, setNav2RecToggle] = useState<boolean>(false);
|
|
const [nav2DocToggle, setNav2DocToggle] = useState<boolean>(false);
|
|
const [isFields, setIsFields] = useState<boolean>(false);
|
|
|
|
const [isFitDd, setIsFitDd] = useState<boolean>(false)
|
|
const [selFitIndx, setSelFitIndx] = useState<number>(0);
|
|
|
|
function zoom(percentage: number, contentClass: string) {
|
|
|
|
const content = document.querySelector(`.${contentClass}`);
|
|
const scale = percentage // 100;
|
|
if(content) {
|
|
content.style.transform = `scale(${scale})`;
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
let indx = fitObj[selFitIndx].value
|
|
if (indx === "FIT") {
|
|
indx = "100";
|
|
}
|
|
zoom(Number(indx), 'zoom-con')
|
|
}, [selFitIndx])
|
|
|
|
return (
|
|
<>
|
|
|
|
{/* Nav Two - Oprions - START */}
|
|
<div className='flex justify-between items-center px-4 py-1 bg-white'>
|
|
|
|
{/* Left Side */}
|
|
<div className='flex justify-start items-center gap-2'>
|
|
|
|
<div
|
|
onClick={() => setIsFields(true)}
|
|
className={`flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm ${isFields ? 'bg-slate-100' : ''}`}>
|
|
<LuTableOfContents />
|
|
<p className='tracking-wide'>Fields</p>
|
|
</div>
|
|
|
|
<div
|
|
onClick={() => setIsFields(false)}
|
|
className={`flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm ${!isFields ? 'bg-slate-100' : ''}`}>
|
|
<IoIosDocument />
|
|
<p className='tracking-wide'>Pages</p>
|
|
</div>
|
|
|
|
|
|
<div className='flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm'>
|
|
<RiResetLeftLine />
|
|
<p className='tracking-wide'>Reset</p>
|
|
</div>
|
|
|
|
<div
|
|
tabIndex={1}
|
|
onBlur={() => setIsFitDd(false)}
|
|
>
|
|
<div
|
|
onClick={() => setIsFitDd(!isFitDd)}
|
|
className='flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm'>
|
|
<p className='tracking-wide'>Fit</p>
|
|
<MdKeyboardArrowDown style={{transform: `${isFitDd ? "rotate(180deg)" : ""}`}} />
|
|
</div>
|
|
|
|
{isFitDd && <div className='absolute bg-white rounded-sm z-50'>
|
|
{fitObj.map((val, indx) => {
|
|
return (<div
|
|
key={indx}
|
|
onClick={() => setSelFitIndx(indx)}
|
|
className='flex z-50 items-center justify-between gap-2 w-[70px] p-2 text-xs cursor-default hover:bg-slate-100'>
|
|
<div
|
|
|
|
className='flex items-center justify-between w-full'>
|
|
<p className='whitespace-nowrap overflow-hidden text-ellipsis max-w-[12ch]'>{val.label}</p>
|
|
{selFitIndx === indx && <FaCheck className='text-sm text-slate-400' />}
|
|
</div>
|
|
</div>)
|
|
})
|
|
}
|
|
</div>}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
{/* Nav Two - ENDS */}
|
|
|
|
|
|
|
|
<div className='grid grid-cols-12 gap-1 mt-1 h-[calc(100vh-38px)] overflow-hidden'>
|
|
<div className='col-span-2 bg-white h-full p-4 overflow-y-auto'></div>
|
|
<div className='zoom-con col-span-8 bg-slate-200 h-full p-4 overflow-y-auto'>
|
|
Test Zoom
|
|
</div>
|
|
<div className='col-span-2 bg-white h-full p-4 overflow-y-auto'></div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default DocView |