Merge branch 'fix/mobile' into 'main'

Fix/mobile

See merge request mycard/Neos!332

package-lock.json

@@ -20,10 +20,11 @@
         "idb-keyval": "^6.2.1",
         "lodash-es": "^4.17.21",
         "overlayscrollbars-react": "^0.5.1",
+        "rdndmb-html5-to-touch": "^8.0.3",
         "react": "^18.2.0",
         "react-animated-numbers": "^0.16.0",
         "react-dnd": "^16.0.1",
-        "react-dnd-html5-backend": "^16.0.1",
+        "react-dnd-multi-backend": "^8.0.3",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.15.0",
         "react-use-websocket": "^4.5.0",
@@ -2961,6 +2962,18 @@
         "redux": "^4.2.0"
       }
     },
+    "node_modules/dnd-multi-backend": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/dnd-multi-backend/-/dnd-multi-backend-8.0.3.tgz",
+      "integrity": "sha512-yFFARotr+OEJk787Fsj+V52pi6j7+Pt/CRp3IR2Ai3fnxA/z6J54T7+gxkXzXu4cvxTNE7NiBzzAaJ2f7JjFTw==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/LouisBrunner"
+      },
+      "peerDependencies": {
+        "dnd-core": "^16.0.1"
+      }
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -5805,6 +5818,20 @@
         "react-dom": "*"
       }
     },
+    "node_modules/rdndmb-html5-to-touch": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/rdndmb-html5-to-touch/-/rdndmb-html5-to-touch-8.0.3.tgz",
+      "integrity": "sha512-VfIbLjlL9NAnZzc2M5fGPCNkDyK12+ahgILGO5RjS7jkgUlxwB0c/XvxVQNfY/2ocg7isTY/G7tqxJk5fSTZAA==",
+      "dependencies": {
+        "dnd-multi-backend": "^8.0.3",
+        "react-dnd-html5-backend": "^16.0.1",
+        "react-dnd-touch-backend": "^16.0.1"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/LouisBrunner"
+      }
+    },
     "node_modules/react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -5866,6 +5893,47 @@
         "dnd-core": "^16.0.1"
       }
     },
+    "node_modules/react-dnd-multi-backend": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/react-dnd-multi-backend/-/react-dnd-multi-backend-8.0.3.tgz",
+      "integrity": "sha512-IwH7Mf6R05KIFohX0hHMTluoAvuUD8SO15KCD+9fY0nJ4nc1FGCMCSyMZw8R1XNStKp+JnNg3ZMtiaf5DebSUg==",
+      "dependencies": {
+        "dnd-multi-backend": "^8.0.3",
+        "react-dnd-preview": "^8.0.3"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/LouisBrunner"
+      },
+      "peerDependencies": {
+        "dnd-core": "^16.0.1",
+        "react": "^16.14.0 || ^17.0.2 || ^18.0.0",
+        "react-dnd": "^16.0.1",
+        "react-dom": "^16.14.0 || ^17.0.2 || ^18.0.0"
+      }
+    },
+    "node_modules/react-dnd-preview": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/react-dnd-preview/-/react-dnd-preview-8.0.3.tgz",
+      "integrity": "sha512-s69Ro47QYDthDhj73iQ0VioMCjtlZ1AytKBDkQaHKm5DTjA8D2bIaFKCBQd330QEW0SIzqLJrZGCSlIY2xraJg==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/LouisBrunner"
+      },
+      "peerDependencies": {
+        "react": "^16.14.0 || ^17.0.2 || ^18.0.0",
+        "react-dnd": "^16.0.1"
+      }
+    },
+    "node_modules/react-dnd-touch-backend": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/react-dnd-touch-backend/-/react-dnd-touch-backend-16.0.1.tgz",
+      "integrity": "sha512-NonoCABzzjyWGZuDxSG77dbgMZ2Wad7eQiCd/ECtsR2/NBLTjGksPUx9UPezZ1nQ/L7iD130Tz3RUshL/ClKLA==",
+      "dependencies": {
+        "@react-dnd/invariant": "^4.0.1",
+        "dnd-core": "^16.0.1"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -9039,6 +9107,12 @@
         "redux": "^4.2.0"
       }
     },
+    "dnd-multi-backend": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/dnd-multi-backend/-/dnd-multi-backend-8.0.3.tgz",
+      "integrity": "sha512-yFFARotr+OEJk787Fsj+V52pi6j7+Pt/CRp3IR2Ai3fnxA/z6J54T7+gxkXzXu4cvxTNE7NiBzzAaJ2f7JjFTw==",
+      "requires": {}
+    },
     "doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -11031,6 +11105,16 @@
         "rc-util": "^5.15.0"
       }
     },
