rc-color-picker - npm Package Compare versions

Comparing version 1.1.2 to 1.1.3

lib/Alpha.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', {
+Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
-
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 var _react = require('react');
@@ -33,4 +23,14 @@
 
-var colr = new _colr2['default']();
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+var colr = new _colr2["default"]();
+
 function rgbaColor(r, g, b, a) {
@@ -40,11 +40,10 @@ return 'rgba(' + [r, g, b, a / 100].join(',') + ')';
 
-var Alpha = (function (_React$Component) {
+var Alpha = function (_React$Component) {
   _inherits(Alpha, _React$Component);
 
   function Alpha(props) {
-    var _this = this;
-
     _classCallCheck(this, Alpha);
 
-    _get(Object.getPrototypeOf(Alpha.prototype), 'constructor', this).call(this, props);
+    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
+
     var events = ['onMouseDown', 'onDrag', 'onDragEnd', 'pointMoveTo', 'getBackground'];
@@ -54,116 +53,106 @@ events.forEach(function (e) {
     });
+    return _this;
   }
 
-  _createClass(Alpha, [{
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      this.removeListeners();
-    }
-  }, {
-    key: 'onMouseDown',
-    value: function onMouseDown(e) {
-      var x = e.clientX;
-      var y = e.clientY;
+  Alpha.prototype.componentWillUnmount = function componentWillUnmount() {
+    this.removeListeners();
+  };
 
-      this.pointMoveTo({
-        x: x, y: y
-      });
+  Alpha.prototype.onMouseDown = function onMouseDown(e) {
+    var x = e.clientX;
+    var y = e.clientY;
 
-      this.dragListener = _rcUtil2['default'].Dom.addEventListener(window, 'mousemove', this.onDrag);
-      this.dragUpListener = _rcUtil2['default'].Dom.addEventListener(window, 'mouseup', this.onDragEnd);
-    }
-  }, {
-    key: 'onDrag',
-    value: function onDrag(e) {
-      var x = e.clientX;
-      var y = e.clientY;
-      this.pointMoveTo({
-        x: x, y: y
-      });
-    }
-  }, {
-    key: 'onDragEnd',
-    value: function onDragEnd(e) {
-      var x = e.clientX;
-      var y = e.clientY;
-      this.pointMoveTo({
-        x: x, y: y
-      });
-      this.removeListeners();
-    }
-  }, {
-    key: 'getBackground',
-    value: function getBackground() {
-      var _colr$fromHsvObject$toRgbObject = colr.fromHsvObject(this.props.hsv).toRgbObject();
+    this.pointMoveTo({
+      x: x, y: y
+    });
 
-      var r = _colr$fromHsvObject$toRgbObject.r;
-      var g = _colr$fromHsvObject$toRgbObject.g;
-      var b = _colr$fromHsvObject$toRgbObject.b;
+    this.dragListener = _rcUtil2["default"].Dom.addEventListener(window, 'mousemove', this.onDrag);
+    this.dragUpListener = _rcUtil2["default"].Dom.addEventListener(window, 'mouseup', this.onDragEnd);
+  };
 
-      var opacityGradient = 'linear-gradient(to right, ' + rgbaColor(r, g, b, 0) + ', ' + rgbaColor(r, g, b, 100) + ')';
-      return opacityGradient;
-    }
-  }, {
-    key: 'getPrefixCls',
-    value: function getPrefixCls() {
-      return this.props.rootPrefixCls + '-alpha';
-    }
-  }, {
-    key: 'pointMoveTo',
-    value: function pointMoveTo(coords) {
-      var rect = _reactDom2['default'].findDOMNode(this).getBoundingClientRect();
-      var width = rect.width;
-      var left = coords.x - rect.left;
+  Alpha.prototype.onDrag = function onDrag(e) {
+    var x = e.clientX;
+    var y = e.clientY;
+    this.pointMoveTo({
+      x: x, y: y
+    });
+  };
 
-      left = Math.max(0, left);
-      left = Math.min(left, width);
+  Alpha.prototype.onDragEnd = function onDragEnd(e) {
+    var x = e.clientX;
+    var y = e.clientY;
+    this.pointMoveTo({
+      x: x, y: y
+    });
+    this.removeListeners();
+  };
 
-      var alpha = Math.floor(left / width * 100);
+  Alpha.prototype.getBackground = function getBackground() {
+    var _colr$fromHsvObject$t = colr.fromHsvObject(this.props.hsv).toRgbObject(),
+        r = _colr$fromHsvObject$t.r,
+        g = _colr$fromHsvObject$t.g,
+        b = _colr$fromHsvObject$t.b;
 
-      this.props.onChange(alpha);
+    var opacityGradient = 'linear-gradient(to right, ' + rgbaColor(r, g, b, 0) + ' , ' + rgbaColor(r, g, b, 100) + ')'; // eslint-disable-line max-len
+    return opacityGradient;
+  };
+
+  Alpha.prototype.getPrefixCls = function getPrefixCls() {
+    return this.props.rootPrefixCls + '-alpha';
+  };
+
+  Alpha.prototype.pointMoveTo = function pointMoveTo(coords) {
+    var rect = _reactDom2["default"].findDOMNode(this).getBoundingClientRect();
+    var width = rect.width;
+    var left = coords.x - rect.left;
+
+    left = Math.max(0, left);
+    left = Math.min(left, width);
+
+    var alpha = Math.floor(left / width * 100);
+
+    this.props.onChange(alpha);
+  };
+
+  Alpha.prototype.removeListeners = function removeListeners() {
+    if (this.dragListener) {
+      this.dragListener.remove();
+      this.dragListener = null;
     }
-  }, {
-    key: 'removeListeners',
-    value: function removeListeners() {
-      if (this.dragListener) {
-        this.dragListener.remove();
-        this.dragListener = null;
-      }
-      if (this.dragUpListener) {
-        this.dragUpListener.remove();
-        this.dragUpListener = null;
-      }
+    if (this.dragUpListener) {
+      this.dragUpListener.remove();
+      this.dragUpListener = null;
     }
-  }, {
-    key: 'render',
-    value: function render() {
-      var prefixCls = this.getPrefixCls();
-      return _react2['default'].createElement(
-        'div',
-        { className: prefixCls },
-        _react2['default'].createElement('div', {
-          ref: 'bg',
-          className: prefixCls + '-' + 'bg',
-          style: { background: this.getBackground() }
-        }),
-        _react2['default'].createElement('span', { style: { left: this.props.alpha + '%' } }),
-        _react2['default'].createElement('div', {
-          className: prefixCls + '-' + 'handler',
-          onMouseDown: this.onMouseDown
-        })
-      );
-    }
-  }]);
+  };
 
+  Alpha.prototype.render = function render() {
+    var prefixCls = this.getPrefixCls();
+    return _react2["default"].createElement(
+      'div',
+      { className: prefixCls },
+      _react2["default"].createElement('div', {
+        ref: 'bg',
+        className: prefixCls + '-bg',
+        style: { background: this.getBackground() }
+      }),
+      _react2["default"].createElement('span', { style: { left: this.props.alpha + '%' } }),
+      _react2["default"].createElement('div', {
+        className: prefixCls + '-handler',
+        onMouseDown: this.onMouseDown
+      })
+    );
+  };
+
   return Alpha;
-})(_react2['default'].Component);
+}(_react2["default"].Component);
 
-exports['default'] = Alpha;
+exports["default"] = Alpha;
 
+
 Alpha.propTypes = {
-  hsv: _react2['default'].PropTypes.object,
-  onChange: _react2['default'].PropTypes.func,
-  rootPrefixCls: _react2['default'].PropTypes.string,
-  alpha: _react2['default'].PropTypes.number
+  hsv: _react2["default"].PropTypes.object,
+  onChange: _react2["default"].PropTypes.func,
+  rootPrefixCls: _react2["default"].PropTypes.string,
+  alpha: _react2["default"].PropTypes.number
 };
 module.exports = exports['default'];

lib/Board.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', {
+Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
-
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 var _colr = require('colr');
@@ -33,16 +23,25 @@
 
-var colr = new _colr2['default']();
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+var colr = new _colr2["default"]();
+
 var WIDTH = 200;
 var HEIGHT = 150;
 
-var Board = (function (_React$Component) {
+var Board = function (_React$Component) {
   _inherits(Board, _React$Component);
 
   function Board(props) {
-    var _this = this;
-
     _classCallCheck(this, Board);
 
-    _get(Object.getPrototypeOf(Board.prototype), 'constructor', this).call(this, props);
+    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
+
     var events = ['onBoardMouseDown', 'onBoardDrag', 'onBoardDragEnd', 'onBoardTouchStart', 'onBoardTouchMove', 'onBoardTouchEnd'];
@@ -52,170 +51,159 @@ events.forEach(function (m) {
     });
+    return _this;
   }
 
-  _createClass(Board, [{
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      this.removeListeners();
-      this.removeTouchListeners();
+  Board.prototype.componentWillUnmount = function componentWillUnmount() {
+    this.removeListeners();
+    this.removeTouchListeners();
+  };
+
+  Board.prototype.onBoardMouseDown = function onBoardMouseDown(e) {
+    var x = e.clientX;
+    var y = e.clientY;
+    this.pointMoveTo({
+      x: x,
+      y: y
+    });
+    this.dragListener = _rcUtil2["default"].Dom.addEventListener(window, 'mousemove', this.onBoardDrag);
+    this.dragUpListener = _rcUtil2["default"].Dom.addEventListener(window, 'mouseup', this.onBoardDragEnd);
+  };
+
+  Board.prototype.onBoardTouchStart = function onBoardTouchStart(e) {
+    if (e.touches.length !== 1) {
+      return;
     }
-  }, {
-    key: 'onBoardMouseDown',
-    value: function onBoardMouseDown(e) {
-      var x = e.clientX;
-      var y = e.clientY;
-      this.pointMoveTo({
-        x: x,
-        y: y
-      });
-      this.dragListener = _rcUtil2['default'].Dom.addEventListener(window, 'mousemove', this.onBoardDrag);
-      this.dragUpListener = _rcUtil2['default'].Dom.addEventListener(window, 'mouseup', this.onBoardDragEnd);
-    }
-  }, {
-    key: 'onBoardTouchStart',
-    value: function onBoardTouchStart(e) {
-      if (e.touches.length !== 1) {
-        return;
-      }
 
-      var x = e.targetTouches[0].clientX;
-      var y = e.targetTouches[0].clientY;
-      this.pointMoveTo({
-        x: x,
-        y: y
-      });
-      this.touchMoveListener = _rcUtil2['default'].Dom.addEventListener(window, 'touchmove', this.onBoardTouchMove);
-      this.touchEndListener = _rcUtil2['default'].Dom.addEventListener(window, 'touchend', this.onBoardTouchEnd);
+    var x = e.targetTouches[0].clientX;
+    var y = e.targetTouches[0].clientY;
+    this.pointMoveTo({
+      x: x,
+      y: y
+    });
+    this.touchMoveListener = _rcUtil2["default"].Dom.addEventListener(window, 'touchmove', this.onBoardTouchMove);
+    this.touchEndListener = _rcUtil2["default"].Dom.addEventListener(window, 'touchend', this.onBoardTouchEnd);
+  };
+
+  Board.prototype.onBoardTouchMove = function onBoardTouchMove(e) {
+    if (e.preventDefault) {
+      e.preventDefault();
     }
-  }, {
-    key: 'onBoardTouchMove',
-    value: function onBoardTouchMove(e) {
-      if (e.preventDefault) {
-        e.preventDefault();
-      }
 
-      var x = e.targetTouches[0].clientX;
-      var y = e.targetTouches[0].clientY;
-      this.pointMoveTo({
-        x: x,
-        y: y
-      });
+    var x = e.targetTouches[0].clientX;
+    var y = e.targetTouches[0].clientY;
+    this.pointMoveTo({
+      x: x,
+      y: y
+    });
+  };
+
+  Board.prototype.onBoardTouchEnd = function onBoardTouchEnd() {
+    this.removeTouchListeners();
+  };
+
+  Board.prototype.onBoardDrag = function onBoardDrag(e) {
+    var x = e.clientX;
+    var y = e.clientY;
+    this.pointMoveTo({
+      x: x,
+      y: y
+    });
+  };
+
+  Board.prototype.onBoardDragEnd = function onBoardDragEnd(e) {
+    var x = e.clientX;
+    var y = e.clientY;
+    this.pointMoveTo({
+      x: x,
+      y: y
+    });
+    this.removeListeners();
+  };
+
+  Board.prototype.getPrefixCls = function getPrefixCls() {
+    return this.props.rootPrefixCls + '-board';
+  };
+
+  Board.prototype.removeTouchListeners = function removeTouchListeners() {
+    if (this.touchMoveListener) {
+      this.touchMoveListener.remove();
+      this.touchMoveListener = null;
     }
-  }, {
-    key: 'onBoardTouchEnd',
-    value: function onBoardTouchEnd() {
-      this.removeTouchListeners();
+    if (this.touchEndListener) {
+      this.touchEndListener.remove();
+      this.touchEndListener = null;
     }
-  }, {
-    key: 'onBoardDrag',
-    value: function onBoardDrag(e) {
-      var x = e.clientX;
-      var y = e.clientY;
-      this.pointMoveTo({
-        x: x,
-        y: y
-      });
+  };
+
+  Board.prototype.removeListeners = function removeListeners() {
+    if (this.dragListener) {
+      this.dragListener.remove();
+      this.dragListener = null;
     }
-  }, {
-    key: 'onBoardDragEnd',
-    value: function onBoardDragEnd(e) {
-      var x = e.clientX;
-      var y = e.clientY;
-      this.pointMoveTo({
-        x: x,
-        y: y
-      });
-      this.removeListeners();
+    if (this.dragUpListener) {
+      this.dragUpListener.remove();
+      this.dragUpListener = null;
     }
-  }, {
-    key: 'getPrefixCls',
-    value: function getPrefixCls() {
-      return this.props.rootPrefixCls + '-board';
-    }
-  }, {
-    key: 'removeTouchListeners',
-    value: function removeTouchListeners() {
-      if (this.touchMoveListener) {
-        this.touchMoveListener.remove();
-        this.touchMoveListener = null;
-      }
-      if (this.touchEndListener) {
-        this.touchEndListener.remove();
-        this.touchEndListener = null;
-      }
-    }
-  }, {
-    key: 'removeListeners',
-    value: function removeListeners() {
-      if (this.dragListener) {
-        this.dragListener.remove();
-        this.dragListener = null;
-      }
-      if (this.dragUpListener) {
-        this.dragUpListener.remove();
-        this.dragUpListener = null;
-      }
-    }
+  };
 
-    /**
-     * 移动光标位置到
-     * @param  {object} pos X Y 全局坐标点
-     * @return {undefined}
-     */
-  }, {
-    key: 'pointMoveTo',
-    value: function pointMoveTo(pos) {
-      var rect = _reactDom2['default'].findDOMNode(this).getBoundingClientRect();
-      var left = pos.x - rect.left;
-      var top = pos.y - rect.top;
+  /**
+   * 移动光标位置到
+   * @param  {object} pos X Y 全局坐标点
+   * @return {undefined}
+   */
 
-      left = Math.max(0, left);
-      left = Math.min(left, WIDTH);
-      top = Math.max(0, top);
-      top = Math.min(top, HEIGHT);
 
-      var hsv = {
-        h: this.props.hsv.h,
-        s: parseInt(left / WIDTH * 100, 10),
-        v: parseInt((1 - top / HEIGHT) * 100, 10)
-      };
-      this.props.onChange(hsv);
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var prefixCls = this.getPrefixCls();
-      var hsv = this.props.hsv;
-      var hueHsv = [hsv.h, 100, 100];
-      var hueColor = colr.fromHsvArray(hueHsv).toHex();
-      var x = hsv.s / 100 * WIDTH - 4;
-      var y = (1 - hsv.v / 100) * HEIGHT - 4;
-      return _react2['default'].createElement(
+  Board.prototype.pointMoveTo = function pointMoveTo(pos) {
+    var rect = _reactDom2["default"].findDOMNode(this).getBoundingClientRect();
+    var left = pos.x - rect.left;
+    var top = pos.y - rect.top;
+
+    left = Math.max(0, left);
+    left = Math.min(left, WIDTH);
+    top = Math.max(0, top);
+    top = Math.min(top, HEIGHT);
+
+    var hsv = {
+      h: this.props.hsv.h,
+      s: parseInt(left / WIDTH * 100, 10),
+      v: parseInt((1 - top / HEIGHT) * 100, 10)
+    };
+    this.props.onChange(hsv);
+  };
+
+  Board.prototype.render = function render() {
+    var prefixCls = this.getPrefixCls();
+    var hsv = this.props.hsv;
+    var hueHsv = [hsv.h, 100, 100];
+    var hueColor = colr.fromHsvArray(hueHsv).toHex();
+    var x = hsv.s / 100 * WIDTH - 4;
+    var y = (1 - hsv.v / 100) * HEIGHT - 4;
+    return _react2["default"].createElement(
+      'div',
+      { className: prefixCls },
+      _react2["default"].createElement(
         'div',
-        { className: prefixCls },
-        _react2['default'].createElement(
-          'div',
-          { className: prefixCls + '-' + 'hsv', style: { backgroundColor: hueColor } },
-          _react2['default'].createElement('div', { className: prefixCls + '-' + 'value' }),
-          _react2['default'].createElement('div', { className: prefixCls + '-' + 'saturation' })
-        ),
-        _react2['default'].createElement('span', { style: { left: x, top: y } }),
-        _react2['default'].createElement('div', {
-          className: prefixCls + '-' + 'handler',
-          onMouseDown: this.onBoardMouseDown,
-          onTouchStart: this.onBoardTouchStart
-        })
-      );
-    }
-  }]);
+        { className: prefixCls + '-hsv', style: { backgroundColor: hueColor } },
+        _react2["default"].createElement('div', { className: prefixCls + '-value' }),
+        _react2["default"].createElement('div', { className: prefixCls + '-saturation' })
+      ),
+      _react2["default"].createElement('span', { style: { left: x, top: y } }),
+      _react2["default"].createElement('div', {
+        className: prefixCls + '-handler',
+        onMouseDown: this.onBoardMouseDown,
+        onTouchStart: this.onBoardTouchStart
+      })
+    );
+  };
 
   return Board;
-})(_react2['default'].Component);
+}(_react2["default"].Component);
 
-exports['default'] = Board;
+exports["default"] = Board;
 
+
 Board.propTypes = {
-  hsv: _react2['default'].PropTypes.object,
-  onChange: _react2['default'].PropTypes.func,
-  rootPrefixCls: _react2['default'].PropTypes.string
+  hsv: _react2["default"].PropTypes.object,
+  onChange: _react2["default"].PropTypes.func,
+  rootPrefixCls: _react2["default"].PropTypes.string
 };
 module.exports = exports['default'];

lib/ColorPicker.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', {
+Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,12 +9,2 @@ });
 
-var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
-
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 var _react = require('react');
@@ -44,4 +34,14 @@
 
-var colr = new _colr2['default']();
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+var colr = new _colr2["default"]();
+
 function refFn(field, component) {
@@ -55,15 +55,13 @@ this[field] = component;
 
-var ColorPicker = (function (_React$Component) {
+var ColorPicker = function (_React$Component) {
   _inherits(ColorPicker, _React$Component);
 
   function ColorPicker(props) {
-    var _this = this;
-
     _classCallCheck(this, ColorPicker);
 
-    _get(Object.getPrototypeOf(ColorPicker.prototype), 'constructor', this).call(this, props);
+    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
 
     var alpha = typeof props.alpha === 'undefined' ? props.defaultAlpha : Math.min(props.alpha, props.defaultAlpha);
 
-    this.state = {
+    _this.state = {
       color: props.color || props.defaultColor,
@@ -80,185 +78,174 @@ alpha: alpha,
 
-    this.savePickerPanelRef = refFn.bind(this, 'pickerPanelInstance');
-    this.saveTriggerRef = refFn.bind(this, 'triggerInstance');
+    _this.savePickerPanelRef = refFn.bind(_this, 'pickerPanelInstance');
+    _this.saveTriggerRef = refFn.bind(_this, 'triggerInstance');
+    return _this;
   }
 
-  _createClass(ColorPicker, [{
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      if (nextProps.color) {
-        this.setState({
-          color: nextProps.color
-        });
-      }
-      if (nextProps.alpha !== null && nextProps.alpha !== undefined) {
-        this.setState({
-          alpha: nextProps.alpha
-        });
-      }
-    }
-  }, {
-    key: 'onTriggerClick',
-    value: function onTriggerClick() {
+  ColorPicker.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+    if (nextProps.color) {
       this.setState({
-        open: !this.state.open
+        color: nextProps.color
       });
     }
-  }, {
-    key: 'onChange',
-    value: function onChange(colors) {
-      var _this2 = this;
-
-      this.setState(_extends({}, colors), function () {
-        _this2.props.onChange(_this2.state);
+    if (nextProps.alpha !== null && nextProps.alpha !== undefined) {
+      this.setState({
+        alpha: nextProps.alpha
       });
     }
-  }, {
-    key: 'onBlur',
-    value: function onBlur() {
-      this.setOpen(false);
-    }
-  }, {
-    key: 'onVisibleChange',
-    value: function onVisibleChange(open) {
-      var _this3 = this;
+  };
 
-      this.setOpen(open, function () {
-        if (open) {
-          _reactDom2['default'].findDOMNode(_this3.pickerPanelInstance).focus();
+  ColorPicker.prototype.onTriggerClick = function onTriggerClick() {
+    this.setState({
+      open: !this.state.open
+    });
+  };
+
+  ColorPicker.prototype.onChange = function onChange(colors) {
+    var _this2 = this;
+
+    this.setState(_extends({}, colors), function () {
+      _this2.props.onChange(_this2.state);
+    });
+  };
+
+  ColorPicker.prototype.onBlur = function onBlur() {
+    this.setOpen(false);
+  };
+
+  ColorPicker.prototype.onVisibleChange = function onVisibleChange(open) {
+    var _this3 = this;
+
+    this.setOpen(open, function () {
+      if (open) {
+        _reactDom2["default"].findDOMNode(_this3.pickerPanelInstance).focus();
+      }
+    });
+  };
+
+  ColorPicker.prototype.setOpen = function setOpen(open, callback) {
+    var _this4 = this;
+
+    var _props = this.props,
+        onOpen = _props.onOpen,
+        onClose = _props.onClose;
+
+    if (this.state.open !== open) {
+      this.setState({
+        open: open
+      }, function () {
+        if (typeof callback === 'function') {
+          callback();
         }
+
+        if (_this4.state.open) {
+          onOpen(_this4.state);
+        } else {
+          onClose(_this4.state);
+        }
       });
     }
-  }, {
-    key: 'setOpen',
-    value: function setOpen(open, callback) {
-      var _this4 = this;
+  };
 
-      var _props = this.props;
-      var onOpen = _props.onOpen;
-      var onClose = _props.onClose;
+  ColorPicker.prototype.getRootDOMNode = function getRootDOMNode() {
+    return _reactDom2["default"].findDOMNode(this);
+  };
 
-      if (this.state.open !== open) {
-        this.setState({
-          open: open
-        }, function () {
-          if (typeof callback === 'function') {
-            callback();
-          }
+  ColorPicker.prototype.getTriggerDOMNode = function getTriggerDOMNode() {
+    return _reactDom2["default"].findDOMNode(this.triggerInstance);
+  };
 
-          if (_this4.state.open) {
-            onOpen(_this4.state);
-          } else {
-            onClose(_this4.state);
-          }
-        });
-      }
+  ColorPicker.prototype.getPickerElement = function getPickerElement() {
+    // const state = this.state;
+    return _react2["default"].createElement(_Panel2["default"], {
+      ref: this.savePickerPanelRef,
+      defaultColor: this.state.color,
+      alpha: this.state.alpha,
+      prefixCls: this.props.prefixCls + '-panel',
+      onChange: this.onChange,
+      onBlur: this.onBlur,
+      mode: this.props.mode
+    });
+  };
+
+  ColorPicker.prototype.open = function open(callback) {
+    this.setOpen(true, callback);
+  };
+
+  ColorPicker.prototype.close = function close(callback) {
+    this.setOpen(false, callback);
+  };
+
+  ColorPicker.prototype.focus = function focus() {
+    if (!this.state.open) {
+      _reactDom2["default"].findDOMNode(this).focus();
     }
-  }, {
-    key: 'getRootDOMNode',
-    value: function getRootDOMNode() {
-      return _reactDom2['default'].findDOMNode(this);
+  };
+
+  ColorPicker.prototype.render = function render() {
+    var props = this.props;
+    var state = this.state;
+    var classes = [props.prefixCls + '-wrap'];
+    if (state.open) {
+      classes.push(props.prefixCls + '-open');
     }
-  }, {
-    key: 'getTriggerDOMNode',
-    value: function getTriggerDOMNode() {
-      return _reactDom2['default'].findDOMNode(this.triggerInstance);
-    }
-  }, {
-    key: 'getPickerElement',
-    value: function getPickerElement() {
-      // const state = this.state;
-      return _react2['default'].createElement(_Panel2['default'], {
-        ref: this.savePickerPanelRef,
-        defaultColor: this.state.color,
-        alpha: this.state.alpha,
-        prefixCls: this.props.prefixCls + '-panel',
-        onChange: this.onChange,
-        onBlur: this.onBlur,
-        mode: this.props.mode
-      });
-    }
-  }, {
-    key: 'open',
-    value: function open(callback) {
-      this.setOpen(true, callback);
-    }
-  }, {
-    key: 'close',
-    value: function close(callback) {
-      this.setOpen(false, callback);
-    }
-  }, {
-    key: 'focus',
-    value: function focus() {
-      if (!this.state.open) {
-        _reactDom2['default'].findDOMNode(this).focus();
-      }
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var props = this.props;
-      var state = this.state;
-      var classes = [props.prefixCls + '-wrap'];
-      if (state.open) {
-        classes.push(props.prefixCls + '-open');
-      }
 
-      var children = props.children;
+    var children = props.children;
 
-      var RGBA = colr.fromHex(this.state.color).toRgbArray();
+    var RGBA = colr.fromHex(this.state.color).toRgbArray();
 
-      RGBA.push(this.state.alpha / 100);
+    RGBA.push(this.state.alpha / 100);
 
-      if (children) {
-        children = _react2['default'].cloneElement(children, {
-          ref: this.saveTriggerRef,
-          unselectable: true,
-          style: {
-            backgroundColor: 'rgba(' + RGBA.join(',') + ')'
-          },
-          onClick: this.onTriggerClick,
-          onMouseDown: prevent
-        });
-      }
+    if (children) {
+      children = _react2["default"].cloneElement(children, {
+        ref: this.saveTriggerRef,
+        unselectable: true,
+        style: {
+          backgroundColor: 'rgba(' + RGBA.join(',') + ')'
+        },
+        onClick: this.onTriggerClick,
+        onMouseDown: prevent
+      });
+    }
 
-      var prefixCls = props.prefixCls;
-      var placement = props.placement;
-      var style = props.style;
-      var getCalendarContainer = props.getCalendarContainer;
-      var align = props.align;
-      var animation = props.animation;
-      var disabled = props.disabled;
-      var transitionName = props.transitionName;
+    var prefixCls = props.prefixCls,
+        placement = props.placement,
+        style = props.style,
+        getCalendarContainer = props.getCalendarContainer,
+        align = props.align,
+        animation = props.animation,
+        disabled = props.disabled,
+        transitionName = props.transitionName;
 
-      return _react2['default'].createElement(
-        'div',
-        { className: classes.join(' ') },
-        _react2['default'].createElement(
-          _rcTrigger2['default'],
-          {
-            popup: this.getPickerElement(),
-            popupAlign: align,
-            builtinPlacements: _placements2['default'],
-            popupPlacement: placement,
-            action: disabled ? [] : ['click'],
-            destroyPopupOnHide: true,
-            getPopupContainer: getCalendarContainer,
-            popupStyle: style,
-            popupAnimation: animation,
-            popupTransitionName: transitionName,
-            popupVisible: state.open,
-            onPopupVisibleChange: this.onVisibleChange,
-            prefixCls: prefixCls },
-          children
-        )
-      );
-    }
-  }]);
 
+    return _react2["default"].createElement(
+      'div',
+      { className: classes.join(' ') },
+      _react2["default"].createElement(
+        _rcTrigger2["default"],
+        {
+          popup: this.getPickerElement(),
+          popupAlign: align,
+          builtinPlacements: _placements2["default"],
+          popupPlacement: placement,
+          action: disabled ? [] : ['click'],
+          destroyPopupOnHide: true,
+          getPopupContainer: getCalendarContainer,
+          popupStyle: style,
+          popupAnimation: animation,
+          popupTransitionName: transitionName,
+          popupVisible: state.open,
+          onPopupVisibleChange: this.onVisibleChange,
+          prefixCls: prefixCls
+        },
+        children
+      )
+    );
+  };
+
   return ColorPicker;
-})(_react2['default'].Component);
+}(_react2["default"].Component);
 
-exports['default'] = ColorPicker;
+exports["default"] = ColorPicker;
 
+
 ColorPicker.propTypes = {
@@ -286,4 +273,5 @@ defaultColor: _react.PropTypes.string,
   onClose: function onClose() {},
+
   prefixCls: 'rc-color-picker',
-  children: _react2['default'].createElement('span', { className: 'rc-color-picker-trigger' }),
+  children: _react2["default"].createElement('span', { className: 'rc-color-picker-trigger' }),
   placement: 'topLeft',
@@ -290,0 +278,0 @@ style: {}

lib/Panel.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', {
+Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
-
-var _get = function get(_x2, _x3, _x4) { var _again = true; _function: while (_again) { var object = _x2, property = _x3, receiver = _x4; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x2 = parent; _x3 = property; _x4 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 var _react = require('react');
@@ -45,19 +35,27 @@
 
-var _utilsValidationColor = require('./utils/validationColor');
+var _validationColor = require('./utils/validationColor');
 
-var _utilsValidationColor2 = _interopRequireDefault(_utilsValidationColor);
+var _validationColor2 = _interopRequireDefault(_validationColor);
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
 function noop() {}
 
-var colr = new _colr2['default']();
+var colr = new _colr2["default"]();
 
-var Panel = (function (_React$Component) {
+var Panel = function (_React$Component) {
   _inherits(Panel, _React$Component);
 
   function Panel(props) {
-    var _this = this;
-
     _classCallCheck(this, Panel);
 
-    _get(Object.getPrototypeOf(Panel.prototype), 'constructor', this).call(this, props);
+    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
 
@@ -69,3 +67,3 @@ var color = props.color || props.defaultColor;
 
-    this.state = {
+    _this.state = {
       paramsHsv: hsv,
@@ -81,181 +79,173 @@ hsv: hsv,
     });
+    return _this;
   }
 
-  _createClass(Panel, [{
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      if (nextProps.color) {
-        var hsv = colr.fromHex(nextProps.color).toHsvObject();
-        this.setState({
-          hsv: hsv,
-          paramsHsv: hsv
-        });
-      }
-      if (nextProps.alpha !== undefined) {
-        this.setState({
-          alpha: nextProps.alpha
-        });
-      }
+  Panel.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+    if (nextProps.color) {
+      var hsv = colr.fromHex(nextProps.color).toHsvObject();
+      this.setState({
+        hsv: hsv,
+        paramsHsv: hsv
+      });
     }
-  }, {
-    key: 'onChange',
-    value: function onChange(hsvObject) {
-      var syncParams = arguments.length <= 1 || arguments[1] === undefined ? true : arguments[1];
+    if (nextProps.alpha !== undefined) {
+      this.setState({
+        alpha: nextProps.alpha
+      });
+    }
+  };
 
-      var hsv = hsvObject;
-      var state = {
-        hsv: hsv
-      };
-      if (syncParams) {
-        state.paramsHsv = hsv;
-      }
-      this.setState(state);
+  Panel.prototype.onChange = function onChange(hsvObject) {
+    var syncParams = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
 
-      var ret = {
-        color: this.getHexColor(hsv),
-        hsv: hsv,
-        alpha: this.state.alpha
-      };
-      this.props.onChange(ret);
+    var hsv = hsvObject;
+    var state = {
+      hsv: hsv
+    };
+    if (syncParams) {
+      state.paramsHsv = hsv;
     }
-  }, {
-    key: 'onSystemColorPickerOpen',
-    value: function onSystemColorPickerOpen(e) {
-      // only work with broswer which support color input
-      if (e.target.type === 'color') {
-        this.systemColorPickerOpen = true;
-      }
+    this.setState(state);
+
+    var ret = {
+      color: this.getHexColor(hsv),
+      hsv: hsv,
+      alpha: this.state.alpha
+    };
+    this.props.onChange(ret);
+  };
+
+  Panel.prototype.onSystemColorPickerOpen = function onSystemColorPickerOpen(e) {
+    // only work with broswer which support color input
+    if (e.target.type === 'color') {
+      this.systemColorPickerOpen = true;
     }
-  }, {
-    key: 'onAlphaChange',
-    value: function onAlphaChange(alpha) {
-      if (this.props.alpha === undefined) {
-        this.setState({
-          alpha: alpha
-        });
-      }
-      this.props.onChange({
-        color: this.getHexColor(),
-        hsv: this.state.hsv,
+  };
+
+  Panel.prototype.onAlphaChange = function onAlphaChange(alpha) {
+    if (this.props.alpha === undefined) {
+      this.setState({
         alpha: alpha
       });
     }
-  }, {
-    key: 'onFocus',
-    value: function onFocus() {
-      if (this._blurTimer) {
-        clearTimeout(this._blurTimer);
-        this._blurTimer = null;
-      } else {
-        this.props.onFocus();
-      }
+    this.props.onChange({
+      color: this.getHexColor(),
+      hsv: this.state.hsv,
+      alpha: alpha
+    });
+  };
+
+  Panel.prototype.onFocus = function onFocus() {
+    if (this._blurTimer) {
+      clearTimeout(this._blurTimer);
+      this._blurTimer = null;
+    } else {
+      this.props.onFocus();
     }
-  }, {
-    key: 'onBlur',
-    value: function onBlur() {
-      var _this2 = this;
+  };
 
-      if (this._blurTimer) {
-        clearTimeout(this._blurTimer);
+  Panel.prototype.onBlur = function onBlur() {
+    var _this2 = this;
+
+    if (this._blurTimer) {
+      clearTimeout(this._blurTimer);
+    }
+    this._blurTimer = setTimeout(function () {
+      // if is system color picker open, then stop run blur
+      if (_this2.systemColorPickerOpen) {
+        _this2.systemColorPickerOpen = false;
+        return;
       }
-      this._blurTimer = setTimeout(function () {
-        // if is system color picker open, then stop run blur
-        if (_this2.systemColorPickerOpen) {
-          _this2.systemColorPickerOpen = false;
-          return;
-        }
 
-        _this2.props.onBlur();
-      }, 100);
-    }
-  }, {
-    key: 'getHexColor',
-    value: function getHexColor(hsv) {
-      return colr.fromHsvObject(hsv || this.state.hsv).toHex();
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var prefixCls = this.props.prefixCls;
-      var hsv = this.state.hsv;
-      var alpha = this.state.alpha;
-      return _react2['default'].createElement(
+      _this2.props.onBlur();
+    }, 100);
+  };
+
+  Panel.prototype.getHexColor = function getHexColor(hsv) {
+    return colr.fromHsvObject(hsv || this.state.hsv).toHex();
+  };
+
+  Panel.prototype.render = function render() {
+    var prefixCls = this.props.prefixCls;
+    var hsv = this.state.hsv;
+    var alpha = this.state.alpha;
+    return _react2["default"].createElement(
+      'div',
+      {
+        className: prefixCls,
+        style: this.props.style,
+        onFocus: this.onFocus,
+        onBlur: this.onBlur,
+        tabIndex: '0'
+      },
+      _react2["default"].createElement(
         'div',
-        {
-          className: prefixCls,
-          style: this.props.style,
-          onFocus: this.onFocus,
-          onBlur: this.onBlur,
-          tabIndex: '0'
-        },
-        _react2['default'].createElement(
+        { className: prefixCls + '-inner' },
+        _react2["default"].createElement(_Board2["default"], {
+          rootPrefixCls: prefixCls,
+          hsv: hsv,
+          onChange: this.onChange
+        }),
+        _react2["default"].createElement(
           'div',
-          { className: prefixCls + '-' + 'inner' },
-          _react2['default'].createElement(_Board2['default'], {
-            rootPrefixCls: prefixCls,
-            hsv: hsv,
-            onChange: this.onChange
-          }),
-          _react2['default'].createElement(
+          { className: prefixCls + '-wrap' },
+          _react2["default"].createElement(
             'div',
-            { className: prefixCls + '-' + 'wrap' },
-            _react2['default'].createElement(
-              'div',
-              { className: prefixCls + '-' + 'wrap-ribbon' },
-              _react2['default'].createElement(_Ribbon2['default'], {
-                rootPrefixCls: prefixCls,
-                hsv: hsv,
-                onChange: this.onChange
-              })
-            ),
-            _react2['default'].createElement(
-              'div',
-              { className: prefixCls + '-' + 'wrap-alpha' },
-              _react2['default'].createElement(_Alpha2['default'], {
-                rootPrefixCls: prefixCls,
-                alpha: alpha,
-                hsv: hsv,
-                onChange: this.onAlphaChange
-              })
-            ),
-            _react2['default'].createElement(
-              'div',
-              { className: prefixCls + '-' + 'wrap-preview' },
-              _react2['default'].createElement(_Preview2['default'], {
-                rootPrefixCls: prefixCls,
-                alpha: alpha,
-                onChange: this.onChange,
-                onInputClick: this.onSystemColorPickerOpen,
-                hsv: hsv
-              })
-            )
+            { className: prefixCls + '-wrap-ribbon' },
+            _react2["default"].createElement(_Ribbon2["default"], {
+              rootPrefixCls: prefixCls,
+              hsv: hsv,
+              onChange: this.onChange
+            })
           ),
-          _react2['default'].createElement(
+          _react2["default"].createElement(
             'div',
-            { className: prefixCls + '-' + 'wrap', style: { height: 40, marginTop: 6 } },
-            _react2['default'].createElement(_Params2['default'], {
+            { className: prefixCls + '-wrap-alpha' },
+            _react2["default"].createElement(_Alpha2["default"], {
               rootPrefixCls: prefixCls,
-              hsv: this.state.paramsHsv,
               alpha: alpha,
-              onAlphaChange: this.onAlphaChange,
+              hsv: hsv,
+              onChange: this.onAlphaChange
+            })
+          ),
+          _react2["default"].createElement(
+            'div',
+            { className: prefixCls + '-wrap-preview' },
+            _react2["default"].createElement(_Preview2["default"], {
+              rootPrefixCls: prefixCls,
+              alpha: alpha,
               onChange: this.onChange,
-              mode: this.props.mode
+              onInputClick: this.onSystemColorPickerOpen,
+              hsv: hsv
             })
           )
+        ),
+        _react2["default"].createElement(
+          'div',
+          { className: prefixCls + '-wrap', style: { height: 40, marginTop: 6 } },
+          _react2["default"].createElement(_Params2["default"], {
+            rootPrefixCls: prefixCls,
+            hsv: this.state.paramsHsv,
+            alpha: alpha,
+            onAlphaChange: this.onAlphaChange,
+            onChange: this.onChange,
+            mode: this.props.mode
+          })
         )
-      );
-    }
-  }]);
+      )
+    );
+  };
 
   return Panel;
-})(_react2['default'].Component);
+}(_react2["default"].Component);
 
-exports['default'] = Panel;
+exports["default"] = Panel;
 
+
 Panel.propTypes = {
   defaultAlpha: _react.PropTypes.number,
-  defaultColor: _utilsValidationColor2['default'],
+  defaultColor: _validationColor2["default"],
   // can custom
   prefixCls: _react.PropTypes.string,
-  color: _utilsValidationColor2['default'],
+  color: _validationColor2["default"],
   alpha: _react.PropTypes.number,
@@ -262,0 +252,0 @@ style: _react.PropTypes.object,

lib/Params.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', {
+Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+var _react = require('react');
 
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+var _react2 = _interopRequireDefault(_react);
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+var _colr = require('colr');
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+var _colr2 = _interopRequireDefault(_colr);
 
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _react = require('react');
+function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
 
-var _react2 = _interopRequireDefault(_react);
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var _colr = require('colr');
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-var _colr2 = _interopRequireDefault(_colr);
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
 
-var colr = new _colr2['default']();
+var colr = new _colr2["default"]();
 var modesMap = ['RGB', 'HSB', 'HSL'];
 
-var Params = (function (_React$Component) {
+var Params = function (_React$Component) {
   _inherits(Params, _React$Component);
 
   function Params(props) {
-    var _this = this;
-
     _classCallCheck(this, Params);
 
-    _get(Object.getPrototypeOf(Params.prototype), 'constructor', this).call(this, props);
+    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
 
@@ -41,3 +39,3 @@ var color = colr.fromHsvObject(props.hsv);
     // 管理 input 的状态
-    this.state = {
+    _this.state = {
       mode: props.mode,
@@ -55,230 +53,224 @@ color: color,
     });
+    return _this;
   }
 
-  _createClass(Params, [{
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      if (nextProps.hsv !== this.props.hsv) {
-        var color = colr.fromHsvObject(nextProps.hsv);
-        this.setState({
-          hex: color.toHex().substr(1),
-          color: color
-        });
-      }
+  Params.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+    if (nextProps.hsv !== this.props.hsv) {
+      var color = colr.fromHsvObject(nextProps.hsv);
+      this.setState({
+        hex: color.toHex().substr(1),
+        color: color
+      });
     }
-  }, {
-    key: 'onHexHandler',
-    value: function onHexHandler(event) {
-      var value = event.target.value;
-      var color = null;
-      try {
-        color = _colr2['default'].fromHex(value);
-      } catch (e) {
-        /* eslint no-empty:0 */
-      }
+  };
 
-      if (color !== null) {
-        this.setState({
-          color: color,
-          hex: value
-        });
-        this.props.onChange(color.toHsvObject(), false);
-      } else {
-        this.setState({
-          hex: value
-        });
-      }
+  Params.prototype.onHexHandler = function onHexHandler(event) {
+    var value = event.target.value;
+    var color = null;
+    try {
+      color = _colr2["default"].fromHex(value);
+    } catch (e) {
+      /* eslint no-empty:0 */
     }
-  }, {
-    key: 'onModeChange',
-    value: function onModeChange() {
-      var mode = this.state.mode;
-      var modeIndex = (modesMap.indexOf(mode) + 1) % modesMap.length;
-      var state = this.state;
 
-      mode = modesMap[modeIndex];
-      var colorChannel = this.getColorChannel(state.color, mode);
+    if (color !== null) {
       this.setState({
-        mode: mode,
-        colorChannel: colorChannel
+        color: color,
+        hex: value
       });
-    }
-  }, {
-    key: 'onAlphaHandler',
-    value: function onAlphaHandler(event) {
-      var alpha = parseInt(event.target.value, 10);
-      if (isNaN(alpha)) {
-        alpha = 0;
-      }
-      alpha = Math.max(0, alpha);
-      alpha = Math.min(alpha, 100);
-
+      this.props.onChange(color.toHsvObject(), false);
+    } else {
       this.setState({
-        alpha: alpha
+        hex: value
       });
+    }
+  };
 
-      this.props.onAlphaChange(alpha);
+  Params.prototype.onModeChange = function onModeChange() {
+    var mode = this.state.mode;
+    var modeIndex = (modesMap.indexOf(mode) + 1) % modesMap.length;
+    var state = this.state;
+
+    mode = modesMap[modeIndex];
+    var colorChannel = this.getColorChannel(state.color, mode);
+    this.setState({
+      mode: mode,
+      colorChannel: colorChannel
+    });
+  };
+
+  Params.prototype.onAlphaHandler = function onAlphaHandler(event) {
+    var alpha = parseInt(event.target.value, 10);
+    if (isNaN(alpha)) {
+      alpha = 0;
     }
-  }, {
-    key: 'onColorChannelChange',
-    value: function onColorChannelChange(index, event) {
-      var value = this.getChannelInRange(event.target.value, index);
-      var colorChannel = this.getColorChannel();
+    alpha = Math.max(0, alpha);
+    alpha = Math.min(alpha, 100);
 
-      colorChannel[index] = value;
+    this.setState({
+      alpha: alpha
+    });
 
-      var color = this.getColorByChannel(colorChannel);
+    this.props.onAlphaChange(alpha);
+  };
 
-      this.setState({
-        hex: color.toHex().substr(1),
-        color: color
-      });
-      this.props.onChange(color.toHsvObject(), false);
+  Params.prototype.onColorChannelChange = function onColorChannelChange(index, event) {
+    var value = this.getChannelInRange(event.target.value, index);
+    var colorChannel = this.getColorChannel();
+
+    colorChannel[index] = value;
+
+    var color = this.getColorByChannel(colorChannel);
+
+    this.setState({
+      hex: color.toHex().substr(1),
+      color: color
+    });
+    this.props.onChange(color.toHsvObject(), false);
+  };
+
+  Params.prototype.getChannelInRange = function getChannelInRange(value, index) {
+    var channelMap = {
+      RGB: [[0, 255], [0, 255], [0, 255]],
+      HSB: [[0, 360], [0, 100], [0, 100]],
+      HSL: [[0, 360], [0, 100], [0, 100]]
+    };
+    var mode = this.state.mode;
+    var range = channelMap[mode][index];
+    var result = parseInt(value, 10);
+    if (isNaN(result)) {
+      result = 0;
     }
-  }, {
-    key: 'getChannelInRange',
-    value: function getChannelInRange(value, index) {
-      var channelMap = {
-        RGB: [[0, 255], [0, 255], [0, 255]],
-        HSB: [[0, 360], [0, 100], [0, 100]],
-        HSL: [[0, 360], [0, 100], [0, 100]]
-      };
-      var mode = this.state.mode;
-      var range = channelMap[mode][index];
-      var result = parseInt(value, 10);
-      if (isNaN(result)) {
-        result = 0;
-      }
-      result = Math.max(range[0], result);
-      result = Math.min(result, range[1]);
-      return result;
+    result = Math.max(range[0], result);
+    result = Math.min(result, range[1]);
+    return result;
+  };
+
+  Params.prototype.getColorByChannel = function getColorByChannel(colorChannel) {
+    var colorMode = this.state.mode;
+    var color = void 0;
+    switch (colorMode) {
+      case 'RGB':
+        color = colr.fromRgbArray(colorChannel);
+        break;
+      case 'HSB':
+        color = colr.fromHsvArray(colorChannel);
+        break;
+      case 'HSL':
+        color = colr.fromHslArray(colorChannel);
+        break;
+      default:
+        color = colr.fromRgbArray(colorChannel);
     }
-  }, {
-    key: 'getColorByChannel',
-    value: function getColorByChannel(colorChannel) {
-      var colorMode = this.state.mode;
-      var color = undefined;
-      switch (colorMode) {
-        case 'RGB':
-          color = colr.fromRgbArray(colorChannel);
-          break;
-        case 'HSB':
-          color = colr.fromHsvArray(colorChannel);
-          break;
-        case 'HSL':
-          color = colr.fromHslArray(colorChannel);
-          break;
-        default:
-          color = colr.fromRgbArray(colorChannel);
-      }
-      return color;
+    return color;
+  };
+
+  Params.prototype.getPrefixCls = function getPrefixCls() {
+    return this.props.rootPrefixCls + '-params';
+  };
+
+  Params.prototype.getColorChannel = function getColorChannel(colrInstance, mode) {
+    var color = colrInstance || this.state.color;
+    var colorMode = mode || this.state.mode;
+    var result = void 0;
+    switch (colorMode) {
+      case 'RGB':
+        result = color.toRgbArray();
+        break;
+      case 'HSB':
+        result = color.toHsvArray();
+        break;
+      case 'HSL':
+        result = color.toHslArray();
+        break;
+      default:
+        result = color.toRgbArray();
     }
-  }, {
-    key: 'getPrefixCls',
-    value: function getPrefixCls() {
-      return this.props.rootPrefixCls + '-params';
-    }
-  }, {
-    key: 'getColorChannel',
-    value: function getColorChannel(colrInstance, mode) {
-      var color = colrInstance || this.state.color;
-      var colorMode = mode || this.state.mode;
-      var result = undefined;
-      switch (colorMode) {
-        case 'RGB':
-          result = color.toRgbArray();
-          break;
-        case 'HSB':
-          result = color.toHsvArray();
-          break;
-        case 'HSL':
-          result = color.toHslArray();
-          break;
-        default:
-          result = color.toRgbArray();
-      }
-      return result;
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var prefixCls = this.getPrefixCls();
-      var colorChannel = this.getColorChannel();
-      return _react2['default'].createElement(
+    return result;
+  };
+
+  Params.prototype.render = function render() {
+    var prefixCls = this.getPrefixCls();
+    var colorChannel = this.getColorChannel();
+    return _react2["default"].createElement(
+      'div',
+      { className: prefixCls },
+      _react2["default"].createElement(
         'div',
-        { className: prefixCls },
-        _react2['default'].createElement(
-          'div',
-          { className: prefixCls + '-' + 'input' },
-          _react2['default'].createElement('input', {
-            className: prefixCls + '-' + 'hex',
-            type: 'text',
-            maxLength: '6',
-            onChange: this.onHexHandler,
-            value: this.state.hex.toUpperCase()
-          }),
-          _react2['default'].createElement('input', { type: 'number', ref: 'channel_0',
-            value: colorChannel[0],
-            onChange: this.onColorChannelChange.bind(null, 0) }),
-          _react2['default'].createElement('input', { type: 'number', ref: 'channel_1',
-            value: colorChannel[1],
-            onChange: this.onColorChannelChange.bind(null, 1) }),
-          _react2['default'].createElement('input', { type: 'number', ref: 'channel_2',
-            value: colorChannel[2],
-            onChange: this.onColorChannelChange.bind(null, 2) }),
-          _react2['default'].createElement('input', { type: 'number',
-            value: this.props.alpha,
-            onChange: this.onAlphaHandler })
+        { className: prefixCls + '-input' },
+        _react2["default"].createElement('input', {
+          className: prefixCls + '-hex',
+          type: 'text',
+          maxLength: '6',
+          onChange: this.onHexHandler,
+          value: this.state.hex.toUpperCase()
+        }),
+        _react2["default"].createElement('input', { type: 'number', ref: 'channel_0',
+          value: colorChannel[0],
+          onChange: this.onColorChannelChange.bind(null, 0)
+        }),
+        _react2["default"].createElement('input', { type: 'number', ref: 'channel_1',
+          value: colorChannel[1],
+          onChange: this.onColorChannelChange.bind(null, 1)
+        }),
+        _react2["default"].createElement('input', { type: 'number', ref: 'channel_2',
+          value: colorChannel[2],
+          onChange: this.onColorChannelChange.bind(null, 2)
+        }),
+        _react2["default"].createElement('input', { type: 'number',
+          value: this.props.alpha,
+          onChange: this.onAlphaHandler
+        })
+      ),
+      _react2["default"].createElement(
+        'div',
+        { className: prefixCls + '-lable' },
+        _react2["default"].createElement(
+          'label',
+          { className: prefixCls + '-lable-hex' },
+          'Hex'
         ),
-        _react2['default'].createElement(
-          'div',
-          { className: prefixCls + '-' + 'lable' },
-          _react2['default'].createElement(
-            'label',
-            { className: prefixCls + '-' + 'lable-hex' },
-            'Hex'
-          ),
-          _react2['default'].createElement(
-            'label',
-            { className: prefixCls + '-' + 'lable-number',
-              onClick: this.onModeChange
-            },
-            this.state.mode[0]
-          ),
-          _react2['default'].createElement(
-            'label',
-            { className: prefixCls + '-' + 'lable-number',
-              onClick: this.onModeChange
-            },
-            this.state.mode[1]
-          ),
-          _react2['default'].createElement(
-            'label',
-            { className: prefixCls + '-' + 'lable-number',
-              onClick: this.onModeChange
-            },
-            this.state.mode[2]
-          ),
-          _react2['default'].createElement(
-            'label',
-            { className: prefixCls + '-' + 'lable-alpha' },
-            'A'
-          )
+        _react2["default"].createElement(
+          'label',
+          { className: prefixCls + '-lable-number',
+            onClick: this.onModeChange
+          },
+          this.state.mode[0]
+        ),
+        _react2["default"].createElement(
+          'label',
+          { className: prefixCls + '-lable-number',
+            onClick: this.onModeChange
+          },
+          this.state.mode[1]
+        ),
+        _react2["default"].createElement(
+          'label',
+          { className: prefixCls + '-lable-number',
+            onClick: this.onModeChange
+          },
+          this.state.mode[2]
+        ),
+        _react2["default"].createElement(
+          'label',
+          { className: prefixCls + '-lable-alpha\'' },
+          'A'
         )
-      );
-    }
-  }]);
+      )
+    );
+  };
 
   return Params;
-})(_react2['default'].Component);
+}(_react2["default"].Component);
 
-exports['default'] = Params;
+exports["default"] = Params;
 
+
 Params.propTypes = {
-  onChange: _react2['default'].PropTypes.func,
-  hsv: _react2['default'].PropTypes.object,
-  alpha: _react2['default'].PropTypes.number,
-  rootPrefixCls: _react2['default'].PropTypes.string,
-  onAlphaChange: _react2['default'].PropTypes.func,
-  mode: _react2['default'].PropTypes.oneOf(modesMap)
+  onChange: _react2["default"].PropTypes.func,
+  hsv: _react2["default"].PropTypes.object,
+  alpha: _react2["default"].PropTypes.number,
+  rootPrefixCls: _react2["default"].PropTypes.string,
+  onAlphaChange: _react2["default"].PropTypes.func,
+  mode: _react2["default"].PropTypes.oneOf(modesMap)
 };
@@ -285,0 +277,0 @@

lib/placements.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', {
+Object.defineProperty(exports, "__esModule", {
   value: true
@@ -40,3 +40,3 @@ });
 
-exports['default'] = placements;
+exports["default"] = placements;
 module.exports = exports['default'];

lib/Preview.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', {
+Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+var _react = require('react');
 
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+var _react2 = _interopRequireDefault(_react);
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+var _colr = require('colr');
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+var _colr2 = _interopRequireDefault(_colr);
 
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _react = require('react');
+function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
 
-var _react2 = _interopRequireDefault(_react);
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var _colr = require('colr');
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-var _colr2 = _interopRequireDefault(_colr);
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
 
-var colr = new _colr2['default']();
+var colr = new _colr2["default"]();
 
-var Preview = (function (_React$Component) {
+var Preview = function (_React$Component) {
   _inherits(Preview, _React$Component);
@@ -33,52 +33,48 @@
 
-    _get(Object.getPrototypeOf(Preview.prototype), 'constructor', this).apply(this, arguments);
+    return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
   }
 
-  _createClass(Preview, [{
-    key: 'onChange',
-    value: function onChange(e) {
-      var value = e.target.value;
-      var color = colr.fromHex(value);
-      this.props.onChange(color.toHsvObject());
-      e.stopPropagation();
-    }
-  }, {
-    key: 'getPrefixCls',
-    value: function getPrefixCls() {
-      return this.props.rootPrefixCls + '-preview';
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var prefixCls = this.getPrefixCls();
-      var hex = colr.fromHsvObject(this.props.hsv).toHex();
-      return _react2['default'].createElement(
-        'div',
-        { className: prefixCls },
-        _react2['default'].createElement('span', { style: {
-            backgroundColor: hex,
-            opacity: this.props.alpha / 100 }
-        }),
-        _react2['default'].createElement('input', {
-          type: 'color',
-          value: hex,
-          onChange: this.onChange.bind(this),
-          onClick: this.props.onInputClick
-        })
-      );
-    }
-  }]);
+  Preview.prototype.onChange = function onChange(e) {
+    var value = e.target.value;
+    var color = colr.fromHex(value);
+    this.props.onChange(color.toHsvObject());
+    e.stopPropagation();
+  };
 
+  Preview.prototype.getPrefixCls = function getPrefixCls() {
+    return this.props.rootPrefixCls + '-preview';
+  };
+
+  Preview.prototype.render = function render() {
+    var prefixCls = this.getPrefixCls();
+    var hex = colr.fromHsvObject(this.props.hsv).toHex();
+    return _react2["default"].createElement(
+      'div',
+      { className: prefixCls },
+      _react2["default"].createElement('span', { style: {
+          backgroundColor: hex,
+          opacity: this.props.alpha / 100 }
+      }),
+      _react2["default"].createElement('input', {
+        type: 'color',
+        value: hex,
+        onChange: this.onChange.bind(this),
+        onClick: this.props.onInputClick
+      })
+    );
+  };
+
   return Preview;
-})(_react2['default'].Component);
+}(_react2["default"].Component);
 
-exports['default'] = Preview;
+exports["default"] = Preview;
 
+
 Preview.propTypes = {
-  rootPrefixCls: _react2['default'].PropTypes.string,
-  hsv: _react2['default'].PropTypes.object,
-  alpha: _react2['default'].PropTypes.number,
-  onChange: _react2['default'].PropTypes.func,
-  onInputClick: _react2['default'].PropTypes.func
+  rootPrefixCls: _react2["default"].PropTypes.string,
+  hsv: _react2["default"].PropTypes.object,
+  alpha: _react2["default"].PropTypes.number,
+  onChange: _react2["default"].PropTypes.func,
+  onInputClick: _react2["default"].PropTypes.func
 };
 module.exports = exports['default'];

lib/Ribbon.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', {
+Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,12 +9,2 @@ });
 
-var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
-
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 var _react = require('react');
@@ -32,11 +22,19 @@
 
-var Ribbon = (function (_React$Component) {
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+var Ribbon = function (_React$Component) {
   _inherits(Ribbon, _React$Component);
 
   function Ribbon(props) {
-    var _this = this;
-
     _classCallCheck(this, Ribbon);
 
-    _get(Object.getPrototypeOf(Ribbon.prototype), 'constructor', this).call(this, props);
+    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
 
@@ -49,103 +47,95 @@ var events = ['onMouseDown', 'onDrag', 'onDragEnd', 'pointMoveTo', '_setHuePosition'];
     });
+    return _this;
   }
 
-  _createClass(Ribbon, [{
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      this.removeListeners();
-    }
-  }, {
-    key: 'onMouseDown',
-    value: function onMouseDown(e) {
-      var x = e.clientX;
-      var y = e.clientY;
+  Ribbon.prototype.componentWillUnmount = function componentWillUnmount() {
+    this.removeListeners();
+  };
 
-      this.pointMoveTo({
-        x: x, y: y
-      });
+  Ribbon.prototype.onMouseDown = function onMouseDown(e) {
+    var x = e.clientX;
+    var y = e.clientY;
 
-      this.dragListener = _rcUtil2['default'].Dom.addEventListener(window, 'mousemove', this.onDrag);
-      this.dragUpListener = _rcUtil2['default'].Dom.addEventListener(window, 'mouseup', this.onDragEnd);
+    this.pointMoveTo({
+      x: x, y: y
+    });
+
+    this.dragListener = _rcUtil2["default"].Dom.addEventListener(window, 'mousemove', this.onDrag);
+    this.dragUpListener = _rcUtil2["default"].Dom.addEventListener(window, 'mouseup', this.onDragEnd);
+  };
+
+  Ribbon.prototype.onDrag = function onDrag(e) {
+    var x = e.clientX;
+    var y = e.clientY;
+    this.pointMoveTo({
+      x: x, y: y
+    });
+  };
+
+  Ribbon.prototype.onDragEnd = function onDragEnd(e) {
+    var x = e.clientX;
+    var y = e.clientY;
+    this.pointMoveTo({
+      x: x, y: y
+    });
+    this.removeListeners();
+  };
+
+  Ribbon.prototype.getPrefixCls = function getPrefixCls() {
+    return this.props.rootPrefixCls + '-ribbon';
+  };
+
+  Ribbon.prototype.pointMoveTo = function pointMoveTo(coords) {
+    var rect = _reactDom2["default"].findDOMNode(this).getBoundingClientRect();
+    var width = rect.width;
+    var left = coords.x - rect.left;
+    left = Math.max(0, left);
+    left = Math.min(left, width);
+    var huePercent = left / width;
+    var hue = huePercent * 360;
+    // 新的对象, 避免引用
+    var hsv = _extends({}, this.props.hsv, {
+      h: hue
+    });
+    this.props.onChange(hsv);
+  };
+
+  Ribbon.prototype.removeListeners = function removeListeners() {
+    if (this.dragListener) {
+      this.dragListener.remove();
+      this.dragListener = null;
     }
-  }, {
-    key: 'onDrag',
-    value: function onDrag(e) {
-      var x = e.clientX;
-      var y = e.clientY;
-      this.pointMoveTo({
-        x: x, y: y
-      });
+    if (this.dragUpListener) {
+      this.dragUpListener.remove();
+      this.dragUpListener = null;
     }
-  }, {
-    key: 'onDragEnd',
-    value: function onDragEnd(e) {
-      var x = e.clientX;
-      var y = e.clientY;
-      this.pointMoveTo({
-        x: x, y: y
-      });
-      this.removeListeners();
-    }
-  }, {
-    key: 'getPrefixCls',
-    value: function getPrefixCls() {
-      return this.props.rootPrefixCls + '-ribbon';
-    }
-  }, {
-    key: 'pointMoveTo',
-    value: function pointMoveTo(coords) {
-      var rect = _reactDom2['default'].findDOMNode(this).getBoundingClientRect();
-      var width = rect.width;
-      var left = coords.x - rect.left;
-      left = Math.max(0, left);
-      left = Math.min(left, width);
-      var huePercent = left / width;
-      var hue = huePercent * 360;
-      // 新的对象, 避免引用
-      var hsv = _extends({}, this.props.hsv, {
-        h: hue
-      });
-      this.props.onChange(hsv);
-    }
-  }, {
-    key: 'removeListeners',
-    value: function removeListeners() {
-      if (this.dragListener) {
-        this.dragListener.remove();
-        this.dragListener = null;
-      }
-      if (this.dragUpListener) {
-        this.dragUpListener.remove();
-        this.dragUpListener = null;
-      }
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var prefixCls = this.getPrefixCls();
-      var HSV = this.props.hsv;
-      var hue = HSV.h;
-      var per = hue / 360 * 100;
-      return _react2['default'].createElement(
-        'div',
-        { className: prefixCls },
-        _react2['default'].createElement('span', { ref: 'point', style: { left: per + '%' } }),
-        _react2['default'].createElement('div', {
-          className: prefixCls + '-' + 'handler',
-          onMouseDown: this.onMouseDown
-        })
-      );
-    }
-  }]);
+  };
 
+  Ribbon.prototype.render = function render() {
+    var prefixCls = this.getPrefixCls();
+    var HSV = this.props.hsv;
+    var hue = HSV.h;
+    var per = hue / 360 * 100;
+    return _react2["default"].createElement(
+      'div',
+      { className: prefixCls },
+      _react2["default"].createElement('span', { ref: 'point', style: { left: per + '%' } }),
+      _react2["default"].createElement('div', {
+        className: prefixCls + '-handler',
+        onMouseDown: this.onMouseDown
+      })
+    );
+  };
+
   return Ribbon;
-})(_react2['default'].Component);
+}(_react2["default"].Component);
 
-exports['default'] = Ribbon;
+exports["default"] = Ribbon;
 
+
 Ribbon.propTypes = {
-  rootPrefixCls: _react2['default'].PropTypes.string,
-  hsv: _react2['default'].PropTypes.object,
-  onChange: _react2['default'].PropTypes.func
+  rootPrefixCls: _react2["default"].PropTypes.string,
+  hsv: _react2["default"].PropTypes.object,
+  onChange: _react2["default"].PropTypes.func
 };
 module.exports = exports['default'];

lib/utils/validationColor.js

@@ -1,7 +0,7 @@
-'use strict';
+"use strict";
 
 module.exports = function validationColor(props, propName, componentName) {
   if (props[propName] && !/^#[0-9a-fA-F]{3,6}$/.test(props[propName])) {
-    return new Error(componentName + '.props.' + propName + ' Validation failed!');
+    return new Error(componentName + ".props." + propName + " Validation failed!");
   }
 };

package.json

 {
   "name": "rc-color-picker",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "color-picker ui component for react",
-  "main": "lib/index.js",
+  "main": "./lib/index.js",
   "keywords": [
@@ -23,3 +23,4 @@ "react",
     "lib/",
-    "assets/*.css"
+    "assets/*.css",
+    "dist/"
   ],
@@ -29,6 +30,13 @@ "config": {
   },
+  "entry": {
+    "rc-color-picker": [
+      "./assets/index.less",
+      "./src/index.js"
+    ]
+  },
+  "style": "./assets/index.css",
   "scripts": {
     "build": "rc-tools run build",
     "gh-pages": "rc-tools run gh-pages",
-    "start": "rc-server",
+    "start": "rc-tools run server",
     "pub": "rc-tools run pub",
@@ -38,12 +46,13 @@ "lint": "rc-tools run lint",
     "saucelabs": "rc-tools run saucelabs",
-    "browser-test": "rc-tools run browser-test",
-    "browser-test-cover": "rc-tools run browser-test-cover"
+    "test": "rc-tools run test",
+    "coverage": "rc-tools run coverage"
   },
   "license": "MIT",
   "devDependencies": {
+    "babel-core": "^6.21.0",
+    "estraverse": "^4.2.0",
     "expect.js": "~0.3.1",
     "lesshat": "~3.0.2",
     "pre-commit": "1.x",
-    "rc-server": "3.x",
-    "rc-tools": "4.x",
+    "rc-tools": "^5.10.1",
     "react": "15.x",
@@ -50,0 +59,0 @@ "react-dom": "15.x"

README.md

@@ -13,3 +13,3 @@ # rc-color-picker
 
-| ![Chrome](https://raw.github.com/alrra/browser-logos/master/chrome/chrome_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/edge/edge_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/firefox/firefox_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/internet-explorer/internet-explorer_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/safari/safari_48x48.png) |
+| ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) |
 | --- | --- | --- | --- | --- | --- |
@@ -16,0 +16,0 @@ | Chrome 31.0+ ✔ | Edge 12.0+ ✔ | Firefox 31.0+ ✔ | IE 10+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1298012

increased by1662.69%

Number of package files

21

increased by61.54%

Lines of code

9027

increased by401.5%

Worsened metrics

Dev dependency count

8

increased by14.29%

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

3

increased byInfinity%

No dependency changes