From 76b1fa792c8cd27f36b30eecd829e75d810d5e00 Mon Sep 17 00:00:00 2001 From: NostrDev Date: Fri, 1 Nov 2024 17:00:46 +0300 Subject: [PATCH] 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;