+    "rdndmb-html5-to-touch": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/rdndmb-html5-to-touch/-/rdndmb-html5-to-touch-8.0.3.tgz",
+      "integrity": "sha512-VfIbLjlL9NAnZzc2M5fGPCNkDyK12+ahgILGO5RjS7jkgUlxwB0c/XvxVQNfY/2ocg7isTY/G7tqxJk5fSTZAA==",
+      "requires": {
+        "dnd-multi-backend": "^8.0.3",
+        "react-dnd-html5-backend": "^16.0.1",
+        "react-dnd-touch-backend": "^16.0.1"
+      }
+    },
     "react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -11068,6 +11152,30 @@
         "dnd-core": "^16.0.1"
       }
     },
+    "react-dnd-multi-backend": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/react-dnd-multi-backend/-/react-dnd-multi-backend-8.0.3.tgz",
+      "integrity": "sha512-IwH7Mf6R05KIFohX0hHMTluoAvuUD8SO15KCD+9fY0nJ4nc1FGCMCSyMZw8R1XNStKp+JnNg3ZMtiaf5DebSUg==",
+      "requires": {
+        "dnd-multi-backend": "^8.0.3",
+        "react-dnd-preview": "^8.0.3"
+      }
+    },
+    "react-dnd-preview": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/react-dnd-preview/-/react-dnd-preview-8.0.3.tgz",
+      "integrity": "sha512-s69Ro47QYDthDhj73iQ0VioMCjtlZ1AytKBDkQaHKm5DTjA8D2bIaFKCBQd330QEW0SIzqLJrZGCSlIY2xraJg==",
+      "requires": {}
+    },
+    "react-dnd-touch-backend": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/react-dnd-touch-backend/-/react-dnd-touch-backend-16.0.1.tgz",
+      "integrity": "sha512-NonoCABzzjyWGZuDxSG77dbgMZ2Wad7eQiCd/ECtsR2/NBLTjGksPUx9UPezZ1nQ/L7iD130Tz3RUshL/ClKLA==",
+      "requires": {
+        "@react-dnd/invariant": "^4.0.1",
+        "dnd-core": "^16.0.1"
+      }
+    },
     "react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",

package.json

@@ -15,10 +15,11 @@
     "idb-keyval": "^6.2.1",
     "lodash-es": "^4.17.21",
     "overlayscrollbars-react": "^0.5.1",
+    "rdndmb-html5-to-touch": "^8.0.3",
     "react": "^18.2.0",
     "react-animated-numbers": "^0.16.0",
     "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1",
+    "react-dnd-multi-backend": "^8.0.3",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.15.0",
     "react-use-websocket": "^4.5.0",

src/ui/BuildDeck/index.tsx

@@ -21,9 +21,10 @@ import {
 } from "antd";
 import { isEqual } from "lodash-es";
 import { type OverlayScrollbarsComponentRef } from "overlayscrollbars-react";
+import { HTML5toTouch } from "rdndmb-html5-to-touch";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
-import { DndProvider, useDrop } from "react-dnd";
-import { HTML5Backend } from "react-dnd-html5-backend";
+import { useDrop } from "react-dnd";
+import { DndProvider } from "react-dnd-multi-backend";
 import { LoaderFunction } from "react-router-dom";
 import { proxy, useSnapshot } from "valtio";
 import { subscribeKey } from "valtio/utils";
@@ -117,7 +118,7 @@ export const Component: React.FC = () => {
   };
 
   return (
-    <DndProvider backend={HTML5Backend}>
+    <DndProvider options={HTML5toTouch}>
       <Background />
       <div className={styles.layout} style={{ width: "100%" }}>
         <div className={styles.sider}>

src/ui/Side/index.tsx

 import { CheckOutlined, UndoOutlined } from "@ant-design/icons";
 import { App, Button, Space } from "antd";
+import { HTML5toTouch } from "rdndmb-html5-to-touch";
 import React, { useEffect, useState } from "react";
-import { DndProvider } from "react-dnd";
-import { HTML5Backend } from "react-dnd-html5-backend";
+import { DndProvider } from "react-dnd-multi-backend";
 import { useNavigate } from "react-router-dom";
 import { useSnapshot } from "valtio";
 
@@ -80,7 +80,7 @@ export const Component: React.FC = () => {
   }, [errorMsg]);
 
   return (
-    <DndProvider backend={HTML5Backend}>
+    <DndProvider options={HTML5toTouch}>
       <Background />
       <div className={styles.container}>
         <div className={styles.sider}>