feature: introduce direction and autoHideColorPicker props (#34)

Author: angry-beaver

README.md

@@ -48,15 +48,17 @@ const App = () => {
 
 ### Accepted props
 
-| Name | Type | Default Value | Required? | Description
-|-|-|-|-|-
-| `palette` | `PaletteColor[]` | `undefined` | Yes | The gradient pickers color palette, Each palette color struct is described below
-| `onPaletteChange` | `Function` | `undefined` | Yes | The function to trigger upon palette change (Can be either from stop drag or color select).
-| `paletteHeight` | `Number` | `32` | No | The stops palette display area height 
-| `width` | `Number` | `400` | No | Determines the width of the gradient picker
-| `stopRemovalDrop` | `Number` | `50` | No | Sets the Y stop drop removal offset, If the user will drag the color stop further than specified, Color will be removed
-| `maxStops` | `Number` | `5` | No | The max gradient picker palette length can have
-| `minStops` | `Number` | `2` | No | The min gradient picker palette length can have
+| Name              | Type                     | Default Value         | Required? | Description
+|-------------------|--------------------------|-----------------------|-|-
+| `palette`         | `PaletteColor[]`         | `undefined`           | Yes | The gradient pickers color palette, Each palette color struct is described below
+| `onPaletteChange` | `Function`               | `undefined`           | Yes | The function to trigger upon palette change (Can be either from stop drag or color select).
+| `paletteHeight`   | `Number`                 | `32`                  | No | The stops palette display area height 
+| `width`           | `Number`                 | `400`                 | No | Determines the width of the gradient picker
+| `stopRemovalDrop` | `Number`                 | `50`                  | No | Sets the Y stop drop removal offset, If the user will drag the color stop further than specified, Color will be removed
+| `maxStops`        | `Number`                 | `5`                   | No | The max gradient picker palette length can have
+| `minStops`        | `Number`                 | `2`                   | No | The min gradient picker palette length can have
+| `colorPickerMode` | `String`                 | `static` \| `popover` | No | Determines the mode of the color picker picker component, by default `static` will always present otherwise will act as popover which will appear upon interaction.
+| `direction`       | `horizontal`\|`vertical` | `horizontal`          | No | Determines the direction of the gradient picker.
 
 |> Palette Color
 | Name | Type | Default Value | Required? | Description

src/components/ColorStop/hooks/useStopDragging.js

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import useDragging from '../../hooks/useDragging';
+import { DIRECTIONS } from '../../GradientPicker/constants';
 
 /**
  * Limits a client drag movement within given min / max
@@ -10,35 +11,43 @@ import useDragging from '../../hooks/useDragging';
  */
 const limitPos = (offset, min, max) => Math.max(Math.min(offset, max), min);
 
-const getColorStopRefTop = (ref) => {
+const getColorStopRefCoordinate = (ref, direction) => {
 	if (!ref.current) return 0;
-	return ref.current.getBoundingClientRect().top;
+	const rect = ref.current.getBoundingClientRect();
+
+	return direction === DIRECTIONS.HORIZONTAL
+		? rect.top
+		: rect.left;
+};
+
+const getDeleteDistanceFromColorStopToCoordinate = (direction, coordinates, colorStopRef) => {
+	const start = direction === DIRECTIONS.HORIZONTAL ? coordinates.clientY : coordinates.clientX;
+	const end = getColorStopRefCoordinate(colorStopRef, direction);
+
+	return Math.abs(start - end);
 };
 
-const useStopDragging = ({ limits, stop, initialPos, colorStopRef, onPosChange, onDragStart, onDragEnd, onDeleteColor}) => {
+const useStopDragging = ({ limits, stop, initialPos, colorStopRef, onPosChange, onDragStart, onDragEnd, onDeleteColor, direction}) => {
 	const [posStart, setPosStart] = useState(initialPos);
 
-	const handleDrag = ({ clientX, clientY }) => {
+	const handleDrag = (coordinates) => {
 		const { id, offset } = stop;
 		const { min, max } = limits;
+		const dragOffset = offset - posStart;
 
-		// Removing if out of drop limit on Y axis.
-		const top = getColorStopRefTop(colorStopRef);
-		if (Math.abs(clientY - top) > limits.drop) {
-			//deactivate();
+		if (getDeleteDistanceFromColorStopToCoordinate(direction, coordinates, colorStopRef) > limits.drop) {
 			return onDeleteColor(id);
 		}
-
 		// Limit movements
-		const dragOffset = offset - posStart;
-		const limitedPos = limitPos(dragOffset + clientX, min, max);
+		const clientCoordinate = direction === DIRECTIONS.HORIZONTAL ? coordinates.clientX : coordinates.clientY;
+		const limitedPos = limitPos(dragOffset + clientCoordinate, min, max);
 
 		onPosChange({ id, offset: limitedPos });
 	};
 
 	const [drag] = useDragging({
-		onDragStart: ({ clientX }) => {
-			setPosStart(clientX);
+		onDragStart: ({ clientX, clientY }) => {
+			setPosStart(direction === DIRECTIONS.HORIZONTAL ? clientX : clientY );
 
 			onDragStart(stop.id);
 		},

src/components/ColorStop/index.js

@@ -1,20 +1,22 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { noop } from '../../lib';
 import { STOP_PROP_TYPES } from '../propTypes';
+import { DIRECTIONS } from '../GradientPicker/constants';
 import useStopDragging from './hooks/useStopDragging';
 import './index.scss';
 
-const ColorStop = ({ stop, limits, onPosChange, onDeleteColor, onDragStart = noop, onDragEnd = noop}) => {
+const ColorStop = ({ stop, limits, onPosChange, onDeleteColor, onDragStart = noop, onDragEnd = noop, direction}) => {
 	const colorStopRef = useRef();
-	const [allowRemoveOnDoubleClick, setAllowRemoveOnDoubleClick] = useState(false)
+	const [allowRemoveOnDoubleClick, setAllowRemoveOnDoubleClick] = useState(false);
 	const [drag] = useStopDragging({
 		stop,
 		limits,
 		onPosChange,
 		onDragStart,
 		onDragEnd,
 		onDeleteColor,
-		colorStopRef
+		colorStopRef,
+		direction,
 	});
 
 	useEffect(() => {
@@ -24,12 +26,13 @@ const ColorStop = ({ stop, limits, onPosChange, onDeleteColor, onDragStart = noo
 	const { offset, color, isActive, opacity } = stop;
 
 	return (
-		<div className={isActive ? 'cs active' : 'cs'}
+		<div
+			className={`cs ${direction} ${isActive ? 'active' : ''}`}
 			ref={colorStopRef}
-			style={{ left: offset }}
+			style={direction === DIRECTIONS.HORIZONTAL ? { left: offset } : { top: offset }}
 			onMouseDown={drag}
 			onDoubleClick={() => {
-				allowRemoveOnDoubleClick && onDeleteColor(stop.id)
+				allowRemoveOnDoubleClick && onDeleteColor(stop.id);
 			}}
 			onTouchStart={drag}>
 			<div style={{ backgroundColor: color, opacity }}/>

src/components/ColorStop/index.scss

@@ -16,4 +16,8 @@
     .active {
         background-position: left center;
     }
+
+    &.vertical {
+        transform: rotate(-90deg) translate(4px, 2px);
+    }
 }

src/components/ColorStopsHolder/constants.js

@@ -0,0 +1 @@
+export const COLOR_STOP_HOLDER_CLASSNAME = 'csh';

src/components/ColorStopsHolder/index.js

@@ -1,29 +1,34 @@
 import React from 'react';
 import ColorStop from '../ColorStop/index';
 import { STOPS_HOLDER_PROP_TYPES } from '../propTypes';
+import { DIRECTIONS } from '../GradientPicker/constants';
+import { COLOR_STOP_HOLDER_CLASSNAME } from './constants';
 
-const getStopsHolderStyle = (width, disabled) => ({
-	width,
-	height: 17,
+
+const getStopsHolderStyle = (width, disabled, direction) => ({
+	width: direction === DIRECTIONS.HORIZONTAL ? width : 17,
+	height: direction === DIRECTIONS.HORIZONTAL ? 17 : width,
 	position: 'relative',
-	cursor: disabled ? 'default' : 'crosshair'
+	cursor: disabled ? 'default' : 'crosshair',
 });
 
-const ColorStopsHolder = ({ width, stops, disabled = false, onAddColor, ...rest }) => {
+const ColorStopsHolder = ({ width, direction, stops, disabled = false, onAddColor, ...rest }) => {
 
 	const handleColorAdd = (e) => {
 		e.preventDefault();
 
 		if (e.button) return;
+		const offset = direction === DIRECTIONS.HORIZONTAL
+			? e.clientX - e.target.getBoundingClientRect().left
+			: e.clientY - e.target.getBoundingClientRect().top;
 
-		const offset = e.clientX - e.target.getBoundingClientRect().left;
 		onAddColor({ offset });
 	};
 
 	return (
-		<div className="csh" style={getStopsHolderStyle(width, disabled)} onMouseDown={handleColorAdd}>
+		<div className={COLOR_STOP_HOLDER_CLASSNAME} style={getStopsHolderStyle(width, disabled, direction)} onMouseDown={handleColorAdd}>
 			{stops.map(stop =>
-				<ColorStop key={stop.id} stop={stop} {...rest} />
+				<ColorStop key={stop.id} stop={stop} direction={direction} {...rest} />
 			)}
 		</div>
 	);

src/components/GradientPicker/constants.js

@@ -1,3 +1,5 @@
+import { COLOR_STOP_HOLDER_CLASSNAME } from '../ColorStopsHolder/constants';
+
 const STOP_WIDTH = 10;
 
 export const HALF_STOP_WIDTH = STOP_WIDTH / 2;
@@ -10,4 +12,24 @@ export const DEFAULT_HEIGHT = 32;
 
 export const DEFAULT_MAX_STOPS = 5;
 
-export const DEFAULT_MIN_STOPS = 2;
+export const DEFAULT_MIN_STOPS = 2;
+
+export const DIRECTIONS = {
+  HORIZONTAL: 'horizontal',
+  VERTICAL: 'vertical',
+};
+
+export const DEFAULT_DIRECTION = DIRECTIONS.HORIZONTAL;
+
+export const GRADIENT_PICKER_CLASSNAME = 'gp';
+
+export const COLOR_PICKER_CLASSNAME = 'color-picker';
+
+export const IGNORED_CLICK_OUTSIDE_SELECTORS = [`.${COLOR_PICKER_CLASSNAME}`, `.${GRADIENT_PICKER_CLASSNAME} .${COLOR_STOP_HOLDER_CLASSNAME}`];
+
+export const COLOR_PICKER_MODS = {
+  STATIC: 'static',
+  POPOVER: 'popover',
+};
+
+export const DEFAULT_COLOR_PICKER_MOD = COLOR_PICKER_MODS.STATIC;

src/components/GradientPicker/index.js

@@ -1,16 +1,23 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useRef, useCallback } 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, noop } from '../../lib/index';
+import { useClickOutside } from '../hooks/useClickOutside';
 import {
 	HALF_STOP_WIDTH,
 	DEFAULT_HEIGHT,
 	DEFAULT_WIDTH,
 	DEFAULT_STOP_REMOVAL_DROP,
 	DEFAULT_MAX_STOPS,
-	DEFAULT_MIN_STOPS
+	DEFAULT_MIN_STOPS,
+	DEFAULT_DIRECTION,
+	DEFAULT_COLOR_PICKER_MOD,
+	GRADIENT_PICKER_CLASSNAME,
+	COLOR_PICKER_CLASSNAME,
+	IGNORED_CLICK_OUTSIDE_SELECTORS,
+	COLOR_PICKER_MODS
 } from './constants';
 import './index.scss';
 
@@ -44,12 +51,16 @@ const GradientPicker = ({
 	children,
 	flatStyle = false,
 	onPaletteChange,
-	onColorStopSelect = noop
+	onColorStopSelect = noop,
+	direction = DEFAULT_DIRECTION,
+	colorPickerMode = DEFAULT_COLOR_PICKER_MOD
 }) => {
 	palette = mapIdToPalette(palette);
-
+	const [showColorPicker, setShowColorPicker] = React.useState(colorPickerMode === COLOR_PICKER_MODS.STATIC);
 	const [defaultActiveColor] = palette;
 	const [activeColorId, setActiveColorId] = useState(defaultActiveColor.id);
+	const pickerRef = useRef(null);
+	const isPopoverColorPicker = colorPickerMode === COLOR_PICKER_MODS.POPOVER;
 
 	const limits = useMemo(() => {
 		const min = -HALF_STOP_WIDTH;
@@ -58,8 +69,20 @@ const GradientPicker = ({
 		return { min, max, drop: stopRemovalDrop };
 	}, [width]);
 
+	const closePicker = useCallback(() => setShowColorPicker(false), [setShowColorPicker]);
+
+	useClickOutside({
+		pickerRef,
+		callback: closePicker,
+		ignoredSelectors: IGNORED_CLICK_OUTSIDE_SELECTORS,
+		enabled: isPopoverColorPicker,
+	});
+
 	const handleColorAdd = ({ offset }) => {
 		if (palette.length >= maxStops) return;
+		if (isPopoverColorPicker) {
+			setShowColorPicker(true);
+		}
 
 		const { color } = getPaletteColor(palette, activeColorId);
 		const entry = { id: nextColorId(palette), offset: offset / width, color };
@@ -81,6 +104,10 @@ const GradientPicker = ({
 	};
 
 	const onStopDragStart = (id) => {
+		if (isPopoverColorPicker) {
+			setShowColorPicker(true);
+		}
+
 		if (id !== activeColorId) {
 			setActiveColorId(id);
 
@@ -123,11 +150,12 @@ const GradientPicker = ({
 		const props = {
 			color,
 			opacity,
+			className: COLOR_PICKER_CLASSNAME,
 			...(flatStyle && {
 				width,
-				className: 'gp-flat',
+				className: `gp-flat ${COLOR_PICKER_CLASSNAME}`,
 			}),
-			onSelect: handleColorSelect
+			onSelect: handleColorSelect,
 		};
 
 		if (!children) {
@@ -142,8 +170,16 @@ const GradientPicker = ({
 	const stopsHolderDisabled = palette.length >= maxStops;
 
 	return (
-		<div className="gp">
-			<Palette width={paletteWidth} height={paletteHeight} palette={palette}/>
+		<div
+			ref={pickerRef}
+			className={`${GRADIENT_PICKER_CLASSNAME} color-picker-mode-${colorPickerMode} ${direction}`}
+		>
+			<Palette
+				width={paletteWidth}
+				height={paletteHeight}
+				palette={palette}
+				direction={direction}
+			/>
 			<ColorStopsHolder
 				width={paletteWidth}
 				disabled={stopsHolderDisabled}
@@ -157,8 +193,11 @@ const GradientPicker = ({
 				onAddColor={handleColorAdd}
 				onDeleteColor={handleColorDelete}
 				onDragStart={onStopDragStart}
+				direction={direction}
 			/>
-			{colorPicker()}
+				<div className="color-picker-wrapper">
+					<div className="color-picker-wrapper-inner">{showColorPicker && colorPicker()}</div>
+				</div>
 		</div>
 	);
 };

src/components/GradientPicker/index.scss

@@ -3,10 +3,38 @@
     flex-direction: column;
     align-items: center;
 
+    &.vertical {
+        flex-direction: row;
+    }
+
     .gp-flat {
         margin: 0 auto;
         padding: 10px 0 0!important;
         box-shadow: none!important;
         transform: none!important;
     }
+
+    &.color-picker-mode-popover {
+        .color-picker-wrapper {
+            position: relative;
+            width: 100%;
+            flex: 0;
+
+            .color-picker-wrapper-inner {
+                position: absolute;
+                display: flex;
+                justify-content: center;
+            }
+        }
+
+        &.vertical .color-picker-wrapper .color-picker-wrapper-inner {
+            flex-direction: column;
+            height: 100%;
+        }
+
+        &.horizontal .color-picker-wrapper .color-picker-wrapper-inner {
+            flex-direction: row;
+            width: 100%;
+        }
+    }
 }