Skip to content

Commit 3c8b16e

Browse files
author
Madeline Trotter
authored
Update to react-dnd 11 (#12)
1 parent 19fac5b commit 3c8b16e

File tree

13 files changed

+360
-649
lines changed

13 files changed

+360
-649
lines changed

‎bower.json‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,22 @@
11
{
22
"name": "purescript-react-dnd-basic",
3-
"ignore": ["**/.*", "node_modules", "bower_components", "output"],
3+
"ignore": [
4+
"**/.*",
5+
"node_modules",
6+
"bower_components",
7+
"output"
8+
],
49
"license": "Apache-2.0",
510
"repository": {
611
"type": "git",
712
"url": "https://github.com/lumihq/purescript-react-dnd-basic.git"
813
},
914
"dependencies": {
10-
"purescript-prelude": "^4.1.0",
11-
"purescript-react-basic": "^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0",
12-
"purescript-nullable": "^4.0.0",
13-
"purescript-promises": "^3.0.0"
15+
"purescript-prelude": "^4.1.1",
16+
"purescript-nullable": "^4.1.1",
17+
"purescript-promises": "^3.1.1",
18+
"purescript-react-basic-dom": "lumihq/purescript-react-basic-dom#^2.0.0",
19+
"purescript-react-basic-hooks": "^6.0.0"
1420
},
1521
"devDependencies": {
1622
"purescript-psci-support": "^4.0.0"

‎examples/basic/index.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
"use strict";
22

3-
var React = require("react");
4-
var ReactDOM = require("react-dom");
5-
var Counter = require("./output/bundle.js");
3+
const ReactDOM = require("react-dom");
4+
const TodoExample = require("./output/bundle.js");
65

76
ReactDOM.render(
8-
Counter.todoExample,
7+
TodoExample.mkTodoExample()(),
98
document.getElementById("container")
109
);

‎examples/basic/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55
"keywords": [],
66
"author": "",
77
"dependencies": {
8-
"pulp": "^12.2.0",
8+
"pulp": "^15.0.0",
99
"react": "^16.4.0",
10-
"react-dnd": "^2.6.0",
11-
"react-dnd-html5-backend": "^2.6.0",
10+
"react-dnd": "^11.1.3",
11+
"react-dnd-html5-backend": "^11.1.3",
1212
"react-dom": "^16.4.0"
1313
},
1414
"devDependencies": {
15-
"browserify": "16.2.3"
15+
"browserify": "^16.5.1"
1616
}
1717
}

‎examples/basic/src/Basic.purs‎

Lines changed: 91 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,119 @@
11
module Basic where
22

33
import Prelude
4-
54
import Data.Array ((!!), drop, mapWithIndex, take)
6-
import Data.Foldable (for_)
7-
import Data.Maybe (Maybe(Nothing), fromMaybe, maybe)
8-
import React.Basic (Component, JSX, StateUpdate(..), createComponent, fragment, make, runUpdate)
5+
import Data.Foldable (traverse_)
6+
import Data.Int as Int
7+
import Data.Maybe (fromMaybe, maybe)
8+
import Effect (Effect)
99
import React.Basic.DOM as R
1010
import React.Basic.DOM.Events (targetChecked)
1111
import React.Basic.Events as Events
12-
import React.Basic.ReactDND (DragDrop, DragDropItemType(..), createDragDrop, createDragDropContext)
12+
import React.Basic.Hooks (Component, component, fragment, mkReducer, useReducer, (/\))
13+
import React.Basic.Hooks as React
14+
import React.Basic.ReactDND (dndProvider, mergeTargets, useDrag, useDrop)
1315
import React.Basic.ReactDND.Backends.HTML5Backend (html5Backend)
1416

15-
dndContext :: JSX -> JSX
16-
dndContext = createDragDropContext html5Backend
17-
18-
dnd :: DragDrop { itemId :: String, index :: Int }
19-
dnd = createDragDrop (DragDropItemType "TODO_ITEM")
20-
2117
data Action
2218
= Move { from :: Int, to :: Int }
2319
| SetDone String Boolean
2420

25-
component :: Component Unit
26-
component = createComponent "TodoExample"
27-
28-
todoExample :: JSX
29-
todoExample = unit # make component { initialState, render }
30-
where
31-
initialState =
32-
{ todos:
33-
[ { id: "a", text: "PureScript", done: true }
34-
, { id: "b", text: "React-Basic", done: true }
35-
, { id: "c", text: "React-DND-Basic", done: false }
36-
]
37-
}
21+
type Todo
22+
= { id :: String, text :: String, done :: Boolean }
3823

39-
update self = case _ of
40-
Move { from, to } ->
41-
Update self.state { todos = moveItem from to self.state.todos }
42-
43-
SetDone id done ->
44-
Update self.state
45-
{ todos = self.state.todos <#> \t ->
46-
if t.id == id
47-
then t { done = done }
48-
else t
49-
}
50-
51-
send self = runUpdate update self
52-
53-
render self =
54-
dndContext $
55-
fragment
24+
mkTodoExample :: Component Unit
25+
mkTodoExample = do
26+
todo <- mkTodo
27+
reducer <- mkReducer update
28+
React.component "TodoExample" \_ -> React.do
29+
state /\ dispatch <- useReducer initialState reducer
30+
pure
31+
$ dndProvider html5Backend
32+
$ fragment
5633
[ R.h1_ [ R.text "Todos" ]
5734
, R.p_ [ R.text "Drag to reorder the list:" ]
58-
, R.section_ (mapWithIndex renderTodo self.state.todos)
35+
, R.section_
36+
$ state.todos
37+
# mapWithIndex \index t -> todo { index, todo: t, dispatch }
5938
]
39+
where
40+
initialState =
41+
{ todos:
42+
[ { id: "a", text: "PureScript", done: true }
43+
, { id: "b", text: "React Basic", done: true }
44+
, { id: "c", text: "React Basic DND", done: false }
45+
]
46+
}
47+
48+
update state = case _ of
49+
Move { from, to } ->
50+
state
51+
{ todos = moveItem from to state.todos
52+
}
53+
SetDone id done ->
54+
state
55+
{ todos =
56+
state.todos
57+
<#> \t ->
58+
if t.id == id then
59+
t { done = done }
60+
else
61+
t
62+
}
6063

61-
where
62-
renderTodo index todo =
63-
dnd.dragSource
64-
{ beginDrag: \_ -> pure
65-
{ itemId: todo.id
66-
, index
64+
mkTodo ::
65+
Component
66+
{ index :: Int
67+
, todo :: Todo
68+
, dispatch :: Action -> Effect Unit
69+
}
70+
mkTodo = do
71+
let
72+
todoDND = "todo-dnd"
73+
component "Todo" \{ index, todo, dispatch } -> React.do
74+
{ isDragging, connectDrag } <- useDrag { type: todoDND, id: show index }
75+
{ id: maybeDragItem, isOver, connectDrop } <-
76+
useDrop
77+
{ accept: todoDND
78+
, onDrop: Int.fromString >>> traverse_ \id -> dispatch $ Move { from: id, to: index }
79+
}
80+
pure
81+
$ R.label
82+
{ ref: mergeTargets connectDrag connectDrop
83+
, style:
84+
R.css
85+
{ display: "block"
86+
, padding: "0.3rem 0.8rem"
87+
, alignItems: "center"
88+
, borderTop:
89+
if isOver && maybe false ((_ > show index)) maybeDragItem then
90+
"0.2rem solid #0044e4"
91+
else
92+
"0.2rem solid transparent"
93+
, borderBottom:
94+
if isOver && maybe false ((_ < show index)) maybeDragItem then
95+
"0.2rem solid #0044e4"
96+
else
97+
"0.2rem solid transparent"
98+
, opacity: if isDragging then 0.1 else 1.0
6799
}
68-
, endDrag: const (pure unit)
69-
, canDrag: const (pure true)
70-
, isDragging: \{ item: draggingItem } ->
71-
pure $ maybe false (\i -> i.itemId == todo.id) draggingItem
72-
, render: \{ connectDragSource, isDragging } ->
73-
dnd.dropTarget
74-
{ drop: \{ item: dragItem } -> do
75-
for_ (_.index <$> dragItem) \dragItemIndex ->
76-
send self $ Move { from: dragItemIndex, to: index }
77-
pure Nothing
78-
, hover: const (pure unit)
79-
, canDrop: const (pure true)
80-
, render: \{ connectDropTarget, isOver, item: maybeDragItem } ->
81-
connectDragSource $ connectDropTarget $
82-
R.div
83-
{ style: R.css
84-
{ padding: "0.3rem 0.8rem"
85-
, alignItems: "center"
86-
, borderTop:
87-
if isOver && (fromMaybe false ((\dragItem -> dragItem.index > index) <$> maybeDragItem))
88-
then "0.2rem solid #0044e4"
89-
else "0.2rem solid transparent"
90-
, borderBottom:
91-
if isOver && (fromMaybe false ((\dragItem -> dragItem.index < index) <$> maybeDragItem))
92-
then "0.2rem solid #0044e4"
93-
else "0.2rem solid transparent"
94-
, opacity: if isDragging then 0.1 else 1.0
95-
}
96-
, children:
97-
[ R.input
98-
{ "type": "checkbox"
99-
, checked: todo.done
100-
, onChange: Events.handler targetChecked \checked -> do
101-
send self $ SetDone todo.id $ fromMaybe false checked
102-
}
103-
, R.text todo.text
104-
]
105-
}
100+
, children:
101+
[ R.input
102+
{ type: "checkbox"
103+
, checked: todo.done
104+
, onChange:
105+
Events.handler targetChecked \checked -> do
106+
dispatch $ SetDone todo.id $ fromMaybe false checked
106107
}
107-
}
108+
, R.text todo.text
109+
]
110+
}
108111

109112
moveItem :: forall a. Int -> Int -> Array a -> Array a
110113
moveItem fromIndex toIndex items =
111114
let
112115
item = items !! fromIndex
116+
113117
items' = take fromIndex items <> drop (fromIndex + 1) items
114118
in
115119
take toIndex items'

0 commit comments

Comments
 (0)