react-color - npm Package Compare versions

Comparing version 2.2.7 to 2.3.0

CHANGELOG.md

 # Changelog
 
+## 2.3.0 (17 September 2016)
+
+- 6 New Pickers (Block, Github, Twitter, Hue, Alhpa and Circle)
+
 ## 2.2.7 (1 September 2016)
@@ -4,0 +8,0 @@

examples/Button.js

@@ -35,3 +35,3 @@ 'use strict'
         { this.state.displayColorPicker ? <div style={ popover }>
-          <div style={ cover } onClick={ this.handleClose }/>
+          <div style={ cover } onClick={ this.handleClose } />
           <ChromePicker />
@@ -38,0 +38,0 @@ </div> : null }

examples/Sketch.js

@@ -31,3 +31,2 @@ 'use strict'
   render() {
-
     const styles = reactCSS({
@@ -61,11 +60,11 @@ 'default': {
       },
-    });
+    })
 
     return (
       <div>
-        <div styles={ styles.swatch } onClick={ this.handleClick }>
-          <div styles={ styles.color } />
+        <div style={ styles.swatch } onClick={ this.handleClick }>
+          <div style={ styles.color } />
         </div>
-        { this.state.displayColorPicker ? <div styles={ styles.popover }>
-          <div styles={ styles.cover } onClick={ this.handleClose }/>
+        { this.state.displayColorPicker ? <div style={ styles.popover }>
+          <div style={ styles.cover } onClick={ this.handleClose } />
           <SketchPicker color={ this.state.color } onChange={ this.handleChange } />
@@ -72,0 +71,0 @@ </div> : null }

lib/components/common/Checkboard.js

@@ -96,6 +96,6 @@ 'use strict';
   size: 8,
-  white: '#fff',
-  grey: '#e6e6e6'
+  white: 'transparent',
+  grey: 'rgba(0,0,0,.08)'
 };
 
 exports.default = Checkboard;

lib/components/common/EditableInput.js

@@ -49,3 +49,3 @@ 'use strict';
     _this.handleChange = function (e) {
-      if (_this.props.label !== null) {
+      if (!!_this.props.label) {
         _this.props.onChange(_defineProperty({}, _this.props.label, e.target.value));
@@ -166,3 +166,4 @@ } else {
           onChange: this.handleChange,
-          onBlur: this.handleBlur
+          onBlur: this.handleBlur,
+          placeholder: this.props.placeholder
         }),
@@ -169,0 +170,0 @@ this.props.label ? _react2.default.createElement(

lib/components/common/index.js

@@ -61,2 +61,11 @@ 'use strict';
 
+var _Swatch = require('./Swatch');
+
+Object.defineProperty(exports, 'Swatch', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Swatch).default;
+  }
+});
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

lib/components/photoshop/Photoshop.js

@@ -38,2 +38,10 @@ 'use strict';
 
+var _PhotoshopButton = require('./PhotoshopButton');
+
+var _PhotoshopButton2 = _interopRequireDefault(_PhotoshopButton);
+
+var _PhotoshopPreviews = require('./PhotoshopPreviews');
+
+var _PhotoshopPreviews2 = _interopRequireDefault(_PhotoshopPreviews);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -118,5 +126,2 @@
           },
-          Hue: {
-            direction: 'vertical'
-          },
           controls: {
@@ -126,3 +131,2 @@ width: '180px',
           },
-
           top: {
@@ -134,50 +138,5 @@ display: 'flex'
           },
-          swatches: {
-            border: '1px solid #B3B3B3',
-            borderBottom: '1px solid #F0F0F0',
-            marginBottom: '2px',
-            marginTop: '1px'
-          },
-          new: {
-            height: '34px',
-            background: 'rgb(' + this.props.rgb.r + ',' + this.props.rgb.g + ', ' + this.props.rgb.b + ')',
-            boxShadow: 'inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 1px 0 #000'
-          },
-          current: {
-            height: '34px',
-            background: this.state.currentColor,
-            boxShadow: 'inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 -1px 0 #000'
-          },
-          label: {
-            fontSize: '14px',
-            color: '#000',
-            textAlign: 'center'
-          },
           actions: {
             flex: '1',
             marginLeft: '20px'
-          },
-          button: {
-            backgroundImage: 'linear-gradient(-180deg, #FFFFFF 0%, #E6E6E6 100%)',
-            border: '1px solid #878787',
-            borderRadius: '2px',
-            height: '20px',
-            boxShadow: '0 1px 0 0 #EAEAEA',
-            fontSize: '14px',
-            color: '#000',
-            lineHeight: '20px',
-            textAlign: 'center',
-            marginBottom: '10px'
-          },
-          acceptButton: {
-            backgroundImage: 'linear-gradient(-180deg, #FFFFFF 0%, #E6E6E6 100%)',
-            border: '1px solid #878787',
-            borderRadius: '2px',
-            height: '20px',
-            fontSize: '14px',
-            color: '#000',
-            lineHeight: '20px',
-            textAlign: 'center',
-            marginBottom: '10px',
-            boxShadow: '0 0 0 1px #878787'
           }
