sigit/sigit.io
6
2
Fork 0
Code Issues 55 Pull Requests 2 Actions Packages Projects 1 Releases Wiki Activity

feat(pdf-fields): add logic to hide signers on ESC

Browse Source
This commit is contained in:
NostrDev 2024-11-01 10:50:54 +03:00
parent 33e7fc7771
commit d89aea96bc
1 changed files with 98 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
src/components/DrawPDFFields/index.tsx
View File

@ -9,8 +9,16 @@ import {
} from '@mui/material' } from '@mui/material'
import styles from './style.module.scss' import styles from './style.module.scss'
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { ProfileMetadata, User, UserRole } from '../../types' import {
import { MouseState, PdfPage, DrawnField, DrawTool } from '../../types/drawing' ProfileMetadata,
User,
UserRole,
KeyboardCode,
MouseState,
PdfPage,
DrawnField,
DrawTool
} from '../../types'
import { hexToNpub, npubToHex, getProfileUsername } from '../../utils' import { hexToNpub, npubToHex, getProfileUsername } from '../../utils'
import { SigitFile } from '../../utils/file' import { SigitFile } from '../../utils/file'
import { getToolboxLabelByMarkType } from '../../utils/mark' import { getToolboxLabelByMarkType } from '../../utils/mark'
@ -41,6 +49,10 @@ 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<{
[key: number]: boolean
} | null>()
/** /**
* Return first pubkey that is present in the signers list * Return first pubkey that is present in the signers list
* @param pubkeys * @param pubkeys
@ -361,6 +373,7 @@ export const DrawPDFFields = (props: Props) => {
rect rect
} }
} }
/** /**
* Renders the pdf pages and drawing elements * Renders the pdf pages and drawing elements
*/ */
@ -492,62 +505,90 @@ export const DrawPDFFields = (props: Props) => {
fileIndex, fileIndex,
pageIndex, pageIndex,
drawnFieldIndex drawnFieldIndex
) && ( ) &&
<div (!hideSignersForDrawnField ||
onPointerDown={handleUserSelectPointerDown} !hideSignersForDrawnField[drawnFieldIndex]) && (
className={styles.userSelect} <div
> onPointerDown={handleUserSelectPointerDown}
<FormControl fullWidth size="small"> className={styles.userSelect}
<InputLabel id="counterparts">Counterpart</InputLabel> >
<Select <FormControl fullWidth size="small">
value={getAvailableSigner(drawnField.counterpart)} <InputLabel id="counterparts">
onChange={(event) => { Counterpart
drawnField.counterpart = event.target.value </InputLabel>
setLastSigner(event.target.value) <Select
refreshPdfFiles() value={getAvailableSigner(drawnField.counterpart)}
}} onChange={(event) => {
labelId="counterparts" drawnField.counterpart = event.target.value
label="Counterparts" setLastSigner(event.target.value)
sx={{ refreshPdfFiles()
background: 'white' }}
}} labelId="counterparts"
renderValue={(value) => label="Counterparts"
renderCounterpartValue(value) sx={{
} background: 'white'
> }}
{signers.map((signer, index) => { renderValue={(value) =>
const npub = hexToNpub(signer.pubkey) renderCounterpartValue(value)
const metadata = props.metadata[signer.pubkey] }
const displayValue = getProfileUsername( onClose={(event: React.SyntheticEvent) => {
npub, // get native event
metadata const { nativeEvent } = event
)
return ( // check if event is a keyboard event
<MenuItem key={index} value={npub}> if (nativeEvent instanceof KeyboardEvent) {
<ListItemIcon> // check if event code is Escape
<AvatarIconButton if (
src={metadata?.picture} nativeEvent.code === KeyboardCode.Escape
hexKey={signer.pubkey} ) {
aria-label={`account of user ${displayValue}`} // set hide signers for this DrawnField
color="inherit" if (hideSignersForDrawnField) {
sx={{ setHideSignersForDrawnField((prev) => ({
padding: 0, ...prev,
'> img': { [drawnFieldIndex]: true
width: '30px', }))
height: '30px' } else {
} setHideSignersForDrawnField({
}} [drawnFieldIndex]: true
/> })
</ListItemIcon> }
<ListItemText>{displayValue}</ListItemText> }
</MenuItem> }
) }}
})} >
</Select> {signers.map((signer, index) => {
</FormControl> const npub = hexToNpub(signer.pubkey)
</div> const metadata = props.metadata[signer.pubkey]
)} const displayValue = getProfileUsername(
npub,
metadata
)
return (
<MenuItem key={index} value={npub}>
<ListItemIcon>
<AvatarIconButton
src={metadata?.picture}
hexKey={signer.pubkey}
aria-label={`account of user ${displayValue}`}
color="inherit"
sx={{
padding: 0,
'> img': {
width: '30px',
height: '30px'
}
}}
/>
</ListItemIcon>
<ListItemText>{displayValue}</ListItemText>
</MenuItem>
)
})}
</Select>
</FormControl>
</div>
)}
</div> </div>
) )
})} })}