react-color-picker - npm Package Compare versions

Comparing version 2.1.9 to 3.0.0

index.jsx

@@ -6,2 +6,3 @@ 'use strict';
 var React       = require('react')
+var ReactDOM    = require('react-dom')
 var ColorPicker = require('./src')
@@ -22,6 +23,7 @@
             <ColorPicker
+                saturationWidth={100}
                 defaultValue={ COLOR }
                 onDrag={ this.onDrag }
             />
-            <h1>This does not work correctly</h1>
+            <h1>Try this as well</h1>
             <ColorPicker
@@ -33,3 +35,3 @@ value={ COLOR }
         	<div style={{background: COLOR, width: 100, height: 100}}>
-                <span style={{background: 'blue'}}>{COLOR}</span>
+                <span style={{background: 'blue', color: 'white'}}>{COLOR}</span>
             </div>
@@ -41,3 +43,3 @@ </div>
 
-React.render(<App />, document.getElementById('content'))
+ReactDOM.render(<App />, document.getElementById('content'))
 

lib/HueSpectrum.js

 'use strict';
 
 var React = require('react');
+var ReactDOM = require('react-dom');
 var Region = require('region');
@@ -29,3 +30,5 @@ var assign = require('object-assign');
 
-    componentDidUpdate: function componentDidUpdate() {},
+    componentDidUpdate: function componentDidUpdate() {
+        // this.updateDragPositionIf()
+    },
 
@@ -73,7 +76,7 @@ componentDidMount: function componentDidMount() {
             'div',
-            { className: 'cp-hue-spectrum', style: style, onMouseDown: this.onMouseDown },
+            { className: 'react-color-picker--hue-spectrum', style: style, onMouseDown: this.onMouseDown },
             React.createElement(
                 'div',
-                { className: 'cp-hue-drag', style: dragStyle },
-                React.createElement('div', { className: 'inner' })
+                { className: 'react-color-picker--hue-drag', style: dragStyle },
+                React.createElement('div', { className: 'react-color-picker--hue-inner' })
             )
@@ -90,3 +93,3 @@ );
 
-        var height = this.props.height || Region.fromDOM(this.getDOMNode()).getHeight();
+        var height = this.props.height || Region.fromDOM(ReactDOM.findDOMNode(this)).getHeight();
         var size = this.props.pointerSize;
@@ -113,4 +116,2 @@
     toStringValue: require('./utils/toStringValue')
-}, common));
-
-// this.updateDragPositionIf()
+}, common));

lib/index.js

@@ -53,3 +53,3 @@ 'use strict';
         var props = this.prepareProps(assign({}, this.props));
-        var hueStyle = this.props.hueStyle || {};
+        var hueStyle = assign({}, this.props.hueStyle) || {};
 
@@ -56,0 +56,0 @@ hueStyle.marginLeft = this.props.hueMargin;

lib/SaturationSpectrum.js

@@ -7,2 +7,3 @@ 'use strict';
 var React = require('react');
+var ReactDOM = require('react-dom');
 var Region = require('region');
@@ -35,3 +36,5 @@ var assign = require('object-assign');
 
-    componentDidUpdate: function componentDidUpdate() {},
+    componentDidUpdate: function componentDidUpdate() {
+        // this.updateDragPositionIf()
+    },
 
@@ -62,3 +65,3 @@ componentDidMount: function componentDidMount() {
         if (!sizeDefined) {
-            region = Region.fromDOM(this.getDOMNode());
+            region = Region.fromDOM(ReactDOM.findDOMNode(this));
             height = height || region.getHeight();
@@ -73,3 +76,3 @@ width = width || region.getWidth();
 
-        if (this.props.value && this.state.mouseDown) {
+        if (this.props.value && this.state.mouseDown && !isNaN(this.state.mouseDown.x)) {
             x = this.state.mouseDown.x;
@@ -114,3 +117,3 @@ }
 
-        className += ' cp-saturation-spectrum';
+        className += ' react-color-picker--saturation-spectrum';
 
@@ -121,3 +124,3 @@ return className;
     prepareStyle: function prepareStyle(props) {
-        var style = props.style || {};
+        var style = assign({}, props.style);
 
@@ -158,9 +161,9 @@ if (props.height) {
                 'div',
-                { className: 'cp-saturation-white' },
-                React.createElement('div', { className: 'cp-saturation-black' })
+                { className: 'react-color-picker--saturation-white' },
+                React.createElement('div', { className: 'react-color-picker--saturation-black' })
             ),
             React.createElement(
                 'div',
-                { className: 'cp-saturation-drag', style: dragStyle },
-                React.createElement('div', { className: 'inner' })
+                { className: 'react-color-picker--saturation-drag', style: dragStyle },
+                React.createElement('div', { className: 'react-color-picker--saturation-inner' })
             )
@@ -187,4 +190,2 @@ );
 }, common));
