@beppla/tapas-ui 1.0.65 → 1.0.67

package/module/Dropdown/Dropdown.js

@@ -0,0 +1,723 @@
+"use strict";
+
+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
+    },
+    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
+    }
+  };
+});
+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];
+  // 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 () {
+    selectedItem(value);
+  }, [value]);
+  // Modal 模式相关 useEffect
+  (0, react_1.useEffect)(function () {
+    setSelectedItemKey(selected !== null && selected !== void 0 ? selected : "");
+  }, [selected]);
+  (0, react_1.useEffect)(function () {
+    if (typeof modalVisible === "boolean" && modalVisible !== undefined) {
+      setInternalModalVisible(modalVisible);
+    }
+  }, [modalVisible]);
+  // 标签动画效果
+  (0, react_1.useEffect)(function () {
+    if (!useModal || noLabelAnim) return;
+    var start = !selectedItemKey ? 0 : 18;
+    var target = !selectedItemKey ? 18 : 0;
+    if (top === target) return;
+    setTop(target);
+    topAnim.setValue(start);
+    react_native_1.Animated.timing(topAnim, {
+      toValue: target,
+      duration: 300,
+      useNativeDriver: true
+    }).start();
+  }, [selectedItemKey, useModal, noLabelAnim]);
+  var handleStopEvent = function (event) {
+    event.stopPropagation();
+  };
+  var updateSearch = function (search) {
+    setSearch(search);
+    onSearchChange && onSearchChange(search);
+  };
+  // Modal 模式下的弹出逻辑
+  var openDropdown = function () {
+    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);
+        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;
+        setDropdownPosition({
+          top: top,
+          left: left
+        });
+        if (setModalVisible) {
+          setModalVisible(true);
+        } else {
+          setInternalModalVisible(true);
+        }
+      });
+    }
+  };
+  var closeModal = function () {
+    if (setModalVisible) {
+      setModalVisible(false);
+    } else {
+      setInternalModalVisible(false);
+    }
+  };
+  var handleConLayout = function (event) {
+    var height = event.nativeEvent.layout.height;
+    setOptionListHeight(height);
+  };
+  // 如果使用 Modal 模式，渲染新的 Modal 界面
+  if (useModal) {
+    return react_1.default.createElement(react_native_1.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, {
+      style: [styles.labelCon, {
+        top: topAnim
+      }, {
+        backgroundColor: backgroundColor || theme.theme.colors.white
+      }]
+    }, react_1.default.createElement(react_native_1.Pressable, {
+      style: styles.labelInner,
+      onPress: openDropdown
+    }, react_1.default.createElement(react_native_1.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), required && react_1.default.createElement(react_native_1.Text, {
+      style: styles.required
+    }, "*"))), react_1.default.createElement(react_native_1.TouchableOpacity, {
+      ref: buttonRef,
+      style: [showSelectedValue || noLabelAnim && label ? styles.modalBtn : null, dropdownType === "solid" ? styles.modalSolidBtn : null, dropdownType === "solid" && radius ? {
+        borderRadius: radius
+      } : null,
+      // 统一主体容器的位置，无论是否使用 customPopoverContent
+      label && !noLabelAnim ? {
+        marginTop: 7
+      } : null, noLabelAnim && label && backgroundColor ? {
+        backgroundColor: backgroundColor
+      } : null, state === "error" ? {
+        borderColor: theme.theme.colors.error
+      } : null, props.disabled ? {
+        borderColor: theme.theme.colors.grey3
+      } : null,
+      // 确保主体容器始终有统一的垂直对齐
+      {
+        alignItems: "center"
+      }],
+      disabled: props.disabled,
+      onPress: openDropdown
+    }, showSelectedValue ? react_1.default.createElement(react_native_1.Text, {
+      style: [styles.alignCenter, {
+        flexGrow: 1,
+        marginRight: 12
+      }, props.disabled && {
+        color: theme.theme.colors.grey3
+      }],
+      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, {
+      style: [styles.alignCenter, {
+        flexGrow: 1,
+        marginRight: 2
+      }, labelColor ? {
+        color: labelColor
+      } : null, props.disabled ? {
+        color: theme.theme.colors.grey3
+      } : null],
+      numberOfLines: 1,
+      ellipsizeMode: "tail"
+    }, label) : null, react_1.default.createElement(TapasIcon_1.default, {
+      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, {
+      style: styles.msg
+    }, react_1.default.createElement(react_native_1.Text, {
+      style: [styles.msgText, state === "error" && {
+        color: theme.theme.colors.error
+      }],
+      numberOfLines: 1,
+      ellipsizeMode: "tail"
+    }, stateMsg)), react_1.default.createElement(react_native_1.Modal, {
+      transparent: true,
+      visible: internalModalVisible,
+      onRequestClose: closeModal,
+      animationType: "fade"
+    }, react_1.default.createElement(react_native_1.TouchableOpacity, {
+      style: {
+        flex: 1
+      },
+      onPress: closeModal
+    }, react_1.default.createElement(react_native_1.View, {
+      style: [styles.modalOptionsCon, {
+        top: dropdownPosition.top,
+        left: dropdownPosition.left,
+        width: dropdownWidthCalc
+      }, subHeight ? {
+        maxHeight: subHeight
+      } : null],
+      onLayout: handleConLayout
+    }, customPopoverContent ? customPopoverContent : react_1.default.createElement(react_native_1.ScrollView, {
+      style: styles.modalOptionsScrollView,
+      showsHorizontalScrollIndicator: false,
+      showsVerticalScrollIndicator: false
+    }, react_1.default.createElement(react_native_1.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"
+          },
+          // 第一个 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-".concat(item.key, "-").concat(index),
+        onPress: function () {
+          closeModal();
+          if (onSelect) {
+            onSelect(item);
+          } else {
+            setSelectedItemKey(item.key);
+          }
+        }
+      }, react_1.default.createElement(react_native_1.View, {
+        style: {
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          overflow: "hidden",
+          width: "100%"
+        }
+      }, react_1.default.createElement(react_native_1.Text, {
+        style: [styles.modalOptionText],
+        numberOfLines: 1,
+        ellipsizeMode: "tail"
+      }, item.value), selectedItemKey === item.key && react_1.default.createElement(TapasIcon_1.default, {
+        name: "check",
+        size: 20,
+        color: theme.theme.colors.primary
+      })), item.secondaryValue && react_1.default.createElement(react_native_1.View, {
+        style: {
+          display: "flex",
+          flexDirection: "row",
+          flex: 1,
+          height: 14,
+          overflow: "hidden",
+          minWidth: dropdownWidthCalc - 32
+        }
+      }, react_1.default.createElement(react_native_1.Text, {
+        style: [styles.modalOptionText, {
+          fontSize: 12,
+          color: theme.theme.colors.secondary
+        }],
+        numberOfLines: 1,
+        ellipsizeMode: "tail"
+      }, item.secondaryValue)));
+    }) : react_1.default.createElement(react_native_1.Text, {
+      numberOfLines: 1,
+      ellipsizeMode: "tail",
+      style: [styles.modalOptionText, styles.modalNoOptions]
+    }, emptyText || "No options")))), extendBtn && react_1.default.createElement(react_native_1.Pressable, {
+      onPress: function () {
+        closeModal();
+        setTimeout(function () {
+          onExtendBtnPress === null || onExtendBtnPress === void 0 ? void 0 : onExtendBtnPress();
+        }, 300);
+      },
+      style: [styles.extendBtnCon, {
+        left: dropdownPosition.left,
+        top: dropdownPosition.top + optionListHeight + 8,
+        width: dropdownWidthCalc
+      }]
+    }, extendBtnIcon && react_1.default.createElement(TapasIcon_1.default, {
+      size: 20,
+      name: extendBtnIcon
+    }), react_1.default.createElement(react_native_1.Text, {
+      style: styles.extendBtnText,
+      numberOfLines: 1,
+      ellipsizeMode: "tail"
+    }, extendBtn)))));
+  }
+  // 原有的 CustomDropdown 模式
+  return react_1.default.createElement(CustomDropdown_1.default, __assign({
+    title: props === null || props === void 0 ? void 0 : props.title,
+    value: "".concat(prefix).concat(selected_old === null || selected_old === void 0 ? void 0 : selected_old.name),
+    isVisible: isVisible,
+    width: width,
+    subWidth: subWidth,
+    subHeight: subHeight,
+    testID: testID
+  }, props, {
+    onClose: function () {
+      props.onClose && props.onClose();
+    },
+    onPress: function () {
+      props.onPress && props.onPress();
+    },
+    sheetTitlePros: __assign(__assign({}, props.sheetTitlePros), {
+      onClose: function () {
+        props.onClose && props.onClose();
+      }
+    })
+  }), react_1.default.createElement(react_native_1.Pressable, {
+    onPress: handleStopEvent
+  }, props.showSearchBar && react_1.default.createElement(themed_1.SearchBar, {
+    ref: function (search) {
+      return searchRef.current = search;
+    },
+    containerStyle: __assign(__assign({}, styles.searchBarContainer), {
+      borderEndWidth: 1,
+      borderTopWidth: 0,
+      borderRightWidth: 0,
+      width: subWidth
+    }),
+    inputContainerStyle: styles.inputContainer,
+    placeholder: props.placeholder,
+    onChangeText: updateSearch,
+    inputStyle: __assign({}, styles.inputStyle),
+    leftIconContainerStyle: styles.leftIconContainer,
+    value: search,
+    lightTheme: true,
+    searchIcon: react_1.default.createElement(TapasIcon_1.default, {
+      name: "search",
+      style: styles.iconStyle,
+      size: 20
+    }),
+    clearIcon: react_1.default.createElement(TapasIcon_1.default, {
+      name: "close",
+      onPress: function () {
+        var search = searchRef.current;
+        if (search) {
+          search.clear();
+          search.blur();
+        }
+      },
+      size: 20
+    })
+  })), react_1.default.createElement(react_native_1.ScrollView, {
+    style: {
+      width: subWidth,
+      height: subHeight
+    }
+  }, options === null || options === void 0 ? void 0 : options.map(function (item, index) {
+    var visibleItems = options.filter(function (item) {
+      return !item.hide;
+    });
+    var currentVisibleIndex = visibleItems.findIndex(function (visibleItem) {
+      return visibleItem === item;
+    });
+    var isFirst = currentVisibleIndex === 0;
+    var isLast = currentVisibleIndex === visibleItems.length - 1;
+    return !item.hide && react_1.default.createElement(ListItem_1.default, {
+      onItemPress: function (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
+    });
+  })));
+};
+exports.default = (0, themed_1.withTheme)(Dropdown);
+// 向后兼容的别名导出
+exports.TapasDropdownModal = (0, themed_1.withTheme)(Dropdown);
+//# sourceMappingURL=Dropdown.js.map