sort.coffee

dom = React.DOM;
placeholder = document.createElement("li")
placeholder.className = "placeholder"

SearchItemBox = React.createClass

  getInitialState: -> data: @props.data

  handleItemSubmit: (item) ->
    items = @state.data
    items.push item
    @setState {data: items}
    
  render: ->
      dom.div({className:"itemBox"},[
        dom.h1(null, "List"),
        SearchItemForm({onItemSubmit: @handleItemSubmit}),
        List({data: @props.data})])

SearchItemForm = React.createClass
  handleSubmit: ->
    name = @refs.name.getDOMNode().value.trim()
    @props.onItemSubmit {name: name, description: '...'}
    @refs.name.getDOMNode().value = ''
    return false
 
  render: ->
    dom.form({className:"commentForm", onSubmit: @handleSubmit},[
      (dom.input {type:"text", placeholder:"Search...", ref:"name"}),
      (dom.input {type:"submit", value:"Post"})])

List = React.createClass

  getInitialState: ->
    {data: @props.data}
    
  dragStart: (e) ->
    @dragged = e.currentTarget
    e.dataTransfer.effectAllowed = 'move'

    # Firefox requires dataTransfer data to be set
    e.dataTransfer.setData("text/html", e.currentTarget)

  dragEnd: (e) ->
    @dragged.style.display = "block"
    @dragged.parentNode.removeChild placeholder

    # Update data
    data = @state.data
    from = Number @dragged.dataset.id
    to = Number @over.dataset.id
    if (from < to) then to--
    data.splice(to, 0, data.splice(from, 1)[0])
    @setState data: data

  handleDelete: (e) ->
    data_id = parseInt(e.currentTarget.id, 10)
    links = @state.data
    newlinks = links.filter (elem, i) ->
      i != data_id
    @setState({data: newlinks});
    
  dragOver: (e) ->
    e.preventDefault()
    @dragged.style.display = "none"
    if (e.target.className == "placeholder") then return
    @over = e.target
    e.target.parentNode.insertBefore(placeholder, e.target)

  render: ->
    listItems = @state.data.map (item, i) =>
       dom.li {'data-id': i, key: i, draggable: "true", onDragEnd: @dragEnd, onDragStart: @dragStart}, [item, dom.span {onClick: @handleDelete, id: i}, 'x']
       
    dom.ul { onDragOver: @dragOver}, listItems

colors = [{name: "Red",   description: "..."}, 
          {name: "Green", description: "..."}, 
          {name: "Blue",  description: "..."}, 
          {name: "Yellow",description: "..."}, 
          {name: "Black", description: "..."}, 
          {name: "White", description: "..."}, 
          {name: "Orange",description: "..."}]

React.renderComponent SearchItemBox({data: colors}), document.getElementById('container')