coloreact - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

examples/index.js

 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
+import Styles from './styles.css';
+import ColorPicker, { Slider, Map } from '../src';
 
-import { ColorPicker } from '../src';
+class App extends Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      currentColor: '#f00',
+      val: .5,
+      x: 50,
+      y: 50,
+    }
+    this.changeSlider = this.changeSlider.bind(this);
+    this.changeMap = this.changeMap.bind(this);
+  }
 
-class App extends Component {
+  handleChange (color) {
+    this.setState({
+      currentColor: color
+    })
+  }
+
+  changeSlider (val) {
+    this.setState({
+      val
+    })
+  }
+
+  changeMap (x, y) {
+    this.setState({
+      x,
+      y,
+    })
+  }
+
   render () {
     return (
-      <ColorPicker
-        opacity={true}
-        color="rgba(25,6,1,1.5)"
-        onChange={color => console.log(color) } />
+      <div className="App">
+        <button onClick={() => this.handleChange('#d5d5d5')}>a</button>
+        <button onClick={() => this.handleChange('#0f34a1')}>b</button>
+        <button onClick={() => this.handleChange('#7a3')}>c</button>
+        <div style={{
+            position: 'relative',
+            width: '100%',
+            height: '400px',
+          }}>
+
+          <ColorPicker
+            opacity={true}
+            color={this.state.currentColor}
+            onChange={color => color }
+            onComplete={color => console.log(color) } />
+        </div>
+        <div style={{ position: 'relative', height: '600px' }}>
+          <Map
+            x={this.state.x}
+            y={this.state.y}
+            max={100}
+            onChange={this.changeMap}
+            backgroundColor={'green'}
+            />
+          <Slider
+            max={1}
+            value={this.state.val}
+            onChange={this.changeSlider}
+            vertical={true}
+            background="red"
+          />
+        </div>
+      </div>
     );
@@ -14,0 +74,0 @@ }

lib/components/ColorPicker.js

@@ -56,2 +56,3 @@ 'use strict';
     _this.handleAlphaChange = _this.handleAlphaChange.bind(_this);
+    _this.showLastValue = _this.showLastValue.bind(_this);
     return _this;
@@ -61,2 +62,11 @@ }
   _createClass(ColorPicker, [{
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      if (!u.equals(u.toHSV(nextProps.color), this.state.color)) {
+        this.setState({
+          color: u.toHSV(nextProps.color)
+        });
+      }
+    }
+  }, {
     key: 'handleHueChange',
@@ -144,2 +154,7 @@ value: function handleHueChange(hue) {
   }, {
+    key: 'showLastValue',
+    value: function showLastValue() {
+      this.props.onComplete(this.output());
+    }
+  }, {
     key: 'render',
@@ -163,3 +178,4 @@ value: function render() {
           max: 360,
-          onChange: this.handleHueChange }),
+          onChange: this.handleHueChange,
+          onComplete: this.showLastValue }),
         this.props.opacity && _react2.default.createElement(_Slider2.default, {
@@ -172,4 +188,4 @@ className: 'OpacitySlider',
           background: this.getBackgroundGradient(),
-          onChange: this.handleAlphaChange
-        }),
+          onChange: this.handleAlphaChange,
+          onComplete: this.showLastValue }),
         _react2.default.createElement(_Map2.default, {
@@ -181,3 +197,4 @@ x: saturation,
           backgroundColor: this.getBackgroundHue(),
-          onChange: this.handleSaturationValueChange
+          onChange: this.handleSaturationValueChange,
+          onComplete: this.showLastValue
         })
@@ -184,0 +201,0 @@ );

lib/components/Map.js

@@ -82,3 +82,5 @@ 'use strict';
           onMouseDown: this.props.startUpdates,
-          onTouchStart: this.props.startUpdates },
+          onTouchStart: this.props.startUpdates,
+          onMouseUp: this.props.onComplete,
+          onTouchEnd: this.props.onComplete },
         _react2.default.createElement(
@@ -85,0 +87,0 @@ 'div',

lib/components/Slider.js

@@ -94,3 +94,5 @@ 'use strict';
           onMouseDown: this.props.startUpdates,
-          onTouchStart: this.props.startUpdates },
+          onTouchStart: this.props.startUpdates,
+          onMouseUp: this.props.onComplete,
+          onTouchEnd: this.props.onComplete },
         _react2.default.createElement('div', { className: 'Track', style: this.getTrackStyles() }),
@@ -97,0 +99,0 @@ this.props.rect && _react2.default.createElement('div', { className: 'Pointer', style: this.getPointerStyles() })

