React-beautiful-dnd: ClojureScript example

[kennetpostigo]

Bug or feature request?

Doc/story/example showing how to use the library with ClojureScript.

It would be amazing to use this library in cljs but are there any example usage?
Maybe something like the simple vertical list example remade in ClojureScript to show usage?

[Frozenlock]

I'm assuming you want to know how to use it with a particular react wrapper?
For example Reagent?

[kennetpostigo]

@Frozenlock Yea familiar with reagent, but I think it'd be valuable to port over that simple vertical list example in order to have an simple example to go off of if you aren't familiar with the library but use reagent.

[Frozenlock]

I don't think it's up to react-beautiful-dnd to show how this can be done, but rather to the downstream react wrappers themselves.

In the case of Reagent, it's pretty much a copy paste from the examples.
Just don't forget to use the provided and snapshot arguments.

Like with all other react libraries interop, using adapt-react-class and as-element where needed is all you need. Here's an example : https://gist.github.com/frankiesardo/17905c5ec26bfc84df7d

[alexreardon]

I agree with @Frozenlock

[tslocke]

A few reagent based snippets for anyone who lands here like I did : )

(def drag-drop-context (r/adapt-react-class js/ReactBeautifulDnd.DragDropContext))
(def droppable (r/adapt-react-class js/ReactBeautifulDnd.Droppable))
(def draggable (r/adapt-react-class js/ReactBeautifulDnd.Draggable))

; Example drag-drop-context (typically wraps your whole app)
[drag-drop-context
     {:onDragStart  #(...)
      :onDragUpdate #(...)
      :onDragEnd    #(...)}

     [:div "Render one or more droppables somewhere inside"]]

; Example droppable (wraps one of your lists)
; Note use of r/as-element and js->clj on droppableProps
[droppable {:droppable-id "droppable-1" :type "thing"}
 (fn [provided snapshot]
   (r/as-element [:div (merge {:ref   (.-innerRef provided)
                               :class (when (.-isDraggingOver snapshot) :drag-over)}
                              (js->clj (.-droppableProps provided)))
                  [:h2 "My List - render some draggables inside"]
                  (.-placeholder provided)]))]

; Example draggable
[draggable {:draggable-id "draggable-1", :index 0}
 (fn [provided snapshot]
   (r/as-element [:div (merge {:ref (.-innerRef provided)}
                              (js->clj (.-draggableProps provided))
                              (js->clj (.-dragHandleProps provided)))
                  [:p "Drag me"]]))]

Converting things like draggableProps to cljs maps, only to have reagent convert them back to JS objects seems a bit wasteful, but it's a starting point...