diff --git a/src/components/DrawPDFFields/index.tsx b/src/components/DrawPDFFields/index.tsx index e98187c..5318361 100644 --- a/src/components/DrawPDFFields/index.tsx +++ b/src/components/DrawPDFFields/index.tsx @@ -49,7 +49,7 @@ interface Props { } export const DrawPDFFields = (props: Props) => { - const { selectedFiles } = props + const { selectedFiles, onDrawFieldsChange, users } = props const [pdfFiles, setPdfFiles] = useState([]) const [parsingPdf, setParsingPdf] = useState(false) @@ -94,6 +94,15 @@ export const DrawPDFFields = (props: Props) => { }) useEffect(() => { + /** + * Reads the pdf binary files and converts it's pages to images + * creates the pdfFiles object and sets to a state + */ + const parsePdfPages = async () => { + const pdfFiles: PdfFile[] = await toPdfFiles(selectedFiles) + + setPdfFiles(pdfFiles) + } if (selectedFiles) { setParsingPdf(true) @@ -104,8 +113,8 @@ export const DrawPDFFields = (props: Props) => { }, [selectedFiles]) useEffect(() => { - if (pdfFiles) props.onDrawFieldsChange(pdfFiles) - }, [pdfFiles]) + if (pdfFiles) onDrawFieldsChange(pdfFiles) + }, [onDrawFieldsChange, pdfFiles]) /** * Drawing events @@ -132,12 +141,16 @@ export const DrawPDFFields = (props: Props) => { * @param event Mouse event * @param page PdfPage where press happened */ - const onMouseDown = (event: any, page: PdfPage) => { + const onMouseDown = ( + event: React.MouseEvent, + page: PdfPage + ) => { // Proceed only if left click if (event.button !== 0) return // Only allow drawing if mouse is not over other drawn element - const isOverPdfImageWrapper = event.target.tagName === 'IMG' + const target = event.target as HTMLElement + const isOverPdfImageWrapper = target.tagName === 'IMG' if (!selectedTool || !isOverPdfImageWrapper) { return @@ -185,7 +198,10 @@ export const DrawPDFFields = (props: Props) => { * @param event Mouse event * @param page PdfPage where moving is happening */ - const onMouseMove = (event: any, page: PdfPage) => { + const onMouseMove = ( + event: React.MouseEvent, + page: PdfPage + ) => { if (mouseState.clicked && selectedTool) { const lastElementIndex = page.drawnFields.length - 1 const lastDrawnField = page.drawnFields[lastElementIndex] @@ -216,7 +232,7 @@ export const DrawPDFFields = (props: Props) => { * @param event Mouse event * @param drawnField Which we are moving */ - const onDrawnFieldMouseDown = (event: any) => { + const onDrawnFieldMouseDown = (event: React.MouseEvent) => { event.stopPropagation() // Proceed only if left click @@ -239,11 +255,15 @@ export const DrawPDFFields = (props: Props) => { * @param event Mouse event * @param drawnField which we are moving */ - const onDranwFieldMouseMove = (event: any, drawnField: DrawnField) => { + const onDranwFieldMouseMove = ( + event: React.MouseEvent, + drawnField: DrawnField + ) => { + const target = event.target as HTMLElement | null if (mouseState.dragging) { const { mouseX, mouseY, rect } = getMouseCoordinates( event, - event.target.parentNode + target?.parentNode as HTMLElement ) const coordsOffset = mouseState.coordsInWrapper @@ -272,7 +292,7 @@ export const DrawPDFFields = (props: Props) => { * @param event Mouse event * @param drawnField which we are resizing */ - const onResizeHandleMouseDown = (event: any) => { + const onResizeHandleMouseDown = (event: React.MouseEvent) => { // Proceed only if left click if (event.button !== 0) return @@ -288,11 +308,15 @@ export const DrawPDFFields = (props: Props) => { * @param event Mouse event * @param drawnField which we are resizing */ - const onResizeHandleMouseMove = (event: any, drawnField: DrawnField) => { + const onResizeHandleMouseMove = ( + event: React.MouseEvent, + drawnField: DrawnField + ) => { + const target = event.target as HTMLElement | null if (mouseState.resizing) { const { mouseX, mouseY } = getMouseCoordinates( event, - event.target.parentNode.parentNode + target?.parentNode?.parentNode as HTMLElement ) const width = mouseX - drawnField.left @@ -313,7 +337,7 @@ export const DrawPDFFields = (props: Props) => { * @param drawnFileIndex drawn file index */ const onRemoveHandleMouseDown = ( - event: any, + event: React.MouseEvent, pdfFileIndex: number, pdfPageIndex: number, drawnFileIndex: number @@ -331,7 +355,9 @@ export const DrawPDFFields = (props: Props) => { * so select can work properly * @param event Mouse event */ - const onUserSelectHandleMouseDown = (event: any) => { + const onUserSelectHandleMouseDown = ( + event: React.MouseEvent + ) => { event.stopPropagation() } @@ -341,8 +367,11 @@ export const DrawPDFFields = (props: Props) => { * @param customTarget mouse coordinates relative to this element, if not provided * event.target will be used */ - const getMouseCoordinates = (event: any, customTarget?: any) => { - const target = customTarget ? customTarget : event.target + const getMouseCoordinates = ( + event: React.MouseEvent, + customTarget?: HTMLElement + ) => { + const target = (customTarget ? customTarget : event.target) as HTMLElement const rect = target.getBoundingClientRect() const mouseX = event.clientX - rect.left //x position within the element. const mouseY = event.clientY - rect.top //y position within the element. @@ -354,16 +383,6 @@ export const DrawPDFFields = (props: Props) => { } } - /** - * Reads the pdf binary files and converts it's pages to images - * creates the pdfFiles object and sets to a state - */ - const parsePdfPages = async () => { - const pdfFiles: PdfFile[] = await toPdfFiles(selectedFiles) - - setPdfFiles(pdfFiles) - } - /** * * @returns if expanded pdf accordion is present @@ -477,7 +496,7 @@ export const DrawPDFFields = (props: Props) => { labelId="counterparts" label="Counterparts" > - {props.users.map((user, index) => { + {users.map((user, index) => { let displayValue = truncate( hexToNpub(user.pubkey), { diff --git a/src/components/MarkFormField/index.tsx b/src/components/MarkFormField/index.tsx index 2fa2780..e1003a0 100644 --- a/src/components/MarkFormField/index.tsx +++ b/src/components/MarkFormField/index.tsx @@ -7,15 +7,17 @@ import { isCurrentUserMarksComplete, isCurrentValueLast } from '../../utils' -import { useState } from 'react' +import React, { useState } from 'react' interface MarkFormFieldProps { - handleSubmit: (event: any) => void - handleSelectedMarkValueChange: (event: any) => void - selectedMark: CurrentUserMark - selectedMarkValue: string currentUserMarks: CurrentUserMark[] handleCurrentUserMarkChange: (mark: CurrentUserMark) => void + handleSelectedMarkValueChange: ( + event: React.ChangeEvent + ) => void + handleSubmit: (event: React.FormEvent) => void + selectedMark: CurrentUserMark + selectedMarkValue: string } /** diff --git a/src/types/mark.ts b/src/types/mark.ts index 1e6039b..efc1899 100644 --- a/src/types/mark.ts +++ b/src/types/mark.ts @@ -1,4 +1,4 @@ -import { MarkType } from "./drawing"; +import { MarkType } from './drawing' export interface CurrentUserMark { id: number