ldx-widgets/src/components/draggable.coffee

widgets

React = require 'react'


{div} = React.DOM

###
Draggable Props

@props.centerOnCursor - Boolean 
  if true center on the cursor

@props.position - Object - Required

@props.height - Number - Required
  height in pixels

@props.width - Number - Required
  width in pixels

@props.component - Function - Required
  react componet to display

@props.options - Object 
  options for the component

###


Draggable = React.createClass

  displayName: 'Draggable'

  propTypes:
    options: React.PropTypes.object


  getDefaultProps: ->
    centerOnCursor: true
    position:
      x: 0
      y: 0
    height: 75
    width: 300
    component: ->



  render: ->
    {position, component, options, className, centerOnCursor, height, width} = @props
    {x, y} = position

    if centerOnCursor
      x = x - width / 2
      y = y - (height - height / 2)

    div {
      className: "draggable #{className or ''}"
      style:
        transform: "translateX(#{x}px) translateY(#{y}px) translateZ(0px)"
        msTransform: "translate(#{x}px) translateY(#{y}px)"
        WebkitTransform: "translateX(#{x}px) translateY(#{y}px)"
        height: height
        width: width
    }, component(options)


module.exports = Draggable