coloreact - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

lib/components/ColorPicker.js

@@ -117,5 +117,27 @@ 'use strict';
       this.setState({ color: color });
-      this.props.onChange(u.toRgbString(color));
+      this.props.onChange(this.output());
     }
   }, {
+    key: 'output',
+    value: function output() {
+      var color = this.state.color;
+
+      var rgbArr = u.toRGBa(color);
+      var hex = u.toHEX(rgbArr);
+      var rgbaString = u.toRgbString(color);
+      var rgba = {
+        r: rgbArr[0],
+        g: rgbArr[1],
+        b: rgbArr[2],
+        a: rgbArr[3]
+      };
+      var hsv = {
+        h: color[0],
+        s: color[1],
+        v: color[2]
+      };
+
+      return { rgba: rgba, rgbaString: rgbaString, hex: hex, hsv: hsv };
+    }
+  }, {
     key: 'render',
@@ -122,0 +144,0 @@ value: function render() {

lib/components/Draggable.js

@@ -95,4 +95,5 @@ 'use strict';
 
+          e.preventDefault();
 
-          e.preventDefault();
+          this.updateBoundingRect();
           document.addEventListener("mousemove", this.handleUpdate);
@@ -99,0 +100,0 @@ document.addEventListener("touchmove", this.handleUpdate);

lib/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.ColorPicker = undefined;
+exports.Map = exports.Slider = exports.ColorPicker = undefined;
 
@@ -13,4 +13,14 @@ var _ColorPicker2 = require('./components/ColorPicker');
 
+var _Slider2 = require('./components/Slider');
+
+var _Slider3 = _interopRequireDefault(_Slider2);
+
+var _Map2 = require('./components/Map');
+
+var _Map3 = _interopRequireDefault(_Map2);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-exports.ColorPicker = _ColorPicker3.default;
+exports.ColorPicker = _ColorPicker3.default;
+exports.Slider = _Slider3.default;
+exports.Map = _Map3.default;

lib/utils/index.js

@@ -6,6 +6,3 @@ "use strict";
 });
-exports.toHSV = undefined;
-exports.toRgbString = toRgbString;
-exports.equals = equals;
-exports.isDark = isDark;
+exports.isDark = exports.equals = exports.toRgbString = exports.toRGBa = exports.toHSV = exports.toHEX = undefined;
 
@@ -28,2 +25,6 @@ var _parse = require("pure-color/parse");
 
+var _rgb2hex = require("pure-color/convert/rgb2hex");
+
+var _rgb2hex2 = _interopRequireDefault(_rgb2hex);
+
 var _rgb2grayscale = require("pure-color/convert/rgb2grayscale");
@@ -37,2 +38,6 @@
 
+var toHEX = exports.toHEX = function toHEX(rgb) {
+  return (0, _rgb2hex2.default)(rgb);
+};
+
 /**
@@ -47,22 +52,42 @@ * Parse String to Hue-Saturation-Value
   var alpha = parsedColor.length === 4 ? parsedColor[3] : 1;
-
   return [].concat(_toConsumableArray(hsv), [alpha]);
 };
 
-function toRgbString(hsv) {
+/**
+ * Transform Hue-Saturation-Value into rgba String
+ * @param  {Array} hsv
+ * @return {String}
+ */
+var toRGBa = exports.toRGBa = function toRGBa(hsv) {
   var rgb = (0, _hsv2rgb2.default)(hsv);
+  return [].concat(_toConsumableArray(rgb), [hsv.length === 4 ? hsv[3].toFixed(2) : 1]);
+};
 
-  if (hsv.length === 4) {
-    rgb.push(hsv[3]);
-  }
+/**
+ * Transform Hue-Saturation-Value into rgba String
+ * @param  {Array} hsv
+ * @return {String}
+ */
+var toRgbString = exports.toRgbString = function toRgbString(hsv) {
+  var rgb = (0, _hsv2rgb2.default)(hsv);
+  return (0, _rgb2string2.default)([].concat(_toConsumableArray(rgb), [hsv.length === 4 ? hsv[3].toFixed(2) : 1]));
+};
 
-  return (0, _rgb2string2.default)(rgb);
-}
+/**
+ * Determine if two Hue-Saturation-Value arrays are equals
+ * @param  {Array} a
+ * @param  {Array} b
+ * @return {Boolean}
+ */
+var equals = exports.equals = function equals(a, b) {
+  return toRgbString(a) === toRgbString(b);
+};
 
-function equals(hsv1, hsv2) {
-  return toRgbString(hsv1) === toRgbString(hsv2);
-}
-
-function isDark(hsv) {
+/**
+ * Determine if color is dark
+ * @param  {Array} hsv Hue-Saturation-Value
+ * @return {Boolean}
+ */
+var isDark = exports.isDark = function isDark(hsv) {
   return (0, _rgb2grayscale2.default)((0, _hsv2rgb2.default)(hsv)) <= 128;
-}
+};

package.json

 {
   "name": "coloreact",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "A tiny Color Picker for React",
   "main": "lib/index.js",
   "scripts": {
-    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --port 3004",
+    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --port 3040",
     "build": "NODE_ENV=production babel -d lib/ src/"
@@ -9,0 +9,0 @@ },

src/components/Draggable.js

@@ -50,4 +50,5 @@ import React, { Component, PropTypes } from 'react';
         const { document } = this;
+        e.preventDefault();
 
-        e.preventDefault();
+        this.updateBoundingRect();
         document.addEventListener("mousemove", this.handleUpdate);
@@ -63,3 +64,2 @@ document.addEventListener("touchmove", this.handleUpdate);
 
-
       handleUpdate (e) {
@@ -66,0 +66,0 @@ if (this.state.active) {

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

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

50845

increased by3.61%

Lines of code

1320

increased by4.1%

No dependency changes