diff --git a/packages/desktop-client/package.json b/packages/desktop-client/package.json index fea3f023a8a3812f1266c5b3574f8a46814d001f..e85fc777073b969e30d8bf16813990e6daa5b90f 100644 --- a/packages/desktop-client/package.json +++ b/packages/desktop-client/package.json @@ -41,6 +41,8 @@ "react-app-rewired": "^2.2.1", "react-dnd": "^16.0.1", "react-dnd-html5-backend": "^16.0.1", + "react-dnd-multi-backend": "^8.0.1", + "react-dnd-touch-backend": "^16.0.1", "react-dom": "18.2.0", "react-merge-refs": "^1.1.0", "react-modal": "3.16.1", diff --git a/packages/desktop-client/src/components/FinancesApp.js b/packages/desktop-client/src/components/FinancesApp.js index 5065e232bc5e24724dd9281abde601426264d288..3de4d8aed4a4168a10c26d0562c5850791608299 100644 --- a/packages/desktop-client/src/components/FinancesApp.js +++ b/packages/desktop-client/src/components/FinancesApp.js @@ -1,6 +1,11 @@ import React, { useEffect, useMemo } from 'react'; -import { DndProvider } from 'react-dnd'; -import { HTML5Backend as Backend } from 'react-dnd-html5-backend'; +import { HTML5Backend } from 'react-dnd-html5-backend'; +import { + DndProvider, + HTML5DragTransition, + TouchTransition, +} from 'react-dnd-multi-backend'; +import { TouchBackend } from 'react-dnd-touch-backend'; import { connect } from 'react-redux'; import { Route, @@ -290,6 +295,23 @@ function FinancesApp(props) { ); } +const HTML5toTouch = { + backends: [ + { + id: 'touch', + backend: TouchBackend, + options: { delay: 300 }, + preview: true, + transition: TouchTransition, + }, + { + id: 'html5', + backend: HTML5Backend, + transition: HTML5DragTransition, + }, + ], +}; + function FinancesAppWithContext(props) { let app = useMemo(() => <FinancesApp {...props} />, [props]); @@ -300,7 +322,7 @@ function FinancesAppWithContext(props) { <BudgetMonthCountProvider> <PayeesProvider> <AccountsProvider> - <DndProvider backend={Backend}>{app}</DndProvider> + <DndProvider options={HTML5toTouch}>{app}</DndProvider> </AccountsProvider> </PayeesProvider> </BudgetMonthCountProvider> diff --git a/upcoming-release-notes/1204.md b/upcoming-release-notes/1204.md new file mode 100644 index 0000000000000000000000000000000000000000..d963752b1e3ee6f90ecd457f10259248893fd640 --- /dev/null +++ b/upcoming-release-notes/1204.md @@ -0,0 +1,6 @@ +--- +category: Bugfix +authors: [joel-jeremy] +--- + +Fix drag and drop on touch devices diff --git a/yarn.lock b/yarn.lock index e6c4176bbf1ba0a6f04569bed01e0624f0b80eaf..afd21967cd73272d51222aadcc51b9b5260c25de 100644 --- a/yarn.lock +++ b/yarn.lock @@ -109,6 +109,8 @@ __metadata: react-app-rewired: ^2.2.1 react-dnd: ^16.0.1 react-dnd-html5-backend: ^16.0.1 + react-dnd-multi-backend: ^8.0.1 + react-dnd-touch-backend: ^16.0.1 react-dom: 18.2.0 react-merge-refs: ^1.1.0 react-modal: 3.16.1 @@ -7775,6 +7777,13 @@ __metadata: languageName: node linkType: hard +"dnd-multi-backend@npm:^8.0.1": + version: 8.0.1 + resolution: "dnd-multi-backend@npm:8.0.1" + checksum: 674ed8c90a81ac82d0daffe75580f05e06904b5873112f91f8f5d4137a7a6a62d3477b78fb5abd5f36ad8a19e5ff4233a9d7e5f81df08ec468d5ae5ab08defc9 + languageName: node + linkType: hard + "dns-equal@npm:^1.0.0": version: 1.0.0 resolution: "dns-equal@npm:1.0.0" @@ -15189,6 +15198,39 @@ __metadata: languageName: node linkType: hard +"react-dnd-multi-backend@npm:^8.0.1": + version: 8.0.1 + resolution: "react-dnd-multi-backend@npm:8.0.1" + dependencies: + dnd-multi-backend: ^8.0.1 + react-dnd-preview: ^8.0.1 + peerDependencies: + react: ^16.14.0 || ^17.0.2 || ^18.0.0 + react-dom: ^16.14.0 || ^17.0.2 || ^18.0.0 + checksum: 9ff966e87b383dcdba857592295071cd0177187744d0558ab79a454ac8482f360d835ad7b9c5c78603d1476a93933911bd4746ae7898347b8497cf17bb09730b + languageName: node + linkType: hard + +"react-dnd-preview@npm:^8.0.1": + version: 8.0.1 + resolution: "react-dnd-preview@npm:8.0.1" + peerDependencies: + react: ^16.14.0 || ^17.0.2 || ^18.0.0 + react-dnd: ^16.0.1 + checksum: 9a2138ff283953487fd7142382b3a2a286fdaabf5079588863214f35b6a84d32b62a6f5219592e2e21bca9718c80f22e13a89aef4b196fa35e43334328488404 + languageName: node + linkType: hard + +"react-dnd-touch-backend@npm:^16.0.1": + version: 16.0.1 + resolution: "react-dnd-touch-backend@npm:16.0.1" + dependencies: + "@react-dnd/invariant": ^4.0.1 + dnd-core: ^16.0.1 + checksum: 5362c5f4266e3655d02c716f341dc55c61fae53e12eb3b239245bafb7a3f3cdb953e27e187e8dcb9d86c01bc738853d764d7c85b87104a49a8a8f1ecc4d35755 + languageName: node + linkType: hard + "react-dnd@npm:^16.0.1": version: 16.0.1 resolution: "react-dnd@npm:16.0.1"