feat: Refactor dropdown select component using HeroUI (#289)

Author: Pleasurecruise

README-zh.md

@@ -48,12 +48,15 @@
 ```bash
 npx drizzle-kit generate
 ```
+
 5. **构建 MCP Streamable Http**
+
 ```bash
 cd packages/react-native-streamable-http
 npm install
 npm run build
 ```
+
 6. **启动应用程序**
 
 iOS:

README.md

@@ -48,12 +48,15 @@ English | [中文](./README-zh.md)
 ```bash
 npx drizzle-kit generate
 ```
+
 5. **Build the MCP Streamable Http**
+
 ```bash
 cd packages/react-native-streamable-http
 npm install
 npm run build
 ```
+
 6. **Start the application**
 
 iOS:

src/componentsV2/base/SelectionDropdown/index.tsx

@@ -1,57 +1,71 @@
+import { Select } from 'heroui-native'
+import type { FC } from 'react'
 import React from 'react'
 import type { SFSymbol } from 'sf-symbols-typescript'
-import * as DropdownMenu from 'zeego/dropdown-menu'
 
-import { isIOS } from '@/utils/device'
+interface SelectOption {
+  value: string
+  label: string
+}
 
 export interface SelectionDropdownItem {
   id?: string
   key?: string
   label: React.ReactNode | string
-  description?: React.ReactNode | string
-  icon?: React.ReactNode | ((isSelected: boolean) => React.ReactNode)
+  icon?: React.ReactNode
   iOSIcon?: SFSymbol | string
   isSelected?: boolean
-  onSelect?: () => void
   destructive?: boolean
-  [x: string]: any
+  onSelect?: () => void
 }
 
 export interface SelectionDropdownProps {
   items: SelectionDropdownItem[]
   children: React.ReactNode
   shouldDismissMenuOnSelect?: boolean
+  onValueChange?: (value: string) => void
 }
 
-/**
- * 用于显示下拉选择菜单的组件
- * 使用 Zeego dropdown menu 实现，支持原生体验
- */
-const SelectionDropdown: React.FC<SelectionDropdownProps> = ({ items, children, shouldDismissMenuOnSelect = true }) => {
+const SelectionDropdown: FC<SelectionDropdownProps> = ({
+  items,
+  children,
+  shouldDismissMenuOnSelect = true,
+  onValueChange
+}) => {
+  const handleValueChange = (selectedItem: SelectOption | undefined) => {
+    if (!selectedItem) {
+      return
+    }
+
+    const newValue = selectedItem.value
+
+    if (onValueChange) {
+      onValueChange(newValue)
+    }
+
+    const foundItem = items.find(item => item.id === newValue || item.key === newValue)
+    if (foundItem && foundItem.onSelect) {
+      foundItem.onSelect()
+    }
+  }
+
+  const renderItems = () =>
+    items.map((item, index) => {
+      const itemValue = item.id || item.key || String(index)
+      const itemLabel = typeof item.label === 'string' ? item.label : `Item ${index + 1}`
+      return <Select.Item key={itemValue} value={itemValue} label={itemLabel} />
+    })
+
   return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger>{children}</DropdownMenu.Trigger>
-
-      <DropdownMenu.Content>
-        {items.map((item, index) => {
-          const itemKey = item.key?.toString() || item.id?.toString() || index.toString()
-          const iconElement = typeof item.icon === 'function' ? item.icon(item.isSelected ?? false) : item.icon
-
-          return (
-            <DropdownMenu.CheckboxItem
-              destructive={item.destructive}
-              shouldDismissMenuOnSelect={shouldDismissMenuOnSelect}
-              key={itemKey}
-              value={item.isSelected ? 'on' : 'off'}
-              onValueChange={() => item.onSelect?.()}>
-              {isIOS && item.iOSIcon && <DropdownMenu.ItemIcon ios={{ name: item.iOSIcon }} />}
-              {!isIOS && iconElement && <DropdownMenu.ItemIcon>{iconElement}</DropdownMenu.ItemIcon>}
-              <DropdownMenu.ItemTitle>{item.label}</DropdownMenu.ItemTitle>
-            </DropdownMenu.CheckboxItem>
-          )
-        })}
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
+    <Select onValueChange={handleValueChange}>
+      <Select.Trigger asChild>{children}</Select.Trigger>
+      <Select.Portal>
+        <Select.Overlay closeOnPress={shouldDismissMenuOnSelect} />
+        <Select.Content width="trigger" placement="bottom" align="center">
+          {renderItems()}
+        </Select.Content>
+      </Select.Portal>
+    </Select>
   )
 }
 

src/componentsV2/features/SettingsScreen/providers/ModelSelect.tsx

@@ -2,8 +2,8 @@ import { Button } from 'heroui-native'
 import { sortBy } from 'lodash'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import * as DropdownMenu from 'zeego/dropdown-menu'
 
+import SelectionDropdown from '@/componentsV2/base/SelectionDropdown'
 import { ChevronDown } from '@/componentsV2/icons'
 import { isEmbeddingModel } from '@/config/models'
 import type { Model, Provider } from '@/types/assistant'
@@ -20,54 +20,27 @@ export function ModelSelect({ provider, onSelectModel }: ModelSelectProps) {
 
   const selectOptions = !provider.models?.length
     ? []
-    : [
-        {
-          label: provider.isSystem ? t(`provider.${provider.id}`) : provider.name,
-          title: provider.name,
-          options: sortBy(provider.models, 'name')
-            .filter(model => !isEmbeddingModel(model))
-            .map(model => ({
-              label: model.name,
-              value: getModelUniqId(model),
-              model
-            }))
-        }
-      ]
+    : sortBy(provider.models, 'name')
+        .filter(model => !isEmbeddingModel(model))
+        .map(model => ({
+          id: getModelUniqId(model),
+          label: model.name,
+          model
+        }))
 
   const handleValueChange = (value: string) => {
-    if (!value) {
-      setSelectedModel(undefined)
-      onSelectModel(undefined)
-      return
-    }
-
-    const allOptions = selectOptions.flatMap(group => group.options)
-    const foundOption = allOptions.find(opt => opt.value === value)
+    const foundOption = selectOptions.find(opt => opt.id === value)
     const model = foundOption?.model
     setSelectedModel(model)
     onSelectModel(model)
   }
 
   return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger>
-        <Button className="rounded-xl" pressableFeedbackVariant="ripple" variant="tertiary">
-          <Button.Label>{selectedModel ? selectedModel.id : t('settings.provider.api_check.tooltip')}</Button.Label>
-          <ChevronDown />
-        </Button>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content>
-        {selectOptions.map(group => (
-          <DropdownMenu.Group key={group.label}>
-            <DropdownMenu.Label>{t(`${group.label}`)}</DropdownMenu.Label>
-            {group.options.map(option => (
-              <DropdownMenu.Item key={option.value} onSelect={() => handleValueChange(option.value)}>
-                {option.label}
-              </DropdownMenu.Item>
-            ))}
-          </DropdownMenu.Group>
-        ))}
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
+    <SelectionDropdown items={selectOptions} onValueChange={handleValueChange}>
+      <Button className="rounded-xl" pressableFeedbackVariant="ripple" variant="tertiary">
+        <Button.Label>{selectedModel ? selectedModel.id : t('settings.provider.api_check.tooltip')}</Button.Label>
+        <ChevronDown />
+      </Button>
+    </SelectionDropdown>
   )
 }

src/componentsV2/features/SettingsScreen/providers/ProviderSelect.tsx

@@ -62,7 +62,7 @@ export function ProviderSelect({ value, onValueChange, placeholder, className }:
       <Pressable className={className}>
         <Button
           pressableFeedbackVariant="ripple"
-          className="h-8 justify-between rounded-lg"
+          className="min-w-35 h-8 justify-between rounded-lg"
           variant="tertiary"
           size="sm"
           pointerEvents="none">