Releasing new design #161
@ -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>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
@ -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()
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user