refactor(@clayui/css): Code review changes requested

liferay · Sep 4, 2023 · 6738449 · 6738449
1 parent b5e5ff4
commit 6738449
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 24 deletions.
diff --git a/packages/clay-color-picker/src/Alpha.tsx b/packages/clay-color-picker/src/Alpha.tsx
@@ -54,7 +54,11 @@ const ClayColorPickerAlpha = ({color, onChange, value = 0}: Props) => {
 						}
 						step="0.01"
 						type="number"
-						value={value}
+						value={
+							value !== 0 && value !== 1
+								? value.toFixed(2)
+								: value
+						}
 					/>
 					<ClayInput.GroupInsetItem before tag="label">
 						A

diff --git a/packages/clay-color-picker/src/Editor.tsx b/packages/clay-color-picker/src/Editor.tsx
@@ -156,18 +156,6 @@ export function Editor({
 		[b, 'b'],
 	];
 
-	const [alpha, setAlpha] = useState<number>(1);
-
-	React.useEffect(() => {
-		let currentAlpha = color.getAlpha();
-
-		if (currentAlpha !== 0 && currentAlpha !== 1) {
-			currentAlpha = +currentAlpha.toFixed(2);
-		}
-
-		setAlpha(currentAlpha);
-	}, [alpha, color]);
-
 	return (
 		<>
 			<Hue
@@ -178,7 +166,9 @@ export function Editor({
 						hue = LimitValue.maxHue;
 					}
 					onHueChange(hue);
-					onColorChange(tinycolor({h: hue, s, v}).setAlpha(alpha));
+					onColorChange(
+						tinycolor({h: hue, s, v}).setAlpha(color.getAlpha())
+					);
 				}}
 				value={hue}
 			/>
@@ -192,7 +182,7 @@ export function Editor({
 								h: hue,
 								s: saturation,
 								v: visibility,
-							}).setAlpha(alpha)
+							}).setAlpha(color.getAlpha())
 						);
 					}}
 				/>
@@ -225,7 +215,7 @@ export function Editor({
 					const newColor = color.clone();
 					onColorChange(newColor.setAlpha(value));
 				}}
-				value={alpha}
+				value={color.getAlpha()}
 			/>
 
 			<div className="clay-color-footer">
@@ -265,11 +255,9 @@ export function Editor({
 									}
 								}}
 								type="text"
-								value={
-									hex.toUpperCase().slice(-2) === 'FF'
-										? hex.toUpperCase().substring(0, 6)
-										: hex
-								}
+								value={hex
+									.toUpperCase()
+									.substring(0, color.getAlpha() < 1 ? 8 : 6)}
 							/>
 
 							<ClayInput.GroupInsetItem before tag="label">

diff --git a/packages/clay-color-picker/src/index.tsx b/packages/clay-color-picker/src/index.tsx
@@ -530,9 +530,10 @@ const ClayColorPicker = ({
 										if (internalActive) {
 											const newColors = [...customColors];
 
-											(newColors[state.splotch!] =
-												internalToHex(color)),
-												onColorsChange(newColors);
+											newColors[state.splotch!] =
+												internalToHex(color);
+
+											onColorsChange(newColors);
 										} else {
 											const colorIndex = findColorIndex(
 												customColors,