ldx-widgets/dist/components/draggable.js

widgets

(function() {
  var Draggable, React, div;

  React = require('react');

  div = React.DOM.div;


  /*
  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: function() {
      return {
        centerOnCursor: true,
        position: {
          x: 0,
          y: 0
        },
        height: 75,
        width: 300,
        component: function() {}
      };
    },
    render: function() {
      var centerOnCursor, className, component, height, options, position, ref, width, x, y;
      ref = this.props, position = ref.position, component = ref.component, options = ref.options, className = ref.className, centerOnCursor = ref.centerOnCursor, height = ref.height, width = ref.width;
      x = position.x, y = position.y;
      if (centerOnCursor) {
        x = x - width / 2;
        y = y - (height - height / 2);
      }
      return div({
        className: "draggable " + (className || ''),
        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;

}).call(this);