feat(signers-dropdown): improved hiding/displaying logic
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 31s
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 31s
This commit is contained in:
parent
3a94fbc0ae
commit
76b1fa792c
@ -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}>
|
||||||
|
@ -13,6 +13,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pdfImageWrapper:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
.placeholder {
|
.placeholder {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
|
Loading…
Reference in New Issue
Block a user