@@ -190,7 +149,7 @@ }
         { style: styles.picker },
-        this.props.header ? _react2.default.createElement(
+        _react2.default.createElement(
           'div',
           { style: styles.head },
           this.props.header
-        ) : null,
+        ),
         _react2.default.createElement(
@@ -202,5 +161,3 @@ 'div',
             { style: styles.saturation },
-            _react2.default.createElement(_common.Saturation, _extends({
-              style: styles.Saturation
-            }, this.props, {
+            _react2.default.createElement(_common.Saturation, _extends({}, this.props, {
               pointer: _PhotoshopPointerCircle2.default,
@@ -213,3 +170,5 @@ onChange: this.handleChange
             { style: styles.hue },
-            _react2.default.createElement(_common.Hue, _extends({}, styles.Hue, this.props, {
+            _react2.default.createElement(_common.Hue, _extends({
+              direction: 'vertical'
+            }, this.props, {
               pointer: _PhotoshopPointer2.default,
@@ -228,18 +187,6 @@ onChange: this.handleChange
                 { style: styles.previews },
-                _react2.default.createElement(
-                  'div',
-                  { style: styles.label },
-                  'new'
-                ),
-                _react2.default.createElement(
-                  'div',
-                  { style: styles.swatches },
-                  _react2.default.createElement('div', { style: styles.new }),
-                  _react2.default.createElement('div', { style: styles.current })
-                ),
-                _react2.default.createElement(
-                  'div',
-                  { style: styles.label },
-                  'current'
-                )
+                _react2.default.createElement(_PhotoshopPreviews2.default, {
+                  rgb: this.props.rgb,
+                  currentColor: this.state.currentColor
+                })
               ),
@@ -249,12 +196,4 @@ _react2.default.createElement(
                 { style: styles.actions },
-                _react2.default.createElement(
-                  'div',
-                  { style: styles.acceptButton, ref: 'accept', onClick: this.handleAccept },
-                  'OK'
-                ),
-                _react2.default.createElement(
-                  'div',
-                  { style: styles.button, ref: 'cancel', onClick: this.handleCancel },
-                  'Cancel'
-                ),
+                _react2.default.createElement(_PhotoshopButton2.default, { label: 'OK', onClick: this.handleAccept, active: true }),
+                _react2.default.createElement(_PhotoshopButton2.default, { label: 'Cancel', onClick: this.handleCancel }),
                 _react2.default.createElement(_PhotoshopFields2.default, this.props)
@@ -261,0 +200,0 @@ )

lib/components/swatches/SwatchesColor.js

@@ -83,2 +83,10 @@ 'use strict';
           }
+        },
+        'color-#FFFFFF': {
+          color: {
+            boxShadow: 'inset 0 0 0 1px #eee'
+          },
+          check: {
+            fill: '#333'
+          }
         }
@@ -85,0 +93,0 @@ }, this.props);

lib/index.js

@@ -6,4 +6,31 @@ 'use strict';
 });
-exports.default = exports.CustomPicker = exports.SwatchesPicker = exports.SliderPicker = exports.SketchPicker = exports.PhotoshopPicker = exports.MaterialPicker = exports.CompactPicker = exports.ChromePicker = undefined;
+exports.default = exports.CustomPicker = exports.TwitterPicker = exports.SwatchesPicker = exports.SliderPicker = exports.SketchPicker = exports.PhotoshopPicker = exports.MaterialPicker = exports.HuePicker = exports.GithubPicker = exports.CompactPicker = exports.ChromePicker = exports.CirclePicker = exports.BlockPicker = exports.AlphaPicker = undefined;
 
+var _Alpha = require('./components/alpha/Alpha');
+
+Object.defineProperty(exports, 'AlphaPicker', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Alpha).default;
+  }
+});
+
+var _Block = require('./components/block/Block');
+
+Object.defineProperty(exports, 'BlockPicker', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Block).default;
+  }
+});
+
+var _Circle = require('./components/circle/Circle');
+
+Object.defineProperty(exports, 'CirclePicker', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Circle).default;
+  }
+});
+
 var _Chrome = require('./components/chrome/Chrome');
