react-color-picker - npm Package Compare versions

Comparing version 4.0.1 to 4.0.2

lib/HueSpectrum.js

@@ -46,3 +46,4 @@ 'use strict';
       pointerSize: 3,
-      defaultColor: require('./defaultColor')
+      defaultColor: require('./defaultColor'),
+      isHueSpectrum: true
     };
@@ -49,0 +50,0 @@ },

lib/index.js

@@ -8,2 +8,4 @@ '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; }; }();
@@ -82,3 +84,5 @@
     value: function render() {
-      var props = this.prepareProps((0, _objectAssign2.default)({}, this.props));
+      var props = this.props;
+
+      var className = this.prepareClassName(props);
       var hueStyle = (0, _objectAssign2.default)({}, this.props.hueStyle) || {};
@@ -92,21 +96,49 @@
 
-      var saturationConfig = {
+      var children = props.children;
+
+      var hueSpectrumProps = null;
+      var saturationSpectrumProps = null;
+
+      if (children) {
+        children = _react2.default.Children.toArray(children).forEach(function (child) {
+          if (child && child.props) {
+            if (child.props.isHueSpectrum) {
+              hueSpectrumProps = (0, _objectAssign2.default)({}, child.props);
+            }
+            if (child.props.isSaturationSpectrum) {
+              saturationSpectrumProps = (0, _objectAssign2.default)({}, child.props);
+            }
+          }
+        });
+      }
+
+      var saturationConfig = (0, _objectAssign2.default)({
         onDrag: this.handleSaturationDrag,
         onChange: this.handleSaturationChange,
-        onMouseDown: this.handleSaturationMouseDown,
-        height: props.saturationHeight,
-        width: props.saturationWidth,
-        inPicker: true
-      };
+        onMouseDown: this.handleSaturationMouseDown
+      }, saturationSpectrumProps);
 
-      var hueConfig = {
+      if (saturationConfig.width === undefined) {
+        saturationConfig.width = props.saturationWidth;
+      }
+      if (saturationConfig.height === undefined) {
+        saturationConfig.height = props.saturationHeight;
+      }
+      saturationConfig.inPicker = true;
+
+      var hueConfig = (0, _objectAssign2.default)({
         onDrag: this.handleHueDrag,
         onChange: this.handleHueChange,
         onMouseDown: this.handleHueMouseDown,
-        height: props.hueHeight || props.saturationHeight,
-        width: props.hueWidth,
-        inPicker: true,
         style: hueStyle
-      };
+      }, hueSpectrumProps);
 
+      if (hueConfig.width === undefined) {
+        hueConfig.width = props.hueWidth;
+      }
+      if (hueConfig.height === undefined) {
+        hueConfig.height = props.hueHeight || props.saturationHeight;
+      }
+      hueConfig.inPicker = true;
+
       if (this.state.dragHue) {
@@ -139,3 +171,3 @@ ;(value || defaultValue).h = this.state.dragHue;
         'div',
-        divProps,
+        _extends({}, divProps, { className: className }),
         _react2.default.createElement(_SaturationSpectrum2.default, saturationConfig),
@@ -142,0 +174,0 @@ _react2.default.createElement(_HueSpectrum2.default, hueConfig)

lib/SaturationSpectrum.js

@@ -48,3 +48,4 @@ 'use strict';
             pointerSize: 7,
-            defaultColor: require('./defaultColor')
+            defaultColor: require('./defaultColor'),
+            isSaturationSpectrum: true
         };
@@ -51,0 +52,0 @@ },

package.json

 {
   "name": "react-color-picker",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "React Color Picker",
@@ -24,3 +24,5 @@ "main": "lib/index.js",
     "object-assign": "^4.1.0",
-    "react-class": "^3.1.4",
+    "react": "^15.3.0",
+    "react-class": "^3.2.2",
+    "react-dom": "^15.3.0",
     "region": "^2.1.2",
@@ -27,0 +29,0 @@ "tinycolor2": "^1.4.1"

src/HueSpectrum.js

@@ -17,6 +17,7 @@ import React from 'react'
       return {
-        height      : 300,
-        width       : 30,
-        pointerSize : 3,
-        defaultColor: require('./defaultColor')
+        height: 300,
+        width: 30,
+        pointerSize: 3,
+        defaultColor: require('./defaultColor'),
+        isHueSpectrum: true
       }
@@ -23,0 +24,0 @@ },

