Support for mobile/touchevents

I came across this library yesterday when i was looking for a viable DnD tree solution. The features that this library provides handles all my usecases, except for the support for touchevents/mobile. I am wondering if you are considering supporting this feature sometime.

Personally, for my project, mobile/touch support is a critical requirement. So to test the viability, i went ahead and forked the library and tried some rudimentary fixes. react-dnd-touch-backend was required as a dependency. Please see my effort by installing:

"dependencies": {
    ....
    "@minoru/react-dnd-treeview": "https://github.com/arunmenon1975/react-dnd-treeview#touchsupport", 
    ....
    }

and adding the following 2 props - touchSupport and touchSupportOptions:

<Tree
  tree={treeData}
  touchSupport={true}
  touchSupportOptions={{
      "enableMouseEvents" : true
  }}
  rootId={0}
  onDrop={handleDrop}
  render={(node, {depth, isOpen, onToggle}) => (
    <div style={{marginLeft: depth * 10}}>
      {node.droppable && (
        <span onClick={onToggle}>
          {isOpen ? "[-]" : "[+]"}
        </span>
      )}
      {node.text.en}
    </div>
  )}
/>

It works on touch-enabled environments but there are issues, the biggest being that the Preview/Ghost component doesn’t appear. I think integrating the recommendations at the react-dnd-touch-backend docs with this library can be slightly complex. Another option is to use react-dnd-preview from here which seems to automatically create the preview for the environment the user is in. But not sure if that would mean requiring a peer dependency or if it will need to be packaged along. This may also mean that dragPreviewRender may change or perhaps not be required.

Note: Adding react-dnd-touch-backend created a few typescript issues because of the version mismatches and thus i had to upgrade React/React-DOM/react-dnd-html5-backend/react-dnd to the latest versions. For some reason i also had to add @types/hoist-non-react-statics to the dev dependencies.

[arunmenon1975]

I just tried it now with sample data and everything works fine. The Tree is now touch-ready on a mobile as well. The fact that the dragPreviewRender prop is made available allows for customisation of the preview, a very useful option indeed.

Thanks for adding this feature. I will need to make some mods before i attempt it on my own data sources.

Closing the issue/feature-request since it is now fully working.

[minop1205]

Version 1.4.1 has been published today. (v1.4.0 is missing because of a mistake in fixing CHANGELOG.)

It adds support for touch devices by default, so no additional configuration is required.

You can try it out if you like.