zerosoul
33 lines
953 B
JavaScript
33 lines
953 B
JavaScript
import { useState, useEffect } from "react";
|
|
import { formatBytes, isTreatAsImage, getFileIcon } from "../../utils";
|
|
|
|
export default function FileItem({ file = null }) {
|
|
const [icon, setIcon] = useState(null);
|
|
useEffect(() => {
|
|
if (file) {
|
|
const { type, name } = file;
|
|
if (isTreatAsImage(file)) {
|
|
setIcon(<img src={URL.createObjectURL(file)} alt="thumb" className="thumb" />);
|
|
return;
|
|
}
|
|
console.log("file type", type, name);
|
|
setIcon(getFileIcon(type, name));
|
|
}
|
|
}, [file]);
|
|
console.log("current file", file);
|
|
if (!file) return null;
|
|
const { name, size } = file;
|
|
return (
|
|
<li className="item">
|
|
{icon}
|
|
<div className="right">
|
|
<div className="name">
|
|
<span className="input">{name}</span>
|
|
{/* <i className="tip">(click title to change name)</i> */}
|
|
</div>
|
|
<i className="size">{formatBytes(size)}</i>
|
|
</div>
|
|
</li>
|
|
);
|
|
}
|