|
1 | 1 | 'use client'
|
2 | 2 | import { formatFilesize } from 'payload/shared'
|
3 |
| -import React, { useState } from 'react' |
| 3 | +import React from 'react' |
4 | 4 |
|
5 | 5 | export type FileMetaProps = {
|
6 |
| - collection?: string |
7 | 6 | filename: string
|
8 | 7 | filesize: number
|
9 | 8 | height?: number
|
10 |
| - id?: string |
11 | 9 | mimeType: string
|
12 | 10 | sizes?: unknown
|
13 | 11 | url: string
|
14 | 12 | width?: number
|
15 | 13 | }
|
16 | 14 |
|
17 |
| -import { EditIcon } from '../../../icons/Edit/index.js' |
18 | 15 | import { CopyToClipboard } from '../../CopyToClipboard/index.js'
|
19 |
| -import { useDocumentDrawer } from '../../DocumentDrawer/index.js' |
20 |
| -import { Tooltip } from '../../Tooltip/index.js' |
21 | 16 | import './index.scss'
|
22 | 17 |
|
23 | 18 | const baseClass = 'file-meta'
|
24 | 19 |
|
25 | 20 | export const FileMeta: React.FC<FileMetaProps> = (props) => {
|
26 |
| - const { id, collection, filename, filesize, height, mimeType, url: fileURL, width } = props |
27 |
| - |
28 |
| - const [hovered, setHovered] = useState(false) |
29 |
| - const openInDrawer = Boolean(id && collection) |
30 |
| - |
31 |
| - const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer({ |
32 |
| - id, |
33 |
| - collectionSlug: collection, |
34 |
| - }) |
| 21 | + const { filename, filesize, height, mimeType, url: fileURL, width } = props |
35 | 22 |
|
36 | 23 | return (
|
37 | 24 | <div className={baseClass}>
|
38 | 25 | <div className={`${baseClass}__url`}>
|
39 |
| - {openInDrawer && <DocumentDrawer />} |
40 | 26 | <a href={fileURL} rel="noopener noreferrer" target="_blank">
|
41 | 27 | {filename}
|
42 | 28 | </a>
|
43 | 29 | <CopyToClipboard defaultMessage="Copy URL" value={fileURL} />
|
44 |
| - {openInDrawer && ( |
45 |
| - <DocumentDrawerToggler |
46 |
| - className={`${baseClass}__edit`} |
47 |
| - onMouseEnter={() => setHovered(true)} |
48 |
| - onMouseLeave={() => setHovered(false)} |
49 |
| - > |
50 |
| - <EditIcon /> |
51 |
| - <Tooltip show={hovered}>Edit</Tooltip> |
52 |
| - </DocumentDrawerToggler> |
53 |
| - )} |
54 | 30 | </div>
|
55 | 31 | <div className={`${baseClass}__size-type`}>
|
56 | 32 | {formatFilesize(filesize)}
|
57 |
| - {width && height && ( |
| 33 | + {typeof width === 'number' && typeof height === 'number' && ( |
58 | 34 | <React.Fragment>
|
59 | 35 | -
|
60 | 36 | {width}x{height}
|
|
0 commit comments