Merge pull request #14 from CodeDead/feature/draganddrop

Feature/draganddrop

Author: CodeDead

package.json

@@ -80,6 +80,6 @@
     "concurrently": "^5.0.2",
     "electron": "^7.1.9",
     "electron-builder": "^22.2.0",
-    "wait-on": "^3.3.0"
+    "wait-on": "^4.0.0"
   }
 }

src/components/App/index.js

@@ -11,10 +11,12 @@ import File from "../../routes/File";
 import Text from "../../routes/Text";
 import Drawerbar from "../Drawerbar";
 import {CssBaseline} from "@material-ui/core";
+import DropZone from "../DropZone";
 
 function App() {
 
     let themeIndex = useSelector(state => state.MainReducer.themeIndex);
+
     let themeType = "light";
     if (themeIndex === 8) {
         themeType = "dark";
@@ -32,7 +34,7 @@ function App() {
     return (
         <ThemeProvider theme={theme}>
             <BrowserRouter>
-                <div className="App">
+                <DropZone>
                     <Topbar/>
                     <Drawerbar/>
                     <CssBaseline/>
@@ -53,7 +55,7 @@ function App() {
                             <Home/>
                         </Route>
                     </Switch>
-                </div>
+                </DropZone>
             </BrowserRouter>
         </ThemeProvider>
     );

src/components/DropZone/index.js

@@ -0,0 +1,41 @@
+import React from "react";
+import {useHistory} from "react-router-dom";
+import {useDispatch, useSelector} from "react-redux";
+
+const DropZone = ({children}) => {
+
+    const history = useHistory();
+    const enabled = useSelector(state => state.MainReducer.canDragDrop);
+    const dispatch = useDispatch();
+
+    /**
+     * Event that is fired when one or more files are dropped
+     * @param event The event that contains the drop details
+     */
+    const onDrop = (event) => {
+        event.preventDefault();
+        if (!enabled) return;
+
+        dispatch({type: 'SET_CURRENT_FILE', payload: event.dataTransfer.files[0]});
+        history.push("/file");
+    };
+
+    /**
+     * Event that is fired when a drag over event is detected
+     * @param event The event that contains the drag over details
+     */
+    const onDragOver = (event) => {
+        event.preventDefault();
+    };
+
+    return (
+        <div
+            onDragOver={onDragOver}
+            onDrop={onDrop}>
+            {children}
+        </div>
+    );
+
+};
+
+export default DropZone;

src/languages/de_DE.js

@@ -12,6 +12,7 @@ const de_DE = () => {
         theme: "Thema",
         general: "Allgemeines",
         autoUpdate: "Automatisch nach Aktualisierungen suchen",
+        dragAndDrop: "Aktivieren Sie Drag & Drop",
         select: "Wählen",
         default: "Standard",
         defaultThemeDescription: "Das Standarddesign.",

src/languages/en_US.js

@@ -12,6 +12,7 @@ const en_US = () => {
         theme: "Theme",
         general: "General",
         autoUpdate: "Automatically check for updates",
+        dragAndDrop: "Enable drag-and-drop",
         select: "Select",
         default: "Default",
         defaultThemeDescription: "The default theme.",

src/languages/es_ES.js

@@ -12,6 +12,7 @@ const es_ES = () => {
         theme: "Tema",
         general: "General",
         autoUpdate: "Buscar actualizaciones automáticamente",
+        dragAndDrop: "Habilitar arrastrar y soltar",
         select: "Seleccione",
         default: "Defecto",
         defaultThemeDescription: "El tema por defecto.",

src/languages/fr_FR.js

@@ -12,6 +12,7 @@ const fr_FR = () => {
         theme: "Thème",
         general: "Général",
         autoUpdate: "Vérifier automatiquement les mises à jour",
+        dragAndDrop: "Activer le glisser-déposer",
         select: "Sélectionner",
         default: "Défaut",
         defaultThemeDescription: "Le thème par défaut.",

src/languages/it_IT.js

@@ -12,6 +12,7 @@ const it_IT = () => {
         theme: "Tema",
         general: "Generale",
         autoUpdate: "Controlla automaticamente gli aggiornamenti",
+        dragAndDrop: "Abilita il trascinamento della selezione",
         select: "Selezionare",
         default: "Predefinito",
         defaultThemeDescription: "Il tema predefinito",

src/languages/jp_JP.js

@@ -12,6 +12,7 @@ const jp_JP = () => {
         theme: "テーマ",
         general: "全般",
         autoUpdate: "更新を自動的に確認する",
+        dragAndDrop: "ドラッグアンドドロップを有効にする",
         select: "選択してください",
         default: "デフォルト",
         defaultThemeDescription: "デフォルトのテーマ。",

src/languages/nl_NL.js

@@ -12,6 +12,7 @@ const nl_NL = () => {
         theme: "Thema",
         general: "Algemeen",
         autoUpdate: "Zoek automatisch naar updates",
+        dragAndDrop: "Slepen en neerzetten inschakelen",
         select: "Selecteren",
         default: "Standaard",
         defaultThemeDescription: "Het standaard thema.",