feat(create): touch support for dnd

package-lock.json

@@ -34,9 +34,10 @@
         "nostr-tools": "2.7.0",
         "pdf-lib": "^1.17.1",
         "pdfjs-dist": "^4.4.168",
+        "rdndmb-html5-to-touch": "^8.0.3",
         "react": "^18.2.0",
-        "react-dnd": "16.0.1",
+        "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-dropzone": "^14.2.3",
         "react-redux": "9.1.0",
@@ -3267,6 +3268,19 @@
         "@babel/runtime": "^7.9.2"
       }
     },
+    "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==",
+      "license": "MIT",
+      "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",
@@ -5687,6 +5701,21 @@
         }
       ]
     },
+    "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==",
+      "license": "MIT",
+      "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",
@@ -5702,6 +5731,7 @@
       "version": "16.0.1",
       "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz",
       "integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
+      "license": "MIT",
       "dependencies": {
         "@react-dnd/invariant": "^4.0.1",
         "@react-dnd/shallowequal": "^4.0.1",
@@ -5731,10 +5761,55 @@
       "version": "16.0.1",
       "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
       "integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
+      "license": "MIT",
       "dependencies": {
         "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==",
+      "license": "MIT",
+      "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==",
+      "license": "MIT",
+      "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==",
+      "license": "MIT",
+      "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",

package.json

@@ -44,9 +44,10 @@
     "nostr-tools": "2.7.0",
     "pdf-lib": "^1.17.1",
     "pdfjs-dist": "^4.4.168",
+    "rdndmb-html5-to-touch": "^8.0.3",
     "react": "^18.2.0",
-    "react-dnd": "16.0.1",
+    "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-dropzone": "^14.2.3",
     "react-redux": "9.1.0",

src/pages/create/index.tsx

@@ -4,8 +4,9 @@ import saveAs from 'file-saver'
 import JSZip from 'jszip'
 import { Event, kinds } from 'nostr-tools'
 import { useEffect, useRef, useState } from 'react'
-import { DndProvider, useDrag, useDrop } from 'react-dnd'
+import { useDrag, useDrop } from 'react-dnd'
-import { HTML5Backend } from 'react-dnd-html5-backend'
+import { DndProvider } from 'react-dnd-multi-backend'
+import { HTML5toTouch } from 'rdndmb-html5-to-touch'
 import { useSelector } from 'react-redux'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { toast } from 'react-toastify'
@@ -935,6 +936,7 @@ export const CreatePage = () => {
               <div className={styles.addCounterpart}>
                 <div className={styles.inputWrapper}>
                   <TextField
+                    fullWidth
                     placeholder="Add counterpart"
                     value={userInput}
                     onChange={(e) => setUserInput(e.target.value)}
@@ -1055,7 +1057,7 @@ const DisplayUser = ({
 }: DisplayUsersProps) => {
   return (
     <>
-      <DndProvider backend={HTML5Backend}>
+      <DndProvider options={HTML5toTouch}>
         {users
           .filter((user) => user.role === UserRole.signer)
           .map((user, index) => (
@@ -1187,7 +1189,7 @@ const SignerCounterpart = ({
     })
   })
 
-  const opacity = isDragging ? 0 : 1
+  const opacity = isDragging ? 0.2 : 1
   drag(drop(ref))
 
   return (