4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

🎨 loader on image get from ipfs

Browse Source
This commit is contained in:
Hugo Lextrait 2023-05-12 10:30:24 +02:00
parent 72fc1f49c6
commit 013796d8d3
2 changed files with 26 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/front/Components/DesignSystem/FilePreview/classes.module.scss
View File

@ -1,9 +1,12 @@
.root {
height: inherit;
min-height: inherit;
position: relative;
.file-container {
height: inherit;
min-height: inherit;
.image {
width: 100%;
height: inherit;
@ -17,4 +20,15 @@
height: inherit;
}
}
.loader {
width: 48px;
height: 48px;
z-index: -1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}

17
src/front/Components/DesignSystem/FilePreview/index.tsx
View File

@ -2,6 +2,7 @@ import React from "react";
import Typography, { ITypo, ITypoColor } from "../Typography";
import classes from "./classes.module.scss";
import Loader from "../Loader";
type IProps = {
href: string;
@ -12,20 +13,24 @@ type IState = {};
export default class FilePreview extends React.Component<IProps, IState> {
override render() {
let type = this.props.href.split(".").pop();
if(this.props.fileName) type = this.props.fileName.split(".").pop();
if (this.props.fileName) type = this.props.fileName.split(".").pop();
return (
<div className={classes["root"]}>
<div className={classes["loader"]}>
<Loader />
</div>
{!type && (
<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
Erreur lors du chargement du fichier
</Typography>
)}
<div className={classes["file-container"]}>
{type?.toLowerCase() === "pdf" && (
<embed src={this.props.href} width="100%" height="100%" type="application/pdf" className={classes["pdf"]} />
)}
{type?.toLowerCase() !== "pdf" && <img src={this.props.href} alt="File preview" className={classes["image"]} />}
</div>
{type?.toLowerCase() === "pdf" && (
<embed src={this.props.href} width="100%" height="100%" type="application/pdf" className={classes["pdf"]} />
)}
{type?.toLowerCase() !== "pdf" && <img src={this.props.href} alt="File preview" className={classes["image"]} />}
</div>
</div>
);
}