From a22153608f4df224a8acd04400f5c01dfd71db5a Mon Sep 17 00:00:00 2001
From: adrian-cocoara-lgp
 <63335823+adrian-cocoara-lgp@users.noreply.github.com>
Date: Fri, 16 Aug 2024 13:58:38 +0300
Subject: [PATCH] WRQ-32413: [POC] webOS ColorPicker - add responsiveness
 (#1668)

* handle resize of canvas

* code cleanup

* sorted props

---------

Co-authored-by: Stanca <stanca.pop@lgepartner.com>
---
 ColorPickerPOC/ColorPickerSpectrum.js         | 22 ++++++++++++++-----
 .../ColorPickerSpectrum.module.less           |  6 +++++
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/ColorPickerPOC/ColorPickerSpectrum.js b/ColorPickerPOC/ColorPickerSpectrum.js
index 3ce06e140c..4c6e2d1d5e 100644
--- a/ColorPickerPOC/ColorPickerSpectrum.js
+++ b/ColorPickerPOC/ColorPickerSpectrum.js
@@ -10,10 +10,12 @@ import css from './ColorPickerSpectrum.module.less';
 const SpectrumColorPicker = (props) => {
 	const {selectedColor, selectedColorHandler} = props;
 	const canvasRef = useRef(null);
+	const [canvasHeight, setCanvasHeight] = useState(ri.scale(660));
+	const [canvasWidth, setCanvasWidth] = useState(ri.scale(800));
+	const [indicatorBgColor, setIndicatorBgColor] = useState('transparent');
 	const [indicatorX, setIndicatorX] = useState(0);
 	const [indicatorY, setIndicatorY] = useState(0);
 	const [isDragging, setIsDragging] = useState(false);
-	const [indicatorBgColor, setIndicatorBgColor] = useState('transparent');
 	const [isIndicatorActive, setIsIndicatorActive] = useState(false);
 
 	useEffect(() => {
@@ -57,7 +59,15 @@ const SpectrumColorPicker = (props) => {
 			}
 		};
 		positionIndicator();
-	}, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+		const handleResize = () => {
+			setCanvasHeight(canvas.parentElement.clientHeight);
+			setCanvasWidth(canvas.parentElement.clientWidth);
+		};
+
+		window.addEventListener('resize', handleResize);
+		handleResize();
+	}, [canvasHeight, canvasWidth]); // eslint-disable-line react-hooks/exhaustive-deps
 
 	const handleCanvasPointerDown = useCallback((e) => {
 		const canvas = canvasRef.current;
@@ -107,14 +117,14 @@ const SpectrumColorPicker = (props) => {
 	return (
 		<div className={css.colorPicker}>
 			<canvas
-				ref={canvasRef}
-				height={ri.scale(600)}
+				className={css.gradientCanvas}
+				height={canvasHeight}
 				onPointerDown={handleCanvasPointerDown}
 				onPointerLeave={handleCanvasPointerLeave}
 				onPointerMove={handleCanvasPointerMove}
 				onPointerUp={handleCanvasPointerUp}
-				style={{touchAction: 'none'}}
-				width={ri.scale(800)}
+				ref={canvasRef}
+				width={canvasWidth}
 			/>
 			<SpectrumIndicator
 				bgColor={indicatorBgColor}
diff --git a/ColorPickerPOC/ColorPickerSpectrum.module.less b/ColorPickerPOC/ColorPickerSpectrum.module.less
index b7dcabdf0f..6dca72af1a 100644
--- a/ColorPickerPOC/ColorPickerSpectrum.module.less
+++ b/ColorPickerPOC/ColorPickerSpectrum.module.less
@@ -6,6 +6,12 @@
 
 .colorPicker {
 	position: relative;
+
+	.gradientCanvas {
+		height: 100%;
+		touch-action: none;
+		width: 100%;
+	}
 }
 
 .circleIndicator {