src/index.js

@@ -38,3 +38,5 @@ import React, { Component } from 'react'
   render(){
-    const props = this.prepareProps(assign({}, this.props))
+    const props = this.props
+
+    const className = this.prepareClassName(props)
     const hueStyle = assign({}, this.props.hueStyle) || {}
@@ -52,20 +54,47 @@
 
-    const saturationConfig = {
+    let { children } = props
+    let hueSpectrumProps = null
+    let saturationSpectrumProps = null
+
+    if (children) {
+      children = React.Children.toArray(children).forEach(child => {
+        if (child && child.props) {
+          if (child.props.isHueSpectrum) {
+            hueSpectrumProps = assign({}, child.props)
+          }
+          if (child.props.isSaturationSpectrum) {
+            saturationSpectrumProps = assign({}, child.props)
+          }
+        }
+      })
+    }
+
+    const saturationConfig = assign({
       onDrag: this.handleSaturationDrag,
       onChange: this.handleSaturationChange,
-      onMouseDown: this.handleSaturationMouseDown,
-      height: props.saturationHeight,
-      width: props.saturationWidth,
-      inPicker: true
+      onMouseDown: this.handleSaturationMouseDown
+    }, saturationSpectrumProps)
+
+    if (saturationConfig.width === undefined){
+      saturationConfig.width = props.saturationWidth
     }
+    if (saturationConfig.height === undefined){
+      saturationConfig.height = props.saturationHeight
+    }
+    saturationConfig.inPicker = true
 
-    const hueConfig = {
+    const hueConfig = assign({
       onDrag: this.handleHueDrag,
       onChange: this.handleHueChange,
       onMouseDown: this.handleHueMouseDown,
-      height: props.hueHeight || props.saturationHeight,
-      width: props.hueWidth,
-      inPicker: true,
       style: hueStyle
+    }, hueSpectrumProps)
+
+    if (hueConfig.width === undefined) {
+      hueConfig.width = props.hueWidth
     }
+    if (hueConfig.height === undefined) {
+      hueConfig.height = props.hueHeight || props.saturationHeight
+    }
+    hueConfig.inPicker = true
 
@@ -97,3 +126,3 @@ if (this.state.dragHue){
 
-    return <div {...divProps}>
+    return <div {...divProps} className={className} >
       <SaturationSpectrum {...saturationConfig} />
@@ -100,0 +129,0 @@ <HueSpectrum {...hueConfig} />

src/SaturationSpectrum.js

@@ -18,8 +18,9 @@ 'use strict'
     getDefaultProps: function(){
-        return {
-            height      : 300,
-            width       : 300,
-            pointerSize : 7,
-            defaultColor: require('./defaultColor')
-        }
+      return {
+        height      : 300,
+        width       : 300,
+        pointerSize : 7,
+        defaultColor: require('./defaultColor'),
+        isSaturationSpectrum: true
+      }
     },
@@ -26,0 +27,0 @@

No alert changes

Improved metrics

Total package byte prevSize

52147

increased by5.2%

Lines of code

1327

increased by4.49%

Worsened metrics

Dependency count

9

increased by28.57%

Dependency changes

• + Addedreact@^15.3.0

• + Addedreact-dom@^15.3.0

• + Addedasap@2.0.6(transitive)

• + Addedcore-js@1.2.7(transitive)

• + Addedcreate-react-class@15.7.0(transitive)

• + Addedencoding@0.1.13(transitive)

• + Addedfbjs@0.8.18(transitive)

• + Addediconv-lite@0.6.3(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addednode-fetch@1.7.3(transitive)

• + Addedpromise@7.3.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@15.7.0(transitive)

• + Addedreact-dom@15.7.0(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedua-parser-js@0.7.38(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)

• - Removedreact@18.3.1(transitive)

• - Removedreact-dom@18.3.1(transitive)

• - Removedscheduler@0.23.2(transitive)

• Updatedreact-class@^3.2.2