fix: add disabled state handling to Select component on Android

Author: lawvs

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>

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