-module.exports = exports['default'];
-
-// this.updateDragPositionIf()
+module.exports = exports['default'];

lib/utils/common.js

@@ -6,2 +6,3 @@ 'use strict';
 });
+var ReactDOM = require('react-dom');
 var Region = require('region');
@@ -32,3 +33,3 @@ var assign = require('object-assign');
 
-        var region = Region.fromDOM(this.getDOMNode());
+        var region = Region.fromDOM(ReactDOM.findDOMNode(this));
         var info = this.getEventInfo(event, region);
@@ -136,3 +137,3 @@
     getEventInfo: function getEventInfo(event, region) {
-        region = region || Region.fromDOM(this.getDOMNode());
+        region = region || Region.fromDOM(ReactDOM.findDOMNode(this));
 
@@ -139,0 +140,0 @@ var x = event.clientX - region.left;

loaders.config.js

 module.exports = [
     {
         test: /\.jsx$/,
+        exclude: /node_modules/,
         loader: 'babel-loader'
@@ -8,2 +9,3 @@ },
         test: /\.js$/,
+        exclude: /node_modules/,
         loader: 'babel-loader'
@@ -13,7 +15,8 @@ },
         test: /\.styl$/,
-        loader: 'style-loader!css-loader!stylus-loader'
+        exclude: /node_modules/,
+        loader: 'style-loader!css-loader!autoprefixer!stylus-loader'
     },
     {
         test: /\.css$/,
-        loader: 'style-loader!css-loader'
+        loader: 'style-loader!css-loader!autoprefixer'
     },
@@ -20,0 +23,0 @@ {

package.json

 {
   "name": "react-color-picker",
-  "version": "2.1.9",
+  "version": "3.0.0",
   "description": "React Color Picker",
@@ -26,4 +26,3 @@ "main": "lib/index.js",
     "drag-helper": "^1.2.3",
-    "normalize.css": "^3.0.2",
-    "object-assign": "^2.0.0",
+    "object-assign": "^4.0.1",
     "region": "^2.1.2",
@@ -33,2 +32,3 @@ "tinycolor2": "^1.1.1"
   "devDependencies": {
+    "autoprefixer-loader": "^3.1.0",
     "babel-core": "^5.4.3",
@@ -46,3 +46,4 @@ "babel-loader": "^5.1.2",
   "peerDependencies": {
-    "react": ">=0.12.0"
+    "react": ">=0.14.0",
+    "react-dom": ">=0.14.0"
   },
@@ -49,0 +50,0 @@ "repository": {

README.md

@@ -19,7 +19,5 @@ # React Color Picker
 
-#### Bower
+## Changelog
 
-```sh
-bower install react-color-picker
-```
+See [changelog](./CHANGELOG.md)
 
@@ -149,3 +147,3 @@ #### Other
 
-Now navigate to [localhost:9090](http://localhost:9090/)
+Now navigate to [localhost:8090](http://localhost:8090/)
 
@@ -152,0 +150,0 @@ Before building a new version, make sure you run

src/HueSpectrum.jsx

 'use strict'
 
 var React  = require('react')
+var ReactDOM = require('react-dom');
 var Region = require('region')
@@ -73,5 +74,5 @@ var assign   = require('object-assign')
         return (
-            <div className='cp-hue-spectrum' style={style} onMouseDown={this.onMouseDown}>
-                <div className="cp-hue-drag" style={dragStyle}>
-                    <div className="inner" />
+            <div className='react-color-picker--hue-spectrum' style={style} onMouseDown={this.onMouseDown}>
+                <div className="react-color-picker--hue-drag" style={dragStyle}>
+                    <div className="react-color-picker--hue-inner" />
                 </div>
@@ -89,3 +90,3 @@ </div>
 
-        var height = this.props.height || Region.fromDOM(this.getDOMNode()).getHeight()
+        var height = this.props.height || Region.fromDOM(ReactDOM.findDOMNode(this)).getHeight()
         var size   = this.props.pointerSize
@@ -112,2 +113,2 @@
     toStringValue: require('./utils/toStringValue')
-}, common))
+}, common))

src/index.jsx

@@ -7,3 +7,3 @@ 'use strict';
 
-var HueSpectrum        = require('./HueSpectrum')
+var HueSpectrum = require('./HueSpectrum')
 var SaturationSpectrum = require('./SaturationSpectrum')
@@ -21,8 +21,8 @@
         return {
-            defaultColor    : require('./defaultColor'),
+            defaultColor : require('./defaultColor'),
             saturationWidth : 300,
             saturationHeight: 300,
-            hueHeight       : null,
-            hueWidth        : 30,
-            hueMargin       : 10
+            hueHeight : null,
+            hueWidth : 30,
+            hueMargin : 10
         }
@@ -55,3 +55,3 @@ },
         var props    = this.prepareProps(assign({}, this.props))