@@ -27,2 +54,20 @@
 
+var _Github = require('./components/github/Github');
+
+Object.defineProperty(exports, 'GithubPicker', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Github).default;
+  }
+});
+
+var _Hue = require('./components/hue/Hue');
+
+Object.defineProperty(exports, 'HuePicker', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Hue).default;
+  }
+});
+
 var _Material = require('./components/material/Material');
@@ -46,3 +91,3 @@
 
-var _Sketch = require('./components/sketched/Sketch');
+var _Sketch = require('./components/sketch/Sketch');
 
@@ -74,2 +119,11 @@ Object.defineProperty(exports, 'SketchPicker', {
 
+var _Twitter = require('./components/twitter/Twitter');
+
+Object.defineProperty(exports, 'TwitterPicker', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Twitter).default;
+  }
+});
+
 var _ColorWrap = require('./components/common/ColorWrap');
@@ -76,0 +130,0 @@

modules/react-basic-layout/lib/components/Grid.js

@@ -37,3 +37,2 @@ 'use strict';
     value: function render() {
-
       var styles = (0, _reactcss2.default)({
@@ -84,6 +83,17 @@ 'default': {
           main: {
-            paddingLeft: '455px'
+            paddingLeft: '460px'
           }
         },
 
+        'preset-four': {
+          left: {
+            width: '170px',
+            position: 'absolute',
+            height: '100%'
+          },
+          main: {
+            paddingLeft: '210px'
+          }
+        },
+
         'mobile-default': {
@@ -99,3 +109,3 @@ main: {
           left: {
-            paddingRight: '0'
+            paddingRight: '0px'
           },
@@ -157,2 +167,2 @@ main: {
 
-exports.default = Grid;
+exports.default = Grid;

modules/react-docs/lib/components/Sidebar.js

@@ -54,3 +54,3 @@ /* jshint node: true, esnext: true */
             position: 'relative',
-            width: '170px'
+            width: '190px'
           },
@@ -57,0 +57,0 @@ star: {

modules/react-material-design/lib/components/Tile.js

@@ -58,6 +58,7 @@ /* jshint node: true, esnext: true */
             flexBasis: '56px' },
+          // 72 minus 16
           content: {
             background: 'none',
             flex: '1',
-            overflow: 'scroll'
+            overflow: 'auto'
           },
@@ -82,3 +83,4 @@ secondary: {
             paddingBottom: '0px',
-            paddingTop: '0px'
+            paddingTop: '0px',
+            paddingRight: '0px'
           },
@@ -85,0 +87,0 @@ sidebar: {

package.json

 {
   "name": "react-color",
-  "version": "2.2.7",
+  "version": "2.3.0",
   "description": "A Collection of Color Pickers from Sketch, Photoshop, Chrome & more",
@@ -17,8 +17,10 @@ "main": "lib/index.js",
     "unit-test": "mocha \"test/**/*.test.js\" --compilers js:babel-register",
-    "pretest": "npm run lib",
+    "posttest": "npm run eslint",
+    "prepublish": "npm run lib",
+    "eslint": "node_modules/.bin/eslint src/**/*.js",
     "test": "npm run unit-test",
     "clean": "rm -rf lib && mkdir lib",
     "lib": "npm run clean && cp -a src/. lib && babel lib -d lib",
-    "docs": "node docs-server",
-    "docs-dist": "node docs-dist"
+    "docs": "node ./scripts/docs-server",
+    "docs-dist": "node ./scripts/docs-dist"
   },
@@ -74,5 +76,8 @@ "homepage": "http://casesandberg.github.io/react-color/",
     "react-addons-test-utils": "^0.14.0 || ^15.0.0",
+    "react-children": "0.0.3",
     "react-context": "0.0.3",
     "react-dom": "^0.14.0 || ^15.0.0",
+    "react-dom-server": "0.0.5",
     "react-hot-loader": "^1.2.8",
+    "react-universal": "0.0.4",
     "remarkable": "^1.6.0",
@@ -79,0 +84,0 @@ "require-dir": "^0.3.0",

README.md

@@ -24,3 +24,3 @@ # [React Color](http://casesandberg.github.io/react-color/)
   render() {
-    return <SketchPicker type="sketch" />;
+    return <SketchPicker />;
   }
@@ -27,0 +27,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

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

780774

increased by4.72%

Number of package files

91

increased by16.67%

Lines of code

12706

increased by7.36%

Worsened metrics

Dev dependency count

36

increased by9.09%

No dependency changes