Upgrade react-dnd to hooks

[raineorshine]

The current usage of react-dnd is through a legacy Higher Order Component.

Upgrade react-dnd and switch to hooks.

[raineorshine]

Drag-and-drop related components

Toolbar

DragAndDropToolbarButton - Defines canDrag, beginDrag, endDrag, canDrop and drop for dragging or dropping a toolbar button when customizing the toolbar.

Screen.Recording.2024-05-15.at.3.58.06.PM.mov

Thoughts

DragAndDropThought - Defines canDrag, beginDrag, endDrag, canDrop and drop for dragging or dropping a thought. Used by the Thought component so that every thought can be dragged, and every thought can serve as a drop target (inserted before, i.e. as the previous sibling).

Screen.Recording.2024-05-15.at.3.22.30.PM.mov

DropEmpty - Allows a thought to be dropped as a subthought of a thought that is empty, i.e. a leaf.

Screen.Recording.2024-05-15.at.3.02.28.PM.mov

DropEnd - Allows a thought to be dropped at the end of a list of subthoughts.

Screen.Recording.2024-05-15.at.3.08.43.PM.mov

DropBefore - Allows a thought to be dropped after an ancestor when there is a steep "cliff". The number of DropBefore components that are rendered is equal to the height of the cliff, i.e. the difference in depths between two thoughts rendered next to each other. For example, if a/b/c/d is followed by e, then three DropBefore components will be rendered to allow a thought to be dropped after a, a/b, or a/b/c.

Screen.Recording.2024-05-15.at.3.29.05.PM.mov

Favorites (also contains a drop target) - Defines canDrag, beginDrag, endDrag, canDrop and drop for dragging or dropping a thought within the favorites panel.

Screen.Recording.2024-05-15.at.3.55.22.PM.mov

Quick drops

These drop targets slide out from the right side of the screen as soon as a drag begins, providing an alternative means of executing a command on a thought.

QuickDropIcon

Screen.Recording.2024-05-15.at.3.31.11.PM.mov

• DeleteDrop
• CopyOneDrop
• ExportDrop

Helper components

DragAndDropContext - Provide drag-and-drop context to the entire component hierarchy.

DragOnly - A container fragment that only renders its children when state.dragInProgress is true. Strictly performance related. Useful for short circuiting child components with expensive selectors.

DropHover - Renders a blue bar at the insertion point when a valid drop target is being hovered over.

DragAndDropSubthoughts - Defines canDrop and drop for dropping a thought as a subthought (i.e. child). Used by DropEmpty and DropEnd since they both involve dropping a thought as a subthought.