@beppla/tapas-ui 1.0.67 → 1.0.68

package/module/Dropdown/Dropdown.js

@@ -1,413 +1,318 @@
-"use strict";
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useEffect, useState, useRef } from 'react';
+import { Pressable, ScrollView, Modal, TouchableOpacity, Text, View, Dimensions, Animated } from 'react-native';
+import CustomDropdown from "./CustomDropdown";
+import CustomListItem from "../ListItem/ListItem";
+import { makeStyles, SearchBar, withTheme, useTheme } from '@rneui/themed';
+import TapasIcon from '../Icons/TapasIcon';
+export * from "./CustomDropdown";
 
-var __assign = this && this.__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
-var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  var desc = Object.getOwnPropertyDescriptor(m, k);
-  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-    desc = {
-      enumerable: true,
-      get: function () {
-        return m[k];
-      }
-    };
-  }
-  Object.defineProperty(o, k2, desc);
-} : function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  o[k2] = m[k];
-});
-var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {
-  Object.defineProperty(o, "default", {
-    enumerable: true,
-    value: v
-  });
-} : function (o, v) {
-  o["default"] = v;
-});
-var __importStar = this && this.__importStar || function () {
-  var ownKeys = function (o) {
-    ownKeys = Object.getOwnPropertyNames || function (o) {
-      var ar = [];
-      for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-      return ar;
-    };
-    return ownKeys(o);
-  };
-  return function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-    __setModuleDefault(result, mod);
-    return result;
-  };
-}();
-var __exportStar = this && this.__exportStar || function (m, exports) {
-  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-var __rest = this && this.__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-var __importDefault = this && this.__importDefault || function (mod) {
-  return mod && mod.__esModule ? mod : {
-    "default": mod
-  };
-};
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TapasDropdownModal = void 0;
-var react_1 = __importStar(require("react"));
-var react_native_1 = require("react-native");
-var CustomDropdown_1 = __importDefault(require("./CustomDropdown"));
-var ListItem_1 = __importDefault(require("../ListItem/ListItem"));
-var themed_1 = require("@rneui/themed");
-var TapasIcon_1 = __importDefault(require("../Icons/TapasIcon"));
-__exportStar(require("./CustomDropdown"), exports);
-var useStyles = (0, themed_1.makeStyles)(function (theme) {
-  return {
-    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
+// 新增接口定义
+
+//@ts-ignore
+
+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
     },
-    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
+    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
     },
-    extendBtnText: {
-      fontSize: 14,
-      fontWeight: "400",
-      color: theme.colors.primary
-    }
-  };
-});
-var Dropdown = function (_a) {
-  var _b;
-  var value = _a.value,
-    _c = _a.prefix,
-    prefix = _c === void 0 ? '' : _c,
-    options = _a.options,
-    onChange = _a.onChange,
-    width = _a.width,
-    subWidth = _a.subWidth,
-    _d = _a.subHeight,
-    subHeight = _d === void 0 ? 150 : _d,
-    isVisible = _a.isVisible,
-    onSearchChange = _a.onSearchChange,
-    _e = _a.type,
-    type = _e === void 0 ? 'option' : _e,
-    // 新增 Modal 模式相关属性
-    _f = _a.useModal,
-    // 新增 Modal 模式相关属性
-    useModal = _f === void 0 ? false : _f,
-    _g = _a.dropdownItems,
-    dropdownItems = _g === void 0 ? [] : _g,
-    selected = _a.selected,
-    _h = _a.showSelectedValue,
-    showSelectedValue = _h === void 0 ? false : _h,
-    _j = _a.dropdownType,
-    dropdownType = _j === void 0 ? "clear" : _j,
-    _k = _a.arrowIcon,
-    _arrowIcon = _k === void 0 ? false : _k,
-    onSelect = _a.onSelect,
-    backgroundColor = _a.backgroundColor,
-    labelColor = _a.labelColor,
-    _l = _a.state,
-    state = _l === void 0 ? "normal" : _l,
-    stateMsg = _a.stateMsg,
-    _m = _a.showCheckedStatusInList,
-    showCheckedStatusInList = _m === void 0 ? false : _m,
-    _o = _a.showStateMsg,
-    showStateMsg = _o === void 0 ? false : _o,
-    _p = _a.offsetWidth,
-    offsetWidth = _p === void 0 ? 0 : _p,
-    extendBtn = _a.extendBtn,
-    extendBtnIcon = _a.extendBtnIcon,
-    emptyText = _a.emptyText,
-    onExtendBtnPress = _a.onExtendBtnPress,
-    _q = _a.noLabelAnim,
-    noLabelAnim = _q === void 0 ? false : _q,
-    _r = _a.radius,
-    radius = _r === void 0 ? 12 : _r,
-    modalVisible = _a.modalVisible,
-    customPopoverContent = _a.customPopoverContent,
-    setModalVisible = _a.setModalVisible,
-    iconStyle = _a.iconStyle,
-    label = _a.label,
-    required = _a.required,
-    testID = _a.testID,
-    props = __rest(_a, ["value", "prefix", "options", "onChange", "width", "subWidth", "subHeight", "isVisible", "onSearchChange", "type", "useModal", "dropdownItems", "selected", "showSelectedValue", "dropdownType", "arrowIcon", "onSelect", "backgroundColor", "labelColor", "state", "stateMsg", "showCheckedStatusInList", "showStateMsg", "offsetWidth", "extendBtn", "extendBtnIcon", "emptyText", "onExtendBtnPress", "noLabelAnim", "radius", "modalVisible", "customPopoverContent", "setModalVisible", "iconStyle", "label", "required", "testID"]);
-  var styles = useStyles(props);
-  var theme = (0, themed_1.useTheme)();
-  var _s = react_1.default.useState(value),
-    selected_old = _s[0],
-    selectedItem = _s[1];
-  var searchRef = react_1.default.useRef(null);
-  var _t = (0, react_1.useState)(''),
-    search = _t[0],
-    setSearch = _t[1];
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    elevation: 8
+  },
+  extendBtnText: {
+    fontSize: 14,
+    fontWeight: "400",
+    color: theme.colors.primary
+  }
+}));
+const Dropdown = ({
+  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,
+  backgroundColor,
+  labelColor,
+  state = "normal",
+  stateMsg,
+  showCheckedStatusInList = false,
+  showStateMsg = false,
+  offsetWidth = 0,
+  extendBtn,
+  extendBtnIcon,
+  emptyText,
+  onExtendBtnPress,
+  noLabelAnim = false,
+  radius = 12,
+  modalVisible,
+  customPopoverContent,
+  setModalVisible,
+  iconStyle,
+  label,
+  required,
+  testID,
+  ...props
+}) => {
+  const styles = useStyles(props);
+  const theme = useTheme();
+  const [selected_old, selectedItem] = React.useState(value);
+  const searchRef = React.useRef(null);
+  const [search, setSearch] = useState('');
+
   // Modal 模式相关状态
-  var _u = (0, react_1.useState)(false),
-    internalModalVisible = _u[0],
-    setInternalModalVisible = _u[1];
-  var _v = (0, react_1.useState)({
-      top: 0,
-      left: 0
-    }),
-    dropdownPosition = _v[0],
-    setDropdownPosition = _v[1];
-  var _w = (0, react_1.useState)(subWidth !== null && subWidth !== void 0 ? subWidth : 151),
-    dropdownWidthCalc = _w[0],
-    setDropdownWidthCalc = _w[1];
-  var _x = (0, react_1.useState)(selected !== null && selected !== void 0 ? selected : ""),
-    selectedItemKey = _x[0],
-    setSelectedItemKey = _x[1];
-  var _y = (0, react_1.useState)(18),
-    top = _y[0],
-    setTop = _y[1];
-  var _z = (0, react_1.useState)(0),
-    optionListHeight = _z[0],
-    setOptionListHeight = _z[1];
-  var buttonRef = (0, react_1.useRef)(null);
-  var topAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(18)).current;
-  var offsetSpace = 8;
-  var offsetHeight = 10;
-  (0, react_1.useEffect)(function () {
+  const [internalModalVisible, setInternalModalVisible] = useState(false);
+  const [dropdownPosition, setDropdownPosition] = useState({
+    top: 0,
+    left: 0
+  });
+  const [dropdownWidthCalc, setDropdownWidthCalc] = useState(subWidth ?? 151);
+  const [selectedItemKey, setSelectedItemKey] = useState(selected ?? "");
+  const [top, setTop] = useState(18);
+  const [optionListHeight, setOptionListHeight] = useState(0);
+  const buttonRef = useRef(null);
+  const topAnim = useRef(new Animated.Value(18)).current;
+  const offsetSpace = 8;
+  const offsetHeight = 10;
+  useEffect(() => {
     selectedItem(value);
   }, [value]);
+
   // Modal 模式相关 useEffect
-  (0, react_1.useEffect)(function () {
-    setSelectedItemKey(selected !== null && selected !== void 0 ? selected : "");
+  useEffect(() => {
+    setSelectedItemKey(selected ?? "");
   }, [selected]);
-  (0, react_1.useEffect)(function () {
+  useEffect(() => {
     if (typeof modalVisible === "boolean" && modalVisible !== undefined) {
       setInternalModalVisible(modalVisible);
     }
   }, [modalVisible]);
+
   // 标签动画效果
-  (0, react_1.useEffect)(function () {
+  useEffect(() => {
     if (!useModal || noLabelAnim) return;
-    var start = !selectedItemKey ? 0 : 18;
-    var target = !selectedItemKey ? 18 : 0;
+    const start = !selectedItemKey ? 0 : 18;
+    const target = !selectedItemKey ? 18 : 0;
     if (top === target) return;
     setTop(target);
     topAnim.setValue(start);
-    react_native_1.Animated.timing(topAnim, {
+    Animated.timing(topAnim, {
       toValue: target,
       duration: 300,
       useNativeDriver: true
     }).start();
   }, [selectedItemKey, useModal, noLabelAnim]);
-  var handleStopEvent = function (event) {
+  const handleStopEvent = event => {
     event.stopPropagation();
   };
-  var updateSearch = function (search) {
+  const updateSearch = search => {
     setSearch(search);
     onSearchChange && onSearchChange(search);
   };
+
   // Modal 模式下的弹出逻辑
-  var openDropdown = function () {
+  const openDropdown = () => {
     if (props.disabled) return;
     if (buttonRef.current) {
-      buttonRef.current.measure(function (_fx, _fy, width, height, px, py) {
-        var window = react_native_1.Dimensions.get("window");
-        var dropdownHeight = subHeight !== null && subHeight !== void 0 ? subHeight : Math.min(40 * dropdownItems.length + 24, 224);
-        var dropdownWidth = Math.max(width, subWidth !== null && subWidth !== void 0 ? subWidth : 151);
+      buttonRef.current.measure((_fx, _fy, width, height, px, py) => {
+        const window = Dimensions.get("window");
+        const dropdownHeight = subHeight ?? Math.min(40 * dropdownItems.length + 24, 224);
+        const dropdownWidth = Math.max(width, subWidth ?? 151);
         setDropdownWidthCalc(dropdownWidth);
+
         // 计算显示位置
-        var enoughSpaceBelow = py + height + dropdownHeight + offsetHeight <= window.height;
-        var enoughSpaceAbove = py - dropdownHeight >= 0;
-        var enoughSpaceRight = px + dropdownWidth <= window.width;
-        var adjustedPx = px % window.width + (px > window.width ? 56 : 0) + offsetWidth;
-        var top = enoughSpaceBelow ? py + height + offsetSpace : enoughSpaceAbove ? py - dropdownHeight - offsetHeight - 16 : py + height + offsetSpace;
-        var left = enoughSpaceRight ? adjustedPx : adjustedPx + width - 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: top,
-          left: left
+          top,
+          left
         });
         if (setModalVisible) {
           setModalVisible(true);
@@ -417,35 +322,38 @@ var Dropdown = function (_a) {
       });
     }
   };
-  var closeModal = function () {
+  const closeModal = () => {
     if (setModalVisible) {
       setModalVisible(false);
     } else {
       setInternalModalVisible(false);
     }
   };
-  var handleConLayout = function (event) {
-    var height = event.nativeEvent.layout.height;
+  const handleConLayout = event => {
+    const {
+      height
+    } = event.nativeEvent.layout;
     setOptionListHeight(height);
   };
+
   // 如果使用 Modal 模式，渲染新的 Modal 界面
   if (useModal) {
-    return react_1.default.createElement(react_native_1.View, {
+    return /*#__PURE__*/React.createElement(View, {
       style: [styles.modalContainer, width ? {
         width: width
       } : null, {
         minHeight: 40 + (label ? 7 : 0) + (showStateMsg ? 15 : 0)
       }]
-    }, label && !noLabelAnim && react_1.default.createElement(react_native_1.Animated.View, {
+    }, label && !noLabelAnim && /*#__PURE__*/React.createElement(Animated.View, {
       style: [styles.labelCon, {
         top: topAnim
       }, {
         backgroundColor: backgroundColor || theme.theme.colors.white
       }]
-    }, react_1.default.createElement(react_native_1.Pressable, {
+    }, /*#__PURE__*/React.createElement(Pressable, {
       style: styles.labelInner,
       onPress: openDropdown
-    }, react_1.default.createElement(react_native_1.Text, {
+    }, /*#__PURE__*/React.createElement(Text, {
       style: [styles.labelText, state === "error" && {
         color: theme.theme.colors.error
       }, !selectedItemKey && {
@@ -455,9 +363,9 @@ var Dropdown = function (_a) {
       }],
       numberOfLines: 1,
       ellipsizeMode: "tail"
-    }, !selectedItemKey ? props.placeholder || label : label), required && react_1.default.createElement(react_native_1.Text, {
+    }, !selectedItemKey ? props.placeholder || label : label), required && /*#__PURE__*/React.createElement(Text, {
       style: styles.required
-    }, "*"))), react_1.default.createElement(react_native_1.TouchableOpacity, {
+    }, "*"))), /*#__PURE__*/React.createElement(TouchableOpacity, {
       ref: buttonRef,
       style: [showSelectedValue || noLabelAnim && label ? styles.modalBtn : null, dropdownType === "solid" ? styles.modalSolidBtn : null, dropdownType === "solid" && radius ? {
         borderRadius: radius
@@ -466,7 +374,7 @@ var Dropdown = function (_a) {
       label && !noLabelAnim ? {
         marginTop: 7
       } : null, noLabelAnim && label && backgroundColor ? {
-        backgroundColor: backgroundColor
+        backgroundColor
       } : null, state === "error" ? {
         borderColor: theme.theme.colors.error
       } : null, props.disabled ? {
@@ -478,7 +386,7 @@ var Dropdown = function (_a) {
       }],
       disabled: props.disabled,
       onPress: openDropdown
-    }, showSelectedValue ? react_1.default.createElement(react_native_1.Text, {
+    }, showSelectedValue ? /*#__PURE__*/React.createElement(Text, {
       style: [styles.alignCenter, {
         flexGrow: 1,
         marginRight: 12
@@ -487,9 +395,7 @@ var Dropdown = function (_a) {
       }],
       numberOfLines: 1,
       ellipsizeMode: "tail"
-    }, (_b = dropdownItems.find(function (item) {
-      return item.key === selectedItemKey;
-    })) === null || _b === void 0 ? void 0 : _b.value) : noLabelAnim && label ? react_1.default.createElement(react_native_1.Text, {
+    }, dropdownItems.find(item => item.key === selectedItemKey)?.value) : noLabelAnim && label ? /*#__PURE__*/React.createElement(Text, {
       style: [styles.alignCenter, {
         flexGrow: 1,
         marginRight: 2
@@ -500,31 +406,31 @@ var Dropdown = function (_a) {
       } : null],
       numberOfLines: 1,
       ellipsizeMode: "tail"
-    }, label) : null, react_1.default.createElement(TapasIcon_1.default, {
+    }, label) : null, /*#__PURE__*/React.createElement(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"
-    })), showStateMsg && react_1.default.createElement(react_native_1.View, {
+    })), showStateMsg && /*#__PURE__*/React.createElement(View, {
       style: styles.msg
-    }, react_1.default.createElement(react_native_1.Text, {
+    }, /*#__PURE__*/React.createElement(Text, {
       style: [styles.msgText, state === "error" && {
         color: theme.theme.colors.error
       }],
       numberOfLines: 1,
       ellipsizeMode: "tail"
-    }, stateMsg)), react_1.default.createElement(react_native_1.Modal, {
+    }, stateMsg)), /*#__PURE__*/React.createElement(Modal, {
       transparent: true,
       visible: internalModalVisible,
       onRequestClose: closeModal,
       animationType: "fade"
-    }, react_1.default.createElement(react_native_1.TouchableOpacity, {
+    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
       style: {
         flex: 1
       },
       onPress: closeModal
-    }, react_1.default.createElement(react_native_1.View, {
+    }, /*#__PURE__*/React.createElement(View, {
       style: [styles.modalOptionsCon, {
         top: dropdownPosition.top,
         left: dropdownPosition.left,
@@ -533,21 +439,191 @@ var Dropdown = function (_a) {
         maxHeight: subHeight
       } : null],
       onLayout: handleConLayout
-    }, customPopoverContent ? customPopoverContent : react_1.default.createElement(react_native_1.ScrollView, {
+    }, customPopoverContent ? customPopoverContent : /*#__PURE__*/React.createElement(ScrollView, {
       style: styles.modalOptionsScrollView,
       showsHorizontalScrollIndicator: false,
       showsVerticalScrollIndicator: false
-    }, react_1.default.createElement(react_native_1.View, {
+    }, /*#__PURE__*/React.createElement(View, {
       style: styles.modalOptionsInner
-    }, dropdownItems.length > 0 ? dropdownItems.map(function (item, index) {
-      return react_1.default.createElement(react_native_1.Pressable, {
-        style: function (_a) {
-          var pressed = _a.pressed;
-          return [styles.modalOption, item.secondaryValue ? {
-            flexWrap: "wrap"
-          } : null, {
-            padding: 10,
-            backgroundColor: pressed ? theme.theme.colors.grey4 || "#f0f0f0" : "transparent"
+    }, dropdownItems.length > 0 ? dropdownItems.map((item, index) => /*#__PURE__*/React.createElement(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 (onSelect) {
+          onSelect(item);
+        } else {
+          setSelectedItemKey(item.key);
+        }
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      style: {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        overflow: "hidden",
+        width: "100%"
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: [styles.modalOptionText],
+      numberOfLines: 1,
+      ellipsizeMode: "tail"
+    }, item.value), selectedItemKey === item.key && /*#__PURE__*/React.createElement(TapasIcon, {
+      name: "check",
+      size: 20,
+      color: theme.theme.colors.primary
+    })), item.secondaryValue && /*#__PURE__*/React.createElement(View, {
+      style: {
+        display: "flex",
+        flexDirection: "row",
+        flex: 1,
+        height: 14,
+        overflow: "hidden",
+        minWidth: dropdownWidthCalc - 32
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: [styles.modalOptionText, {
+        fontSize: 12,
+        color: theme.theme.colors.secondary
+      }],
+      numberOfLines: 1,
+      ellipsizeMode: "tail"
+    }, item.secondaryValue)))) : /*#__PURE__*/React.createElement(Text, {
+      numberOfLines: 1,
+      ellipsizeMode: "tail",
+      style: [styles.modalOptionText, styles.modalNoOptions]
+    }, emptyText || "No options")))), extendBtn && /*#__PURE__*/React.createElement(Pressable, {
+      onPress: () => {
+        closeModal();
+        setTimeout(() => {
+          onExtendBtnPress?.();
+        }, 300);
+      },
+      style: [styles.extendBtnCon, {
+        left: dropdownPosition.left,
+        top: dropdownPosition.top + optionListHeight + 8,
+        width: dropdownWidthCalc
+      }]
+    }, extendBtnIcon && /*#__PURE__*/React.createElement(TapasIcon, {
+      size: 20,
+      name: extendBtnIcon
+    }), /*#__PURE__*/React.createElement(Text, {
+      style: styles.extendBtnText,
+      numberOfLines: 1,
+      ellipsizeMode: "tail"
+    }, extendBtn)))));
+  }
+
+  // 原有的 CustomDropdown 模式
+  return /*#__PURE__*/React.createElement(CustomDropdown, _extends({
+    title: props?.title,
+    value: `${prefix}${selected_old?.name}`,
+    isVisible: isVisible,
+    width: width,
+    subWidth: subWidth,
+    subHeight: subHeight,
+    testID: testID
+  }, props, {
+    onClose: () => {
+      props.onClose && props.onClose();
+    },
+    onPress: () => {
+      props.onPress && props.onPress();
+    },
+    sheetTitlePros: {
+      ...props.sheetTitlePros,
+      onClose: () => {
+        props.onClose && props.onClose();
+      }
+    }
+  }), /*#__PURE__*/React.createElement(Pressable, {
+    onPress: handleStopEvent
+  }, props.showSearchBar && /*#__PURE__*/React.createElement(SearchBar, {
+    ref: search => searchRef.current = search,
+    containerStyle: {
+      ...styles.searchBarContainer,
+      borderEndWidth: 1,
+      borderTopWidth: 0,
+      borderRightWidth: 0,
+      width: subWidth
+    },
+    inputContainerStyle: styles.inputContainer,
+    placeholder: props.placeholder,
+    onChangeText: updateSearch,
+    inputStyle: {
+      ...styles.inputStyle
+    },
+    leftIconContainerStyle: styles.leftIconContainer,
+    value: search,
+    lightTheme: true,
+    searchIcon: /*#__PURE__*/React.createElement(TapasIcon, {
+      name: "search",
+      style: styles.iconStyle,
+      size: 20
+    }),
+    clearIcon: /*#__PURE__*/React.createElement(TapasIcon, {
+      name: "close",
+      onPress: () => {
+        const search = searchRef.current;
+        if (search) {
+          search.clear();
+          search.blur();
+        }
+      },
+      size: 20
+    })
+  })), /*#__PURE__*/React.createElement(ScrollView, {
+    style: {
+      width: subWidth,
+      height: subHeight
+    }
+  }, 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 && /*#__PURE__*/React.createElement(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
+    });
+  })));
+};
+export default withTheme(Dropdown);
+
+// 向后兼容的别名导出
+export const TapasDropdownModal = withTheme(Dropdown);
+//# sourceMappingURL=Dropdown.js.mapeme.theme.colors.grey4 || "#f0f0f0" : "transparent"
           },
           // 第一个 item 添加左上和右上圆角
           index === 0 && {