From 67f220facb9f2f382c1d1675cb1ac3c500fa1fef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Tue, 31 Dec 2024 14:06:08 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=99ColorPicker=E7=BB=84=E4=BB=B6=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E4=BC=A0=E5=85=A5=E4=BC=A0=E5=87=BA=E9=80=89=E5=AE=9A?=
 =?UTF-8?q?=E5=80=BC=E7=9A=84=E8=83=BD=E5=8A=9B=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ColorPicker.tsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx
index a9852f9..2dda179 100644
--- a/src/components/ColorPicker.tsx
+++ b/src/components/ColorPicker.tsx
@@ -5,9 +5,18 @@ import { HSegmentedControl } from './HSegmentedControl';
 import { HslAssemble } from './HslAsssemble';
 import { RGBAssemble } from './RGBAssemble';
 
-export function ColorPicker() {
-  const [pickMode, setMode] = useState<'rgb' | 'hsl' | 'oklch'>('rgb');
-  const [selectedColor, setSelectedColor] = useState<string>('000000');
+type ColorPickerProps = {
+  color?: string | null;
+  onSelect?: (color: string) => void;
+};
+
+export function ColorPicker({ color, onSelect }: ColorPickerProps) {
+  const [pickMode, setMode] = useState<'rgb' | 'hsl'>('rgb');
+  const [selectedColor, setSelectedColor] = useState<string>(color ?? '000000');
+  const handleColorSelect = (color: string) => {
+    setSelectedColor(color);
+    onSelect?.(color);
+  };
 
   return (
     <div className={styles.color_picker}>
@@ -22,10 +31,10 @@ export function ColorPicker() {
         onChange={(value) => setMode(value as 'rgb' | 'hsl' | 'oklch')}
       />
       {isEqual(pickMode, 'rgb') && (
-        <RGBAssemble color={selectedColor} onChange={(c) => setSelectedColor(c)} />
+        <RGBAssemble color={selectedColor} onChange={handleColorSelect} />
       )}
       {isEqual(pickMode, 'hsl') && (
-        <HslAssemble color={selectedColor} onChange={(c) => setSelectedColor(c)} />
+        <HslAssemble color={selectedColor} onChange={handleColorSelect} />
       )}
     </div>
   );