From a45a4e367f8cf64a71ea495de170b6fcbafff558 Mon Sep 17 00:00:00 2001
From: lawvs <18554747+lawvs@users.noreply.github.com>
Date: Fri, 25 Jul 2025 15:08:17 +0800
Subject: [PATCH] fix: add disabled state handling to Select component on
 Android

---
 apps/mobile/ios/Folo/Info.plist                    |  2 +-
 .../src/components/ui/form/Select.android.tsx      | 14 ++++++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/apps/mobile/ios/Folo/Info.plist b/apps/mobile/ios/Folo/Info.plist
index 6b76ee057..10bceefc2 100644
--- a/apps/mobile/ios/Folo/Info.plist
+++ b/apps/mobile/ios/Folo/Info.plist
@@ -53,7 +53,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>115</string>
+	<string>116</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationCategoryType</key>
diff --git a/apps/mobile/src/components/ui/form/Select.android.tsx b/apps/mobile/src/components/ui/form/Select.android.tsx
index e2a1c1f59..dd48a81f3 100644
--- a/apps/mobile/src/components/ui/form/Select.android.tsx
+++ b/apps/mobile/src/components/ui/form/Select.android.tsx
@@ -8,7 +8,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context"
 import { Text } from "@/src/components/ui/typography/Text"
 import { CheckFilledIcon } from "@/src/icons/check_filled"
 import { MingcuteDownLineIcon } from "@/src/icons/mingcute_down_line"
-import { accentColor } from "@/src/theme/colors"
+import { accentColor, useColor } from "@/src/theme/colors"
 
 import { BottomModal } from "../modal/BottomModal"
 import { FormLabel } from "./Label"
@@ -25,6 +25,7 @@ interface SelectProps<T> {
   wrapperClassName?: string
   wrapperStyle?: StyleProp<ViewStyle>
   label?: string
+  disabled?: boolean
 }
 export function Select<T>({
   options,
@@ -34,7 +35,9 @@ export function Select<T>({
   wrapperClassName,
   wrapperStyle,
   label,
+  disabled,
 }: SelectProps<T>) {
+  const grayColor = useColor("gray")
   const [isModalVisible, setModalVisible] = useState(false)
   const selectedOption = options.find((opt) => opt.value === value)
   const insets = useSafeAreaInsets()
@@ -68,6 +71,7 @@ export function Select<T>({
             activeOpacity={0.7}
             onPress={() => handleSelectOption(item.value)}
             className="flex-row items-center justify-between p-4"
+            disabled={disabled}
           >
             <View className="flex-1">
               <Text
@@ -94,27 +98,29 @@ export function Select<T>({
         </>
       )
     },
-    [handleSelectOption, value],
+    [handleSelectOption, value, disabled],
   )
   const Trigger = (
     <TouchableOpacity
       className={cn(
         "min-w-24 flex-1 shrink flex-row items-center rounded-lg pl-3",
+        disabled ? "opacity-50" : "",
         wrapperClassName,
       )}
       hitSlop={30}
       onPress={showOptions}
+      disabled={disabled}
       style={wrapperStyle}
     >
       <Text
-        className="text-accent flex-1 text-right font-semibold"
+        className={cn("flex-1 text-right font-semibold", disabled ? "text-gray" : "text-accent")}
         ellipsizeMode="middle"
         numberOfLines={1}
       >
         {displayValue || selectedOption?.label || "Select"}
       </Text>
       <View className="ml-auto shrink-0 pl-1">
-        <MingcuteDownLineIcon color={accentColor} height={18} width={18} />
+        <MingcuteDownLineIcon color={disabled ? grayColor : accentColor} height={18} width={18} />
       </View>
     </TouchableOpacity>
   )