[Chore] Implement onColorStopSelect

Author: odeadglaz

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-linear-gradient-picker",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "React linear gradient picker",
   "main": "dist/index.js",
   "scripts": {

src/components/ColorStop/index.js

@@ -16,15 +16,15 @@ const ColorStop = ({ stop, limits, onPosChange, onDeleteColor, onDragStart = noo
 		colorStopRef
 	});
 
-	const { offset, color, isActive } = stop;
+	const { offset, color, isActive, opacity } = stop;
 
 	return (
 		<div className={isActive ? 'cs active' : 'cs'}
 			ref={colorStopRef}
 			style={{ left: offset }}
 			onMouseDown={drag}
 			onTouchStart={drag}>
-			<div style={{ backgroundColor: color }}/>
+			<div style={{ backgroundColor: color, opacity }}/>
 		</div>
 	);
 };

src/components/GradientPicker/index.js

@@ -1,9 +1,9 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import ColorStopsHolder from '../ColorStopsHolder/index';
 import Palette from '../Palette/index';
 import ColorPicker from '../ColorPicker/index';
 import { GRADIENT_PICKER_PROP_TYPES } from '../propTypes/index';
-import { sortPalette } from '../../lib/index';
+import { sortPalette, noop } from '../../lib/index';
 import {
 	HALF_STOP_WIDTH,
 	DEFAULT_HEIGHT,
@@ -29,7 +29,8 @@ const mapPaletteToStops = ({ palette, activeId, width }) => palette.map((color)
 }));
 
 const getPaletteColor = (palette, id) => {
-	const color = palette.find(color => color.id === id);
+	const color = palette.find(color => color.id === id) || palette[0];
+
 	return { ...color, offset: Number(color.offset) };
 };
 
@@ -42,7 +43,8 @@ const GradientPicker = ({
 	maxStops = DEFAULT_MAX_STOPS,
 	children,
 	flatStyle = false,
-	onPaletteChange
+	onPaletteChange,
+	onColorStopSelect = noop
 }) => {
 	palette = mapIdToPalette(palette);
 
@@ -79,7 +81,12 @@ const GradientPicker = ({
 	};
 
 	const onStopDragStart = (id) => {
-		setActiveColorId(id);
+		if (id !== activeColorId) {
+			setActiveColorId(id);
+
+			const color = palette.find((color) => color.id === id);
+			onColorStopSelect(color);
+		}
 	};
 
 	const handleColorSelect = (color, opacity = 1) => {

webpack.config.js

@@ -14,7 +14,7 @@ module.exports = {
 		path: path.join(__dirname, 'dist'),
 		filename: 'index.js',
 		library: 'linearGradientPicker',
-		libraryTarget: 'umd'
+		libraryTarget: 'commonjs2'
 	},
 	module: {
 		rules: [