-
Notifications
You must be signed in to change notification settings - Fork 16
/
sortable.cljs
42 lines (35 loc) · 1.46 KB
/
sortable.cljs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
(ns workshop.sortable
(:require [devcards.core :as dc :include-macros true]
[hx.react :as hx]
[hx.hooks :as hooks]
["react-sortable-hoc" :as sort]))
(hx/defnc Item [{:keys [value]}]
[:li value])
(def SortableItem (sort/SortableElement Item))
(hx/defnc ItemList [{:keys [items]}]
[:ul (map-indexed
(fn [i v] [SortableItem {:key (str "item-" i)
:index i
:value v}])
items)])
(def SortableList (sort/SortableContainer ItemList))
;; move-item takes the previous list of items and a SortableContainer
;; move event, and computes the new list of items.
(defn move-item [items ev]
(let [old-index (.-oldIndex ^js ev)
new-index (.-newIndex ^js ev)]
(sort/arrayMove items old-index new-index)) )
(hx/defnc SortableComponent [_]
;; use the useState Hook to keep track of and update the state
(let [[items update-items] (hooks/useState #js ["Item 1"
"Item 2"
"Item 3"
"Item 4"
"Item 5"
"Item 6"])]
[:div
"Click and drag an item to re-arrange them!"
[SortableList {:items items
:onSortEnd #(update-items move-item %)}]]))
(dc/defcard example
(hx/f [SortableComponent]))