[react-beautiful-dnd] Simple Example Test

[BorisKourt]

Hey, thank you for this amazing tool!

I've been trying to implement the "simple" example from beautiful-dnd: https://raw.githubusercontent.com/atlassian/react-beautiful-dnd/master/stories/src/simple/simple.jsx

The following is the JSX I am translating:

      <DragDropContext onDragEnd={this.onDragEnd}>
        <Droppable droppableId="droppable">
          {(droppableProvided, droppableSnapshot) => (
            <div
              ref={droppableProvided.innerRef}
              style={getListStyle(droppableSnapshot.isDraggingOver)}
            >
              {this.state.items.map((item, index) => (
                <Draggable key={item.id} draggableId={item.id} index={index}>
                  {(draggableProvided, draggableSnapshot) => (
                    <div>
                      <div
                        ref={draggableProvided.innerRef}
                        {...draggableProvided.draggableProps}
                        {...draggableProvided.dragHandleProps}
                        style={getItemStyle(
                          draggableSnapshot.isDragging,
                          draggableProvided.draggableProps.style
                        )}
                      >
                        {item.content}
                      </div>
                      {draggableProvided.placeholder}
                    </div>
                  )}
                </Draggable>
              ))}
              {droppableProvided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>

This is the translation from jsx-to-clojurescript --kebab-tags --ns "" --target reagent "$(pbpaste)"

[drag-drop-context
 {:onDragEnd on-drag-end}
 [droppable
  {:droppableId "droppable"}
  (fn
   [droppable-provided droppable-snapshot]
   :div
   {:ref (:inner-ref droppable-provided), ;; :ref here
    :style (get-list-style (:is-dragging-over droppable-snapshot))}
   (map
    (fn
     [item index] ;; map-indexed and invert params?
     draggable ;; Missing Vector?
     {:key (:id item), :draggableId (:id item), :index index}
     (fn
      [draggable-provided draggable-snapshot]
      :div ;; Missing Vector?
      {}
      [:div
       (merge
        (:draggable-props draggable-provided)
        (:drag-handle-props draggable-provided)
        {:ref (:inner-ref draggable-provided),  ;; :ref here
         :style
         (get-item-style
          (:is-dragging draggable-snapshot)
          (:style (:draggable-props draggable-provided)))})
       (:content item)]
      (:placeholder draggable-provided)))
    (:items state))
   (:placeholder droppable-provided))]]

Besides the possible syntax errors (comments above) my issue comes from :ref do you know how to properly translate that?

Also it looks like with om the missing vectors are present as lists.

(drag-drop-context
 {:onDragEnd on-drag-end}
 (droppable
  {:droppableId "droppable"}
  (fn
   [droppable-provided droppable-snapshot]
   (dom/div
    {:ref (:inner-ref droppable-provided),
     :style (get-list-style (:is-dragging-over droppable-snapshot))}
    (map
     (fn
      [item index]
      (draggable
       {:key (:id item), :draggableId (:id item), :index index}
       (fn
        [draggable-provided draggable-snapshot]
        (dom/div
         {}
         (dom/div
          (merge
           (:draggable-props draggable-provided)
           (:drag-handle-props draggable-provided)
           {:ref (:inner-ref draggable-provided),
            :style
            (get-item-style
             (:is-dragging draggable-snapshot)
             (:style (:draggable-props draggable-provided)))})
          (:content item))
         (:placeholder draggable-provided)))))
     (:items state))
    (:placeholder droppable-provided)))))

Thanks again!

[rberger]

I'm having the same problem

[BorisKourt]

Haha, wish I could help from the past!