[FEAT] Popover picker type as prop

Author: odeadglaz

package.json

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

src/components/GradientPickerPopover/index.js

@@ -21,9 +21,14 @@ const GradientPickerPopover = ({
 	showGradientTypePicker = true,
 	angle,
 	setAngle,
+	gradientType: controlledGradientType,
+	setGradientType: setControlledGradientType,
 	...gradientPickerProps
 }) => {
-	const [gradientType, setGradientType] = useState(GRADIENT_TYPES.LINEAR);
+	const [internalGradientType, setInternalGradientType] = useState(GRADIENT_TYPES.LINEAR);
+	const gradientType = controlledGradientType || internalGradientType;
+	const setGradientType = setControlledGradientType || setInternalGradientType;
+
 	const togglePicker = () => setOpen(!open);
 	const { background } = getGradientPreview(palette, angle, gradientType);
 
@@ -56,4 +61,6 @@ const GradientPickerPopover = ({
 
 GradientPickerPopover.propTypes = GRADIENT_PICKER_POPOVER_PROP_TYPES;
 
+export { GRADIENT_TYPES };
+
 export default GradientPickerPopover;

src/components/GradientTypePicker/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { func, string } from 'prop-types';
 import './index.scss';
 
-const GRADIENT_TYPES = {
+export const GRADIENT_TYPES = {
 	LINEAR: 'linear',
 	RADIAL: 'radial'
 };
@@ -28,6 +28,4 @@ GradientTypePicker.propTypes = {
 	onGradientTypeChange: func
 };
 
-export { GRADIENT_TYPES };
-
 export default GradientTypePicker;

src/index.js

@@ -1,11 +1,12 @@
 import { getGradientPreview } from './lib';
 import AnglePicker from './components/AnglePicker';
 import GradientPicker from './components/GradientPicker';
-import GradientPickerPopover from './components/GradientPickerPopover';
+import GradientPickerPopover, { GRADIENT_TYPES } from './components/GradientPickerPopover';
 
 export {
 	GradientPicker,
 	GradientPickerPopover,
 	AnglePicker,
-	getGradientPreview
+	getGradientPreview,
+	GRADIENT_TYPES
 };

stories/Popover/index.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { SketchPicker } from 'react-color';
-import GradientPickerPopover from '../../src/components/GradientPickerPopover';
+import GradientPickerPopover, { GRADIENT_TYPES } from '../../src/components/GradientPickerPopover';
 import './index.css';
 
 /**
@@ -43,6 +43,7 @@ const initialPallet = [
 const PopoverStory = ({ showAngle, showType}) => {
 	const [open, setOpen] = useState(false);
 	const [angle, setAngle] = useState(90);
+	const [gradientType, setGradientType] = useState(GRADIENT_TYPES.LINEAR);
 	const [palette, setPalette] = useState(initialPallet);
 
 	return (
@@ -57,7 +58,9 @@ const PopoverStory = ({ showAngle, showType}) => {
 			maxStops: 3,
 			paletteHeight: 32,
 			palette,
-			onPaletteChange: setPalette
+			onPaletteChange: setPalette,
+			gradientType,
+			setGradientType
 		}}>
 			<WrappedSketchPicker/>
 		</GradientPickerPopover>