From 6dba92a2c5b151da8b10ba7e4187c574adf4d33f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Sat, 25 Jan 2025 09:22:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=AD=A3SegmentControl=E8=A7=A3?=
 =?UTF-8?q?=E6=9E=90Map=E6=A0=BC=E5=BC=8F=E7=9A=84=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E5=80=BC=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HSegmentedControl.tsx | 12 +++++++++++-
 src/components/VSegmentedControl.tsx | 12 +++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/HSegmentedControl.tsx b/src/components/HSegmentedControl.tsx
index 9147e37..29fe08e 100644
--- a/src/components/HSegmentedControl.tsx
+++ b/src/components/HSegmentedControl.tsx
@@ -5,6 +5,8 @@ import type { Option } from '../models';
 import styles from './HSegmentedControl.module.css';
 
 type HSegmentedControlProps = {
+  name?: string;
+  defaultValue?: Option['value'];
   options?: Option[];
   value?: Option['value'];
   onChange?: (value: Option['value']) => void;
@@ -12,12 +14,19 @@ type HSegmentedControlProps = {
 };
 
 export function HSegmentedControl({
+  name,
+  defaultValue,
   options = [],
   value,
   onChange,
   extendClassName,
 }: HSegmentedControlProps) {
-  const [selected, setSelected] = useState(value ?? options[0].value ?? null);
+  const [selected, setSelected] = useState(
+    value ??
+      defaultValue ??
+      (isMap(options[0]) ? options[0].get('value') : options[0].value) ??
+      null,
+  );
   const [sliderPosition, setSliderPosition] = useState(0);
   const [sliderWidth, setSliderWidth] = useState(0);
   const sliderRef = useRef<HTMLDivElement>(null);
@@ -57,6 +66,7 @@ export function HSegmentedControl({
           />
         )}
       </div>
+      {!isNil(name) && <input type="hidden" name={name} value={selected} />}
     </div>
   );
 }
diff --git a/src/components/VSegmentedControl.tsx b/src/components/VSegmentedControl.tsx
index 32f9a9a..83b56e6 100644
--- a/src/components/VSegmentedControl.tsx
+++ b/src/components/VSegmentedControl.tsx
@@ -5,6 +5,8 @@ import type { Option } from '../models';
 import styles from './VSegmentedControl.module.css';
 
 type VSegmentedControlProps = {
+  name?: string;
+  defaultValue?: Option['value'];
   options?: Option[];
   value?: Option['value'];
   onChange?: (value: Option['value']) => void;
@@ -12,12 +14,19 @@ type VSegmentedControlProps = {
 };
 
 export function VSegmentedControl({
+  name,
+  defaultValue,
   options = [],
   value,
   onChange,
   extendClassName,
 }: VSegmentedControlProps) {
-  const [selected, setSelected] = useState(value ?? options[0].value ?? null);
+  const [selected, setSelected] = useState(
+    value ??
+      defaultValue ??
+      (isMap(options[0]) ? options[0].get('value') : options[0].value) ??
+      null,
+  );
   const [sliderPosition, setSliderPosition] = useState(0);
   const [sliderHeight, setSliderHeight] = useState(0);
   const sliderRef = useRef<HTMLDivElement>(null);
@@ -57,6 +66,7 @@ export function VSegmentedControl({
           />
         )}
       </div>
+      {!isNil(name) && <input type="hidden" name={name} value={selected} />}
     </div>
   );
 }