src/components/DrawPDFFields/index.tsx

@@ -37,7 +37,7 @@ interface Props {
 }
 
 export const DrawPDFFields = (props: Props) => {
-  const { selectedFiles, selectedTool, onDrawFieldsChange, users } = props
+  const { selectedFiles, selectedTool } = props
 
   const [pdfFiles, setPdfFiles] = useState<PdfFile[]>([])
   const [parsingPdf, setParsingPdf] = useState<boolean>(false)
@@ -67,8 +67,8 @@ export const DrawPDFFields = (props: Props) => {
   }, [selectedFiles])
 
   useEffect(() => {
-    if (pdfFiles) onDrawFieldsChange(pdfFiles)
+    if (pdfFiles) props.onDrawFieldsChange(pdfFiles)
-  }, [onDrawFieldsChange, pdfFiles])
+  }, [pdfFiles, props])
 
   /**
    * Drawing events
@@ -96,7 +96,7 @@ export const DrawPDFFields = (props: Props) => {
    * @param page PdfPage where press happened
    */
   const onMouseDown = (
-    event: React.MouseEvent<HTMLDivElement>,
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
     page: PdfPage
   ) => {
     // Proceed only if left click
@@ -149,7 +149,7 @@ export const DrawPDFFields = (props: Props) => {
    * @param page PdfPage where moving is happening
    */
   const onMouseMove = (
-    event: React.MouseEvent<HTMLDivElement>,
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
     page: PdfPage
   ) => {
     if (mouseState.clicked && selectedTool) {
@@ -188,7 +188,9 @@ export const DrawPDFFields = (props: Props) => {
    * @param event Mouse event
    * @param drawnField Which we are moving
    */
-  const onDrawnFieldMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
+  const onDrawnFieldMouseDown = (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>
+  ) => {
     event.stopPropagation()
 
     // Proceed only if left click
@@ -212,7 +214,7 @@ export const DrawPDFFields = (props: Props) => {
    * @param drawnField which we are moving
    */
   const onDrawnFieldMouseMove = (
-    event: React.MouseEvent<HTMLDivElement>,
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
     drawnField: DrawnField
   ) => {
     if (mouseState.dragging) {
@@ -248,7 +250,7 @@ export const DrawPDFFields = (props: Props) => {
    * @param drawnField which we are resizing
    */
   const onResizeHandleMouseDown = (
-    event: React.MouseEvent<HTMLSpanElement>
+    event: React.MouseEvent<HTMLSpanElement, MouseEvent>
   ) => {
     // Proceed only if left click
     if (event.button !== 0) return
@@ -266,7 +268,7 @@ export const DrawPDFFields = (props: Props) => {
    * @param drawnField which we are resizing
    */
   const onResizeHandleMouseMove = (
-    event: React.MouseEvent<HTMLSpanElement>,
+    event: React.MouseEvent<HTMLSpanElement, MouseEvent>,
     drawnField: DrawnField
   ) => {
     if (mouseState.resizing) {
@@ -296,7 +298,7 @@ export const DrawPDFFields = (props: Props) => {
    * @param drawnFileIndex drawn file index
    */
   const onRemoveHandleMouseDown = (
-    event: React.MouseEvent<HTMLSpanElement>,
+    event: React.MouseEvent<HTMLSpanElement, MouseEvent>,
     pdfFileIndex: number,
     pdfPageIndex: number,
     drawnFileIndex: number
@@ -315,7 +317,7 @@ export const DrawPDFFields = (props: Props) => {
    * @param event Mouse event
    */
   const onUserSelectHandleMouseDown = (
-    event: React.MouseEvent<HTMLDivElement>
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>
   ) => {
     event.stopPropagation()
   }
@@ -327,8 +329,8 @@ export const DrawPDFFields = (props: Props) => {
    * event.target will be used
    */
   const getMouseCoordinates = (
-    event: React.MouseEvent<HTMLElement>,
+    event: React.MouseEvent<HTMLElement, MouseEvent>,
-    customTarget?: HTMLElement
+    customTarget?: HTMLElement | null
   ) => {
     const target = customTarget ? customTarget : event.currentTarget
     const rect = target.getBoundingClientRect()
@@ -417,7 +419,7 @@ export const DrawPDFFields = (props: Props) => {
                           labelId="counterparts"
                           label="Counterparts"
                         >
-                          {users
+                          {props.users
                             .filter((u) => u.role === UserRole.signer)
                             .map((user, index) => {
                               let displayValue = truncate(

src/components/MarkFormField/index.tsx

@@ -7,17 +7,15 @@ import {
   isCurrentUserMarksComplete,
   isCurrentValueLast
 } from '../../utils'
-import React, { useState } from 'react'
+import { useState } from 'react'
 
 interface MarkFormFieldProps {
-  currentUserMarks: CurrentUserMark[]
+  handleSubmit: (event: any) => void
-  handleCurrentUserMarkChange: (mark: CurrentUserMark) => void
+  handleSelectedMarkValueChange: (event: any) => void
-  handleSelectedMarkValueChange: (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => void
-  handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void
   selectedMark: CurrentUserMark
   selectedMarkValue: string
+  currentUserMarks: CurrentUserMark[]
+  handleCurrentUserMarkChange: (mark: CurrentUserMark) => void
 }
 
 /**

src/types/mark.ts

@@ -1,4 +1,4 @@
-import { MarkType } from './drawing'
+import { MarkType } from "./drawing";
 
 export interface CurrentUserMark {
   id: number