fix(create-page): show other file types in content

This commit is contained in:
enes 2024-08-20 09:44:04 +02:00
parent 6a0402a74d
commit 02bb71409a
3 changed files with 43 additions and 14 deletions

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,25 +478,34 @@ 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)
<Divider ) : (
sx={{ <div className={styles.otherFile}>
fontSize: '12px', This is a {extension} file
color: 'rgba(0,0,0,0.15)' </div>
}}
>
File Separator
</Divider>
)} )}
</div> </div>
{i < selectedFiles.length - 1 && (
<Divider
sx={{
fontSize: '12px',
color: 'rgba(0,0,0,0.15)'
}}
>
File Separator
</Divider>
)}
</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()
}