2024-07-02 14:52:36 +02:00

181 lines
5.1 KiB
TypeScript

import React from "react";
import classes from "./classes.module.scss";
import DepositDocumentIcon from "@Assets/Icons/deposit-document.svg";
import PlusIcon from "@Assets/Icons/plus.svg";
import CrossIcon from "@Assets/Icons/cross.svg";
import DocumentCheckIcon from "@Assets/Icons/document-check.svg";
import Image from "next/image";
import Button, { EButtonVariant } from "../Button";
import Typography, { ITypo, ITypoColor } from "../Typography";
type IProps = {
onChange: (documentList: File[]) => void;
};
interface IState {
documents: File[];
errorMessage: string;
}
type fileAccepted = {
extension: string;
size: number;
};
const filesAccepted: { [key: string]: fileAccepted } = {
"application/pdf": {
extension: "pdf",
size: 41943040,
},
"image/jpeg": {
extension: "jpeg",
size: 41943040,
},
"image/png": {
extension: "png",
size: 41943040,
},
"image/jpg": {
extension: "jpg",
size: 41943040,
},
};
export default class DepositRib extends React.Component<IProps, IState> {
fileInput: HTMLInputElement | null = null;
constructor(props: IProps) {
super(props);
this.state = {
documents: [],
errorMessage: "",
};
}
handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
e.preventDefault();
const file = e.dataTransfer.files[0];
this.handleFile(file!);
};
handleFile = (file: File) => {
if (!file) return;
if (file.type === "application/pdf" || file.type === "image/jpeg" || file.type === "image/png") {
this.setState({
documents: [file],
errorMessage: "",
});
this.props.onChange([file]);
} else {
this.setState({ errorMessage: "Only PDF, JPEG, and PNG files are allowed." });
}
};
handleRemove = () => {
const updatedDocuments = [...this.state.documents];
updatedDocuments.splice(0, 1);
this.setState({ documents: updatedDocuments });
this.props.onChange(updatedDocuments);
};
// handleValidate = async () => {
// // Send documents to the backend for validation
// if (this.state.documents.length === 0) return;
// const formData = new FormData();
// formData.append("file", this.state.documents[0]!, this.state.documents[0]!.name);
// const sentFile = await Bucket.getInstance().post(formData);
// // Reset documents state
// this.setState({ documents: [] });
// };
// handleCancel = () => {
// // Reset documents state
// this.setState({ documents: [] });
// };
handleAddFile = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files && e.target.files[0];
if (file) {
this.handleFile(file);
}
};
private shortName(name: string): string {
const maxLength = 20;
if (name.length > maxLength) {
return name.substring(0, maxLength / 2) + "..." + name.substring(name.length - maxLength / 2, name.length);
}
return name;
}
public override render(): JSX.Element {
return (
<div className={classes["container"]}>
<div className={classes["root"]} onDragOver={(e) => e.preventDefault()} onDrop={(e) => this.handleDrop(e)}>
<input
type="file"
accept={Object.keys(filesAccepted).join(",")}
onChange={this.handleAddFile}
style={{ display: "none" }}
ref={(input) => (this.fileInput = input)}
/>
<div className={classes["top-container"]}>
<div className={classes["left"]}>
<Image src={DepositDocumentIcon} alt="Deposit document" />
</div>
<div className={classes["separator"]} />
<div className={classes["right"]}>
<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
<div>Déposer un RIB</div>
</Typography>
<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.TEXT_SM_REGULAR}>
Sélectionnez des documents .jpg, .pdf ou .png
</Typography>
</div>
</div>
<div className={classes["documents-container"]}>
{this.state.documents.map((file) => {
return (
<div className={classes["file-container"]} key="0">
<div className={classes["left-part"]}>
<Image src={DocumentCheckIcon} alt="Document check" />
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500} title={file.name}>
{this.shortName(file.name)}
</Typography>
</div>
<Image
src={CrossIcon}
alt="Cross icon"
className={classes["cross"]}
onClick={() => this.handleRemove()}
/>
</div>
);
})}
</div>
<div className={classes["bottom-container"]}>
<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={() => this.fileInput!.click()}>
<Typography
typo={ITypo.TEXT_MD_SEMIBOLD}
color={ITypoColor.COLOR_SECONDARY_500}
className={classes["add-document"]}>
Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
</Typography>
</Button>
</div>
{/* <button onClick={this.handleValidate}>Enregistrer</button>
<button onClick={this.handleCancel}>Annuler</button> */}
</div>
{this.state.errorMessage && <div style={{ color: "red" }}>{this.state.errorMessage}</div>}
</div>
);
}
}