enes
4712031615
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 34s
49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
import { CurrentUserMark } from '../../types/mark.ts'
|
|
import styles from '../DrawPDFFields/style.module.scss'
|
|
import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts'
|
|
import { useScale } from '../../hooks/useScale.tsx'
|
|
|
|
interface PdfMarkItemProps {
|
|
userMark: CurrentUserMark
|
|
handleMarkClick: (id: number) => void
|
|
selectedMarkValue: string
|
|
selectedMark: CurrentUserMark | null
|
|
pageWidth: number
|
|
}
|
|
|
|
/**
|
|
* Responsible for display an individual Pdf Mark.
|
|
*/
|
|
const PdfMarkItem = ({
|
|
selectedMark,
|
|
handleMarkClick,
|
|
selectedMarkValue,
|
|
userMark,
|
|
pageWidth
|
|
}: PdfMarkItemProps) => {
|
|
const { location } = userMark.mark
|
|
const handleClick = () => handleMarkClick(userMark.mark.id)
|
|
const isEdited = () => selectedMark?.mark.id === userMark.mark.id
|
|
const getMarkValue = () =>
|
|
isEdited() ? selectedMarkValue : userMark.currentValue
|
|
const { from } = useScale()
|
|
return (
|
|
<div
|
|
onClick={handleClick}
|
|
className={`file-mark ${styles.drawingRectangle} ${isEdited() && styles.edited}`}
|
|
style={{
|
|
left: inPx(from(pageWidth, location.left)),
|
|
top: inPx(from(pageWidth, location.top)),
|
|
width: inPx(from(pageWidth, location.width)),
|
|
height: inPx(from(pageWidth, location.height)),
|
|
fontFamily: FONT_TYPE,
|
|
fontSize: inPx(from(pageWidth, FONT_SIZE))
|
|
}}
|
|
>
|
|
{getMarkValue()}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PdfMarkItem
|