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

✨ On change working

Browse Source
This commit is contained in:
Maxime Lalo 2023-05-02 09:45:41 +02:00
parent 268fdab81d
commit cece23448d
2 changed files with 22 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/front/Components/DesignSystem/DepositDocument/classes.module.scss
View File

@ -3,6 +3,7 @@
background-color: white; background-color: white;
border: 1px dashed #e7e7e7; border: 1px dashed #e7e7e7;
height: fit-content;
&[data-drag-over="true"] { &[data-drag-over="true"] {
border: 1px dashed grey; border: 1px dashed grey;
} }
@ -48,6 +49,10 @@
align-items: center; align-items: center;
gap: 8px; gap: 8px;
} }
.cross{
cursor: pointer;
}
} }
} }

32
src/front/Components/DesignSystem/DepositDocument/index.tsx
View File

@ -15,6 +15,7 @@ type IProps = {
title: string; title: string;
dateAsked: Date; dateAsked: Date;
defaultDocuments?: Document[]; defaultDocuments?: Document[];
onChange?: (files: File[]) => void;
}; };
type IFile = { type IFile = {
@ -42,9 +43,9 @@ export default class DepositDocument extends React.Component<IProps, IState> {
this.addDocument = this.addDocument.bind(this); this.addDocument = this.addDocument.bind(this);
this.onFileChange = this.onFileChange.bind(this); this.onFileChange = this.onFileChange.bind(this);
this.removeFile = this.removeFile.bind(this); this.removeFile = this.removeFile.bind(this);
this.onDragOver = this.onDragOver.bind(this); this.onDragOver = this.onDragOver.bind(this);
this.onDragDrop = this.onDragDrop.bind(this); this.onDragDrop = this.onDragDrop.bind(this);
this.onDragLeave = this.onDragLeave.bind(this); this.onDragLeave = this.onDragLeave.bind(this);
} }
public override render(): JSX.Element { 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) { if (!this.state.isDragOver) {
this.setState({ this.setState({
isDragOver: true, isDragOver: true,
@ -124,8 +125,14 @@ export default class DepositDocument extends React.Component<IProps, IState> {
private async onDragDrop(event: React.DragEvent<HTMLDivElement>) { private async onDragDrop(event: React.DragEvent<HTMLDivElement>) {
event.preventDefault(); event.preventDefault();
this.setState({
isDragOver: false,
});
const file = event.dataTransfer.files[0]; const file = event.dataTransfer.files[0];
if (!file) return; if (file) this.addFile(file);
}
private addFile(file: File) {
this.setState({ this.setState({
files: [ files: [
...this.state.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) { private removeFile(e: any) {
@ -144,6 +153,8 @@ export default class DepositDocument extends React.Component<IProps, IState> {
this.setState({ this.setState({
files: this.state.files.filter((file) => file.index !== parseInt(indexToRemove)), 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() { private async onFileChange() {
@ -152,16 +163,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
if (!files) return; if (!files) return;
const file = files[0]; const file = files[0];
if (!file) return; if (file) this.addFile(file);
this.setState({
files: [
...this.state.files,
{
index: this.index++,
file: file,
},
],
});
} }
private addDocument() { private addDocument() {