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