Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
using react-sortable-hoc in reagent
(def react-sortable-hoc (aget js/window "deps" "react-sortable-hoc"))
(defn make-sortable-element-component [wrapped-component]
(let [sortable-element-factory (.-SortableElement react-sortable-hoc)]
(-> wrapped-component
r/reactify-component
sortable-element-factory
r/adapt-react-class)))
(defn make-sortable-container-component [wrapped-component]
(let [sortable-container-factory (.-SortableContainer react-sortable-hoc)]
(-> wrapped-component
r/reactify-component
sortable-container-factory
r/adapt-react-class)))
(def SortableElementComponent
(make-sortable-element-component
(fn [props]
[:li "Item: " (:value props)])))
(def SortableListComponent
(make-sortable-container-component
(fn [props]
[:ul
(for [[idx value] (make-indexed (:items props))]
[SortableElementComponent {:index idx
:value value}])])))
;; using it
[SortableList {:items ["first" "second" "third"]
:helper-class "react-sortable-hoc-helper"}] ;; setting z-index to make the dragged item visible
@foopang

This comment has been minimized.

Copy link

@foopang foopang commented Sep 29, 2017

@vbedegi Thanks for this! Do you know by any chance how to make it work with rum though?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment