shadaj/slinky

@react object DndTableRow {
  type Props = DndTableRowProps

  case class Collected(isOver: Boolean, canDrop: Boolean)

  val component: FunctionalComponent[Props] = FunctionalComponent { props =>
    val (Collected(canDrop, isOver), drop) = useDrop(
      DropTargetHookSpec[DragObject, DropResult, Collected]("draggableType")
        .setDrop((dragObject, _) => new DropResult(s"droppableText received ${dragObject.name}"))
        .setCollect(monitor => Collected(monitor.isOver(), monitor.canDrop()))
    )

    val isActive = canDrop && isOver

    val (isDragging, drag, _) = useDrag(
      DragSourceHookSpec[DragObject, DropResult, Boolean]("draggableType")
        .setItem(new DragObject(props.id))
        .setEnd { (item, monitor) =>
          alert(
            s"You dropped ${item.name} into ${Option(monitor.getDropResult[DropResult]().asInstanceOf[DropResult]).map(_.name)}!"
          )
        }
        .setCollect(monitor => monitor.isDragging())
    )

    val opacity = if (isDragging) "0.4" else "1"

    tr(
      key := props.id,
      ref := drop, // <= will drop this one with the next line
      ref := drag,
      style := js.Dynamic.literal(
        opacity = opacity
      )
    )(
      props.children
    )

  }
}

class DragObject(val name: String) extends js.Object
class DropResult(val name: String) extends js.Object

case class DndTableRowProps(id: String, children: Seq[ReactElement])