@beppla/tapas-ui 1.0.80 → 1.1.1

package/module/Dropdown/Dropdown.js

@@ -1,10 +1,12 @@
-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); }
+"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";
 
 // 新增接口定义
@@ -338,211 +340,233 @@ const Dropdown = ({
 
   // 如果使用 Modal 模式，渲染新的 Modal 界面
   if (useModal) {
-    return /*#__PURE__*/React.createElement(View, {
+    return /*#__PURE__*/_jsxs(View, {
       style: [styles.modalContainer, width ? {
         width: width
       } : null, {
         minHeight: 40 + (label ? 7 : 0) + (showStateMsg ? 15 : 0)
-      }]
-    }, label && !noLabelAnim && /*#__PURE__*/React.createElement(Animated.View, {
-      style: [styles.labelCon, {
-        top: topAnim
-      }, {
-        backgroundColor: backgroundColor || theme.theme.colors.white
-      }]
-    }, /*#__PURE__*/React.createElement(Pressable, {
-      style: styles.labelInner,
-      onPress: openDropdown
-    }, /*#__PURE__*/React.createElement(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 && /*#__PURE__*/React.createElement(Text, {
-      style: styles.required
-    }, "*"))), /*#__PURE__*/React.createElement(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 ? /*#__PURE__*/React.createElement(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) : noLabelAnim && label ? /*#__PURE__*/React.createElement(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, /*#__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 && /*#__PURE__*/React.createElement(View, {
-      style: styles.msg
-    }, /*#__PURE__*/React.createElement(Text, {
-      style: [styles.msgText, state === "error" && {
-        color: theme.theme.colors.error
-      }],
-      numberOfLines: 1,
-      ellipsizeMode: "tail"
-    }, stateMsg)), /*#__PURE__*/React.createElement(Modal, {
-      transparent: true,
-      visible: internalModalVisible,
-      onRequestClose: closeModal,
-      animationType: "fade"
-    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
-      style: {
-        flex: 1
-      },
-      onPress: closeModal
-    }, /*#__PURE__*/React.createElement(View, {
-      style: [styles.modalOptionsCon, {
-        top: dropdownPosition.top,
-        left: dropdownPosition.left,
-        width: dropdownWidthCalc
-      }, subHeight ? {
-        maxHeight: subHeight
-      } : null],
-      onLayout: handleConLayout
-    }, customPopoverContent ? customPopoverContent : /*#__PURE__*/React.createElement(ScrollView, {
-      style: styles.modalOptionsScrollView,
-      showsHorizontalScrollIndicator: false,
-      showsVerticalScrollIndicator: false
-    }, /*#__PURE__*/React.createElement(View, {
-      style: styles.modalOptionsInner
-    }, 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)))));
+      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,
+              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__*/React.createElement(CustomDropdown, _extends({
+  return /*#__PURE__*/_jsxs(CustomDropdown, {
     title: props?.title,
     value: `${prefix}${selected_old?.name}`,
     isVisible: isVisible,
     width: width,
     subWidth: subWidth,
     subHeight: subHeight,
-    testID: testID
-  }, props, {
+    testID: testID,
+    ...props,
     onClose: () => {
       props.onClose && props.onClose();
     },
@@ -554,70 +578,72 @@ const Dropdown = ({
       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();
+    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
       },
-      key: index,
-      item: item,
-      selected: selected_old,
-      isFirst: isFirst,
-      isLast: isLast
-    });
-  })));
+      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);