fix(@clayui/color-picker): Update hue slider to use html range input

liferay · Oct 24, 2022 · 87331f6 · 87331f6
1 parent 77898ee
commit 87331f6
Showing 1 changed file with 42 additions and 48 deletions.
diff --git a/packages/clay-color-picker/src/Hue.tsx b/packages/clay-color-picker/src/Hue.tsx
@@ -3,10 +3,11 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import React from 'react';
+import React, {useState} from 'react';
+
+import ClaySlider from '@clayui/slider';
 
 import {usePointerPosition} from './hooks';
-import {hueToX, xToHue} from './util';
 
 type Props = {
 	/**
@@ -20,66 +21,59 @@ type Props = {
 	value: number;
 };
 
-const useIsomorphicLayoutEffect =
-	typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
-
 /**
  * Renders Hue component
  */
 const ClayColorPickerHue = ({value = 0, onChange = () => {}}: Props) => {
 	const containerRef = React.useRef<HTMLDivElement>(null);
-	const selectorActive = React.useRef<boolean>(false);
-
-	const {onPointerMove, setXY, x, y} = usePointerPosition(containerRef);
 
-	const removeListeners = () => {
-		selectorActive.current = false;
-
-		window.removeEventListener('pointermove', onPointerMove);
-		window.removeEventListener('pointerup', removeListeners);
-	};
+	const {setXY, x} = usePointerPosition(containerRef);
 
-	useIsomorphicLayoutEffect(() => {
-		if (containerRef.current && selectorActive.current) {
-			onChange(xToHue(x, containerRef.current));
-		}
-	}, [x]);
+	const [internalValue, setInternalValue] = useState<number>(value);
 
-	React.useEffect(() => {
-		if (containerRef.current) {
-			setXY({x: hueToX(value, containerRef.current), y});
-		}
-	}, [value]);
+	const handleOnChangeEnd = (event) => {
+		onChange(internalValue);
 
-	React.useEffect(() => removeListeners, []);
+		setXY({x: internalValue});
 
-	return (
-		<div
-			className="clay-color-range clay-color-range-hue"
-			onPointerDown={(event) => {
-				event.preventDefault();
+		event.target.blur();
 
-				selectorActive.current = true;
-				onPointerMove(event);
+		event.target.focus();
+	};
 
-				(containerRef.current!.querySelector(
-					'.clay-color-range-pointer'
-				) as HTMLElement)!.focus();
+	React.useEffect(
+		(event) => {
+			setInternalValue(value);
+		},
+		[value]
+	);
 
-				window.addEventListener('pointermove', onPointerMove);
-				window.addEventListener('pointerup', removeListeners);
+	return (
+		<ClaySlider
+			className="clay-color-slider clay-color-slider-hue"
+			max={360}
+			min={0}
+			onChange={setInternalValue}
+			onKeyUp={(event) => {
+				const arrowKeys = [
+					'ArrowDown',
+					'ArrowLeft',
+					'ArrowRight',
+					'ArrowUp',
+				];
+
+				if (arrowKeys.indexOf(event.key) > -1) {
+					handleOnChangeEnd(event);
+				}
+			}}
+			onPointerUp={handleOnChangeEnd}
+			showTooltip={false}
+			step={1}
+			style={{
+				color: `hsl(${internalValue}, 100%, 50%)`,
 			}}
-			ref={containerRef}
-		>
-			<button
-				className="clay-color-pointer clay-color-range-pointer"
-				style={{
-					background: `hsl(${value}, 100%, 50%)`,
-					left: x - 7,
-				}}
-				type="button"
-			/>
-		</div>
+			value={internalValue}
+		/>
 	);
 };