增加对于默认表单值的处理。

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>
   );
 }

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;
+}