@beppla/tapas-ui 1.2.0 → 1.2.2

package/components/Dropdown/Dropdown.tsx

@@ -1,817 +0,0 @@
-
-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-ignore
-interface DropdownProps extends 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;
-  
-
-  /** 背景颜色 */
-  backgroundColor?: string;
-  /** 标签颜色 */
-  labelColor?: string;
-  /** 状态（正常或错误） */
-  state?: "normal" | "error";
-  /** 状态消息 */
-  stateMsg?: string;
-  /** 是否在列表中显示选中状态 */
-  showCheckedStatusInList?: boolean;
-  /** 是否显示状态消息 */
-  showStateMsg?: boolean;
-  /** 偏移宽度 */
-  offsetWidth?: number;
-  /** 扩展按钮文本 */
-  extendBtn?: string;
-  /** 扩展按钮图标 */
-  extendBtnIcon?: string;
-  /** 空文本提示 */
-  emptyText?: string;
-  /** 扩展按钮回调 */
-  onExtendBtnPress?: () => void;
-  /** 是否禁用标签动画 */
-  noLabelAnim?: boolean;
-  /** 圆角半径 */
-  radius?: number;
-  /** 控制 Modal 可见性 */
-  modalVisible?: boolean;
-  /** 自定义弹出内容 */
-  customPopoverContent?: React.ReactNode;
-  /** 设置 Modal 可见性回调 */
-  setModalVisible?: (val: boolean) => void;
-  /** 图标样式 */
-  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,
-  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<ItemProps>(value);
-  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(subWidth ?? 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(() => {
-    selectedItem(value);
-  }, [value]);
-  
-  // Modal 模式相关 useEffect
-  useEffect(() => {
-    setSelectedItemKey(selected ?? "");
-  }, [selected]);
-
-  useEffect(() => {
-    if (typeof modalVisible === "boolean" && modalVisible !== undefined) {
-      setInternalModalVisible(modalVisible);
-    }
-  }, [modalVisible]);
-
-  // 标签动画效果
-  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 = 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: LayoutChangeEvent) => {
-    const { height } = event.nativeEvent.layout;
-    setOptionListHeight(height);
-  };
-
-  // 如果使用 Modal 模式，渲染新的 Modal 界面
-  if (useModal) {
-    return (
-      <View style={[
-        styles.modalContainer,
-        width ? { width: width } : null,
-        { minHeight: 40 + (label ? 7 : 0) + (showStateMsg ? 15 : 0) },
-      ]}>
-        {/* 标签 */}
-        {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 && !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}
-        >
-          {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,
-                },
-                subHeight ? { maxHeight: subHeight } : null,
-              ]}
-              onLayout={handleConLayout}
-            >
-              {customPopoverContent ? (
-                customPopoverContent
-              ) : (
-                <ScrollView
-                  style={styles.modalOptionsScrollView}
-                  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 (onSelect) {
-                              onSelect(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]}
-                      >
-                        {emptyText || "No options"}
-                      </Text>
-                    )}
-                  </View>
-                </ScrollView>
-              )}
-            </View>
-            
-            {/* 扩展按钮 */}
-            {extendBtn && (
-              <Pressable
-                onPress={() => {
-                  closeModal();
-                  setTimeout(() => {
-                    onExtendBtnPress?.();
-                  }, 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={subWidth}
-      subHeight={subHeight}
-      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: subWidth,
-            }}
-            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: 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 && (
-              <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 };