70 lines
1.5 KiB
TypeScript
70 lines
1.5 KiB
TypeScript
|
import React from "react"
|
||
|
|
import PropTypes from "prop-types"
|
||
|
|
import { useGetFileQuery } from "../generated/graphql"
|
||
|
|
import ImageOpener from "./ImageOpener"
|
||
|
|
import TextOpener from "./TextOpener"
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
id: string
|
||
|
|
show: boolean
|
||
|
|
onCloseClick?: ()=>void
|
||
|
|
}
|
||
|
|
|
||
|
|
const FileOpen: React.FC<Props> = (props) => {
|
||
|
|
|
||
|
|
const { data } = useGetFileQuery({
|
||
|
|
variables:{
|
||
|
|
id: props.id
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
let opener = <div>TODO</div>
|
||
|
|
|
||
|
|
if(data?.file != null){
|
||
|
|
// https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
|
||
|
|
if (data.file.contentType?.startsWith("image/")){
|
||
|
|
opener = <ImageOpener file={data?.file} />
|
||
|
|
}else if (data.file.contentType?.startsWith("text/")){
|
||
|
|
opener = <TextOpener file={data.file} />
|
||
|
|
}else{
|
||
|
|
// Get Opener bases on file extension
|
||
|
|
const ext = data.file.name?.split(".").pop()
|
||
|
|
switch (ext) {
|
||
|
|
case "png":
|
||
|
|
case "jpg":
|
||
|
|
case "jpeg":
|
||
|
|
case "gif":
|
||
|
|
// TODO: more ext
|
||
|
|
opener = <ImageOpener file={data.file} />
|
||
|
|
break
|
||
|
|
case "txt":
|
||
|
|
case "md":
|
||
|
|
opener = <TextOpener file={data.file} />
|
||
|
|
break
|
||
|
|
default:
|
||
|
|
opener = <ImageOpener file={data?.file} />
|
||
|
|
break
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={`modal modal-sm ${props.show ? "active":""}`}>
|
||
|
|
<a className="modal-overlay" onClick={()=>{
|
||
|
|
props.onCloseClick?.()
|
||
|
|
}}>❌</a>
|
||
|
|
<div className="modal-container">
|
||
|
|
{opener}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
FileOpen.propTypes = {
|
||
|
|
id: PropTypes.string.isRequired,
|
||
|
|
show: PropTypes.bool.isRequired,
|
||
|
|
onCloseClick: PropTypes.func
|
||
|
|
}
|
||
|
|
|
||
|
|
export default FileOpen
|