Created
May 6, 2021 16:24
-
-
Save p4ulcristian/76146d48a9e28b3f0d8218c436b01f4c to your computer and use it in GitHub Desktop.
@dnd-kit/sortable basic example in ClojureScript with Reagent
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(ns viws.components.sortable | |
(:require [reagent.core :as r] | |
["react" :as react] | |
["@dnd-kit/core" :refer [DndContext | |
closestCenter | |
KeyboardSensor | |
PointerSensor | |
TouchSensor | |
useSensor | |
useSensors]] | |
["@dnd-kit/sortable" :refer [arrayMove | |
SortableContext | |
sortableKeyboardCoordinates | |
verticalListSortingStrategy | |
rectSortingStrategy | |
useSortable]] | |
["@dnd-kit/utilities" :refer [CSS]])) | |
(defn to-clj-map [hash-map] | |
(js->clj hash-map :keywordize-keys true)) | |
(defn sortable-item [props] | |
(let [{:keys [attributes | |
listeners | |
setNodeRef | |
transform | |
transition]} (to-clj-map (useSortable (clj->js {:id (:id props)})))] | |
[:div (merge {:id (str (:id props)) | |
:ref #(setNodeRef %) | |
:style {:transform (.toString (.-Transform CSS) (clj->js transform)) | |
:transition transition | |
:background "lightgreen" | |
:margin "10px" | |
:border "1px solid yellow" | |
:padding "5px" | |
:border-radius "10px"}} | |
attributes | |
listeners) | |
"hello - " (str (:id props))])) | |
(def dnd-context (r/adapt-react-class DndContext)) | |
(def sortable-context (r/adapt-react-class SortableContext)) | |
(defn sortable-example [] | |
(let [[items, setItems] (react/useState (clj->js (mapv str (range 20)))) | |
sensors (useSensors | |
(useSensor PointerSensor) | |
(useSensor KeyboardSensor, (to-clj-map {:coordinateGetter sortableKeyboardCoordinates}))) | |
handleDragEnd (fn [event] | |
(let [{:keys [active over]} (to-clj-map event)] | |
(let [oldIndex (.indexOf items (:id active)) | |
newIndex (.indexOf items (:id over))] | |
(setItems (clj->js (arrayMove (clj->js items) oldIndex newIndex))))))] | |
[:div | |
(str items) | |
[dnd-context {:sensors sensors | |
:collisionDetection closestCenter | |
:onDragEnd handleDragEnd} | |
[sortable-context {:items items | |
:strategy rectSortingStrategy} | |
[:div {:style {:display :flex | |
:flex-wrap :wrap}} | |
(map (fn [id] [:f> sortable-item {:id id :key id}]) | |
items)]]]])) | |
(defn view [] | |
[:div {:style {:margin "100px auto"}} | |
[:h1 "Sortable example"] | |
[:f> sortable-example]]) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment