Lib

hmeerlo · Mar 7, 2016 · 5e4b031 · 5e4b031
1 parent 4928c36
commit 5e4b031
Show file tree

Hide file tree

Showing 33 changed files with 848 additions and 790 deletions.
diff --git a/.babelrc b/.babelrc
@@ -3,5 +3,8 @@
     "es2015",
     "stage-0",
     "react"
+  ],
+  "plugins": [
+    "transform-class-property-semicolons"
   ]
 }
diff --git a/.jscsrc b/.jscsrc
@@ -1,6 +1,6 @@
 {
   "preset": "airbnb",
-  "excludeFiles": ["build/**", "node_modules/**"],
+  "excludeFiles": ["build/**", "node_modules/**", "lib/**"],
   "disallowQuotedKeysInObjects": null,
   "validateQuoteMarks": null,
   "requireSemicolons": false,

diff --git a/lib/components/chrome/Chrome.js b/lib/components/chrome/Chrome.js
@@ -1,14 +1,13 @@
 'use strict';
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-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; }; }();
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Chrome = undefined;
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+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 _react2 = _interopRequireDefault(_react);
@@ -31,6 +30,10 @@ var _ChromePointerCircle = require('./ChromePointerCircle');
 
 var _ChromePointerCircle2 = _interopRequireDefault(_ChromePointerCircle);
 
+var _reactAddonsShallowCompare = require('react-addons-shallow-compare');
+
+var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);
+
 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"); } }
@@ -43,12 +46,19 @@ var Chrome = exports.Chrome = function (_ReactCSS$Component) {
   _inherits(Chrome, _ReactCSS$Component);
 
   function Chrome() {
-    _classCallCheck(this, Chrome);
+    var _Object$getPrototypeO;
 
-    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Chrome).call(this));
+    var _temp, _this, _ret;
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-    _this.handleChange = _this.handleChange.bind(_this);
-    return _this;
+    _classCallCheck(this, Chrome);
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Chrome)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.shouldComponentUpdate = _reactAddonsShallowCompare2.default.bind(_this, _this, arguments[0], arguments[1]), _this.handleChange = function (data) {
+      _this.props.onChange(data);
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
   _createClass(Chrome, [{
@@ -119,11 +129,6 @@ var Chrome = exports.Chrome = function (_ReactCSS$Component) {
         }
       };
     }
-  }, {
-    key: 'handleChange',
-    value: function handleChange(data) {
-      this.props.onChange(data);
-    }
   }, {
     key: 'render',
     value: function render() {

diff --git a/lib/components/chrome/ChromeFields.js b/lib/components/chrome/ChromeFields.js
@@ -1,12 +1,11 @@
 'use strict';
-
-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; }; }();
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChromeFields = undefined;
 
+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 _react2 = _interopRequireDefault(_react);
@@ -19,6 +18,10 @@ var _color = require('../../helpers/color');
 
 var _color2 = _interopRequireDefault(_color);
 
+var _reactAddonsShallowCompare = require('react-addons-shallow-compare');
+
+var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);
+
 var _common = require('../common');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -32,21 +35,68 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 var ChromeFields = exports.ChromeFields = function (_ReactCSS$Component) {
   _inherits(ChromeFields, _ReactCSS$Component);
 
-  function ChromeFields(props) {
-    _classCallCheck(this, ChromeFields);
+  function ChromeFields() {
+    var _Object$getPrototypeO;
 
-    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(ChromeFields).call(this));
+    var _temp, _this, _ret;
 
-    _this.state = {
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _classCallCheck(this, ChromeFields);
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ChromeFields)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.shouldComponentUpdate = _reactAddonsShallowCompare2.default.bind(_this, _this, arguments[0], arguments[1]), _this.state = {
       view: ''
-    };
+    }, _this.handleChange = function (data) {
+      _this.props.onChange(data);
+    }, _this.toggleViews = function () {
+      if (_this.state.view === 'hex') {
+        _this.setState({ view: 'rgb' });
+      } else if (_this.state.view === 'rgb') {
+        _this.setState({ view: 'hsl' });
+      } else if (_this.state.view === 'hsl') {
+        if (_this.props.hsl.a === 1) {
+          _this.setState({ view: 'hex' });
+        } else {
+          _this.setState({ view: 'rgb' });
+        }
+      }
+    }, _this.handleChange = function (data) {
+      if (data.hex) {
+        _color2.default.isValidHex(data.hex) && _this.props.onChange(data.hex);
+      } else if (data.r || data.g || data.b) {
+        _this.props.onChange({
+          r: data.r || _this.props.rgb.r,
+          g: data.g || _this.props.rgb.g,
+          b: data.b || _this.props.rgb.b
+        });
+      } else if (data.a) {
+        if (data.a < 0) {
+          data.a = 0;
+        } else if (data.a > 1) {
+          data.a = 1;
+        }
 
-    _this.handleChange = _this.handleChange.bind(_this);
-    _this.toggleViews = _this.toggleViews.bind(_this);
-    _this.handleChange = _this.handleChange.bind(_this);
-    _this.hideHighlight = _this.hideHighlight.bind(_this);
-    _this.showHighlight = _this.showHighlight.bind(_this);
-    return _this;
+        _this.props.onChange({
+          h: _this.props.hsl.h,
+          s: _this.props.hsl.s,
+          l: _this.props.hsl.l,
+          a: Math.round(data.a * 100) / 100
+        });
+      } else if (data.h || data.s || data.l) {
+
+        _this.props.onChange({
+          h: data.h || _this.props.hsl.h,
+          s: data.s && data.s.replace('%', '') || _this.props.hsl.s,
+          l: data.l && data.l.replace('%', '') || _this.props.hsl.l
+        });
+      }
+    }, _this.showHighlight = function () {
+      _this.refs.iconHighlight.style.display = 'block';
+    }, _this.hideHighlight = function () {
+      _this.refs.iconHighlight.style.display = 'none';
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
   _createClass(ChromeFields, [{
@@ -115,11 +165,6 @@ var ChromeFields = exports.ChromeFields = function (_ReactCSS$Component) {
         }
       };
     }
-  }, {
-    key: 'handleChange',
-    value: function handleChange(data) {
-      this.props.onChange(data);
-    }
   }, {
     key: 'componentDidMount',
     value: function componentDidMount() {
@@ -129,71 +174,13 @@ var ChromeFields = exports.ChromeFields = function (_ReactCSS$Component) {
         this.setState({ view: 'rgb' });
       }
     }
-  }, {
-    key: 'toggleViews',
-    value: function toggleViews() {
-      if (this.state.view === 'hex') {
-        this.setState({ view: 'rgb' });
-      } else if (this.state.view === 'rgb') {
-        this.setState({ view: 'hsl' });
-      } else if (this.state.view === 'hsl') {
-        if (this.props.hsl.a === 1) {
-          this.setState({ view: 'hex' });
-        } else {
-          this.setState({ view: 'rgb' });
-        }
-      }
-    }
   }, {
     key: 'componentWillReceiveProps',
     value: function componentWillReceiveProps(nextProps) {
       if (nextProps.hsl.a !== 1 && this.state.view === 'hex') {
         this.setState({ view: 'rgb' });
       }
     }
-  }, {
-    key: 'handleChange',
-    value: function handleChange(data) {
-      if (data.hex) {
-        _color2.default.isValidHex(data.hex) && this.props.onChange(data.hex);
-      } else if (data.r || data.g || data.b) {
-        this.props.onChange({
-          r: data.r || this.props.rgb.r,
-          g: data.g || this.props.rgb.g,
-          b: data.b || this.props.rgb.b
-        });
-      } else if (data.a) {
-        if (data.a < 0) {
-          data.a = 0;
-        } else if (data.a > 1) {
-          data.a = 1;
-        }
-
-        this.props.onChange({
-          h: this.props.hsl.h,
-          s: this.props.hsl.s,
-          l: this.props.hsl.l,
-          a: Math.round(data.a * 100) / 100
-        });
-      } else if (data.h || data.s || data.l) {
-
-        this.props.onChange({
-          h: data.h || this.props.hsl.h,
-          s: data.s && data.s.replace('%', '') || this.props.hsl.s,
-          l: data.l && data.l.replace('%', '') || this.props.hsl.l
-        });
-      }
-    }
-  }, {
-    key: 'showHighlight',
-    value: function showHighlight() {
-      this.refs.iconHighlight.style.display = 'block';
-    }
-  }, {
-    key: 'hideHighlight',
-    value: function hideHighlight() {
-      this.refs.iconHighlight.style.display = 'none';
-    }
   }, {
     key: 'render',
     value: function render() {

diff --git a/lib/components/chrome/ChromePointer.js b/lib/components/chrome/ChromePointer.js
@@ -1,12 +1,11 @@
 'use strict';
-
-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; }; }();
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChromePointer = undefined;
 
+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 _react2 = _interopRequireDefault(_react);
@@ -15,6 +14,10 @@ var _reactcss = require('reactcss');
 
 var _reactcss2 = _interopRequireDefault(_reactcss);
 
+var _reactAddonsShallowCompare = require('react-addons-shallow-compare');
+
+var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);
+
 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"); } }
@@ -27,9 +30,17 @@ var ChromePointer = exports.ChromePointer = function (_ReactCSS$Component) {
   _inherits(ChromePointer, _ReactCSS$Component);
 
   function ChromePointer() {
+    var _Object$getPrototypeO;
+
+    var _temp, _this, _ret;
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
     _classCallCheck(this, ChromePointer);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(ChromePointer).apply(this, arguments));
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ChromePointer)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.shouldComponentUpdate = _reactAddonsShallowCompare2.default.bind(_this, _this, arguments[0], arguments[1]), _temp), _possibleConstructorReturn(_this, _ret);
   }
 
   _createClass(ChromePointer, [{

diff --git a/lib/components/chrome/ChromePointerCircle.js b/lib/components/chrome/ChromePointerCircle.js
@@ -1,12 +1,11 @@
 'use strict';
-
-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; }; }();
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChromePointerCircle = undefined;
 
+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 _react2 = _interopRequireDefault(_react);
@@ -15,6 +14,10 @@ var _reactcss = require('reactcss');
 
 var _reactcss2 = _interopRequireDefault(_reactcss);
 
+var _reactAddonsShallowCompare = require('react-addons-shallow-compare');
+
+var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);
+
 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"); } }
@@ -27,9 +30,17 @@ var ChromePointerCircle = exports.ChromePointerCircle = function (_ReactCSS$Comp
   _inherits(ChromePointerCircle, _ReactCSS$Component);
 
   function ChromePointerCircle() {
+    var _Object$getPrototypeO;
+
+    var _temp, _this, _ret;
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
     _classCallCheck(this, ChromePointerCircle);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(ChromePointerCircle).apply(this, arguments));
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ChromePointerCircle)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.shouldComponentUpdate = _reactAddonsShallowCompare2.default.bind(_this, _this, arguments[0], arguments[1]), _temp), _possibleConstructorReturn(_this, _ret);
   }
 
   _createClass(ChromePointerCircle, [{