Releasing new design #161

Merged
b merged 241 commits from staging into main 2024-08-21 11:38:25 +00:00
3 changed files with 43 additions and 14 deletions
Showing only changes of commit b12ce258eb - Show all commits

View File

@ -21,7 +21,7 @@ import {
DrawTool DrawTool
} from '../../types/drawing' } from '../../types/drawing'
import { truncate } from 'lodash' import { truncate } from 'lodash'
import { hexToNpub } from '../../utils' import { extractFileExtension, hexToNpub } from '../../utils'
import { toPdfFiles } from '../../utils/pdf.ts' import { toPdfFiles } from '../../utils/pdf.ts'
PDFJS.GlobalWorkerOptions.workerSrc = new URL( PDFJS.GlobalWorkerOptions.workerSrc = new URL(
'pdfjs-dist/build/pdf.worker.min.mjs', 'pdfjs-dist/build/pdf.worker.min.mjs',
@ -478,15 +478,25 @@ export const DrawPDFFields = (props: Props) => {
return ( return (
<div className={styles.view}> <div className={styles.view}>
{pdfFiles.map((pdfFile, pdfFileIndex: number) => { {selectedFiles.map((file, i) => {
const name = file.name
const extension = extractFileExtension(name)
const pdfFile = pdfFiles.find((pdf) => pdf.file.name === name)
return ( return (
<React.Fragment key={pdfFile.file.name}> <React.Fragment key={name}>
<div <div
className={`${styles.fileWrapper} ${styles.scrollTarget}`} className={`${styles.fileWrapper} ${styles.scrollTarget}`}
id={`file-${pdfFile.file.name}`} id={`file-${name}`}
> >
{getPdfPages(pdfFile, pdfFileIndex)} {pdfFile ? (
{pdfFileIndex < pdfFiles.length - 1 && ( getPdfPages(pdfFile, i)
) : (
<div className={styles.otherFile}>
This is a {extension} file
</div>
)}
</div>
{i < selectedFiles.length - 1 && (
<Divider <Divider
sx={{ sx={{
fontSize: '12px', fontSize: '12px',
@ -496,7 +506,6 @@ export const DrawPDFFields = (props: Props) => {
File Separator File Separator
</Divider> </Divider>
)} )}
</div>
</React.Fragment> </React.Fragment>
) )
})} })}

View File

@ -104,3 +104,15 @@
flex-direction: column; flex-direction: column;
gap: 25px; gap: 25px;
} }
.otherFile {
border-radius: 4px;
background: rgba(255, 255, 255, 0.5);
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: rgba(0, 0, 0, 0.25);
font-size: 14px;
}

View File

@ -190,3 +190,11 @@ export const extractFileExtensions = (fileNames: string[]) => {
return { extensions, isSame } return { extensions, isSame }
} }
/**
* @param fileName - Filename to check
* @returns Extension string
*/
export const extractFileExtension = (fileName: string) => {
return fileName.split('.').pop()
}