From cece23448d87065ff801969208e62ddebb616014 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Tue, 2 May 2023 09:45:41 +0200
Subject: [PATCH] :sparkles: On change working

---
 .../DepositDocument/classes.module.scss       |  5 +++
 .../DesignSystem/DepositDocument/index.tsx    | 32 ++++++++++---------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/front/Components/DesignSystem/DepositDocument/classes.module.scss b/src/front/Components/DesignSystem/DepositDocument/classes.module.scss
index 89862f0d..3ef6b854 100644
--- a/src/front/Components/DesignSystem/DepositDocument/classes.module.scss
+++ b/src/front/Components/DesignSystem/DepositDocument/classes.module.scss
@@ -3,6 +3,7 @@
 	background-color: white;
 	border: 1px dashed #e7e7e7;
     
+    height: fit-content;
     &[data-drag-over="true"] {
         border: 1px dashed grey;
     }
@@ -48,6 +49,10 @@
 				align-items: center;
 				gap: 8px;
 			}
+
+			.cross{
+				cursor: pointer;
+			}
 		}
 	}
 
diff --git a/src/front/Components/DesignSystem/DepositDocument/index.tsx b/src/front/Components/DesignSystem/DepositDocument/index.tsx
index 90550699..a9632b22 100644
--- a/src/front/Components/DesignSystem/DepositDocument/index.tsx
+++ b/src/front/Components/DesignSystem/DepositDocument/index.tsx
@@ -15,6 +15,7 @@ type IProps = {
 	title: string;
 	dateAsked: Date;
 	defaultDocuments?: Document[];
+	onChange?: (files: File[]) => void;
 };
 
 type IFile = {
@@ -42,9 +43,9 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 		this.addDocument = this.addDocument.bind(this);
 		this.onFileChange = this.onFileChange.bind(this);
 		this.removeFile = this.removeFile.bind(this);
-        this.onDragOver = this.onDragOver.bind(this);
-        this.onDragDrop = this.onDragDrop.bind(this);
-        this.onDragLeave = this.onDragLeave.bind(this);
+		this.onDragOver = this.onDragOver.bind(this);
+		this.onDragDrop = this.onDragDrop.bind(this);
+		this.onDragLeave = this.onDragLeave.bind(this);
 	}
 
 	public override render(): JSX.Element {
@@ -106,7 +107,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 		);
 	}
 
-    private onDragOver(event: React.DragEvent<HTMLDivElement>) {
+	private onDragOver(event: React.DragEvent<HTMLDivElement>) {
 		if (!this.state.isDragOver) {
 			this.setState({
 				isDragOver: true,
@@ -124,8 +125,14 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 
 	private async onDragDrop(event: React.DragEvent<HTMLDivElement>) {
 		event.preventDefault();
+		this.setState({
+			isDragOver: false,
+		});
 		const file = event.dataTransfer.files[0];
-		if (!file) return;
+		if (file) this.addFile(file);
+	}
+
+	private addFile(file: File) {
 		this.setState({
 			files: [
 				...this.state.files,
@@ -135,6 +142,8 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 				},
 			],
 		});
+
+        if (this.props.onChange) this.props.onChange(this.state.files.map((file) => file.file));
 	}
 
 	private removeFile(e: any) {
@@ -144,6 +153,8 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 		this.setState({
 			files: this.state.files.filter((file) => file.index !== parseInt(indexToRemove)),
 		});
+
+        if (this.props.onChange) this.props.onChange(this.state.files.map((file) => file.file));
 	}
 
 	private async onFileChange() {
@@ -152,16 +163,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 		if (!files) return;
 		const file = files[0];
 
-		if (!file) return;
-		this.setState({
-			files: [
-				...this.state.files,
-				{
-					index: this.index++,
-					file: file,
-				},
-			],
-		});
+		if (file) this.addFile(file);
 	}
 
 	private addDocument() {