package.json

 {
   "name": "coloreact",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "A tiny Color Picker for React",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

 # ColoReact
 
 A tiny **Color Picker** for **React**
+
+
+### Install
+
+```
+$ npm i --save coloreact
+```
+
+### How to use
+
+```js
+
+  import { ColorPicker } from 'coloreact';
+
+  // ...
+  return (
+    <ColorPicker
+      opacity={true}
+      color={this.state.currentColor}
+      onChange={this.showColorNow}
+      onComplete={this.showLastColor} />
+    );
+  // ...
+
+```
+
+### Custom Parts
+
+It is possible to create your own _ColorPicker_ using `Map` and `Slider`s.
+
+
+```js
+  import { Map, Slider } from 'coloreact';
+
+  // ...
+  return (
+    <div className="myColorPicker">
+      <Map
+        x={this.state.saturation}
+        y={this.state.value}
+        max={100}
+        backgroundColor={this.getHue()}
+        onChange={this.handleSaturationAndValue}
+      />
+      <Slider
+        vertical={true}
+        value={this.state.hue}
+        // type="hue"
+        max={360}
+        onChange={this.handleHue}
+      />
+    </div>  
+  // ...
+
+
+```

src/components/ColorPicker.js

@@ -17,4 +17,13 @@ import React, { Component, PropTypes } from 'react';
     this.handleAlphaChange = this.handleAlphaChange.bind(this);
+    this.showLastValue = this.showLastValue.bind(this);
   }
 
+  componentWillReceiveProps (nextProps) {
+    if (!u.equals(u.toHSV(nextProps.color), this.state.color)) {
+      this.setState({
+        color: u.toHSV(nextProps.color)
+      });
+    }
+  }
+
   handleHueChange (hue) {
@@ -74,2 +83,6 @@ const [, s, v, a] = this.state.color;
 
+  showLastValue () {
+    this.props.onComplete(this.output());
+  }
+
   render () {
@@ -86,3 +99,4 @@ const [ hue, saturation, value ] = this.state.color;
           max={360}
-          onChange={this.handleHueChange} />
+          onChange={this.handleHueChange}
+          onComplete={this.showLastValue} />
 
@@ -98,3 +112,3 @@ {this.props.opacity && (
             onChange={this.handleAlphaChange}
-          />
+            onComplete={this.showLastValue} />
         )}
@@ -109,2 +123,3 @@
           onChange={this.handleSaturationValueChange}
+          onComplete={this.showLastValue}
         />
@@ -111,0 +126,0 @@ </div>

src/components/Map.js

@@ -42,3 +42,5 @@ import React, { Component, PropTypes } from 'react';
         onMouseDown={this.props.startUpdates}
-        onTouchStart={this.props.startUpdates}>
+        onTouchStart={this.props.startUpdates}
+        onMouseUp={this.props.onComplete}
+        onTouchEnd={this.props.onComplete}>
 
@@ -45,0 +47,0 @@ <div className="Background" style={this.getBgStyles()}>

src/components/Slider.js

@@ -30,2 +30,3 @@ import React, { Component, PropTypes } from 'react';
       rightSlider,
+      leftSlider,
       bottomSlider } = Slider.defaultStyles;
@@ -35,6 +36,7 @@
       slider,
-      rightSlider,
-      this.props.bottom && bottomSlider,
+      this.props.vertical && this.props.right && rightSlider,
+      this.props.vertical && !this.props.right && leftSlider,
       this.props.vertical && verticalSlider,
       !this.props.vertical && horizontalSlider,
+      !this.props.vertical && this.props.bottom && bottomSlider,
       this.props.opacity && opacitySlider,
@@ -64,3 +66,5 @@ );
         onMouseDown={this.props.startUpdates}
-        onTouchStart={this.props.startUpdates}>
+        onTouchStart={this.props.startUpdates}
+        onMouseUp={this.props.onComplete}
+        onTouchEnd={this.props.onComplete}>
 
@@ -116,2 +120,5 @@ <div className="Track" style={this.getTrackStyles()} />
   },
+  leftSlider: {
+    left: '1.3em'
+  },
 
@@ -118,0 +125,0 @@ // Track

src/index.js

@@ -1,3 +0,5 @@
-export ColorPicker from './components/ColorPicker';
+import ColorPicker from './components/ColorPicker';
 export Slider from './components/Slider';
 export Map from './components/Map';
+
+export default ColorPicker;

webpack.config.js

@@ -23,3 +23,3 @@ const autoprefixer = require('autoprefixer')
         test: /\.css$/,
-        loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader?includePaths[]=' + path.resolve(__dirname, './src'))
+        loader: 'style-loader!css-loader!postcss-loader',
       }
@@ -26,0 +26,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

54572

increased by7.33%

Number of package files

20

increased by5.26%

Lines of code

1423

increased by7.8%

Number of lines in readme file

60

increased by1400%

No dependency changes