fix(@clayui/color-picker): Move Hue input group to Hue internal compo…

…nent and SF
liferay · Oct 31, 2022 · 5207588 · 5207588
1 parent d2a9941
commit 5207588
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 71 deletions.
diff --git a/packages/clay-color-picker/src/Editor.tsx b/packages/clay-color-picker/src/Editor.tsx
@@ -186,45 +186,13 @@ export function Editor({
 				</div>
 			</div>
 
-			<div className="clay-color-form-group">
-				<Hue
-					onChange={(hue) => {
-						onHueChange(hue);
-						onColorChange(tinycolor({h: hue, s, v}));
-					}}
-					value={hue}
-				/>
-				<ClayInput.Group>
-					<ClayInput.GroupItem>
-						<ClayInput
-							data-testid="hInput"
-							insetBefore
-							max="360"
-							min="0"
-							onChange={(event) => {
-								const value = event.target.value;
-
-								let newVal = Number(value);
-
-								if (newVal < 0) {
-									newVal = 0;
-								} else if (newVal > 360) {
-									newVal = 360;
-								}
-
-								onHueChange(Math.round(newVal));
-
-								onColorChange(tinycolor({h: newVal, s, v}));
-							}}
-							type="number"
-							value={hue}
-						/>
-						<ClayInput.GroupInsetItem before tag="label">
-							H
-						</ClayInput.GroupInsetItem>
-					</ClayInput.GroupItem>
-				</ClayInput.Group>
-			</div>
+			<Hue
+				onChange={(hue) => {
+					onHueChange(hue);
+					onColorChange(tinycolor({h: hue, s, v}));
+				}}
+				value={hue}
+			/>
 
 			<div className="clay-color-footer">
 				<ClayForm.Group>

diff --git a/packages/clay-color-picker/src/Hue.tsx b/packages/clay-color-picker/src/Hue.tsx
@@ -3,11 +3,10 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
+import {ClayInput} from '@clayui/form';
 import ClaySlider from '@clayui/slider';
 import React, {useState} from 'react';
 
-import {usePointerPosition} from './hooks';
-
 type Props = {
 	/**
 	 * Callback function for when the hue value changes
@@ -24,17 +23,11 @@ type Props = {
  * Renders Hue component
  */
 const ClayColorPickerHue = ({value = 0, onChange = () => {}}: Props) => {
-	const containerRef = React.useRef<HTMLDivElement>(null);
-
-	const {setXY, y} = usePointerPosition(containerRef);
-
 	const [internalValue, setInternalValue] = useState<number>(value);
 
 	const handleOnChangeEnd = (event: any) => {
 		onChange(internalValue);
 
-		setXY({x: internalValue, y});
-
 		event.target.blur();
 
 		event.target.focus();
@@ -45,31 +38,61 @@ const ClayColorPickerHue = ({value = 0, onChange = () => {}}: Props) => {
 	}, [value]);
 
 	return (
-		<ClaySlider
-			className="clay-color-slider clay-color-slider-hue"
-			max={360}
-			min={0}
-			onChange={setInternalValue}
-			onKeyUp={(event) => {
-				const arrowKeys = [
-					'ArrowDown',
-					'ArrowLeft',
-					'ArrowRight',
-					'ArrowUp',
-				];
+		<div className="clay-color-form-group">
+			<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%)`,
+				}}
+				value={internalValue}
+			/>
+			<ClayInput.Group>
+				<ClayInput.GroupItem>
+					<ClayInput
+						data-testid="hInput"
+						insetBefore
+						max="360"
+						min="0"
+						onChange={event => {
+							const value = event.target.value;
+
+							let newVal = Number(value);
+
+							if (newVal < 0) {
+								newVal = 0;
+							} else if (newVal > 360) {
+								newVal = 360;
+							}
 
-				if (arrowKeys.indexOf(event.key) > -1) {
-					handleOnChangeEnd(event);
-				}
-			}}
-			onPointerUp={handleOnChangeEnd}
-			showTooltip={false}
-			step={1}
-			style={{
-				color: `hsl(${internalValue}, 100%, 50%)`,
-			}}
-			value={internalValue}
-		/>
+							onChange(newVal);
+						}}
+						type="number"
+						value={value}
+					/>
+					<ClayInput.GroupInsetItem before tag="label">
+						H
+					</ClayInput.GroupInsetItem>
+				</ClayInput.GroupItem>
+			</ClayInput.Group>
+		</div>
 	);
 };