From 795c97f36dc00f57e2a50730d69e8da7e0ce7861 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 11:08:22 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90RGB=E9=A2=9C=E8=89=B2?=
 =?UTF-8?q?=E5=90=88=E6=88=90=E9=80=89=E6=8B=A9=E5=99=A8=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/RGBAssemble.module.css |  0
 src/components/RGBAssemble.tsx        | 70 +++++++++++++++++++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 src/components/RGBAssemble.module.css
 create mode 100644 src/components/RGBAssemble.tsx

diff --git a/src/components/RGBAssemble.module.css b/src/components/RGBAssemble.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/RGBAssemble.tsx b/src/components/RGBAssemble.tsx
new file mode 100644
index 0000000..6181558
--- /dev/null
+++ b/src/components/RGBAssemble.tsx
@@ -0,0 +1,70 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useColorFunction } from '../ColorFunctionContext';
+import { ColorRangePicker } from './ColorRangePicker';
+
+type RGBAssembleProps = {
+  color: string | null;
+  onChange: (color: string) => void;
+};
+
+export function RGBAssemble({ color = '000000', onChange }: RGBAssembleProps) {
+  const { colorFn } = useColorFunction();
+  const rgbComponents = useMemo(() => {
+    try {
+      const [r, g, b] = colorFn?.represent_rgb(color) ?? [0, 0, 0];
+      return [r, g, b];
+    } catch (error) {
+      console.error('[Convert RGB]', error);
+    }
+    return [0, 0, 0];
+  }, [color]);
+  const [r, setR] = useState(0);
+  const [g, setG] = useState(0);
+  const [b, setB] = useState(0);
+
+  useEffect(() => {
+    try {
+      const newColor = colorFn?.rgb_to_hex(r, g, b) ?? '000000';
+      onChange(newColor);
+    } catch (error) {
+      console.error('[Convert RGB]', error);
+    }
+  }, [r, g, b]);
+  useEffect(() => {
+    setR(rgbComponents[0]);
+    setG(rgbComponents[1]);
+    setB(rgbComponents[2]);
+  }, []);
+
+  return (
+    <div>
+      <ColorRangePicker
+        title="Red"
+        startColor="rgb(0, 0, 0)"
+        endColor="rgb(255, 0, 0)"
+        max={255}
+        step={1}
+        value={r}
+        onChange={setR}
+      />
+      <ColorRangePicker
+        title="Green"
+        startColor="rgb(0, 0, 0)"
+        endColor="rgb(0, 255, 0)"
+        max={255}
+        step={1}
+        value={g}
+        onChange={setG}
+      />
+      <ColorRangePicker
+        title="Blue"
+        startColor="rgb(0, 0, 0)"
+        endColor="rgb(0, 0, 255)"
+        max={255}
+        step={1}
+        value={b}
+        onChange={setB}
+      />
+    </div>
+  );
+}