v1.1.0

Author: usulpro

CHANGELOG.md

@@ -0,0 +1,11 @@
+## Changelog
+
+### v1.0.0
+
+* First stable release
+
+props: initColor, onReset, onSubmit, resetLabel, style, submitLabel
+
+### v1.1.0
+
+* Added props: onSelect, onHover

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-material-color-picker",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "React Material Color Picker Component",
   "repository": {
     "type": "git",

src/MaterialColorPicker.jsx

@@ -6,6 +6,8 @@ const _colors = require('./colors');
 const propTypes = {
     initColor: React.PropTypes.string,
     onSubmit: React.PropTypes.func,
+    onSelect: React.PropTypes.func,
+    onHover: React.PropTypes.func,
     onReset: React.PropTypes.func,
     style: React.PropTypes.object,
     submitLabel: React.PropTypes.string,
@@ -15,6 +17,8 @@ const propTypes = {
 const defaultProps = {
     initColor: '#40c4ff',
     onSubmit: () => {},
+    onSelect: () => {},
+    onHover: () => {},
     onReset: () => {},
     submitLabel: 'Submit',
     resetLabel: 'Reset',
@@ -26,6 +30,7 @@ export default class MaterialColorPicker extends React.Component {
         this.colorNames = this.colorNameList(_colors);
         this.toneNames = Object.keys(this.colorNames);
         this.rootDivRef = null;
+        this.hoveredColor = '';
 
         this.toneColorByName = this.toneColorByName.bind(this);
         this.satColorByName = this.satColorByName.bind(this);
@@ -55,8 +60,11 @@ export default class MaterialColorPicker extends React.Component {
 
         this.titleName = this.titleName.bind(this);
         this.fullNameString = this.fullNameString.bind(this);
+        this.createEvent = this.createEvent.bind(this);
+
         this.onSubmit = this.onSubmit.bind(this);
         this.onReset = this.onReset.bind(this);
+        this.onHover = this.onHover.bind(this);
 
         this.rootDiv = this.rootDiv.bind(this);
     }
@@ -108,6 +116,13 @@ export default class MaterialColorPicker extends React.Component {
         };
     }
 
+    onHover(event) {
+        if (event.target.value !== this.hoveredColor) {
+            this.hoveredColor = event.target.value;
+            this.props.onHover(event);
+        }
+    }
+
     findColorName(colObj, colString) {
         const nameList = Object.keys(colObj);
         const name = nameList.find((val) => {return (colObj[val] === colString);});
@@ -220,8 +235,8 @@ export default class MaterialColorPicker extends React.Component {
                                           this.state.selectedSat, this.state.hoveredSat),
                   }}
                   onClick={this.selectSat(this.satColorByName(val))}
-                  onMouseOver={this.hoverSat(this.satColorByName(val))}
-                  onMouseOut={this.hoverReset()}
+                  onMouseEnter={this.hoverSat(this.satColorByName(val))}
+                  onMouseLeave={this.hoverReset()}
                 >
                     <div
                       style={{ display: 'flex', alignItems: 'center', height: '100%' }}
@@ -293,32 +308,50 @@ export default class MaterialColorPicker extends React.Component {
     }
 
     selectTone(toneName) {
-        return () => {
-            this.setState({ selectedTone: toneName });
+        return (e) => {
+            const event = this.createEvent(e, 'select');
+            this.setState({ selectedTone: toneName },
+                this.props.onSelect(event)
+            );
         };
     }
 
     selectSat(satName) {
-        return () => {
-            this.setState({ selectedSat: satName });
+        return (e) => {
+            const event = this.createEvent(e, 'select');
+            this.setState({ selectedSat: satName },
+                this.props.onSelect(event)
+            );
         };
     }
 
     hoverTone(toneName) {
-        return () => {
-            this.setState({ hoveredTone: toneName });
+        return (e) => {
+            const { nativeEvent, persist } = e;
+            this.setState({ hoveredTone: toneName }, () => {
+                const event = this.createEvent({nativeEvent, persist}, 'hover');
+                this.onHover(event);
+            });
         };
     }
 
     hoverSat(satName) {
-        return () => {
-            this.setState({ hoveredSat: satName });
+        return (e) => {
+            const {nativeEvent, persist} = e;
+            this.setState({ hoveredSat: satName }, ()=>{
+                const event = this.createEvent({nativeEvent, persist}, 'hover');
+                this.onHover(event);
+            });
         };
     }
 
     hoverReset() {
-        return () => {
-            this.setState({ hoveredTone: '', hoveredSat: '' });
+        return (e) => {
+            const {nativeEvent, persist} = e;
+            this.setState({ hoveredTone: '', hoveredSat: '' }, ()=>{
+                const event = this.createEvent({nativeEvent, persist}, 'hover');
+                this.onHover(event);
+            });
         };
     }
 
@@ -412,6 +445,25 @@ export default class MaterialColorPicker extends React.Component {
             </div>);
     }
 
+    createEvent(e, type) {
+        const event = {
+            type,
+            timeStamp: e.nativeEvent.timeStamp,
+            eventPhase: 3,
+            target: {
+                value: _colors[this.fullNameString()],
+                nativeEvent: e.nativeEvent,
+                name: 'MaterialColorPicker',
+                node: this.rootDivRef,
+                ...this.props,
+            },
+            persist() {
+                e.persist();
+            },
+        };
+        return event;
+    }
+
     rootDiv(div) {
         this.rootDivRef = div;
     }

src/stories/index.js

@@ -58,6 +58,19 @@ storiesOf('Material Color Picker', module)
         </div>
 
     ))
+    .add('events', () => (
+
+        <div style={{ width: 400, backgroundColor: '#c7c7c7' }} >
+            <MaterialColorPicker
+              initColor="#3f51b5"
+              onSubmit={actionLog()}
+              onSelect={actionLog()}
+              onHover={actionLog()}
+              onReset={actionLog()}
+            />
+        </div>
+
+    ))
 //    storiesOf('Material Color Picker', module)
     .addWithInfo('API', `
 [![GitHub version](https://badge.fury.io/gh/sm-react%2Freact-material-color-picker.svg)](https://badge.fury.io/gh/sm-react%2Freact-material-color-picker)