Drag and drop dans les dossiers

Author: Robinsstudio

src/ExplorerView.js

@@ -17,6 +17,7 @@ class ExplorerView extends Component {
 
 		this.createFolder = this.createFolder.bind(this);
 		this.copyFile = this.copyFile.bind(this);
+		this.dropFile = this.dropFile.bind(this);
 		this.pasteFile = this.pasteFile.bind(this);
 		this.handleContextMenu = this.handleContextMenu.bind(this);
 		this.hideContextMenu = this.hideContextMenu.bind(this);
@@ -42,6 +43,16 @@ class ExplorerView extends Component {
 		request('Paste', { _id: copiedFile, idParent: _id }).then(() => refresh());
 	}
 
+	dropFile(event, _id) {
+		const { refresh } = this.props;
+		['folder', 'question', 'qcm'].forEach(type => {
+			if (event.dataTransfer.types.includes(type)) {
+				const file = JSON.parse(event.dataTransfer.getData(type));
+				request('Move', { _id: file._id, idParent: _id }).then(() => refresh());
+			}
+		});
+	}
+
 	handleContextMenu(event, items = []) {
 		const { pageX, pageY, screenX, screenY } = event;
 		const x = screenX - window.screenX;
@@ -71,23 +82,14 @@ class ExplorerView extends Component {
 	}
 
 	buildFileItem(file) {
-		const {
-			handleContextMenu,
-			props: {
-				folder,
-				edit,
-				requestFolder,
-				refresh,
-				updateSessionView
-			}
-		} = this;
-
+		const { handleContextMenu, props: { folder, edit, requestFolder, refresh, updateSessionView } } = this;
 		return (
 			<File
 				folder={folder}
 				file={file}
 				edit={edit}
 				copyFile={this.copyFile}
+				dropFile={this.dropFile}
 				requestFolder={requestFolder}
 				refresh={refresh}
 				handleContextMenu={handleContextMenu}
@@ -110,13 +112,7 @@ class ExplorerView extends Component {
 	}
 
 	handleDrop(event, _id) {
-		const { refresh } = this.props;
-		['folder', 'question', 'qcm'].forEach(type => {
-			if (event.dataTransfer.types.includes(type)) {
-				const file = JSON.parse(event.dataTransfer.getData(type));
-				request('Move', { _id: file._id, idParent: _id }).then(() => refresh());
-			}
-		});
+		this.dropFile(event, _id);
 		event.target.classList.remove('dropZone');
 	}
 

src/File.js

@@ -6,7 +6,10 @@ import request from './request';
 class File extends Component {
 	constructor(props) {
 		super(props);
-		this.state = { renaming: false };
+		this.state = {
+			renaming: false,
+			dragging: false
+		};
 
 		this.open = this.open.bind(this);
 		this.rename = this.rename.bind(this);
@@ -15,6 +18,10 @@ class File extends Component {
 		this.stopRenaming = this.stopRenaming.bind(this);
 		this.handleContextMenu = this.handleContextMenu.bind(this);
 		this.handleDragStart = this.handleDragStart.bind(this);
+		this.handleDragEnd = this.handleDragEnd.bind(this);
+		this.handleDragOver = this.handleDragOver.bind(this);
+		this.handleDragLeave = this.handleDragLeave.bind(this);
+		this.handleDrop = this.handleDrop.bind(this);
 	}
 
 	open() {
@@ -102,12 +109,52 @@ class File extends Component {
 	handleDragStart(event) {
 		const { file } = this.props;
 		event.dataTransfer.setData(file.type, JSON.stringify(file));
+		this.setState({ dragging: true });
+	}
+
+	handleDragEnd() {
+		this.setState({ dragging: false });
+	}
+
+	handleDragOver(event) {
+		const { dragging } = this.state;
+		const element = event.target;
+		if (!dragging && element.classList.contains('folder')) {
+			element.classList.add('grow');
+		}
+		event.preventDefault();
+	}
+
+	handleDragLeave(event) {
+		const element = event.target;
+		element.classList.remove('grow');
+	}
+
+	handleDrop(event) {
+		const { props: { file: { _id }, dropFile }, state: { dragging } } = this;
+		const element = event.target;
+
+		if (!dragging && element.classList.contains('folder')) {
+			dropFile(event, _id);
+			element.classList.remove('grow');
+		}
 	}
 
 	render() {
 		const { props: { file: { type, name } }, state: { renaming } } = this;
+
 		return (
-			<div className={`file ${renaming ? 'renaming' : ''}`} onDoubleClick={this.open} onContextMenu={this.handleContextMenu} onDragStart={this.handleDragStart} draggable>
+			<div
+				className={`file ${renaming ? 'renaming' : ''}`}
+				onDoubleClick={this.open}
+				onContextMenu={this.handleContextMenu}
+				onDragStart={this.handleDragStart}
+				onDragEnd={this.handleDragEnd}
+				onDragOver={this.handleDragOver}
+				onDragLeave={this.handleDragLeave}
+				onDrop={this.handleDrop}
+				draggable
+			>
 				<div className={type}/>
 				<div className="fileName">
 					{(renaming) ? <AutoFocusInput value={name} onStopEditing={this.stopRenaming}/> : name}

src/style/editor.css

@@ -13,9 +13,4 @@
 
 .stretch {
 	flex-grow: 1;
-}
-
-.dropZone {
-	border: 1px blue dotted;
-	background-color: rgba(98, 156, 201, .5);
 }

src/style/explorer.css

@@ -69,6 +69,12 @@
 .folder, .question, .qcm {
 	width: 100px;
 	height: 100px;
+	transition: transform .2s ease-in-out;
+}
+
+.folder.grow {
+	transform: scale(1.2);
+	transition: transform .2s ease-in-out;
 }
 
 .list .folder, .list .question, .list .qcm {

src/style/global.css

@@ -44,4 +44,9 @@
 	flex: 1 0;
 	padding: 5px;
 	overflow: auto;
+}
+
+.dropZone {
+	border: 1px blue dotted;
+	background-color: rgba(98, 156, 201, .5);
 }