@beppla/tapas-ui 1.0.67 → 1.0.69

package/module/Dropdown/CustomDropdown.js

@@ -1,191 +1,243 @@
-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 } from "react"; // {useEffect}
-import { Platform, ScrollView, TouchableOpacity, View, Text } from "react-native";
-import { BottomSheet, makeStyles, withTheme } from '@rneui/themed';
-import { Button } from '../Button/Button';
-import Icon from '../Icons/TapasIcon';
-import SheetTitle from "../SheetTitle/SheetTitle";
+"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 __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
+});
+var react_1 = __importStar(require("react")); // {useEffect}
+var react_native_1 = require("react-native");
+var themed_1 = require("@rneui/themed");
+var Button_1 = require("../Button/Button");
+var TapasIcon_1 = __importDefault(require("../Icons/TapasIcon"));
+var SheetTitle_1 = __importDefault(require("../SheetTitle/SheetTitle"));
 // import CustomListItem from "../ListItem/ListItem";
-import { isMobile } from "../common";
-const SUB_CONTAINER_HEIGHT = 258;
-const SUB_CONTAINER_WIDTH = 250;
-const useStyles = makeStyles(theme => ({
-  buttonContainer: {
-    backgroundColor: 'transparent',
-    color: theme.colors.primary,
-    height: 40,
-    minWidth: 80,
-    maxHeight: 56,
-    paddingLeft: 16,
-    paddingRight: 12,
-    justifyContent: 'space-between',
-    borderWidth: 1,
-    borderColor: theme.colors.grey2
-  },
-  buttonDisabled: {
-    backgroundColor: theme.colors.grey4,
-    borderWidth: 1
-  },
-  buttonHovered: {
-    backgroundColor: theme.colors.grey4,
-    borderWidth: 1
-  },
-  buttonSelected: {
-    backgroundColor: theme.colors.grey4,
-    borderColor: theme.colors.primary,
-    borderWidth: 1
-  },
-  title: {
-    color: theme.colors.primary,
-    fontSize: 14,
-    fontWeight: theme.fonts.weightR
-  },
-  iconExpanded: {
-    color: theme.colors.primary,
-    transform: 'rotate(-180deg)'
-  },
-  titleExpanded: {
-    color: theme.colors.primary,
-    fontSize: 14,
-    fontWeight: theme.fonts.weightR
-  },
-  dropdownIcon: {
-    color: theme.colors.secondary,
-    fontSize: 20
-  },
-  subContainer: {
-    marginTop: 8,
-    // 移除 marginTop，避免与 top: 40 冲突
-    display: 'flex',
-    flexDirection: 'column',
-    backgroundColor: theme.colors.white,
-    borderRadius: theme.radius.rounded,
-    flex: 1,
-    elevation: 8,
-    shadowColor: 'rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.12)',
-    shadowOffset: {
-      width: 0,
-      height: 12
+var common_1 = require("../common");
+var SUB_CONTAINER_HEIGHT = 258;
+var SUB_CONTAINER_WIDTH = 250;
+var useStyles = (0, themed_1.makeStyles)(function (theme) {
+  return {
+    buttonContainer: {
+      backgroundColor: 'transparent',
+      color: theme.colors.primary,
+      height: 40,
+      minWidth: 80,
+      maxHeight: 56,
+      paddingLeft: 16,
+      paddingRight: 12,
+      justifyContent: 'space-between',
+      borderWidth: 1,
+      borderColor: theme.colors.grey2
     },
-    shadowOpacity: 0.58,
-    shadowRadius: 24,
-    overflow: 'hidden',
-    position: 'absolute',
-    top: 40,
-    // 40 - 44 (SafeAreaProvider) + 20 (全局装饰器) = 16px
-    zIndex: 1000
-  },
-  backdropStyle: {
-    backgroundColor: 'rgba(0, 0, 0, 0.6)'
-  },
-  bottomSheetContainer: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    zIndex: 999,
-    backgroundColor: theme.colors.white,
-    borderTopLeftRadius: theme.radius.rounded,
-    borderTopRightRadius: theme.radius.rounded
-  },
-  scrollView: {
-    maxHeight: SUB_CONTAINER_HEIGHT,
-    width: '100%'
-  }
-}));
-const CustomDropdown = ({
-  children,
-  isVisible,
-  width = 80,
-  icon,
-  value,
-  onPress,
-  onClose,
-  subWidth = SUB_CONTAINER_WIDTH,
-  subHeight = SUB_CONTAINER_HEIGHT,
-  subContainerPosition = 'left',
-  subContainerStyle,
-  subContainerTop,
-  subContainerLeft,
-  showSearchBar,
-  sheetTitlePros,
-  ...props
-}) => {
-  const styles = useStyles(props);
-  const handlePress = event => {
+    buttonDisabled: {
+      backgroundColor: theme.colors.grey4,
+      borderWidth: 1
+    },
+    buttonHovered: {
+      backgroundColor: theme.colors.grey4,
+      borderWidth: 1
+    },
+    buttonSelected: {
+      backgroundColor: theme.colors.grey4,
+      borderColor: theme.colors.primary,
+      borderWidth: 1
+    },
+    title: {
+      color: theme.colors.primary,
+      fontSize: 14,
+      fontWeight: theme.fonts.weightR
+    },
+    iconExpanded: {
+      color: theme.colors.primary,
+      transform: 'rotate(-180deg)'
+    },
+    titleExpanded: {
+      color: theme.colors.primary,
+      fontSize: 14,
+      fontWeight: theme.fonts.weightR
+    },
+    dropdownIcon: {
+      color: theme.colors.secondary,
+      fontSize: 20
+    },
+    subContainer: {
+      marginTop: 8,
+      // 移除 marginTop，避免与 top: 40 冲突
+      display: 'flex',
+      flexDirection: 'column',
+      backgroundColor: theme.colors.white,
+      borderRadius: theme.radius.rounded,
+      flex: 1,
+      elevation: 8,
+      shadowColor: 'rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.12)',
+      shadowOffset: {
+        width: 0,
+        height: 12
+      },
+      shadowOpacity: 0.58,
+      shadowRadius: 24,
+      overflow: 'hidden',
+      position: 'absolute',
+      top: 40,
+      // 40 - 44 (SafeAreaProvider) + 20 (全局装饰器) = 16px
+      zIndex: 1000
+    },
+    backdropStyle: {
+      backgroundColor: 'rgba(0, 0, 0, 0.6)'
+    },
+    bottomSheetContainer: {
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      zIndex: 999,
+      backgroundColor: theme.colors.white,
+      borderTopLeftRadius: theme.radius.rounded,
+      borderTopRightRadius: theme.radius.rounded
+    },
+    scrollView: {
+      maxHeight: SUB_CONTAINER_HEIGHT,
+      width: '100%'
+    }
+  };
+});
+var CustomDropdown = function (_a) {
+  var children = _a.children,
+    isVisible = _a.isVisible,
+    _b = _a.width,
+    width = _b === void 0 ? 80 : _b,
+    icon = _a.icon,
+    value = _a.value,
+    onPress = _a.onPress,
+    onClose = _a.onClose,
+    _c = _a.subWidth,
+    subWidth = _c === void 0 ? SUB_CONTAINER_WIDTH : _c,
+    _d = _a.subHeight,
+    subHeight = _d === void 0 ? SUB_CONTAINER_HEIGHT : _d,
+    _e = _a.subContainerPosition,
+    subContainerPosition = _e === void 0 ? 'left' : _e,
+    subContainerStyle = _a.subContainerStyle,
+    subContainerTop = _a.subContainerTop,
+    subContainerLeft = _a.subContainerLeft,
+    showSearchBar = _a.showSearchBar,
+    sheetTitlePros = _a.sheetTitlePros,
+    props = __rest(_a, ["children", "isVisible", "width", "icon", "value", "onPress", "onClose", "subWidth", "subHeight", "subContainerPosition", "subContainerStyle", "subContainerTop", "subContainerLeft", "showSearchBar", "sheetTitlePros"]);
+  var styles = useStyles(props);
+  var handlePress = function (event) {
     event.stopPropagation();
     onPress && onPress();
   };
-  useEffect(() => {
-    const handleClickOutside = () => {
+  (0, react_1.useEffect)(function () {
+    var handleClickOutside = function () {
       if (isVisible) {
         onClose && onClose();
       }
     };
-    if (Platform.OS === 'web') {
+    if (react_native_1.Platform.OS === 'web') {
       document.addEventListener('click', handleClickOutside);
     }
-    return () => {
-      Platform.OS === 'web' && document.removeEventListener('click', handleClickOutside);
+    return function () {
+      react_native_1.Platform.OS === 'web' && document.removeEventListener('click', handleClickOutside);
     };
   }, [isVisible]);
-  return /*#__PURE__*/React.createElement(View, null, props.customButton ? /*#__PURE__*/React.createElement(TouchableOpacity, {
-    onPress: event => {
+  return react_1.default.createElement(react_native_1.View, null, props.customButton ? react_1.default.createElement(react_native_1.TouchableOpacity, {
+    onPress: function (event) {
       handlePress(event);
     }
-  }, props.customButton) : /*#__PURE__*/React.createElement(Button
+  }, props.customButton) : react_1.default.createElement(Button_1.Button
   // @ts-ignore
-  , _extends({
-    hoverStyle: {
-      ...styles.buttonContainer,
-      ...props.dropdownButtonStyle,
-      ...styles.buttonHovered
-    },
-    buttonStyle: {
-      ...styles.buttonContainer,
-      ...props.dropdownButtonStyle,
-      ...(isVisible ? {
-        ...styles.buttonSelected,
-        ...props.dropdownButtonSelectedStyle
-      } : {}),
-      ...(props.disabled && styles.buttonDisabled)
-    },
-    titleStyle: {
-      ...styles.title,
-      ...(isVisible ? {
-        ...styles.titleExpanded,
-        ...props.textExpandedStyle
-      } : {})
-    },
-    onPress: event => {
+  , __assign({
+    // @ts-ignore
+    hoverStyle: __assign(__assign(__assign({}, styles.buttonContainer), props.dropdownButtonStyle), styles.buttonHovered),
+    buttonStyle: __assign(__assign(__assign(__assign({}, styles.buttonContainer), props.dropdownButtonStyle), isVisible ? __assign(__assign({}, styles.buttonSelected), props.dropdownButtonSelectedStyle) : {}), props.disabled && styles.buttonDisabled),
+    titleStyle: __assign(__assign({}, styles.title), isVisible ? __assign(__assign({}, styles.titleExpanded), props.textExpandedStyle) : {}),
+    onPress: function (event) {
       if (props.disabled) return;
       handlePress(event);
     },
     width: width,
     type: "outline"
-  }, props), /*#__PURE__*/React.createElement(Text, {
+  }, props), react_1.default.createElement(react_native_1.Text, {
     disabled: props.disabled,
     style: {
       overflow: 'hidden'
       // whiteSpace: 'nowrap', // 不支持 React Native
       // textOverflow:"ellipsis" // 不支持 React Native
     }
-  }, value), icon ? icon : /*#__PURE__*/React.createElement(Icon, {
-    name: "arrow_drop_down"
+  }, value), icon ? icon : react_1.default.createElement(TapasIcon_1.default, {
+    name: "arrow_drop_down",
     // @ts-ignore
-    ,
-    style: [styles.dropdownIcon, isVisible ? {
-      ...styles.iconExpanded,
-      ...props.iconExpandedStyle
-    } : {}, props.disabled && {
+    style: [styles.dropdownIcon, isVisible ? __assign(__assign({}, styles.iconExpanded), props.iconExpandedStyle) : {}, props.disabled && {
       opacity: 0.5
     }]
-  })), !isMobile && isVisible && (() => {
+  })), !common_1.isMobile && isVisible && function () {
     // console.log('CustomDropdown: Rendering desktop dropdown', { isMobile, isVisible, subWidth, subHeight });
     // 计算默认的 top 和 left 值
-    const defaultTop = subContainerPosition === 'upLeft' || subContainerPosition === 'upRight' || subContainerPosition === 'upCenter' ? -(subHeight + (showSearchBar ? 66 : 16)) : undefined;
-    const defaultLeft = subContainerPosition === 'center' ? -(subWidth - width) / 2 : subContainerPosition === 'right' ? undefined : subContainerPosition === 'left' ? 0 : undefined;
-    return /*#__PURE__*/React.createElement(View, {
+    var defaultTop = subContainerPosition === 'upLeft' || subContainerPosition === 'upRight' || subContainerPosition === 'upCenter' ? -(subHeight + (showSearchBar ? 66 : 16)) : undefined;
+    var defaultLeft = subContainerPosition === 'center' ? -(subWidth - width) / 2 : subContainerPosition === 'right' ? undefined : subContainerPosition === 'left' ? 0 : undefined;
+    return react_1.default.createElement(react_native_1.View, {
       style: [styles.subContainer,
       // 应用默认的位置样式（如果没有自定义值）
       subContainerTop === undefined && defaultTop !== undefined ? {
@@ -202,17 +254,16 @@ const CustomDropdown = ({
         left: subContainerLeft
       } : {}, subContainerStyle]
     }, children);
-  })(), isMobile && isVisible && /*#__PURE__*/React.createElement(BottomSheet, {
+  }(), common_1.isMobile && isVisible && react_1.default.createElement(themed_1.BottomSheet, {
     containerStyle: [styles.bottomSheetContainer, props.containerStyle],
     backdropStyle: [styles.backdropStyle, props.backdropStyle],
     isVisible: isVisible,
-    onBackdropPress: props?.onBackdropPress
-  }, /*#__PURE__*/React.createElement(SheetTitle, sheetTitlePros), /*#__PURE__*/React.createElement(ScrollView, {
+    onBackdropPress: props === null || props === void 0 ? void 0 : props.onBackdropPress
+  }, react_1.default.createElement(SheetTitle_1.default, __assign({}, sheetTitlePros)), react_1.default.createElement(react_native_1.ScrollView, {
     style: [styles.scrollView, props.scrollViewStyle, {
       width: subWidth
     }],
     onPointerEnter: handlePress
   }, children)));
 };
-export default withTheme(CustomDropdown);
-//# sourceMappingURL=CustomDropdown.js.map
+exports.default = (0, themed_1.withTheme)(CustomDropdown);