From e37f90d6db713434912530988a80af3390ed8a92 Mon Sep 17 00:00:00 2001 From: NostrDev Date: Fri, 1 Nov 2024 11:22:31 +0300 Subject: [PATCH 1/4] feat(pdf-fields): add logic to hide signers on ESC --- src/components/DrawPDFFields/index.tsx | 145 +++++++++++++++---------- src/types/event.ts | 5 + src/types/index.ts | 1 + 3 files changed, 95 insertions(+), 56 deletions(-) create mode 100644 src/types/event.ts diff --git a/src/components/DrawPDFFields/index.tsx b/src/components/DrawPDFFields/index.tsx index 076c6fb..accce90 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' @@ -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,62 +497,90 @@ 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) + } + onClose={(event: React.SyntheticEvent) => { + // get native event + const { nativeEvent } = event - return ( - - - img': { - width: '30px', - height: '30px' - } - }} - /> - - {displayValue} - - ) - })} - - -
- )} + // 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 ( + + + img': { + width: '30px', + height: '30px' + } + }} + /> + + {displayValue} + + ) + })} + + + + )} ) })} 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' -- 2.34.1 From 3a94fbc0ae3789252e4ff2b08f5f10d89042be14 Mon Sep 17 00:00:00 2001 From: NostrDev Date: Fri, 1 Nov 2024 11:23:05 +0300 Subject: [PATCH 2/4] chore(types): used KeyboardCode enum --- src/pages/create/index.tsx | 8 ++++++-- src/pages/nostr/index.tsx | 6 +++++- 2 files changed, 11 insertions(+), 3 deletions(-) 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() } -- 2.34.1 From 76b1fa792c8cd27f36b30eecd829e75d810d5e00 Mon Sep 17 00:00:00 2001 From: NostrDev Date: Fri, 1 Nov 2024 17:00:46 +0300 Subject: [PATCH 3/4] feat(signers-dropdown): improved hiding/displaying logic --- src/components/DrawPDFFields/index.tsx | 75 ++++++++++++------- .../DrawPDFFields/style.module.scss | 4 + 2 files changed, 52 insertions(+), 27 deletions(-) diff --git a/src/components/DrawPDFFields/index.tsx b/src/components/DrawPDFFields/index.tsx index accce90..0315c9c 100644 --- a/src/components/DrawPDFFields/index.tsx +++ b/src/components/DrawPDFFields/index.tsx @@ -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,9 +45,8 @@ 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>() + const [hideSignersForDrawnField, setHideSignersForDrawnField] = + useState({}) /** * Return first pubkey that is present in the signers list @@ -221,6 +224,12 @@ export const DrawPDFFields = (props: Props) => { y: drawingRectangleCoords.y } }) + + // make signers dropdown visible + setHideSignersForDrawnField((prev) => ({ + ...prev, + [drawnFieldIndex]: false + })) } /** @@ -342,6 +351,28 @@ export const DrawPDFFields = (props: Props) => { event.stopPropagation() } + 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 @@ -380,6 +411,8 @@ export const DrawPDFFields = (props: Props) => {
handleEscapeButtonDown(event)} > { @@ -523,30 +556,6 @@ 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) @@ -555,6 +564,18 @@ export const DrawPDFFields = (props: Props) => { npub, metadata ) + // make current signers dropdown visible + if ( + hideSignersForDrawnField[drawnFieldIndex] === + undefined || + hideSignersForDrawnField[drawnFieldIndex] === + true + ) { + setHideSignersForDrawnField((prev) => ({ + ...prev, + [drawnFieldIndex]: false + })) + } return ( 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; -- 2.34.1 From 5b1654c34171ca4aafb51594c15edc87c65d42bc Mon Sep 17 00:00:00 2001 From: NostrDev Date: Mon, 4 Nov 2024 10:42:55 +0300 Subject: [PATCH 4/4] chore: added handleEscapeButtonDown description --- src/components/DrawPDFFields/index.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/DrawPDFFields/index.tsx b/src/components/DrawPDFFields/index.tsx index 0315c9c..09c7d8f 100644 --- a/src/components/DrawPDFFields/index.tsx +++ b/src/components/DrawPDFFields/index.tsx @@ -351,6 +351,10 @@ 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 -- 2.34.1