feat(pdf-fields): add logic to hide signers on ESC

src/components/DrawPDFFields/index.tsx

@@ -9,7 +9,7 @@ import {
 } from '@mui/material'
 import styles from './style.module.scss'
 import React, { useEffect, useState } from 'react'
-import { ProfileMetadata, User, UserRole } from '../../types'
+import { ProfileMetadata, User, UserRole, KeyboardCode } from '../../types'
 import { MouseState, PdfPage, DrawnField, DrawTool } from '../../types/drawing'
 import { hexToNpub, npubToHex, getProfileUsername } from '../../utils'
 import { SigitFile } from '../../utils/file'
@@ -41,6 +41,10 @@ export const DrawPDFFields = (props: Props) => {
   const signers = users.filter((u) => u.role === UserRole.signer)
   const defaultSignerNpub = signers.length ? hexToNpub(signers[0].pubkey) : ''
   const [lastSigner, setLastSigner] = useState(defaultSignerNpub)
+  const [hideSignersForDrawnField, setHideSignersForDrawnField] = useState<{
+    [key: number]: boolean
+  } | null>()
+
   /**
    * Return first pubkey that is present in the signers list
    * @param pubkeys
@@ -361,6 +365,7 @@ export const DrawPDFFields = (props: Props) => {
       rect
     }
   }
+
   /**
    * Renders the pdf pages and drawing elements
    */
@@ -492,13 +497,17 @@ export const DrawPDFFields = (props: Props) => {
                       fileIndex,
                       pageIndex,
                       drawnFieldIndex
-                    ) && (
+                    ) &&
+                      (!hideSignersForDrawnField ||
+                        !hideSignersForDrawnField[drawnFieldIndex]) && (
                         <div
                           onPointerDown={handleUserSelectPointerDown}
                           className={styles.userSelect}
                         >
                           <FormControl fullWidth size="small">
-                          <InputLabel id="counterparts">Counterpart</InputLabel>
+                            <InputLabel id="counterparts">
+                              Counterpart
+                            </InputLabel>
                             <Select
                               value={getAvailableSigner(drawnField.counterpart)}
                               onChange={(event) => {
@@ -514,6 +523,30 @@ export const DrawPDFFields = (props: Props) => {
                               renderValue={(value) =>
                                 renderCounterpartValue(value)
                               }
+                              onClose={(event: React.SyntheticEvent) => {
+                                // get native event
+                                const { nativeEvent } = event
+
+                                // check if event is a keyboard event
+                                if (nativeEvent instanceof KeyboardEvent) {
+                                  // check if event code is Escape
+                                  if (
+                                    nativeEvent.code === KeyboardCode.Escape
+                                  ) {
+                                    // set hide signers for this DrawnField
+                                    if (hideSignersForDrawnField) {
+                                      setHideSignersForDrawnField((prev) => ({
+                                        ...prev,
+                                        [drawnFieldIndex]: true
+                                      }))
+                                    } else {
+                                      setHideSignersForDrawnField({
+                                        [drawnFieldIndex]: true
+                                      })
+                                    }
+                                  }
+                                }
+                              }}
                             >
                               {signers.map((signer, index) => {
                                 const npub = hexToNpub(signer.pubkey)

src/types/event.ts

@@ -0,0 +1,5 @@
+export enum KeyboardCode {
+  Escape = 'Escape',
+  Enter = 'Enter',
+  NumpadEnter = 'NumpadEnter'
+}

src/types/index.ts

@@ -4,3 +4,4 @@ export * from './nostr'
 export * from './profile'
 export * from './relay'
 export * from './zip'
+export * from './event'