feat(signers-dropdown): improved hiding/displaying logic
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 31s

This commit is contained in:
NostrDev 2024-11-01 17:00:46 +03:00
parent 3a94fbc0ae
commit 76b1fa792c
2 changed files with 52 additions and 27 deletions

View File

@ -27,6 +27,10 @@ const DEFAULT_START_SIZE = {
height: 40 height: 40
} as const } as const
interface HideSignersForDrawnField {
[key: number]: boolean
}
interface Props { interface Props {
users: User[] users: User[]
metadata: { [key: string]: ProfileMetadata } metadata: { [key: string]: ProfileMetadata }
@ -41,9 +45,8 @@ export const DrawPDFFields = (props: Props) => {
const signers = users.filter((u) => u.role === UserRole.signer) const signers = users.filter((u) => u.role === UserRole.signer)
const defaultSignerNpub = signers.length ? hexToNpub(signers[0].pubkey) : '' const defaultSignerNpub = signers.length ? hexToNpub(signers[0].pubkey) : ''
const [lastSigner, setLastSigner] = useState(defaultSignerNpub) const [lastSigner, setLastSigner] = useState(defaultSignerNpub)
const [hideSignersForDrawnField, setHideSignersForDrawnField] = useState<{ const [hideSignersForDrawnField, setHideSignersForDrawnField] =
[key: number]: boolean useState<HideSignersForDrawnField>({})
} | null>()
/** /**
* Return first pubkey that is present in the signers list * Return first pubkey that is present in the signers list
@ -221,6 +224,12 @@ export const DrawPDFFields = (props: Props) => {
y: drawingRectangleCoords.y y: drawingRectangleCoords.y
} }
}) })
// make signers dropdown visible
setHideSignersForDrawnField((prev) => ({
...prev,
[drawnFieldIndex]: false
}))
} }
/** /**
@ -342,6 +351,28 @@ export const DrawPDFFields = (props: Props) => {
event.stopPropagation() 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 * Gets the pointer coordinates relative to a element in the `event` param
* @param event PointerEvent * @param event PointerEvent
@ -380,6 +411,8 @@ export const DrawPDFFields = (props: Props) => {
<div <div
key={pageIndex} key={pageIndex}
className={`image-wrapper ${styles.pdfImageWrapper} ${selectedTool ? styles.drawing : ''}`} className={`image-wrapper ${styles.pdfImageWrapper} ${selectedTool ? styles.drawing : ''}`}
tabIndex={-1}
onKeyDown={(event) => handleEscapeButtonDown(event)}
> >
<img <img
onPointerMove={(event) => { onPointerMove={(event) => {
@ -523,30 +556,6 @@ export const DrawPDFFields = (props: Props) => {
renderValue={(value) => renderValue={(value) =>
renderCounterpartValue(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) => { {signers.map((signer, index) => {
const npub = hexToNpub(signer.pubkey) const npub = hexToNpub(signer.pubkey)
@ -555,6 +564,18 @@ export const DrawPDFFields = (props: Props) => {
npub, npub,
metadata metadata
) )
// make current signers dropdown visible
if (
hideSignersForDrawnField[drawnFieldIndex] ===
undefined ||
hideSignersForDrawnField[drawnFieldIndex] ===
true
) {
setHideSignersForDrawnField((prev) => ({
...prev,
[drawnFieldIndex]: false
}))
}
return ( return (
<MenuItem key={index} value={npub}> <MenuItem key={index} value={npub}>

View File

@ -13,6 +13,10 @@
} }
} }
.pdfImageWrapper:focus {
outline: none;
}
.placeholder { .placeholder {
position: absolute; position: absolute;
opacity: 0.5; opacity: 0.5;