From 4b4428fd3b57b1966b9190cabd1b105b47cbe6f9 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 08:56:57 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=BC=BASegmentControl=E7=B3=BB?=
 =?UTF-8?q?=E5=88=97=E7=BB=84=E4=BB=B6=E5=AF=B9=E4=BA=8EMap=E7=9A=84?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HSegmentedControl.tsx | 24 ++++++++++++++----------
 src/components/VSegmentedControl.tsx | 24 ++++++++++++++----------
 src/models.ts                        | 10 ++++++----
 3 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/src/components/HSegmentedControl.tsx b/src/components/HSegmentedControl.tsx
index e7d49fd..9147e37 100644
--- a/src/components/HSegmentedControl.tsx
+++ b/src/components/HSegmentedControl.tsx
@@ -1,5 +1,5 @@
 import cx from 'clsx';
-import { isEqual, isNil } from 'lodash-es';
+import { isEqual, isMap, isNil } from 'lodash-es';
 import { useCallback, useRef, useState } from 'react';
 import type { Option } from '../models';
 import styles from './HSegmentedControl.module.css';
@@ -36,15 +36,19 @@ export function HSegmentedControl({
   return (
     <div className={cx(styles.segmented_control, extendClassName)}>
       <div className={styles.options}>
-        {options.map((option, index) => (
-          <div
-            key={`${index}_${option.value}`}
-            className={cx(styles.option, isEqual(selected, option.value) && styles.selected)}
-            ref={(el) => (optionsRef.current[index] = el!)}
-            onClick={() => handleSelectAction(option.value, index)}>
-            {option.label}
-          </div>
-        ))}
+        {options.map((option, index) => {
+          const label = isMap(option) ? option.get('label') : option.label;
+          const value = isMap(option) ? option.get('value') : option.value;
+          return (
+            <div
+              key={`${index}_${value}`}
+              className={cx(styles.option, isEqual(selected, value) && styles.selected)}
+              ref={(el) => (optionsRef.current[index] = el!)}
+              onClick={() => handleSelectAction(value, index)}>
+              {label}
+            </div>
+          );
+        })}
         {!isNil(selected) && (
           <div
             className={styles.slider}
diff --git a/src/components/VSegmentedControl.tsx b/src/components/VSegmentedControl.tsx
index 191e341..32f9a9a 100644
--- a/src/components/VSegmentedControl.tsx
+++ b/src/components/VSegmentedControl.tsx
@@ -1,5 +1,5 @@
 import cx from 'clsx';
-import { isEqual, isNil } from 'lodash-es';
+import { isEqual, isMap, isNil } from 'lodash-es';
 import { useCallback, useRef, useState } from 'react';
 import type { Option } from '../models';
 import styles from './VSegmentedControl.module.css';
@@ -36,15 +36,19 @@ export function VSegmentedControl({
   return (
     <div className={cx(styles.segmented_control, extendClassName)}>
       <div className={styles.options}>
-        {options.map((option, index) => (
-          <div
-            key={`${index}_${option.value}`}
-            className={cx(styles.option, isEqual(selected, option.value) && styles.selected)}
-            ref={(el) => (optionsRef.current[index] = el!)}
-            onClick={() => handleSelectAction(option.value, index)}>
-            {option.label}
-          </div>
-        ))}
+        {options.map((option, index) => {
+          const label = isMap(option) ? option.get('label') : option.label;
+          const value = isMap(option) ? option.get('value') : option.value;
+          return (
+            <div
+              key={`${index}_${value}`}
+              className={cx(styles.option, isEqual(selected, value) && styles.selected)}
+              ref={(el) => (optionsRef.current[index] = el!)}
+              onClick={() => handleSelectAction(value, index)}>
+              {label}
+            </div>
+          );
+        })}
         {!isNil(selected) && (
           <div
             className={styles.slider}
diff --git a/src/models.ts b/src/models.ts
index a3f4094..871f24f 100644
--- a/src/models.ts
+++ b/src/models.ts
@@ -4,10 +4,12 @@ import { MaterialDesign3SchemeStorage } from './material-3-scheme';
 import { QSchemeStorage } from './q-scheme';
 import { SwatchSchemeStorage } from './swatch_scheme';
 
-export type Option = {
-  label: string;
-  value: string | number | null;
-};
+export type Option =
+  | {
+      label: string;
+      value: string | number | null;
+    }
+  | Record<'label' | 'value', string | number | null>;
 
 export type HarmonyColor = {
   color: string;