-        var hueStyle = this.props.hueStyle || {}
+        var hueStyle = assign({}, this.props.hueStyle) || {}
 
@@ -58,0 +58,0 @@ hueStyle.marginLeft = this.props.hueMargin

src/SaturationSpectrum.jsx

 'use strict'
 
 var React     = require('react')
+var ReactDOM  = require('react-dom');
 var Region    = require('region')
@@ -59,3 +60,3 @@ var assign    = require('object-assign')
         if (!sizeDefined){
-            region = Region.fromDOM(this.getDOMNode())
+            region = Region.fromDOM(ReactDOM.findDOMNode(this))
             height = height || region.getHeight()
@@ -70,3 +71,3 @@ width  = width  || region.getWidth()
 
-        if (this.props.value && this.state.mouseDown){
+        if (this.props.value && this.state.mouseDown && !isNaN(this.state.mouseDown.x)){
             x = this.state.mouseDown.x
@@ -111,3 +112,3 @@ }
 
-        className += ' cp-saturation-spectrum'
+        className += ' react-color-picker--saturation-spectrum'
 
@@ -118,3 +119,3 @@ return className
     prepareStyle: function(props) {
-        var style = props.style || {}
+        var style = assign({}, props.style)
 
@@ -152,7 +153,7 @@ if (props.height){
             <div className={props.className} style={props.style} onMouseDown={this.onMouseDown}>
-                <div className='cp-saturation-white'>
-                    <div className='cp-saturation-black' />
+                <div className='react-color-picker--saturation-white'>
+                    <div className='react-color-picker--saturation-black' />
                 </div>
-                <div className="cp-saturation-drag" style={dragStyle}>
-                    <div className="inner" />
+                <div className="react-color-picker--saturation-drag" style={dragStyle}>
+                    <div className="react-color-picker--saturation-inner" />
                 </div>
@@ -179,2 +180,2 @@ </div>
     toStringValue: require('./utils/toStringValue')
-}, common))
+}, common))

src/utils/common.js

 'use strict';
 
+var ReactDOM   = require('react-dom');
 var Region     = require('region')
@@ -28,3 +29,3 @@ var assign     = require('object-assign')
 
-        var region = Region.fromDOM(this.getDOMNode())
+        var region = Region.fromDOM(ReactDOM.findDOMNode(this))
         var info   = this.getEventInfo(event, region)
@@ -138,3 +139,3 @@
     getEventInfo: function(event, region){
-        region = region || Region.fromDOM(this.getDOMNode())
+        region = region || Region.fromDOM(ReactDOM.findDOMNode(this))
 
@@ -141,0 +142,0 @@ var x = event.clientX - region.left

New alerts

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 eval() which is a dangerous function. This prevents 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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Fixed alerts

Uses eval

Supply chain risk

Package uses eval() which is a dangerous function. This prevents 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

Improved metrics

Total package byte prevSize

1056242

increased by340.63%

Number of package files

42

increased by2.44%

Lines of code

22629

increased by288.95%

Worsened metrics

Dev dependency count

11

increased by10%

Number of lines in readme file

157

decreased by-1.26%

Number of low supply chain risk alerts

285

increased byInfinity%

Number of medium supply chain risk alerts

3

increased by50%

Dependency changes

• + Addedreact-dom@18.3.1(transitive)

• + Addedscheduler@0.23.2(transitive)

• - Removednormalize.css@^3.0.2

• - Removednormalize.css@3.0.3(transitive)

• Updatedobject-assign@^4.0.1