skyquake/plugins/composer/src/src/components/Range.js

   1 /**
   2  * Created by onvelocity on 2/3/16.
   3  */
   4 'use strict';
   5
   6 var React = require('react');
   7 var ReactDOM = require('react-dom');
   8 var _extends = Object.assign;
   9
  10 /**
  11  * WORKAROUND FOR: https://github.com/facebook/react/issues/554
  12  * COPIED FROM: https://github.com/mapbox/react-range
  13  */
  14
  15 var Range = React.createClass({
  16         displayName: 'Range',
  17         propTypes: {
  18                 onChange: React.PropTypes.func,
  19                 onClick: React.PropTypes.func,
  20                 onKeyDown: React.PropTypes.func,
  21                 onMouseMove: React.PropTypes.func
  22         },
  23         getDefaultProps: function() {
  24                 return {
  25                         type: 'range',
  26                         onChange: function(){},
  27                         onClick: function(){},
  28                         onKeyDown: function(){},
  29                         onMouseMove: function(){}
  30                 };
  31         },
  32         onRangeChange: function(e) {
  33                 this.props.onMouseMove(e);
  34                 if (e.buttons !== 1 && e.which !== 1) return;
  35                 this.props.onChange(e);
  36         },
  37         onRangeClick: function(e) {
  38                 this.props.onClick(e);
  39                 this.props.onChange(e);
  40         },
  41         onRangeKeyDown: function(e) {
  42                 this.props.onKeyDown(e);
  43                 this.props.onChange(e);
  44         },
  45         componentWillReceiveProps: function(props) {
  46                 ReactDOM.findDOMNode(this).value = props.value;
  47         },
  48         render: function() {
  49                 var props = _extends({}, this.props, {
  50                         defaultValue: this.props.value,
  51                         onClick: this.onRangeClick,
  52                         onKeyDown: this.onRangeKeyDown,
  53                         onMouseMove: this.onRangeChange,
  54                         onChange: function() {}
  55                 });
  56                 delete props.value;
  57                 return React.createElement(
  58                         'input',
  59                         props
  60                 );
  61         }
  62 });
  63
  64 module.exports = Range;