From 4a9289f66f80092ca0ecf69ab68a953b974bdccd Mon Sep 17 00:00:00 2001
From: Lex <41524861+Phoenix4O4@users.noreply.github.com>
Date: Thu, 12 Dec 2024 18:22:33 +0300
Subject: [PATCH] [TGUI] Color Picker (#1602)

* fix color input

* small optimisation

* better optimisation

* more optimisation
---
 tgui/packages/tgui/components/Interactive.tsx |  10 +-
 .../tgui/interfaces/ColorPickerModal.tsx      | 960 +++++++++---------
 2 files changed, 506 insertions(+), 464 deletions(-)

diff --git a/tgui/packages/tgui/components/Interactive.tsx b/tgui/packages/tgui/components/Interactive.tsx
index a768d7dccf8..cb334d55f9a 100644
--- a/tgui/packages/tgui/components/Interactive.tsx
+++ b/tgui/packages/tgui/components/Interactive.tsx
@@ -50,7 +50,7 @@ const getRelativePosition = (
 export interface InteractiveProps {
   onMove: (interaction: Interaction) => void;
   onKey: (offset: Interaction) => void;
-  children: ReactNode[];
+  children: ReactNode; // Change from ReactNode[] to ReactNode
   style?: React.CSSProperties;
 }
 
@@ -74,7 +74,6 @@ export class Interactive extends Component<InteractiveProps> {
   };
 
   handleMove = (event: MouseEvent) => {
-    // Prevent text selection
     event.preventDefault();
 
     const isDown = event.buttons > 0;
@@ -121,10 +120,11 @@ export class Interactive extends Component<InteractiveProps> {
   }
 
   render() {
+    const { style, children, ...rest } = this.props;
     return (
       <div
-        {...this.props}
-        style={this.props.style}
+        {...rest}
+        style={style}
         ref={this.containerRef}
         onMouseDown={this.handleMoveStart}
         className="react-colorful__interactive"
@@ -132,7 +132,7 @@ export class Interactive extends Component<InteractiveProps> {
         tabIndex={0}
         role="slider"
       >
-        {this.props.children}
+        {children}
       </div>
     );
   }
diff --git a/tgui/packages/tgui/interfaces/ColorPickerModal.tsx b/tgui/packages/tgui/interfaces/ColorPickerModal.tsx
index 8177b609114..f8dfc403a6e 100644
--- a/tgui/packages/tgui/interfaces/ColorPickerModal.tsx
+++ b/tgui/packages/tgui/interfaces/ColorPickerModal.tsx
@@ -16,18 +16,11 @@ import {
 } from 'common/color';
 import { clamp } from 'common/math';
 import { classes } from 'common/react';
-import React, {
-  FocusEvent,
-  FormEvent,
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
-import { Interactive } from 'tgui/components/Interactive';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Interaction, Interactive } from 'tgui/components/Interactive';
 
 import { useBackend } from '../backend';
 import {
-  Autofocus,
   Box,
   Button,
   Flex,
@@ -37,11 +30,12 @@ import {
   Stack,
   Tooltip,
 } from '../components';
+import { Autofocus } from '../components/Autofocus';
 import { Window } from '../layouts';
 import { InputButtons } from './common/InputButtons';
 import { Loader } from './common/Loader';
 
-type ColorPickerData = {
+interface ColorPickerData {
   autofocus: boolean;
   buttons: string[];
   message: string;
@@ -50,9 +44,11 @@ type ColorPickerData = {
   timeout: number;
   title: string;
   default_color: string;
-};
+}
+
+interface ColorPickerModalProps {}
 
-export const ColorPickerModal = () => {
+export const ColorPickerModal: React.FC<ColorPickerModalProps> = () => {
   const { data } = useBackend<ColorPickerData>();
   const { timeout, message, autofocus, default_color = '#000000' } = data;
   let { title } = data;
@@ -107,374 +103,444 @@ export const ColorPickerModal = () => {
   );
 };
 
-export const ColorPresets = ({ setColor, setShowPresets }) => {
-  return (
-    <>
-      <Button
-        onClick={() => setShowPresets(false)}
-        position="absolute"
-        right="4px"
-        icon="arrow-left"
-      />
-      <Stack justify="center">
-        <Stack.Item>
-          {colorList.map((row, index) => {
-            return (
+interface ColorPresetsProps {
+  setColor: (color: HsvaColor) => void;
+  setShowPresets: (show: boolean) => void;
+}
+
+const ColorPresets: React.FC<ColorPresetsProps> = React.memo(
+  ({ setColor, setShowPresets }) => {
+    return (
+      <>
+        <Button
+          onClick={() => setShowPresets(false)}
+          position="absolute"
+          right="4px"
+          icon="arrow-left"
+        />
+        <Stack justify="center">
+          <Stack.Item>
+            {colorList.map((row, index) => (
               <Stack.Item key={index} width="100%">
                 <Stack justify="center">
-                  {row.map((entry) => {
-                    return (
-                      <Box key={entry} p="1px" backgroundColor="black">
+                  {row.map((entry) => (
+                    <Box key={entry} p="1px" backgroundColor="black">
+                      <Box
+                        p="1px"
+                        backgroundColor="#AAAAAA"
+                        onClick={() => setColor(hexToHsva(entry))}
+                      >
                         <Box
-                          p="1px"
-                          backgroundColor="#AAAAAA"
-                          onClick={() => setColor(hexToHsva(entry))}
-                        >
-                          <Box
-                            onClick={() => setColor(hexToHsva(entry))}
-                            backgroundColor={'#' + entry}
-                            width="21px"
-                            height="14px"
-                          />
-                        </Box>
+                          backgroundColor={'#' + entry}
+                          width="21px"
+                          height="14px"
+                        />
                       </Box>
-                    );
-                  })}
+                    </Box>
+                  ))}
+                </Stack>
+              </Stack.Item>
+            ))}
+          </Stack.Item>
+        </Stack>
+      </>
+    );
+  },
+);
+
+interface ColorSelectorProps {
+  color: HsvaColor;
+  setColor: React.Dispatch<React.SetStateAction<HsvaColor>>;
+  defaultColor: string;
+}
+
+const ColorSelector: React.FC<ColorSelectorProps> = React.memo(
+  ({ color, setColor, defaultColor }) => {
+    const handleChange = useCallback(
+      (params: Partial<HsvaColor>) => {
+        setColor((current) => ({ ...current, ...params }));
+      },
+      [setColor],
+    );
+
+    const [showPresets, setShowPresets] = useState<boolean>(false);
+    const rgb = hsvaToRgba(color);
+    const hexColor = hsvaToHex(color);
+
+    return (
+      <Flex direction="row">
+        <Flex.Item mr={2}>
+          <Stack vertical>
+            <Stack.Item>
+              <div className="react-colorful">
+                <SaturationValue hsva={color} onChange={handleChange} />
+                <Hue
+                  hue={color.h}
+                  onChange={handleChange}
+                  className="react-colorful__last-control"
+                />
+              </div>
+            </Stack.Item>
+            <Stack.Item>
+              <Box inline width="100px" height="20px" textAlign="center">
+                Current
+              </Box>
+              <Box inline width="100px" height="20px" textAlign="center">
+                Previous
+              </Box>
+              <br />
+              <Tooltip content={hexColor} position="bottom">
+                <Box
+                  inline
+                  width="100px"
+                  height="30px"
+                  backgroundColor={hexColor}
+                />
+              </Tooltip>
+              <Tooltip content={defaultColor} position="bottom">
+                <Box
+                  inline
+                  width="100px"
+                  height="30px"
+                  backgroundColor={defaultColor}
+                />
+              </Tooltip>
+            </Stack.Item>
+          </Stack>
+        </Flex.Item>
+        <Flex.Item grow fontSize="15px" lineHeight="24px">
+          {showPresets ? (
+            <ColorPresets
+              setColor={(c) => handleChange(c)}
+              setShowPresets={setShowPresets}
+            />
+          ) : (
+            <Stack vertical>
+              <Stack.Item>
+                <Stack>
+                  <Stack.Item>
+                    <Box textColor="label">Hex:</Box>
+                  </Stack.Item>
+                  <Stack.Item grow height="24px">
+                    <HexColorInput
+                      fluid
+                      color={hsvaToHex(color).substring(1)}
+                      onChange={(value) => {
+                        setColor(hexToHsva(value));
+                      }}
+                    />
+                  </Stack.Item>
+                  <Stack.Item>
+                    <Button
+                      icon="eye-dropper"
+                      onClick={() => setShowPresets(true)}
+                    />
+                  </Stack.Item>
                 </Stack>
               </Stack.Item>
-            );
-          })}
+              <Stack.Divider />
+              <HueRow color={color} handleChange={handleChange} />
+              <SaturationRow color={color} handleChange={handleChange} />
+              <ValueRow color={color} handleChange={handleChange} />
+              <Stack.Divider />
+              <RedRow color={color} handleChange={handleChange} />
+              <GreenRow color={color} handleChange={handleChange} />
+              <BlueRow color={color} handleChange={handleChange} />
+            </Stack>
+          )}
+        </Flex.Item>
+      </Flex>
+    );
+  },
+);
+
+interface RowProps {
+  color: HsvaColor;
+  handleChange: (c: Partial<HsvaColor>) => void;
+}
+
+const HueRow: React.FC<RowProps> = React.memo(({ color, handleChange }) => (
+  <Stack.Item>
+    <Stack>
+      <Stack.Item width="25px">
+        <Box textColor="label">H:</Box>
+      </Stack.Item>
+      <Stack.Item grow>
+        <Hue hue={color.h} onChange={handleChange} />
+      </Stack.Item>
+      <Stack.Item>
+        <TextSetter
+          value={color.h}
+          callback={(v) => handleChange({ h: v })}
+          max={360}
+          unit="°"
+        />
+      </Stack.Item>
+    </Stack>
+  </Stack.Item>
+));
+
+const SaturationRow: React.FC<RowProps> = React.memo(
+  ({ color, handleChange }) => (
+    <Stack.Item>
+      <Stack>
+        <Stack.Item width="25px">
+          <Box textColor="label">S:</Box>
+        </Stack.Item>
+        <Stack.Item grow>
+          <Saturation color={color} onChange={handleChange} />
+        </Stack.Item>
+        <Stack.Item>
+          <TextSetter
+            value={color.s}
+            callback={(v) => handleChange({ s: v })}
+            unit="%"
+          />
         </Stack.Item>
       </Stack>
-    </>
-  );
-};
+    </Stack.Item>
+  ),
+);
 
-export const ColorSelector = ({ color, setColor, defaultColor }) => {
-  const handleChange = useCallback(
-    (params: Partial<HsvaColor>) => {
-      setColor((current) => ({ ...current, ...params }));
-    },
-    [setColor],
-  );
+const ValueRow: React.FC<RowProps> = React.memo(({ color, handleChange }) => (
+  <Stack.Item>
+    <Stack>
+      <Stack.Item width="25px">
+        <Box textColor="label">V:</Box>
+      </Stack.Item>
+      <Stack.Item grow>
+        <Value color={color} onChange={handleChange} />
+      </Stack.Item>
+      <Stack.Item>
+        <TextSetter
+          value={color.v}
+          callback={(v) => handleChange({ v })}
+          unit="%"
+        />
+      </Stack.Item>
+    </Stack>
+  </Stack.Item>
+));
+
+interface RGBRowProps {
+  color: HsvaColor;
+  handleChange: (c: HsvaColor) => void;
+}
 
-  const [showPresets, setShowPresets] = useState<boolean>(false);
+const RedRow: React.FC<RGBRowProps> = React.memo(({ color, handleChange }) => {
   const rgb = hsvaToRgba(color);
-  const hexColor = hsvaToHex(color);
-
   return (
-    <Flex direction="row">
-      <Flex.Item mr={2}>
-        <Stack vertical>
-          <Stack.Item>
-            <div className="react-colorful">
-              <SaturationValue hsva={color} onChange={handleChange} />
-              <Hue
-                hue={color.h}
-                onChange={handleChange}
-                className="react-colorful__last-control"
-              />
-            </div>
+    <Stack.Item>
+      <Stack>
+        <Stack.Item width="25px">
+          <Box textColor="label">R:</Box>
+        </Stack.Item>
+        <Stack.Item grow>
+          <RGBSlider color={color} onChange={handleChange} target="r" />
+        </Stack.Item>
+        <Stack.Item>
+          <TextSetter
+            value={rgb.r}
+            callback={(v) => {
+              handleChange(rgbaToHsva({ ...rgb, r: v }));
+            }}
+            max={255}
+          />
+        </Stack.Item>
+      </Stack>
+    </Stack.Item>
+  );
+});
+
+const GreenRow: React.FC<RGBRowProps> = React.memo(
+  ({ color, handleChange }) => {
+    const rgb = hsvaToRgba(color);
+    return (
+      <Stack.Item>
+        <Stack>
+          <Stack.Item width="25px">
+            <Box textColor="label">G:</Box>
+          </Stack.Item>
+          <Stack.Item grow>
+            <RGBSlider color={color} onChange={handleChange} target="g" />
           </Stack.Item>
           <Stack.Item>
-            <Box inline width="100px" height="20px" textAlign="center">
-              Current
-            </Box>
-            <Box inline width="100px" height="20px" textAlign="center">
-              Previous
-            </Box>
-            <br />
-            <Tooltip content={hexColor} position="bottom">
-              <Box
-                inline
-                width="100px"
-                height="30px"
-                backgroundColor={hexColor}
-              />
-            </Tooltip>
-            <Tooltip content={defaultColor} position="bottom">
-              <Box
-                inline
-                width="100px"
-                height="30px"
-                backgroundColor={defaultColor}
-              />
-            </Tooltip>
+            <TextSetter
+              value={rgb.g}
+              callback={(v) => {
+                handleChange(rgbaToHsva({ ...rgb, g: v }));
+              }}
+              max={255}
+            />
           </Stack.Item>
         </Stack>
-      </Flex.Item>
-      <Flex.Item grow fontSize="15px" lineHeight="24px">
-        {showPresets ? (
-          <ColorPresets
-            setColor={handleChange}
-            setShowPresets={setShowPresets}
+      </Stack.Item>
+    );
+  },
+);
+
+const BlueRow: React.FC<RGBRowProps> = React.memo(({ color, handleChange }) => {
+  const rgb = hsvaToRgba(color);
+  return (
+    <Stack.Item>
+      <Stack>
+        <Stack.Item width="25px">
+          <Box textColor="label">B:</Box>
+        </Stack.Item>
+        <Stack.Item grow>
+          <RGBSlider color={color} onChange={handleChange} target="b" />
+        </Stack.Item>
+        <Stack.Item>
+          <TextSetter
+            value={rgb.b}
+            callback={(v) => {
+              handleChange(rgbaToHsva({ ...rgb, b: v }));
+            }}
+            max={255}
           />
-        ) : (
-          <Stack vertical>
-            <Stack.Item>
-              <Stack>
-                <Stack.Item>
-                  <Box textColor="label">Hex:</Box>
-                </Stack.Item>
-                <Stack.Item grow height="24px">
-                  <HexColorInput
-                    fluid
-                    color={hsvaToHex(color).substring(1)}
-                    onChange={(value) => {
-                      setColor(hexToHsva(value));
-                    }}
-                  />
-                </Stack.Item>
-                <Stack.Item>
-                  <Button
-                    icon="eye-dropper"
-                    onClick={() => setShowPresets(true)}
-                  />
-                </Stack.Item>
-              </Stack>
-            </Stack.Item>
-            <Stack.Divider />
-            <Stack.Item>
-              <Stack>
-                <Stack.Item width="25px">
-                  <Box textColor="label">H:</Box>
-                </Stack.Item>
-                <Stack.Item grow>
-                  <Hue hue={color.h} onChange={handleChange} />
-                </Stack.Item>
-                <Stack.Item>
-                  <TextSetter
-                    value={color.h}
-                    callback={(v) => handleChange({ h: v })}
-                    max={360}
-                    unit="°"
-                  />
-                </Stack.Item>
-              </Stack>
-            </Stack.Item>
-            <Stack.Item>
-              <Stack>
-                <Stack.Item width="25px">
-                  <Box textColor="label">S:</Box>
-                </Stack.Item>
-                <Stack.Item grow>
-                  <Saturation color={color} onChange={handleChange} />
-                </Stack.Item>
-                <Stack.Item>
-                  <TextSetter
-                    value={color.s}
-                    callback={(v) => handleChange({ s: v })}
-                    unit="%"
-                  />
-                </Stack.Item>
-              </Stack>
-            </Stack.Item>
-            <Stack.Item>
-              <Stack>
-                <Stack.Item width="25px">
-                  <Box textColor="label">V:</Box>
-                </Stack.Item>
-                <Stack.Item grow>
-                  <Value color={color} onChange={handleChange} />
-                </Stack.Item>
-                <Stack.Item>
-                  <TextSetter
-                    value={color.v}
-                    callback={(v) => handleChange({ v })}
-                    unit="%"
-                  />
-                </Stack.Item>
-              </Stack>
-            </Stack.Item>
-            <Stack.Divider />
-            <Stack.Item>
-              <Stack>
-                <Stack.Item width="25px">
-                  <Box textColor="label">R:</Box>
-                </Stack.Item>
-                <Stack.Item grow>
-                  <RGBSlider color={color} onChange={handleChange} target="r" />
-                </Stack.Item>
-                <Stack.Item>
-                  <TextSetter
-                    value={rgb.r}
-                    callback={(v) => {
-                      handleChange(rgbaToHsva({ ...rgb, r: v }));
-                    }}
-                    max={255}
-                  />
-                </Stack.Item>
-              </Stack>
-            </Stack.Item>
-            <Stack.Item>
-              <Stack>
-                <Stack.Item width="25px">
-                  <Box textColor="label">G:</Box>
-                </Stack.Item>
-                <Stack.Item grow>
-                  <RGBSlider color={color} onChange={handleChange} target="g" />
-                </Stack.Item>
-                <Stack.Item>
-                  <TextSetter
-                    value={rgb.g}
-                    callback={(v) => {
-                      handleChange(rgbaToHsva({ ...rgb, g: v }));
-                    }}
-                    max={255}
-                  />
-                </Stack.Item>
-              </Stack>
-            </Stack.Item>
-            <Stack.Item>
-              <Stack>
-                <Stack.Item width="25px">
-                  <Box textColor="label">B:</Box>
-                </Stack.Item>
-                <Stack.Item grow>
-                  <RGBSlider color={color} onChange={handleChange} target="b" />
-                </Stack.Item>
-                <Stack.Item>
-                  <TextSetter
-                    value={rgb.b}
-                    callback={(v) => {
-                      handleChange(rgbaToHsva({ ...rgb, b: v }));
-                    }}
-                    max={255}
-                  />
-                </Stack.Item>
-              </Stack>
-            </Stack.Item>
-          </Stack>
-        )}
-      </Flex.Item>
-    </Flex>
+        </Stack.Item>
+      </Stack>
+    </Stack.Item>
   );
-};
+});
 
-const TextSetter = ({
-  value,
-  callback,
-  min = 0,
-  max = 100,
-  unit,
-}: {
+interface TextSetterProps {
   value: number;
   callback: (value: number) => void;
   min?: number;
   max?: number;
   unit?: string;
-}) => {
-  return (
-    <NumberInput
-      width="70px"
-      value={Math.round(value)}
-      step={1}
-      minValue={min}
-      maxValue={max}
-      onChange={callback}
-      unit={unit}
-    />
-  );
-};
+}
+
+const TextSetter: React.FC<TextSetterProps> = React.memo(
+  ({ value, callback, min = 0, max = 100, unit }) => {
+    return (
+      <NumberInput
+        width="70px"
+        value={Math.round(value)}
+        step={1}
+        minValue={min}
+        maxValue={max}
+        onChange={callback}
+        unit={unit}
+      />
+    );
+  },
+);
 
-const HexColorInput = ({
-  prefixed,
-  alpha,
-  color,
-  fluid,
-  onChange,
-  ...rest
-}: {
+interface HexColorInputProps {
   prefixed?: boolean;
   alpha?: boolean;
   color: string;
   fluid?: boolean;
   onChange: (newColor: string) => void;
-}) => {
-  const escape = (value: string) =>
-    value
-      .replace(/[^0-9A-Fa-f]/g, '')
-      .substring(0, alpha ? 8 : 6)
-      .toUpperCase();
-  const validate = (value: string) =>
-    validHex(value, alpha) &&
-    (value.length === 6 || (alpha && value.length === 8));
-
-  const [localValue, setLocalValue] = useState(escape(color));
+}
 
-  useEffect(() => {
-    if (escape(color) !== localValue) {
-      setLocalValue(escape(color));
-    }
-  }, [color]);
-
-  const handleInput = (e: FormEvent<HTMLInputElement>) => {
-    const inputValue = escape(e.currentTarget.value);
-    setLocalValue(inputValue);
-
-    if (inputValue.length === 6 && validate(inputValue)) {
-      onChange(inputValue);
-    }
-  };
+const HexColorInput: React.FC<HexColorInputProps> = React.memo(
+  ({ alpha, color, fluid, onChange, ...rest }) => {
+    const initialColor = useMemo(() => {
+      const stripped = color
+        .replace(/[^0-9A-Fa-f]/g, '')
+        .substring(0, 6)
+        .toUpperCase();
+      return stripped;
+    }, [color]);
+
+    const [localValue, setLocalValue] = useState(initialColor);
+
+    useEffect(() => {
+      setLocalValue(initialColor);
+    }, [initialColor]);
+
+    const isValidFullHex = useCallback(
+      (val: string) => {
+        return validHex(val, alpha) && val.length === 6;
+      },
+      [alpha],
+    );
 
-  const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
-    const inputValue = escape(e.currentTarget.value);
+    const handleChangeEvent = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const inputValue = e.currentTarget.value;
+      const strippedValue = inputValue
+        .replace(/[^0-9A-Fa-f]/g, '')
+        .substring(0, 6)
+        .toUpperCase();
 
-    if (!validate(inputValue) || inputValue.length !== 6) {
-      setLocalValue(escape(color));
-    } else {
-      onChange(inputValue);
-    }
-  };
+      setLocalValue(strippedValue);
 
-  return (
-    <Box className={classes(['Input', fluid && 'Input--fluid'])}>
-      <div className="Input__baseline">.</div>
-      <input
-        className="Input__input"
-        value={localValue}
-        spellCheck={false}
-        onInput={handleInput}
-        onBlur={handleBlur}
-        {...rest}
-      />
-    </Box>
-  );
-};
+      if (isValidFullHex(strippedValue)) {
+        onChange(strippedValue);
+      }
+    };
+
+    const commitOrRevert = useCallback(() => {
+      if (isValidFullHex(localValue)) {
+        onChange(localValue);
+      } else {
+        setLocalValue(initialColor);
+      }
+    }, [initialColor, isValidFullHex, localValue, onChange]);
+
+    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+      commitOrRevert();
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        commitOrRevert();
+        (e.currentTarget as HTMLInputElement).blur();
+      }
+    };
+
+    return (
+      <Box className={classes(['Input', fluid && 'Input--fluid'])}>
+        <div className="Input__baseline">.</div>
+        <input
+          className="Input__input"
+          value={localValue}
+          spellCheck={false}
+          onChange={handleChangeEvent}
+          onBlur={handleBlur}
+          onKeyDown={handleKeyDown}
+          {...rest}
+        />
+      </Box>
+    );
+  },
+);
 
 interface SaturationValueProps {
   hsva: HsvaColor;
   onChange: (newColor: Partial<HsvaColor>) => void;
 }
 
-export const SaturationValue = React.memo(
-  ({ hsva, onChange }: SaturationValueProps) => {
-    const handleMove = (interaction: { left: number; top: number }) => {
-      requestAnimationFrame(() => {
-        onChange({
-          s: interaction.left * 100,
-          v: 100 - interaction.top * 100,
-        });
+const SaturationValue: React.FC<SaturationValueProps> = React.memo(
+  ({ hsva, onChange }) => {
+    const handleMove = (interaction: Interaction) => {
+      onChange({
+        s: interaction.left * 100,
+        v: 100 - interaction.top * 100,
       });
     };
 
-    const handleKey = (offset: { left: number; top: number }) => {
-      requestAnimationFrame(() => {
-        onChange({
-          s: clamp(hsva.s + offset.left * 100, 0, 100),
-          v: clamp(hsva.v - offset.top * 100, 0, 100),
-        });
+    const handleKey = (offset: Interaction) => {
+      onChange({
+        s: clamp(hsva.s + offset.left * 100, 0, 100),
+        v: clamp(hsva.v - offset.top * 100, 0, 100),
       });
     };
 
-    const containerStyle = {
-      backgroundColor: hsvaToHslString({
-        h: hsva.h,
-        s: 100,
-        v: 100,
-        a: 1,
+    const containerStyle = useMemo(
+      () => ({
+        backgroundColor: hsvaToHslString({
+          h: hsva.h,
+          s: 100,
+          v: 100,
+          a: 1,
+        }),
       }),
-    };
+      [hsva.h],
+    );
 
     return (
       <div className="react-colorful__saturation_value" style={containerStyle}>
@@ -486,15 +552,12 @@ export const SaturationValue = React.memo(
             hsva.s,
           )}%, Brightness ${Math.round(hsva.v)}%`}
         >
-          {[
-            <Pointer
-              key="pointer"
-              className="react-colorful__saturation_value-pointer"
-              top={1 - hsva.v / 100}
-              left={hsva.s / 100}
-              color={hsvaToHslString(hsva)}
-            />,
-          ]}
+          <Pointer
+            className="react-colorful__saturation_value-pointer"
+            top={1 - hsva.v / 100}
+            left={hsva.s / 100}
+            color={hsvaToHslString(hsva)}
+          />
         </Interactive>
       </div>
     );
@@ -504,20 +567,16 @@ export const SaturationValue = React.memo(
 interface HueProps {
   className?: string;
   hue: number;
-  onChange: (newHue: { h: number }) => void;
+  onChange: (newHue: Partial<HsvaColor>) => void;
 }
 
-const Hue = React.memo(({ className, hue, onChange }: HueProps) => {
-  const handleMove = (interaction: { left: number }) => {
-    requestAnimationFrame(() => {
-      onChange({ h: 360 * interaction.left });
-    });
+const Hue: React.FC<HueProps> = React.memo(({ className, hue, onChange }) => {
+  const handleMove = (interaction: Interaction) => {
+    onChange({ h: 360 * interaction.left });
   };
 
-  const handleKey = (offset: { left: number }) => {
-    requestAnimationFrame(() => {
-      onChange({ h: clamp(hue + offset.left * 360, 0, 360) });
-    });
+  const handleKey = (offset: Interaction) => {
+    onChange({ h: clamp(hue + offset.left * 360, 0, 360) });
   };
 
   const nodeClassName = classes(['react-colorful__hue', className]);
@@ -529,17 +588,14 @@ const Hue = React.memo(({ className, hue, onChange }: HueProps) => {
         onKey={handleKey}
         aria-label="Hue"
         aria-valuenow={Math.round(hue)}
-        aria-valuemax="360"
-        aria-valuemin="0"
+        aria-valuemax={360}
+        aria-valuemin={0}
       >
-        {[
-          <Pointer
-            key="hue-pointer"
-            className="react-colorful__hue-pointer"
-            left={hue / 360}
-            color={hsvaToHslString({ h: hue, s: 100, v: 100, a: 1 })}
-          />,
-        ]}
+        <Pointer
+          className="react-colorful__hue-pointer"
+          left={hue / 360}
+          color={hsvaToHslString({ h: hue, s: 100, v: 100, a: 1 })}
+        />
       </Interactive>
     </div>
   );
@@ -548,56 +604,53 @@ const Hue = React.memo(({ className, hue, onChange }: HueProps) => {
 interface SaturationProps {
   className?: string;
   color: HsvaColor;
-  onChange: (newSaturation: { s: number }) => void;
+  onChange: (newSaturation: Partial<HsvaColor>) => void;
 }
 
-const Saturation = React.memo(
-  ({ className, color, onChange }: SaturationProps) => {
-    const handleMove = (interaction: { left: number }) => {
-      requestAnimationFrame(() => {
-        onChange({ s: 100 * interaction.left });
-      });
+const Saturation: React.FC<SaturationProps> = React.memo(
+  ({ className, color, onChange }) => {
+    const handleMove = (interaction: Interaction) => {
+      onChange({ s: 100 * interaction.left });
     };
 
-    const handleKey = (offset: { left: number }) => {
-      requestAnimationFrame(() => {
-        onChange({ s: clamp(color.s + offset.left * 100, 0, 100) });
-      });
+    const handleKey = (offset: Interaction) => {
+      onChange({ s: clamp(color.s + offset.left * 100, 0, 100) });
     };
 
     const nodeClassName = classes(['react-colorful__saturation', className]);
 
+    const background = useMemo(
+      () =>
+        `linear-gradient(to right, ${hsvaToHslString({
+          h: color.h,
+          s: 0,
+          v: color.v,
+          a: 1,
+        })}, ${hsvaToHslString({ h: color.h, s: 100, v: color.v, a: 1 })})`,
+      [color],
+    );
+
     return (
       <div className={nodeClassName}>
         <Interactive
-          style={{
-            background: `linear-gradient(to right, ${hsvaToHslString({
-              h: color.h,
-              s: 0,
-              v: color.v,
-              a: 1,
-            })}, ${hsvaToHslString({ h: color.h, s: 100, v: color.v, a: 1 })})`,
-          }}
+          style={{ background }}
           onMove={handleMove}
           onKey={handleKey}
           aria-label="Saturation"
           aria-valuenow={Math.round(color.s)}
-          aria-valuemax="100"
-          aria-valuemin="0"
+          aria-valuemax={100}
+          aria-valuemin={0}
         >
-          {[
-            <Pointer
-              key="saturation-pointer"
-              className="react-colorful__saturation-pointer"
-              left={color.s / 100}
-              color={hsvaToHslString({
-                h: color.h,
-                s: color.s,
-                v: color.v,
-                a: 1,
-              })}
-            />,
-          ]}
+          <Pointer
+            className="react-colorful__saturation-pointer"
+            left={color.s / 100}
+            color={hsvaToHslString({
+              h: color.h,
+              s: color.s,
+              v: color.v,
+              a: 1,
+            })}
+          />
         </Interactive>
       </div>
     );
@@ -607,61 +660,57 @@ const Saturation = React.memo(
 interface ValueProps {
   className?: string;
   color: HsvaColor;
-  onChange: (newValue: { v: number }) => void;
+  onChange: (newValue: Partial<HsvaColor>) => void;
 }
 
-const Value = React.memo(({ className, color, onChange }: ValueProps) => {
-  const handleMove = (interaction: { left: number }) => {
-    requestAnimationFrame(() => {
+const Value: React.FC<ValueProps> = React.memo(
+  ({ className, color, onChange }) => {
+    const handleMove = (interaction: Interaction) => {
       onChange({ v: 100 * interaction.left });
-    });
-  };
+    };
 
-  const handleKey = (offset: { left: number }) => {
-    requestAnimationFrame(() => {
+    const handleKey = (offset: Interaction) => {
       onChange({
         v: clamp(color.v + offset.left * 100, 0, 100),
       });
-    });
-  };
+    };
 
-  const nodeClassName = classes(['react-colorful__value', className]);
+    const nodeClassName = classes(['react-colorful__value', className]);
+
+    const background = useMemo(
+      () =>
+        `linear-gradient(to right, ${hsvaToHslString({
+          h: color.h,
+          s: color.s,
+          v: 0,
+          a: 1,
+        })}, ${hsvaToHslString({ h: color.h, s: color.s, v: 100, a: 1 })})`,
+      [color],
+    );
 
-  return (
-    <div className={nodeClassName}>
-      <Interactive
-        style={{
-          background: `linear-gradient(to right, ${hsvaToHslString({
-            h: color.h,
-            s: color.s,
-            v: 0,
-            a: 1,
-          })}, ${hsvaToHslString({ h: color.h, s: color.s, v: 100, a: 1 })})`,
-        }}
-        onMove={handleMove}
-        onKey={handleKey}
-        aria-label="Value"
-        aria-valuenow={Math.round(color.v)}
-        aria-valuemax="100"
-        aria-valuemin="0"
-      >
-        {[
+    return (
+      <div className={nodeClassName}>
+        <Interactive
+          style={{
+            background,
+          }}
+          onMove={handleMove}
+          onKey={handleKey}
+          aria-label="Value"
+          aria-valuenow={Math.round(color.v)}
+          aria-valuemax={100}
+          aria-valuemin={0}
+        >
           <Pointer
-            key="value-pointer"
             className="react-colorful__value-pointer"
             left={color.v / 100}
-            color={hsvaToHslString({
-              h: color.h,
-              s: color.s,
-              v: color.v,
-              a: 1,
-            })}
-          />,
-        ]}
-      </Interactive>
-    </div>
-  );
-});
+            color={hsvaToHslString(color)}
+          />
+        </Interactive>
+      </div>
+    );
+  },
+);
 
 interface RGBSliderProps {
   className?: string;
@@ -670,8 +719,8 @@ interface RGBSliderProps {
   target: 'r' | 'g' | 'b';
 }
 
-const RGBSlider = React.memo(
-  ({ className, color, onChange, target }: RGBSliderProps) => {
+const RGBSlider: React.FC<RGBSliderProps> = React.memo(
+  ({ className, color, onChange, target }) => {
     const rgb = hsvaToRgba(color);
 
     const setNewTarget = (value: number) => {
@@ -679,16 +728,12 @@ const RGBSlider = React.memo(
       onChange(rgbaToHsva(newRgb));
     };
 
-    const handleMove = (interaction: { left: number }) => {
-      requestAnimationFrame(() => {
-        setNewTarget(255 * interaction.left);
-      });
+    const handleMove = (interaction: Interaction) => {
+      setNewTarget(255 * interaction.left);
     };
 
-    const handleKey = (offset: { left: number }) => {
-      requestAnimationFrame(() => {
-        setNewTarget(clamp(rgb[target] + offset.left * 255, 0, 255));
-      });
+    const handleKey = (offset: Interaction) => {
+      setNewTarget(clamp(rgb[target] + offset.left * 255, 0, 255));
     };
 
     const nodeClassName = classes([`react-colorful__${target}`, className]);
@@ -706,17 +751,14 @@ const RGBSlider = React.memo(
           onMove={handleMove}
           onKey={handleKey}
           aria-valuenow={rgb[target]}
-          aria-valuemax="255"
-          aria-valuemin="0"
+          aria-valuemax={255}
+          aria-valuemin={0}
         >
-          {[
-            <Pointer
-              key={`${target}-pointer`}
-              className={`react-colorful__${target}-pointer`}
-              left={rgb[target] / 255}
-              color={selected}
-            />,
-          ]}
+          <Pointer
+            className={`react-colorful__${target}-pointer`}
+            left={rgb[target] / 255}
+            color={selected}
+          />
         </Interactive>
       </div>
     );