@dnd-kit/sortable basic example in ClojureScript with Reagent

gistfile1.txt

(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]])