diff --git a/src/components/DrawPDFFields/index.tsx b/src/components/DrawPDFFields/index.tsx index 076c6fb..09c7d8f 100644 --- a/src/components/DrawPDFFields/index.tsx +++ b/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' @@ -27,6 +27,10 @@ const DEFAULT_START_SIZE = { height: 40 } as const +interface HideSignersForDrawnField { + [key: number]: boolean +} + interface Props { users: User[] metadata: { [key: string]: ProfileMetadata } @@ -41,6 +45,9 @@ 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({}) + /** * Return first pubkey that is present in the signers list * @param pubkeys @@ -217,6 +224,12 @@ export const DrawPDFFields = (props: Props) => { y: drawingRectangleCoords.y } }) + + // make signers dropdown visible + setHideSignersForDrawnField((prev) => ({ + ...prev, + [drawnFieldIndex]: false + })) } /** @@ -338,6 +351,32 @@ export const DrawPDFFields = (props: Props) => { event.stopPropagation() } + /** + * Handles Escape button-down event and hides all signers dropdowns + * @param event SyntheticEvent event + */ + const handleEscapeButtonDown = (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) { + // hide all signers dropdowns + const newHideSignersForDrawnField: HideSignersForDrawnField = {} + + Object.keys(hideSignersForDrawnField).forEach((key) => { + // Object.keys always returns an array of strings, + // that is why unknown type is used below + newHideSignersForDrawnField[key as unknown as number] = true + }) + + setHideSignersForDrawnField(newHideSignersForDrawnField) + } + } + } + /** * Gets the pointer coordinates relative to a element in the `event` param * @param event PointerEvent @@ -361,6 +400,7 @@ export const DrawPDFFields = (props: Props) => { rect } } + /** * Renders the pdf pages and drawing elements */ @@ -375,6 +415,8 @@ export const DrawPDFFields = (props: Props) => {
handleEscapeButtonDown(event)} > { @@ -492,62 +534,78 @@ export const DrawPDFFields = (props: Props) => { fileIndex, pageIndex, drawnFieldIndex - ) && ( -
- - Counterpart - { + 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 + ) + // make current signers dropdown visible + if ( + hideSignersForDrawnField[drawnFieldIndex] === + undefined || + hideSignersForDrawnField[drawnFieldIndex] === + true + ) { + setHideSignersForDrawnField((prev) => ({ + ...prev, + [drawnFieldIndex]: false + })) + } - return ( - - - img': { - width: '30px', - height: '30px' - } - }} - /> - - {displayValue} - - ) - })} - - -
- )} + return ( + + + img': { + width: '30px', + height: '30px' + } + }} + /> + + {displayValue} + + ) + })} + + +
+ )} ) })} diff --git a/src/components/DrawPDFFields/style.module.scss b/src/components/DrawPDFFields/style.module.scss index 15661e0..0a89fbf 100644 --- a/src/components/DrawPDFFields/style.module.scss +++ b/src/components/DrawPDFFields/style.module.scss @@ -13,6 +13,10 @@ } } +.pdfImageWrapper:focus { + outline: none; +} + .placeholder { position: absolute; opacity: 0.5; diff --git a/src/pages/create/index.tsx b/src/pages/create/index.tsx index 866bdb5..c57bda0 100644 --- a/src/pages/create/index.tsx +++ b/src/pages/create/index.tsx @@ -21,7 +21,8 @@ import { ProfileMetadata, SignedEvent, User, - UserRole + UserRole, + KeyboardCode } from '../../types' import { encryptArrayBuffer, @@ -87,7 +88,10 @@ export const CreatePage = () => { const [userInput, setUserInput] = useState('') const handleInputKeyDown = (event: React.KeyboardEvent) => { - if (event.code === 'Enter' || event.code === 'NumpadEnter') { + if ( + event.code === KeyboardCode.Enter || + event.code === KeyboardCode.NumpadEnter + ) { event.preventDefault() handleAddUser() } diff --git a/src/pages/nostr/index.tsx b/src/pages/nostr/index.tsx index aa5f11c..5f2dc2f 100644 --- a/src/pages/nostr/index.tsx +++ b/src/pages/nostr/index.tsx @@ -9,6 +9,7 @@ import { toast } from 'react-toastify' import { LoadingSpinner } from '../../components/LoadingSpinner' import { AuthController } from '../../controllers' import { updateKeyPair, updateLoginMethod } from '../../store/actions' +import { KeyboardCode } from '../../types' import { LoginMethod } from '../../store/auth/types' import { hexToBytes } from '@noble/hashes/utils' @@ -52,7 +53,10 @@ export const Nostr = () => { * Call login function when enter is pressed */ const handleInputKeyDown = (event: React.KeyboardEvent) => { - if (event.code === 'Enter' || event.code === 'NumpadEnter') { + if ( + event.code === KeyboardCode.Enter || + event.code === KeyboardCode.NumpadEnter + ) { event.preventDefault() login() } diff --git a/src/types/event.ts b/src/types/event.ts new file mode 100644 index 0000000..72c171c --- /dev/null +++ b/src/types/event.ts @@ -0,0 +1,5 @@ +export enum KeyboardCode { + Escape = 'Escape', + Enter = 'Enter', + NumpadEnter = 'NumpadEnter' +} diff --git a/src/types/index.ts b/src/types/index.ts index 6c9f259..fd242b2 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -4,3 +4,4 @@ export * from './nostr' export * from './profile' export * from './relay' export * from './zip' +export * from './event'