diff --git a/package-lock.json b/package-lock.json index 7866f9b..700b474 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "react-csv": "^2.2.2", "react-dnd": "^16.0.1", "react-dnd-html5-backend": "^16.0.1", + "react-dnd-touch-backend": "^16.0.1", "react-dom": "^17.0.2", "react-is": "^17.0.2", "react-markdown": "^8.0.2", @@ -11128,6 +11129,15 @@ "dnd-core": "^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": "17.0.2", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", @@ -22682,6 +22692,15 @@ "dnd-core": "^16.0.1" } }, + "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": "17.0.2", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", diff --git a/package.json b/package.json index 72a77fa..fa1fefb 100644 --- a/package.json +++ b/package.json @@ -79,6 +79,7 @@ "react-csv": "^2.2.2", "react-dnd": "^16.0.1", "react-dnd-html5-backend": "^16.0.1", + "react-dnd-touch-backend": "^16.0.1", "react-dom": "^17.0.2", "react-is": "^17.0.2", "react-markdown": "^8.0.2", diff --git a/src/components/Widgets/SignupQuestionsWidget/QuestionList.tsx b/src/components/Widgets/SignupQuestionsWidget/QuestionList.tsx index 8d2c086..1c19fc6 100644 --- a/src/components/Widgets/SignupQuestionsWidget/QuestionList.tsx +++ b/src/components/Widgets/SignupQuestionsWidget/QuestionList.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode, useRef } from "react"; +import React, { useRef } from "react"; import { useDrag, useDrop } from "react-dnd"; import styled from "styled-components"; import colors from "@theme/colors"; diff --git a/src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx b/src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx index 3619041..42b4f79 100644 --- a/src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx +++ b/src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx @@ -1,6 +1,7 @@ import React from "react"; import { DndProvider } from "react-dnd"; import { HTML5Backend } from "react-dnd-html5-backend"; +import { TouchBackend } from "react-dnd-touch-backend"; import styled from "styled-components"; import shortid from "shortid"; import colors from "@theme/colors"; @@ -62,9 +63,20 @@ const SignupQuestionsWidget: React.FC = ({ value, on const questions: SignupFormQuestion[] = JSON.parse(value); + // simple way to check whether the device support touch (it doesn't check all fallback, it supports only modern browsers) + const isTouchDevice = () => { + if ("ontouchstart" in window) { + return true; + } + return false; + }; + + // Assigning backend based on touch support on the device + const backendForDND = isTouchDevice() ? TouchBackend : HTML5Backend; + return ( - +