@beppla/tapas-ui 1.5.9 → 1.5.11

package/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,881 @@
+
+import React, {useEffect, useState, useRef} from 'react';
+import {
+  Pressable, 
+  ScrollView, 
+  Modal, 
+  TouchableOpacity, 
+  Text, 
+  View, 
+  Dimensions, 
+  Animated, 
+  LayoutChangeEvent,
+  ViewStyle,
+  TextStyle,
+  GestureResponderEvent
+} from 'react-native';
+import CustomDropdown, { Props as CustomDropdownProps } from "./CustomDropdown";
+import CustomListItem, { ItemProps } from "../ListItem/ListItem";
+import {makeStyles, SearchBar, withTheme, useTheme} from '@rneui/themed';
+import TapasIcon from  '../Icons/TapasIcon';
+export * from "./CustomDropdown";
+
+// 新增接口定义
+export interface TapasDropDownItem {
+  key: string | number;
+  value: string;
+  secondaryValue?: string;
+}
+
+
+
+// @ts-expect-error CustomDropdownProps has conflicting index signature
+interface DropdownProps extends Partial<CustomDropdownProps> {
+  options?: ItemProps[];
+  onChange?: (value: ItemProps) => void;
+  value?: ItemProps;
+  prefix?: string;
+  width?: number;
+  subWidth?: number;
+  subHeight?: number;
+  type?: 'button' | 'option';
+  onClose?: () => void;
+  onPress?: () => void;
+  onItemPress?: (value: string | number) => void;
+  disabled?: boolean;
+  showSearchBar?: boolean;
+  placeholder?: string;
+  onSearchChange?: (value: string) => void;
+  
+  // 新增 TapasDropdown 功能
+  /** 是否使用 Modal 模式（更强大的弹出效果） */
+  useModal?: boolean;
+  /** Modal 模式下的下拉项列表 */
+  dropdownItems?: TapasDropDownItem[];
+  /** 选中项的键值 */
+  selected?: string;
+  /** 是否显示选中值 */
+  showSelectedValue?: boolean;
+  /** 下拉框类型 */
+  dropdownType?: "clear" | "solid";
+  /** 是否显示箭头图标 */
+  arrowIcon?: boolean;
+  /** Modal 模式下的选择回调 */
+  onSelect?: (item: TapasDropDownItem) => void;
+  /** @deprecated Use onSelect instead */
+  attachSelect?: (item: TapasDropDownItem) => void;
+
+  /** 背景颜色 */
+  backgroundColor?: string;
+  /** 标签颜色 */
+  labelColor?: string;
+  /** 状态（正常或错误） */
+  state?: "normal" | "error";
+  /** 状态消息 */
+  stateMsg?: string;
+  /** 是否在列表中显示选中状态 */
+  showCheckedStatusInList?: boolean;
+  /** 是否显示状态消息 */
+  showStateMsg?: boolean;
+  /** 偏移宽度 */
+  offsetWidth?: number;
+  /** 扩展按钮文本 */
+  extendBtn?: string;
+  /** 扩展按钮图标 */
+  extendBtnIcon?: string;
+  /** 空文本提示 */
+  emptyText?: string;
+  /** 扩展按钮回调 */
+  onExtendBtnPress?: () => void;
+  /** @deprecated Use onExtendBtnPress instead */
+  attachExtendBtn?: () => void;
+  /** 是否禁用标签动画 */
+  noLabelAnim?: boolean;
+  /** 圆角半径 */
+  radius?: number;
+  /** 控制 Modal 可见性 */
+  modalVisible?: boolean;
+  /** 自定义弹出内容 */
+  customPopoverContent?: React.ReactNode;
+  /** 设置 Modal 可见性回调 */
+  setModalVisible?: (val: boolean) => void;
+  /** @deprecated Use modalVisible instead */
+  visible?: boolean;
+  /** @deprecated Use setModalVisible instead */
+  setVisible?: (val: boolean) => void;
+  /** @deprecated Use subWidth instead */
+  dropdownSubWidth?: number;
+  /** @deprecated Use subHeight instead */
+  dropdownSubHeight?: number;
+  /** @deprecated Use emptyText instead (fixed typo) */
+  empytText?: string;
+  /** 左侧图标 */
+  leftIcon?: string;
+  /** 按钮上方额外偏移 */
+  marginTopOffset?: number;
+  /** Modal 模式下的固定高度 */
+  height?: number;
+  /** 图标样式 */
+  iconStyle?: ViewStyle | TextStyle;
+  /** 标签文本 */
+  label?: string;
+  /** 是否必填 */
+  required?: boolean;
+  /** 测试ID */
+  testID?: string;
+}
+
+
+const useStyles = makeStyles((theme) => ({
+  searchBarContainer: {
+    backgroundColor: theme.colors.white,
+    height: 50,
+    padding: 0
+  },
+  inputContainer: {
+    backgroundColor: theme.colors.white,
+    height: 48,
+    borderTopWidth: 0,
+    padding: 0
+  },
+  inputStyle: {
+    height: 24,
+    fontFamily: theme.fonts.fontFamily,
+    fontSize: theme.fonts.sizeM,
+    fontWeight: theme.fonts.weightR,
+    color: theme.colors.colorTextPrimary,
+    marginLeft: 0
+  },
+  leftIconContainer: {
+    height: 24,
+    marginLeft: 16
+  },
+  iconStyle: {
+    color: theme.colors.secondary,
+  },
+  // Modal 模式样式
+  modalContainer: {
+    display: "flex",
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: "auto",
+    flexDirection: "column",
+    justifyContent: "flex-start", // 改为顶部对齐，与 CustomDropdown 保持一致
+    alignItems: "stretch", // 改为拉伸对齐，与 CustomDropdown 保持一致
+    width: "100%",
+  },
+  modalIcon: {
+    color: theme.colors.primary,
+  },
+  modalOptionsCon: {
+    position: "absolute",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    backgroundColor: theme.colors.white,
+    paddingTop: 12,
+    paddingBottom: 12,
+    borderRadius: 12,
+    maxHeight: 224,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    elevation: 8,
+  },
+  modalOptionsScrollView: {
+    flex: 1,
+    display: "flex",
+  },
+  modalOptionsInner: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "flex-start",
+    gap: 8,
+  },
+  modalOption: {
+    display: "flex",
+    flexDirection: "row",
+    width: "100%",
+    overflow: "hidden",
+    justifyContent: "space-between",
+    minHeight: 40,
+    alignItems: "center",
+  },
+  modalOptionText: {
+    marginLeft: 16,
+    marginRight: 16,
+    fontSize: 14,
+    fontWeight: "400",
+    color: theme.colors.primary,
+    alignSelf: "center",
+    overflow: "hidden",
+    flex: 1,
+  },
+  modalNoOptions: {
+    width: "100%",
+    textAlign: "center",
+    color: theme.colors.grey2,
+    marginLeft: 16,
+    marginRight: 16,
+  },
+  modalBtn: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center", // 确保垂直居中对齐
+    minHeight: 40,
+    width: "100%",
+    overflow: "hidden",
+    position: "relative",
+  },
+  modalSolidBtn: {
+    borderWidth: 1,
+    borderRadius: 12,
+    borderStyle: "solid",
+    borderColor: theme.colors.grey2,
+    paddingLeft: 16,
+    paddingRight: 12,
+    paddingTop: 9,
+    paddingBottom: 9,
+    alignItems: "center", // 确保垂直居中对齐
+  },
+  alignCenter: {
+    alignSelf: "center",
+  },
+  labelCon: {
+    position: "absolute",
+    left: 16,
+    paddingLeft: 1,
+    paddingRight: 1,
+    display: "flex",
+    flexDirection: "row",
+    zIndex: 30,
+  },
+  labelInner: {
+    display: "flex",
+    flexDirection: "row",
+  },
+  labelText: { 
+    fontSize: 12, 
+    color: theme.colors.primary 
+  },
+  required: {
+    fontSize: 12,
+    fontWeight: "400",
+    color: theme.colors.error || "#FF4444",
+    marginLeft: 1,
+  },
+  msg: {
+    display: "flex",
+    flexDirection: "row",
+    paddingLeft: 16,
+    paddingRight: 8,
+    marginTop: 1,
+    width: "100%",
+    height: 15,
+  },
+  msgText: {
+    fontSize: 12,
+    fontWeight: "400",
+    color: theme.colors.secondary,
+  },
+  extendBtnCon: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    height: 40,
+    overflow: "hidden",
+    backgroundColor: theme.colors.white,
+    borderRadius: 20,
+    gap: 8,
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    elevation: 8,
+  },
+  extendBtnText: {
+    fontSize: 14,
+    fontWeight: "400",
+    color: theme.colors.primary,
+  },
+}));
+
+const Dropdown: React.FC<DropdownProps> = ({
+  value,
+  prefix = '',
+  options,
+  onChange,
+  width,
+  subWidth,
+  subHeight = 150,
+  isVisible,
+  onSearchChange,
+  type = 'option',
+  // 新增 Modal 模式相关属性
+  useModal = false,
+  dropdownItems = [],
+  selected,
+  showSelectedValue = false,
+  dropdownType = "clear",
+  arrowIcon: _arrowIcon = false,
+  onSelect,
+  attachSelect,
+  backgroundColor,
+  labelColor,
+  state = "normal",
+  stateMsg,
+  showCheckedStatusInList = false,
+  showStateMsg = false,
+  offsetWidth = 0,
+  extendBtn,
+  extendBtnIcon,
+  emptyText,
+  onExtendBtnPress,
+  attachExtendBtn,
+  noLabelAnim = false,
+  radius = 12,
+  modalVisible,
+  customPopoverContent,
+  setModalVisible,
+  visible,
+  setVisible,
+  dropdownSubWidth,
+  dropdownSubHeight,
+  empytText,
+  leftIcon,
+  marginTopOffset = 0,
+  height,
+  iconStyle,
+  label,
+  required,
+  testID,
+  ...props
+}) => {
+  // 向下兼容：deprecated props 优先级低于新 props
+  const resolvedOnSelect = onSelect ?? attachSelect;
+  const resolvedOnExtendBtnPress = onExtendBtnPress ?? attachExtendBtn;
+  const resolvedModalVisible = modalVisible ?? visible;
+  const resolvedSetModalVisible = setModalVisible ?? setVisible;
+  const resolvedSubWidth = subWidth ?? dropdownSubWidth;
+  const resolvedSubHeight = subHeight ?? dropdownSubHeight;
+  const resolvedEmptyText = emptyText ?? empytText;
+
+  const styles = useStyles(props);
+  const theme = useTheme();
+  const [selected_old, selectedItem] = React.useState<ItemProps>(value as ItemProps);
+  const searchRef = React.useRef<any>(null);
+  const [search, setSearch] = useState('');
+
+
+  // Modal 模式相关状态
+  const [internalModalVisible, setInternalModalVisible] = useState(false);
+  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 });
+  const [dropdownWidthCalc, setDropdownWidthCalc] = useState(resolvedSubWidth ?? 151);
+  const [selectedItemKey, setSelectedItemKey] = useState<string | number>(selected ?? "");
+  const [top, setTop] = useState(18);
+  const [optionListHeight, setOptionListHeight] = useState(0);
+  
+  const buttonRef = useRef<React.ElementRef<typeof TouchableOpacity>>(null);
+  const topAnim = useRef(new Animated.Value(18)).current;
+  const offsetSpace = 8;
+  const offsetHeight = 10;
+
+  useEffect(() => {
+    if (value) selectedItem(value);
+  }, [value]);
+  
+  // Modal 模式相关 useEffect
+  useEffect(() => {
+    setSelectedItemKey(selected ?? "");
+  }, [selected]);
+
+  useEffect(() => {
+    if (typeof resolvedModalVisible === "boolean" && resolvedModalVisible !== undefined) {
+      setInternalModalVisible(resolvedModalVisible);
+    }
+  }, [resolvedModalVisible]);
+
+  // 动态更新下拉容器宽度（支持运行时宽度变化）
+  useEffect(() => {
+    if (resolvedSubWidth && internalModalVisible) {
+      setDropdownWidthCalc(resolvedSubWidth);
+    }
+  }, [resolvedSubWidth, internalModalVisible]);
+
+  // 标签动画效果
+  useEffect(() => {
+    if (!useModal || noLabelAnim) return;
+    
+    const start = !selectedItemKey ? 0 : 18;
+    const target = !selectedItemKey ? 18 : 0;
+    if (top === target) return;
+    setTop(target);
+    topAnim.setValue(start);
+    Animated.timing(topAnim, {
+      toValue: target,
+      duration: 300,
+      useNativeDriver: true,
+    }).start();
+  }, [selectedItemKey, useModal, noLabelAnim]);
+
+  const handleStopEvent = (event: GestureResponderEvent) => {
+    event.stopPropagation();
+  };
+  
+  const updateSearch = (search: string) => {
+    setSearch(search);
+    onSearchChange && onSearchChange(search);
+  };
+  
+
+  
+  // Modal 模式下的弹出逻辑
+  const openDropdown = () => {
+    if (props.disabled) return;
+    
+    if (buttonRef.current) {
+      buttonRef.current.measure((_fx: number, _fy: number, width: number, height: number, px: number, py: number) => {
+        const window = Dimensions.get("window");
+        const dropdownHeight = resolvedSubHeight ?? Math.min(40 * dropdownItems.length + 24, 224);
+        const dropdownWidth = Math.max(width, resolvedSubWidth ?? 151);
+        setDropdownWidthCalc(dropdownWidth);
+
+        // 计算显示位置
+        const enoughSpaceBelow = py + height + dropdownHeight + offsetHeight <= window.height;
+        const enoughSpaceAbove = py - dropdownHeight >= 0;
+        const enoughSpaceRight = px + dropdownWidth <= window.width;
+
+        const adjustedPx = (px % window.width) + (px > window.width ? 56 : 0) + offsetWidth;
+        const top = enoughSpaceBelow
+          ? py + height + offsetSpace
+          : enoughSpaceAbove
+          ? py - dropdownHeight - offsetHeight - 16
+          : py + height + offsetSpace;
+        const left = enoughSpaceRight
+          ? adjustedPx
+          : adjustedPx + width - dropdownWidth;
+
+        setDropdownPosition({ top, left });
+        
+        if (resolvedSetModalVisible) {
+          resolvedSetModalVisible(true);
+        } else {
+          setInternalModalVisible(true);
+        }
+      });
+    }
+  };
+
+  const closeModal = () => {
+    if (resolvedSetModalVisible) {
+      resolvedSetModalVisible(false);
+    } else {
+      setInternalModalVisible(false);
+    }
+  };
+  
+  const handleConLayout = (event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout;
+    setOptionListHeight(height);
+  };
+
+  // 如果使用 Modal 模式，渲染新的 Modal 界面
+  if (useModal) {
+    return (
+      <View testID={testID} style={[
+        styles.modalContainer,
+        width ? { width: width } : null,
+        { minHeight: (height || 40) + (label ? 7 : 0) + (showStateMsg ? 15 : 0) },
+        height ? { maxHeight: height + (label ? 7 : 0) + (showStateMsg ? 15 : 0) } : null,
+      ]}>
+        {/* 标签 */}
+        {label && !noLabelAnim && (
+          <Animated.View
+            style={[
+              styles.labelCon,
+              { top: topAnim },
+              { backgroundColor: backgroundColor || theme.theme.colors.white },
+            ]}
+          >
+            <Pressable style={styles.labelInner} onPress={openDropdown}>
+              <Text
+                style={[
+                  styles.labelText,
+                  state === "error" && { color: theme.theme.colors.error },
+                  !selectedItemKey && { color: theme.theme.colors.grey2 },
+                  props.disabled && { color: theme.theme.colors.grey3 },
+                ]}
+                numberOfLines={1}
+                ellipsizeMode="tail"
+              >
+                {!selectedItemKey ? props.placeholder || label : label}
+              </Text>
+              {required && <Text style={styles.required}>*</Text>}
+            </Pressable>
+          </Animated.View>
+        )}
+        
+        {/* 主按钮 */}
+        <TouchableOpacity
+          ref={buttonRef}
+          style={[
+            (showSelectedValue || (noLabelAnim && label)) ? styles.modalBtn : null,
+            dropdownType === "solid" ? styles.modalSolidBtn : null,
+            dropdownType === "solid" && radius ? { borderRadius: radius } : null,
+            // 统一主体容器的位置，无论是否使用 customPopoverContent
+            label ? { marginTop: 7 + marginTopOffset } : null,
+            noLabelAnim && label && backgroundColor ? { backgroundColor } : null,
+            state === "error" ? { borderColor: theme.theme.colors.error } : null,
+            props.disabled ? { borderColor: theme.theme.colors.grey3 } : null,
+            leftIcon && { gap: 8, paddingLeft: 8, paddingRight: 12 },
+            // 确保主体容器始终有统一的垂直对齐
+            { alignItems: "center" },
+          ]}
+          disabled={props.disabled}
+          onPress={openDropdown}
+        >
+          {leftIcon && (
+            <TapasIcon
+              size={20}
+              style={[
+                styles.alignCenter,
+                styles.modalIcon,
+                props.disabled && { color: theme.theme.colors.grey3 },
+              ]}
+              name={leftIcon}
+            />
+          )}
+          {showSelectedValue ? (
+            <Text
+              style={[
+                styles.alignCenter,
+                { flexGrow: 1, marginRight: 12 },
+                props.disabled && { color: theme.theme.colors.grey3 },
+              ]}
+              numberOfLines={1}
+              ellipsizeMode="tail"
+            >
+              {dropdownItems.find((item) => item.key === selectedItemKey)?.value}
+            </Text>
+          ) : noLabelAnim && label ? (
+            <Text
+              style={[
+                styles.alignCenter,
+                { flexGrow: 1, marginRight: 2 },
+                labelColor ? { color: labelColor } : null,
+                props.disabled ? { color: theme.theme.colors.grey3 } : null,
+              ]}
+              numberOfLines={1}
+              ellipsizeMode="tail"
+            >
+              {label}
+            </Text>
+          ) : null}
+
+          <TapasIcon
+            size={20}
+            style={[
+              styles.alignCenter,
+              styles.modalIcon,
+              iconStyle,
+              props.disabled && { color: theme.theme.colors.grey3 },
+            ]}
+            name={
+              internalModalVisible && props.icon === "arrow_drop_down"
+                ? "arrow_drop_up"
+                : props.icon === "arrow_drop_up"
+                ? "arrow_drop_down"
+                : props.icon || "arrow_drop_down"
+            }
+          />
+        </TouchableOpacity>
+        
+        {/* 状态消息 */}
+        {showStateMsg && (
+          <View style={styles.msg}>
+            <Text
+              style={[
+                styles.msgText,
+                state === "error" && { color: theme.theme.colors.error },
+              ]}
+              numberOfLines={1}
+              ellipsizeMode="tail"
+            >
+              {stateMsg}
+            </Text>
+          </View>
+        )}
+
+        {/* Modal 弹出框 */}
+        <Modal
+          transparent
+          visible={internalModalVisible}
+          onRequestClose={closeModal}
+          animationType="fade"
+        >
+          <TouchableOpacity style={{ flex: 1 }} onPress={closeModal}>
+            <View
+              style={[
+                styles.modalOptionsCon,
+                {
+                  top: dropdownPosition.top,
+                  left: dropdownPosition.left,
+                  width: dropdownWidthCalc,
+                },
+                resolvedSubHeight ? { maxHeight: resolvedSubHeight } : null,
+              ]}
+              onLayout={handleConLayout}
+            >
+              {customPopoverContent ? (
+                customPopoverContent
+              ) : (
+                <ScrollView
+                  style={styles.modalOptionsScrollView}
+                  keyboardShouldPersistTaps="handled"
+                  keyboardDismissMode="none"
+                  showsHorizontalScrollIndicator={false}
+                  showsVerticalScrollIndicator={false}
+                >
+                  <View style={styles.modalOptionsInner}>
+                    {dropdownItems.length > 0 ? (
+                      dropdownItems.map((item, index) => (
+                        <Pressable
+                          style={({ pressed }) => [
+                            styles.modalOption,
+                            item.secondaryValue ? { flexWrap: "wrap" } : null,
+                            {
+                              padding: 10,
+                              backgroundColor: pressed
+                                ? theme.theme.colors.grey4 || "#f0f0f0"
+                                : "transparent",
+                            },
+                            // 第一个 item 添加左上和右上圆角
+                            index === 0 && {
+                              borderTopLeftRadius: 12,
+                              borderTopRightRadius: 12,
+                            },
+                            // 最后一个 item 添加左下和右下圆角
+                            index === dropdownItems.length - 1 && {
+                              borderBottomLeftRadius: 12,
+                              borderBottomRightRadius: 12,
+                            },
+                            showCheckedStatusInList && selectedItemKey === item.key ? {
+                                backgroundColor: theme.theme.colors.grey4 || "#f0f0f0",
+                              } : null,
+                          ]}
+                          key={`dropdown-option-${item.key}-${index}`}
+                          onPress={() => {
+                            closeModal();
+                            if (resolvedOnSelect) {
+                              resolvedOnSelect(item);
+                            } else {
+                              setSelectedItemKey(item.key);
+                            }
+                          }}
+                        >
+                          <View
+                            style={{
+                              display: "flex",
+                              flexDirection: "row",
+                              justifyContent: "space-between",
+                              overflow: "hidden",
+                              width: "100%",
+                            }}
+                          >
+                            <Text
+                              style={[styles.modalOptionText]}
+                              numberOfLines={1}
+                              ellipsizeMode="tail"
+                            >
+                              {item.value}
+                            </Text>
+                            {selectedItemKey === item.key && (
+                              <TapasIcon
+                                name="check"
+                                size={20}
+                                color={theme.theme.colors.primary}
+                              />
+                            )}
+                          </View>
+                          {item.secondaryValue && (
+                            <View
+                              style={{
+                                display: "flex",
+                                flexDirection: "row",
+                                flex: 1,
+                                height: 14,
+                                overflow: "hidden",
+                                minWidth: dropdownWidthCalc - 32,
+                              }}
+                            >
+                              <Text
+                                style={[
+                                  styles.modalOptionText,
+                                  {
+                                    fontSize: 12,
+                                    color: theme.theme.colors.secondary,
+                                  },
+                                ]}
+                                numberOfLines={1}
+                                ellipsizeMode="tail"
+                              >
+                                {item.secondaryValue}
+                              </Text>
+                            </View>
+                          )}
+                        </Pressable>
+                      ))
+                    ) : (
+                      <Text
+                        numberOfLines={1}
+                        ellipsizeMode="tail"
+                        style={[styles.modalOptionText, styles.modalNoOptions]}
+                      >
+                        {resolvedEmptyText || "No options"}
+                      </Text>
+                    )}
+                  </View>
+                </ScrollView>
+              )}
+            </View>
+            
+            {/* 扩展按钮 */}
+            {extendBtn && (
+              <Pressable
+                onPress={() => {
+                  closeModal();
+                  setTimeout(() => {
+                    resolvedOnExtendBtnPress?.();
+                  }, 300);
+                }}
+                style={[
+                  styles.extendBtnCon,
+                  {
+                    left: dropdownPosition.left,
+                    top: dropdownPosition.top + optionListHeight + 8,
+                    width: dropdownWidthCalc,
+                  },
+                ]}
+              >
+                {extendBtnIcon && <TapasIcon size={20} name={extendBtnIcon} />}
+                <Text
+                  style={styles.extendBtnText}
+                  numberOfLines={1}
+                  ellipsizeMode="tail"
+                >
+                  {extendBtn}
+                </Text>
+              </Pressable>
+            )}
+          </TouchableOpacity>
+        </Modal>
+      </View>
+    );
+  }
+
+  // 原有的 CustomDropdown 模式
+  return (
+    <CustomDropdown
+      title={props?.title}
+      value={`${prefix}${selected_old?.name}`}
+      isVisible={isVisible}
+      width={width}
+      subWidth={resolvedSubWidth}
+      subHeight={resolvedSubHeight}
+      testID={testID}
+      {...props}
+      onClose={() => {
+        props.onClose && props.onClose();
+      }}
+      onPress={() => {
+        props.onPress && props.onPress();
+      }}
+      sheetTitlePros={{
+        ...props.sheetTitlePros,
+        onClose: () => {
+          props.onClose && props.onClose();
+        }
+      }}
+    >
+      <Pressable onPress={handleStopEvent}>
+        {props.showSearchBar && (
+          <SearchBar
+            ref={(search: any) => (searchRef.current = search)}
+            containerStyle={{
+              ...styles.searchBarContainer,
+              borderEndWidth: 1,
+              borderTopWidth: 0,
+              borderRightWidth: 0,
+              width: resolvedSubWidth,
+            }}
+            inputContainerStyle={styles.inputContainer}
+            placeholder={props.placeholder}
+            onChangeText={updateSearch}
+            inputStyle={{
+              ...styles.inputStyle
+            }}
+            leftIconContainerStyle={styles.leftIconContainer}
+            value={search}
+            lightTheme
+            searchIcon={<TapasIcon name="search" style={styles.iconStyle} size={20}/>}
+            clearIcon={
+              <TapasIcon
+                name="close"
+                onPress={() => {
+                  const search = searchRef.current;
+                  if (search) {
+                    search.clear();
+                    search.blur();
+                  }
+                }}
+                size={20}
+              />
+            }
+          />
+        )}
+      </Pressable>
+      <ScrollView 
+        style={{width: resolvedSubWidth, height: resolvedSubHeight}}
+        keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="none"
+      >
+        {options?.map((item, index) => {
+          const visibleItems = options.filter(item => !item.hide);
+          const currentVisibleIndex = visibleItems.findIndex(visibleItem => visibleItem === item);
+          const isFirst = currentVisibleIndex === 0;
+          const isLast = currentVisibleIndex === visibleItems.length - 1;
+          
+          return (
+            !item.hide && (
+              <CustomListItem
+                onItemPress={(value) => {
+                  if (type === 'button') {
+                    props.onItemPress && props.onItemPress(item.value);
+                  } else {
+                    selectedItem(value);
+                    onChange && onChange(value);
+                  }
+                  props.onClose && props.onClose();
+                }}
+                key={index}
+                item={item}
+                selected={selected_old}
+                isFirst={isFirst}
+                isLast={isLast}
+              />
+            )
+          );
+        })}
+      </ScrollView>
+    </CustomDropdown>
+  );
+};
+
+export default withTheme(Dropdown);
+
+// 向后兼容的别名导出
+export const TapasDropdownModal = withTheme(Dropdown);
+export type { DropdownProps };