@beppla/tapas-ui 1.4.35 → 1.5.2

package/module/Dropdown/Dropdown.js

@@ -0,0 +1,663 @@
+"use strict";
+
+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';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export * from "./CustomDropdown";
+
+// 新增接口定义
+
+// @ts-expect-error CustomDropdownProps has conflicting index signature
+
+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 = ({
+  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 模式相关状态
+  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
+  useEffect(() => {
+    setSelectedItemKey(selected ?? "");
+  }, [selected]);
+  useEffect(() => {
+    if (typeof modalVisible === "boolean" && modalVisible !== undefined) {
+      setInternalModalVisible(modalVisible);
+    }
+  }, [modalVisible]);
+
+  // 动态更新下拉容器宽度（支持运行时宽度变化）
+  useEffect(() => {
+    if (subWidth && internalModalVisible) {
+      setDropdownWidthCalc(subWidth);
+    }
+  }, [subWidth, 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 => {
+    event.stopPropagation();
+  };
+  const updateSearch = search => {
+    setSearch(search);
+    onSearchChange && onSearchChange(search);
+  };
+
+  // Modal 模式下的弹出逻辑
+  const openDropdown = () => {
+    if (props.disabled) return;
+    if (buttonRef.current) {
+      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);
+
+        // 计算显示位置
+        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 (setModalVisible) {
+          setModalVisible(true);
+        } else {
+          setInternalModalVisible(true);
+        }
+      });
+    }
+  };
+  const closeModal = () => {
+    if (setModalVisible) {
+      setModalVisible(false);
+    } else {
+      setInternalModalVisible(false);
+    }
+  };
+  const handleConLayout = event => {
+    const {
+      height
+    } = event.nativeEvent.layout;
+    setOptionListHeight(height);
+  };
+
+  // 如果使用 Modal 模式，渲染新的 Modal 界面
+  if (useModal) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: [styles.modalContainer, width ? {
+        width: width
+      } : null, {
+        minHeight: 40 + (label ? 7 : 0) + (showStateMsg ? 15 : 0)
+      }],
+      children: [label && !noLabelAnim && /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.labelCon, {
+          top: topAnim
+        }, {
+          backgroundColor: backgroundColor || theme.theme.colors.white
+        }],
+        children: /*#__PURE__*/_jsxs(Pressable, {
+          style: styles.labelInner,
+          onPress: openDropdown,
+          children: [/*#__PURE__*/_jsx(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",
+            children: !selectedItemKey ? props.placeholder || label : label
+          }), required && /*#__PURE__*/_jsx(Text, {
+            style: styles.required,
+            children: "*"
+          })]
+        })
+      }), /*#__PURE__*/_jsxs(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
+        } : null, state === "error" ? {
+          borderColor: theme.theme.colors.error
+        } : null, props.disabled ? {
+          borderColor: theme.theme.colors.grey3
+        } : null,
+        // 确保主体容器始终有统一的垂直对齐
+        {
+          alignItems: "center"
+        }],
+        disabled: props.disabled,
+        onPress: openDropdown,
+        children: [showSelectedValue ? /*#__PURE__*/_jsx(Text, {
+          style: [styles.alignCenter, {
+            flexGrow: 1,
+            marginRight: 12
+          }, props.disabled && {
+            color: theme.theme.colors.grey3
+          }],
+          numberOfLines: 1,
+          ellipsizeMode: "tail",
+          children: dropdownItems.find(item => item.key === selectedItemKey)?.value
+        }) : noLabelAnim && label ? /*#__PURE__*/_jsx(Text, {
+          style: [styles.alignCenter, {
+            flexGrow: 1,
+            marginRight: 2
+          }, labelColor ? {
+            color: labelColor
+          } : null, props.disabled ? {
+            color: theme.theme.colors.grey3
+          } : null],
+          numberOfLines: 1,
+          ellipsizeMode: "tail",
+          children: label
+        }) : null, /*#__PURE__*/_jsx(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 && /*#__PURE__*/_jsx(View, {
+        style: styles.msg,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.msgText, state === "error" && {
+            color: theme.theme.colors.error
+          }],
+          numberOfLines: 1,
+          ellipsizeMode: "tail",
+          children: stateMsg
+        })
+      }), /*#__PURE__*/_jsx(Modal, {
+        transparent: true,
+        visible: internalModalVisible,
+        onRequestClose: closeModal,
+        animationType: "fade",
+        children: /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: {
+            flex: 1
+          },
+          onPress: closeModal,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: [styles.modalOptionsCon, {
+              top: dropdownPosition.top,
+              left: dropdownPosition.left,
+              width: dropdownWidthCalc
+            }, subHeight ? {
+              maxHeight: subHeight
+            } : null],
+            onLayout: handleConLayout,
+            children: customPopoverContent ? customPopoverContent : /*#__PURE__*/_jsx(ScrollView, {
+              style: styles.modalOptionsScrollView,
+              keyboardShouldPersistTaps: "handled",
+              keyboardDismissMode: "none",
+              showsHorizontalScrollIndicator: false,
+              showsVerticalScrollIndicator: false,
+              children: /*#__PURE__*/_jsx(View, {
+                style: styles.modalOptionsInner,
+                children: dropdownItems.length > 0 ? dropdownItems.map((item, index) => /*#__PURE__*/_jsxs(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],
+                  onPress: () => {
+                    closeModal();
+                    if (onSelect) {
+                      onSelect(item);
+                    } else {
+                      setSelectedItemKey(item.key);
+                    }
+                  },
+                  children: [/*#__PURE__*/_jsxs(View, {
+                    style: {
+                      display: "flex",
+                      flexDirection: "row",
+                      justifyContent: "space-between",
+                      overflow: "hidden",
+                      width: "100%"
+                    },
+                    children: [/*#__PURE__*/_jsx(Text, {
+                      style: [styles.modalOptionText],
+                      numberOfLines: 1,
+                      ellipsizeMode: "tail",
+                      children: item.value
+                    }), selectedItemKey === item.key && /*#__PURE__*/_jsx(TapasIcon, {
+                      name: "check",
+                      size: 20,
+                      color: theme.theme.colors.primary
+                    })]
+                  }), item.secondaryValue && /*#__PURE__*/_jsx(View, {
+                    style: {
+                      display: "flex",
+                      flexDirection: "row",
+                      flex: 1,
+                      height: 14,
+                      overflow: "hidden",
+                      minWidth: dropdownWidthCalc - 32
+                    },
+                    children: /*#__PURE__*/_jsx(Text, {
+                      style: [styles.modalOptionText, {
+                        fontSize: 12,
+                        color: theme.theme.colors.secondary
+                      }],
+                      numberOfLines: 1,
+                      ellipsizeMode: "tail",
+                      children: item.secondaryValue
+                    })
+                  })]
+                }, `dropdown-option-${item.key}-${index}`)) : /*#__PURE__*/_jsx(Text, {
+                  numberOfLines: 1,
+                  ellipsizeMode: "tail",
+                  style: [styles.modalOptionText, styles.modalNoOptions],
+                  children: emptyText || "No options"
+                })
+              })
+            })
+          }), extendBtn && /*#__PURE__*/_jsxs(Pressable, {
+            onPress: () => {
+              closeModal();
+              setTimeout(() => {
+                onExtendBtnPress?.();
+              }, 300);
+            },
+            style: [styles.extendBtnCon, {
+              left: dropdownPosition.left,
+              top: dropdownPosition.top + optionListHeight + 8,
+              width: dropdownWidthCalc
+            }],
+            children: [extendBtnIcon && /*#__PURE__*/_jsx(TapasIcon, {
+              size: 20,
+              name: extendBtnIcon
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.extendBtnText,
+              numberOfLines: 1,
+              ellipsizeMode: "tail",
+              children: extendBtn
+            })]
+          })]
+        })
+      })]
+    });
+  }
+
+  // 原有的 CustomDropdown 模式
+  return /*#__PURE__*/_jsxs(CustomDropdown, {
+    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();
+      }
+    },
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      onPress: handleStopEvent,
+      children: props.showSearchBar && /*#__PURE__*/_jsx(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__*/_jsx(TapasIcon, {
+          name: "search",
+          style: styles.iconStyle,
+          size: 20
+        }),
+        clearIcon: /*#__PURE__*/_jsx(TapasIcon, {
+          name: "close",
+          onPress: () => {
+            const search = searchRef.current;
+            if (search) {
+              search.clear();
+              search.blur();
+            }
+          },
+          size: 20
+        })
+      })
+    }), /*#__PURE__*/_jsx(ScrollView, {
+      style: {
+        width: subWidth,
+        height: subHeight
+      },
+      keyboardShouldPersistTaps: "handled",
+      keyboardDismissMode: "none",
+      children: 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__*/_jsx(CustomListItem, {
+          onItemPress: value => {
+            if (type === 'button') {
+              props.onItemPress && props.onItemPress(item.value);
+            } else {
+              selectedItem(value);
+              onChange && onChange(value);
+            }
+            props.onClose && props.onClose();
+          },
+          item: item,
+          selected: selected_old,
+          isFirst: isFirst,
+          isLast: isLast
+        }, index);
+      })
+    })]
+  });
+};
+export default withTheme(Dropdown);
+
+// 向后兼容的别名导出
+export const TapasDropdownModal = withTheme(Dropdown);
+//# sourceMappingURL=Dropdown.js.map