Controlled gradient popover.

setAngle refactor

Author: odeadglaz

README.md

@@ -84,6 +84,6 @@ const App = () => {
 | Name | Type | Default Value | Required? | Description
 |-|-|-|-|-
 | `angle` | `Number` | `undefined` | Yes | The controlled angle.
-| `onChange` | `Function` | `undefined` | Yes | The on change to be trigger after an angle was changes.
+| `setAngle` | `Function` | `undefined` | Yes | The set angle method to be trigger after an angle was changes.
 | `size` | `Number` | `48` | No | Determines the size of the angle picker
 | `snap` | `Number` | `5` | No | Determines the angle change snapping, Can be removed with setting as 0

dist/index.js

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

dist/index.js.map

@@ -9,7 +9,7 @@ import {
 } from '../../lib';
 import './index.css';
 
-const AnglePicker = ({ angle, onChange, size = 48, snap = 5 }) => {
+const AnglePicker = ({ angle, setAngle, size = 48, snap = 5 }) => {
 	const pickerRef = useRef();
 	const sizeStyle = { height: size, width: size };
 
@@ -20,7 +20,7 @@ const AnglePicker = ({ angle, onChange, size = 48, snap = 5 }) => {
 		const clamped = clampAngle(degrees);
 		const angle = useSnap ? snapAngle(clamped, snap) : clamped;
 
-		onChange(angle);
+		setAngle(angle);
 		return angle;
 	};
 
@@ -31,7 +31,7 @@ const AnglePicker = ({ angle, onChange, size = 48, snap = 5 }) => {
 			if (!angle) return;
 			const snappedAngle = snapAngle(angle, snap);
 
-			onChange(snappedAngle);
+			setAngle(snappedAngle);
 		}
 	});
 

package.json

@@ -0,0 +1,45 @@
+.gpw {
+    padding: 20px;
+}
+
+.gpw .trigger {
+    padding: 5px;
+    background: rgb(255, 255, 255);
+    border-radius: 1px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px;
+    display: inline-block;
+    cursor: pointer;
+}
+
+.gpw .trigger .inner {
+    width: 36px;
+    height: 14px;
+    border-radius: 2px;
+}
+
+.gpw .popover {
+    z-index: 2;
+    margin-top: 6px;
+    box-shadow: rgba(0, 0, 0, 0.15) 0 0 0 1px,
+    rgba(0, 0, 0, 0.15) 0 8px 16px;
+    padding: 12px;
+    border-radius: 4px;
+    position: absolute;
+}
+
+.gpw .popover .angle-holder {
+    margin: 0 -10px;
+    padding: 10px 0 0 10px;
+    border-top: 1px solid rgb(238, 238, 238);
+    display: flex;
+    flex-wrap: wrap;
+    position: relative;
+}
+
+.gpw .overlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}

src/components/AnglePicker/index.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import GradientPicker from '../GradientPicker';
+import { GRADIENT_PICKER_POPOVER_PROP_TYPES } from '../propTypes/index';
+import { getGradientPreview } from '../../lib';
+import AnglePicker from '../AnglePicker';
+import './index.css';
+
+const defaultTrigger = (background, togglePicker) => (
+	<div className="trigger" onClick={togglePicker}>
+		<div className="inner" style={{ background }}/>
+	</div>
+);
+
+const GradientPickerPopover = ({
+	palette,
+	open = false,
+	setOpen,
+	trigger = defaultTrigger,
+	showAnglePicker = false,
+	angle,
+	setAngle,
+	...gradientPickerProps
+}) => {
+
+	const togglePicker = () => setOpen(!open);
+	const { background } = getGradientPreview(palette, angle);
+
+	return (
+		<div className="gpw">
+			{ trigger(background, togglePicker) }
+			{ open && (
+				<>
+					<div className="overlay" onClick={() => setOpen(false)}/>
+					<div className="popover">
+						<GradientPicker {...gradientPickerProps} palette={palette} flatStyle/>
+						{ showAnglePicker && (
+							<div className="angle-holder">
+								<AnglePicker angle={angle} setAngle={setAngle} size={36}/>
+							</div>
+						)}
+					</div>
+				</>
+			)}
+		</div>
+	);
+};
+
+GradientPickerPopover.propTypes = GRADIENT_PICKER_POPOVER_PROP_TYPES;
+
+export default GradientPickerPopover;

src/components/GradientPickerPopover/index.css

@@ -61,7 +61,16 @@ export const GRADIENT_PICKER_PROP_TYPES = {
 
 export const ANGLE_PICKER_PROP_TYPES = {
 	angle: number.isRequired,
-	onChange: func.isRequired,
+	setAngle: func.isRequired,
 	size: number,
 	snap: number
+};
+
+export const GRADIENT_PICKER_POPOVER_PROP_TYPES = {
+	...GRADIENT_PICKER_PROP_TYPES,
+	...ANGLE_PICKER_PROP_TYPES,
+	showAnglePicker: bool,
+	open: bool.isRequired,
+	setOpen: func.isRequired,
+	trigger: func,
 };

src/components/GradientPickerPopover/index.js

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

src/components/propTypes/index.js

@@ -10,7 +10,7 @@ const AnglePickerStory = () => {
 			rgb(126, 32, 207) 100%)`;
 	return (
 		<div className="aps">
-			<AnglePicker angle={localAngle} onChange={setLocalAngle}/>
+			<AnglePicker angle={localAngle} setAngle={setLocalAngle}/>
 			<h4>Background preview for {localAngle} Angle</h4>
 			<div className="preview" style={{ background }}/>
 		</div>