From d89aea96bc8792b3e37b35a601936a508e329a53 Mon Sep 17 00:00:00 2001
From: NostrDev <support@nostrdev.com>
Date: Fri, 1 Nov 2024 10:50:54 +0300
Subject: [PATCH] feat(pdf-fields): add logic to hide signers on ESC

---
 src/components/DrawPDFFields/index.tsx | 155 ++++++++++++++++---------
 1 file changed, 98 insertions(+), 57 deletions(-)

diff --git a/src/components/DrawPDFFields/index.tsx b/src/components/DrawPDFFields/index.tsx
index 076c6fb..543edf9 100644
--- a/src/components/DrawPDFFields/index.tsx
+++ b/src/components/DrawPDFFields/index.tsx
@@ -9,8 +9,16 @@ import {
 } from '@mui/material'
 import styles from './style.module.scss'
 import React, { useEffect, useState } from 'react'
-import { ProfileMetadata, User, UserRole } from '../../types'
-import { MouseState, PdfPage, DrawnField, DrawTool } from '../../types/drawing'
+import {
+  ProfileMetadata,
+  User,
+  UserRole,
+  KeyboardCode,
+  MouseState,
+  PdfPage,
+  DrawnField,
+  DrawTool
+} from '../../types'
 import { hexToNpub, npubToHex, getProfileUsername } from '../../utils'
 import { SigitFile } from '../../utils/file'
 import { getToolboxLabelByMarkType } from '../../utils/mark'
@@ -41,6 +49,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 +373,7 @@ export const DrawPDFFields = (props: Props) => {
       rect
     }
   }
+
   /**
    * Renders the pdf pages and drawing elements
    */
@@ -492,62 +505,90 @@ export const DrawPDFFields = (props: Props) => {
                       fileIndex,
                       pageIndex,
                       drawnFieldIndex
-                    ) && (
-                      <div
-                        onPointerDown={handleUserSelectPointerDown}
-                        className={styles.userSelect}
-                      >
-                        <FormControl fullWidth size="small">
-                          <InputLabel id="counterparts">Counterpart</InputLabel>
-                          <Select
-                            value={getAvailableSigner(drawnField.counterpart)}
-                            onChange={(event) => {
-                              drawnField.counterpart = event.target.value
-                              setLastSigner(event.target.value)
-                              refreshPdfFiles()
-                            }}
-                            labelId="counterparts"
-                            label="Counterparts"
-                            sx={{
-                              background: 'white'
-                            }}
-                            renderValue={(value) =>
-                              renderCounterpartValue(value)
-                            }
-                          >
-                            {signers.map((signer, index) => {
-                              const npub = hexToNpub(signer.pubkey)
-                              const metadata = props.metadata[signer.pubkey]
-                              const displayValue = getProfileUsername(
-                                npub,
-                                metadata
-                              )
+                    ) &&
+                      (!hideSignersForDrawnField ||
+                        !hideSignersForDrawnField[drawnFieldIndex]) && (
+                        <div
+                          onPointerDown={handleUserSelectPointerDown}
+                          className={styles.userSelect}
+                        >
+                          <FormControl fullWidth size="small">
+                            <InputLabel id="counterparts">
+                              Counterpart
+                            </InputLabel>
+                            <Select
+                              value={getAvailableSigner(drawnField.counterpart)}
+                              onChange={(event) => {
+                                drawnField.counterpart = event.target.value
+                                setLastSigner(event.target.value)
+                                refreshPdfFiles()
+                              }}
+                              labelId="counterparts"
+                              label="Counterparts"
+                              sx={{
+                                background: 'white'
+                              }}
+                              renderValue={(value) =>
+                                renderCounterpartValue(value)
+                              }
+                              onClose={(event: React.SyntheticEvent) => {
+                                // get native event
+                                const { nativeEvent } = event
 
-                              return (
-                                <MenuItem key={index} value={npub}>
-                                  <ListItemIcon>
-                                    <AvatarIconButton
-                                      src={metadata?.picture}
-                                      hexKey={signer.pubkey}
-                                      aria-label={`account of user ${displayValue}`}
-                                      color="inherit"
-                                      sx={{
-                                        padding: 0,
-                                        '> img': {
-                                          width: '30px',
-                                          height: '30px'
-                                        }
-                                      }}
-                                    />
-                                  </ListItemIcon>
-                                  <ListItemText>{displayValue}</ListItemText>
-                                </MenuItem>
-                              )
-                            })}
-                          </Select>
-                        </FormControl>
-                      </div>
-                    )}
+                                // 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)
+                                const metadata = props.metadata[signer.pubkey]
+                                const displayValue = getProfileUsername(
+                                  npub,
+                                  metadata
+                                )
+
+                                return (
+                                  <MenuItem key={index} value={npub}>
+                                    <ListItemIcon>
+                                      <AvatarIconButton
+                                        src={metadata?.picture}
+                                        hexKey={signer.pubkey}
+                                        aria-label={`account of user ${displayValue}`}
+                                        color="inherit"
+                                        sx={{
+                                          padding: 0,
+                                          '> img': {
+                                            width: '30px',
+                                            height: '30px'
+                                          }
+                                        }}
+                                      />
+                                    </ListItemIcon>
+                                    <ListItemText>{displayValue}</ListItemText>
+                                  </MenuItem>
+                                )
+                              })}
+                            </Select>
+                          </FormControl>
+                        </div>
+                      )}
                   </div>
                 )
               })}