feat: listen to mobile dnd events (#17)

lukasbach · Jan 31, 2022 · f794e53 · f794e53
1 parent dc8e4eb
commit f794e53
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/packages/core/src/controlledEnvironment/DragAndDropProvider.tsx b/packages/core/src/controlledEnvironment/DragAndDropProvider.tsx
@@ -252,7 +252,11 @@ export const DragAndDropProvider: React.FC = props => {
 
   useEffect(() => {
     window.addEventListener('dragend', onDropHandler);
-    return () => window.removeEventListener('dragend', onDropHandler);
+    window.addEventListener('touchend', onDropHandler);
+    return () => {
+      window.removeEventListener('dragend', onDropHandler);
+      window.removeEventListener('touchend', onDropHandler);
+    };
   }, [onDropHandler]);
 
   return <DragAndDropContext.Provider value={dnd}>{props.children}</DragAndDropContext.Provider>;

diff --git a/packages/core/src/tree/TreeManager.tsx b/packages/core/src/tree/TreeManager.tsx
@@ -52,7 +52,9 @@ export const TreeManager = (): JSX.Element => {
   const containerProps: HTMLProps<any> = {
     // onDragOver: createOnDragOverHandler(environment, containerRef, lastHoverCode, getLinearItems, rootItem, treeId),
     onDragOver: e => dnd.onDragOverTreeHandler(e as any, treeId, containerRef),
-    onMouseDown: () => dnd.abortProgrammaticDrag(),
+    onTouchMove: e => dnd.onDragOverTreeHandler(e as any, treeId, containerRef),
+    onMouseDown: dnd.abortProgrammaticDrag,
+    onTouchCancel: dnd.abortProgrammaticDrag,
     ref: containerRef,
     style: { position: 'relative' },
     role: 'tree',

diff --git a/packages/core/src/treeItem/useTreeItemRenderContext.ts b/packages/core/src/treeItem/useTreeItemRenderContext.ts
@@ -128,8 +128,11 @@ export const useTreeItemRenderContext = (item?: TreeItem) => {
       canDropOn,
     };
 
+    const interactiveProps = interactionManager.createInteractiveElementProps(item, treeId, actions, renderFlags);
+
     const interactiveElementProps: HTMLProps<HTMLElement> = {
-      ...interactionManager.createInteractiveElementProps(item, treeId, actions, renderFlags),
+      ...interactiveProps,
+      onTouchStart: interactiveProps.onDragStart,
       ...({
         ['data-rct-item-interactive']: true,
         ['data-rct-item-focus']: renderFlags.isFocused ? 'true' : 'false',