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

✨ Preview file (#13)

Browse Source
This commit is contained in:
Maxime Lalo 2023-04-20 15:39:36 +02:00 committed by GitHub
parent c09a494abb
commit 22d680e6d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 61 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/front/Components/DesignSystem/FilePreview/classes.module.scss Normal file
View File

@ -0,0 +1,16 @@
.root {
height: inherit;
.file-container {
height: inherit;
.image {
width: 100%;
height: inherit;
object-fit: contain;
}
.pdf {
width: 100%;
height: inherit;
}
}
}

32
src/front/Components/DesignSystem/FilePreview/index.tsx Normal file
View File

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

13
src/front/Components/Layouts/DesignSystem/index.tsx
View File

@ -1,6 +1,7 @@
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import CheckBox from "@Front/Components/DesignSystem/CheckBox";
import DocumentNotary from "@Front/Components/DesignSystem/Document/DocumentNotary";
import FilePreview from "@Front/Components/DesignSystem/FilePreview";
import FolderContainer from "@Front/Components/DesignSystem/FolderContainer";
import FolderList from "@Front/Components/DesignSystem/FolderListContainer";
import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
@ -268,6 +269,18 @@ export default class DesignSystem extends BasePage<IProps, IState> {
<FolderList folders={folders} />
</div>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>Preview Image/Pdf</Typography>
</div>
<div className={classes["sub-section"]}>
<div style={{ height: "500px" }}>
<FilePreview href="https://minteed-stg-euwest3-s3.s3.eu-west-3.amazonaws.com/Qmf_Yb_Eh_X9st_F_Srq_Ve_Bj_Yb_Aj56xv_AV_Nj6_Wjypo_B4r5ubce_U_ae3303e7ab.pdf" />
</div>
<FilePreview href="https://minteed-stg-euwest3-s3.s3.eu-west-3.amazonaws.com/Qmf_Vgs_Vr_Mt_TDY_Xme8qhw8quiin_Co_Bo_FBA_Vc9k6_H2d1_Bh_UU_162d84281d.jpeg" />
</div>
</div>
</div>
</DefaultTemplate>
);