From 838f0c0fa0c0b94db590a950ed04cf1e30e9c833 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Wed, 5 Feb 2025 21:40:53 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=AF=B9=E4=BA=8E=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=E8=A1=A8=E5=8D=95=E5=80=BC=E7=9A=84=E5=A4=84=E7=90=86?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FloatColorPicker.tsx |  8 ++++----
 src/utls.ts                         | 16 ++++++++++++++++
 2 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 src/utls.ts

diff --git a/src/components/FloatColorPicker.tsx b/src/components/FloatColorPicker.tsx
index 91f183f..82e593b 100644
--- a/src/components/FloatColorPicker.tsx
+++ b/src/components/FloatColorPicker.tsx
@@ -7,14 +7,14 @@ import styles from './FloatColorPicker.module.css';
 type FloatColorPickerProps = {
   name?: string;
   color?: string;
-  onPick?: (color: string) => void;
+  onPick?: (color: string | null | undefined) => void;
 };
 
 export function FloatColorPicker({ name, color, onPick }: FloatColorPickerProps) {
   const [pickedColor, setPicked] = useState<string | null>(color ?? null);
   const [showPicker, setPickerShow] = useState(false);
   const handlePickAction = useCallback(
-    (value: string | null) => {
+    (value: string) => {
       setPicked(value);
       onPick?.(value);
     },
@@ -42,7 +42,7 @@ export function FloatColorPicker({ name, color, onPick }: FloatColorPickerProps)
       </div>
       {showPicker && (
         <div className={styles.picker}>
-          <ColorPicker color={pickedColor} onSelect={handlePickAction} />
+          <ColorPicker color={pickedColor ?? null} onSelect={handlePickAction} />
           <div className={styles.btns}>
             <button type="button" className="primary" onClick={() => setPickerShow(false)}>
               Done
@@ -50,7 +50,7 @@ export function FloatColorPicker({ name, color, onPick }: FloatColorPickerProps)
           </div>
         </div>
       )}
-      {!isNil(name) && <input type="hidden" name={name} value={pickedColor} />}
+      {!isNil(name) && <input type="hidden" name={name} value={pickedColor ?? ''} />}
     </div>
   );
 }
diff --git a/src/utls.ts b/src/utls.ts
new file mode 100644
index 0000000..1caa575
--- /dev/null
+++ b/src/utls.ts
@@ -0,0 +1,16 @@
+import { isEmpty, isNil } from 'lodash-es';
+
+export function defaultEmptyFormData<D>(formData: FormData, param: string, defaultValue: D): D {
+  const value = formData.get(param);
+  if (isNil(value) || isEmpty(value)) {
+    return defaultValue;
+  }
+  return value;
+}
+
+export function defaultEmptyValue<T, D>(value: T, defaultValue: D): T | D {
+  if (isNil(value) || isEmpty(value)) {
+    return defaultValue;
+  }
+  return value;
+}