@beppla/tapas-ui 1.0.65 → 1.0.67

package/module/MultiSelector/MultiSelector.js

@@ -0,0 +1,669 @@
+import React, { useEffect, useRef, useState } from "react";
+import { View, Modal, TouchableOpacity, Text, Dimensions, Pressable, Animated, ScrollView } from "react-native";
+import { makeStyles, useTheme, withTheme } from "@rneui/themed";
+import Icon from "../Icons/TapasIcon";
+const TapasMultiSelector = ({
+  icon = "arrow_drop_down",
+  width,
+  height,
+  iconStyle,
+  title,
+  label,
+  required,
+  dropdownSubWidth,
+  dropdownSubHeight,
+  dropdownItems = [],
+  selected,
+  showSelectedValue = false,
+  backgroundColor,
+  onSelect,
+  placeholder,
+  disabled,
+  type,
+  state = "normal",
+  stateMsg,
+  showStateMsg = false,
+  radius = 12,
+  offsetWidth = 0,
+  showSearchBar = false,
+  noLabelAnim = false,
+  visible,
+  setVisible,
+  searchPlaceholder = "Search",
+  clearButtonText = "Clear",
+  confirmButtonText = "Done",
+  testID
+}) => {
+  const theme = useTheme();
+  const styles = useStyles(theme);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [dropdownWidthCalc, setDropdownWidthCalc] = useState(dropdownSubWidth ?? 151);
+  const [dropdownPosition, setDropdownPosition] = useState({
+    top: 0,
+    left: 0
+  });
+  const [selectedItemKey, setSelectedItemKey] = useState(selected ?? []);
+  const [top, setTop] = useState(18);
+  const buttonRef = useRef(null);
+  const topAnim = useRef(new Animated.Value(18)).current;
+  const offsetSpace = 8;
+  const offsetHeight = 10;
+  const openDropdown = () => {
+    if (disabled) return;
+    if (buttonRef.current) {
+      buttonRef.current.measure((_fx, _fy, width, height, px, py) => {
+        const window = Dimensions.get("window");
+        const dropdownHeight = dropdownSubHeight ?? Math.min(40 * dropdownItems.length + 24, 448);
+        const dropdownWidth = Math.max(width, dropdownSubWidth ?? 151);
+        setDropdownWidthCalc(dropdownWidth);
+
+        // 计算下方空间是否足够
+        const enoughSpaceBelow = py + height + dropdownHeight + offsetHeight <= window.height;
+        const enoughSpaceAbove = py - dropdownHeight >= 0;
+        const enoughSpaceRight = px + dropdownWidth <= window.width;
+
+        // 处理 px 由于 tab screen的问题 导致 px 可能是多个屏宽倍数的问题
+        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 (setVisible) {
+          setVisible(true);
+        } else {
+          setModalVisible(true);
+        }
+      });
+    }
+  };
+  useEffect(() => {
+    setSelectedItemKey(selected ?? []);
+  }, [selected]);
+  useEffect(() => {
+    if (typeof visible === "boolean" && visible !== undefined) {
+      setModalVisible(visible);
+    }
+  }, [visible]);
+  useEffect(() => {
+    const start = selectedItemKey.length === 0 ? 0 : 18;
+    const target = selectedItemKey.length === 0 ? 18 : 0;
+    if (top === target) return;
+    setTop(target);
+    topAnim.setValue(start);
+    Animated.timing(topAnim, {
+      toValue: target,
+      duration: 300,
+      useNativeDriver: true
+    }).start();
+  }, [selectedItemKey]);
+  const closeModal = () => {
+    if (setVisible) {
+      setVisible(false);
+    } else {
+      setModalVisible(false);
+    }
+  };
+  const handleItemSelect = key => {
+    const newSelected = selectedItemKey.includes(key) ? selectedItemKey.filter(k => k !== key) : [...selectedItemKey, key];
+    setSelectedItemKey(newSelected);
+  };
+  const handleClear = () => {
+    setSelectedItemKey([]);
+    onSelect?.([]);
+    closeModal();
+  };
+  const handleConfirm = () => {
+    onSelect?.(selectedItemKey);
+    closeModal();
+  };
+  const renderCheckbox = item => /*#__PURE__*/React.createElement(View, {
+    style: styles.checkboxContainer
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.checkbox, selectedItemKey.includes(item.key) && styles.checkboxChecked]
+  }, selectedItemKey.includes(item.key) && /*#__PURE__*/React.createElement(Text, {
+    style: styles.checkmark
+  }, "\u2713")), /*#__PURE__*/React.createElement(Text, {
+    style: styles.optionText,
+    numberOfLines: 1,
+    ellipsizeMode: "tail"
+  }, item.value));
+  const renderButton = (text, onPress, disabled = false, primary = false) => /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: [styles.button, primary && styles.primaryButton, disabled && styles.disabledButton],
+    onPress: onPress,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.buttonText, primary && styles.primaryButtonText, disabled && styles.disabledButtonText]
+  }, text));
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.con, width ? {
+      maxWidth: width,
+      minWidth: width
+    } : null, height ? {
+      minHeight: height + (label ? 7 : 0) + (showStateMsg ? 15 : 0),
+      maxHeight: height + (label ? 7 : 0) + (showStateMsg ? 15 : 0)
+    } : null],
+    testID: testID
+  }, 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.label_text, state === "error" && {
+      color: theme.theme.colors.error
+    }, selectedItemKey.length === 0 && {
+      color: theme.theme.colors.grey2
+    }, disabled && {
+      color: theme.theme.colors.grey3
+    }],
+    numberOfLines: 1,
+    ellipsizeMode: "tail"
+  }, selectedItemKey.length === 0 ? placeholder || label : label), required && /*#__PURE__*/React.createElement(Text, {
+    style: styles.required
+  }, "*"))), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    ref: buttonRef,
+    style: [showSelectedValue || noLabelAnim && label ? styles.btn : null, type === "solid" ? styles.solidBtn : null, type === "solid" && radius ? {
+      borderRadius: radius
+    } : null, label ? {
+      marginTop: 7
+    } : null, noLabelAnim && label && backgroundColor ? {
+      backgroundColor
+    } : null, state === "error" ? {
+      borderColor: theme.theme.colors.error
+    } : null, disabled ? {
+      borderColor: theme.theme.colors.grey3
+    } : null],
+    disabled: disabled,
+    onPress: openDropdown
+  }, showSelectedValue ? /*#__PURE__*/React.createElement(Text, {
+    style: [styles.alignCenter, {
+      flexGrow: 1,
+      marginRight: 12
+    }, disabled && {
+      color: theme.theme.colors.grey3
+    }],
+    numberOfLines: 1,
+    ellipsizeMode: "tail"
+  }, !selectedItemKey?.length ? placeholder || "Select an option" : dropdownItems.filter(item => selectedItemKey.includes(item.key)).map(item => item.value).join(", ")) : noLabelAnim && label ? /*#__PURE__*/React.createElement(Text, {
+    style: [styles.alignCenter, {
+      flexGrow: 1,
+      marginRight: 2
+    }, disabled && {
+      color: theme.theme.colors.grey3
+    }],
+    numberOfLines: 1,
+    ellipsizeMode: "tail"
+  }, label) : null, /*#__PURE__*/React.createElement(Icon, {
+    name: modalVisible && icon === "arrow_drop_down" ? "arrow_drop_up" : icon === "arrow_drop_up" ? "arrow_drop_down" : icon || "arrow_drop_down",
+    style: [styles.icon, iconStyle, disabled && {
+      color: theme.theme.colors.grey3
+    }]
+  })), 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: modalVisible,
+    onRequestClose: closeModal,
+    animationType: "fade"
+  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: {
+      flex: 1
+    },
+    onPress: closeModal
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.optionsCon, {
+      top: dropdownPosition.top,
+      left: dropdownPosition.left,
+      width: dropdownWidthCalc
+    }, dropdownSubHeight ? {
+      maxHeight: dropdownSubHeight
+    } : null]
+  }, title && /*#__PURE__*/React.createElement(View, {
+    style: [styles.flx, styles.titleCon]
+  }, /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    ellipsizeMode: "tail",
+    style: styles.title
+  }, title)), showSearchBar && /*#__PURE__*/React.createElement(View, {
+    style: styles.searchContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.searchPlaceholder
+  }, searchPlaceholder)), /*#__PURE__*/React.createElement(ScrollView, {
+    style: styles.optionsScrollView,
+    showsHorizontalScrollIndicator: false,
+    showsVerticalScrollIndicator: false
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.optionsInner
+  }, dropdownItems.length > 0 ? dropdownItems.map(item => /*#__PURE__*/React.createElement(Pressable, {
+    style: ({
+      pressed
+    }) => [styles.option, {
+      backgroundColor: pressed ? theme.theme.colors.grey4 || "#f0f0f0" : "transparent"
+    }],
+    key: `tapas-dropdown-option-${item.key}`,
+    onPress: () => handleItemSelect(item.key)
+  }, renderCheckbox(item))) : /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    ellipsizeMode: "tail",
+    style: [styles.optionText, styles.noOptions]
+  }, "No options"))), /*#__PURE__*/React.createElement(View, {
+    style: styles.footer
+  }, renderButton(clearButtonText, handleClear), renderButton(confirmButtonText, handleConfirm, !selectedItemKey?.length, true))))));
+};
+const useStyles = makeStyles(theme => {
+  return {
+    flx: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between"
+    },
+    con: {
+      flex: 1,
+      justifyContent: "flex-start",
+      // 改为顶部对齐，与 Dropdown 保持一致
+      alignItems: "stretch" // 改为拉伸对齐，与 Dropdown 保持一致
+    },
+    icon: {
+      color: theme.colors.primary,
+      fontSize: 16
+    },
+    titleCon: {
+      paddingHorizontal: theme.spacing.tpRg
+    },
+    title: {
+      height: 48,
+      display: "flex",
+      alignItems: "center",
+      fontSize: theme.fonts.sizeL,
+      color: "#000",
+      fontWeight: theme.fonts.weightL
+    },
+    optionsCon: {
+      position: "absolute",
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden",
+      backgroundColor: theme.colors.white,
+      paddingTop: 8,
+      paddingBottom: 16,
+      borderRadius: 12,
+      maxHeight: 224,
+      boxShadow: "0px 12px 40px 0px rgba(0, 0, 0, 0.14), 0px 24px 56px 0px rgba(0, 0, 0, 0.10)"
+    },
+    optionsScrollView: {
+      flex: 1,
+      display: "flex"
+    },
+    optionsInner: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "flex-start",
+      gap: 8
+    },
+    option: {
+      display: "flex",
+      flexDirection: "row",
+      width: "100%",
+      overflow: "hidden",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      height: 48,
+      gap: 8,
+      paddingLeft: 8
+    },
+    checkboxContainer: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 8,
+      flex: 1
+    },
+    checkbox: {
+      width: 20,
+      height: 20,
+      borderWidth: 2,
+      borderColor: theme.colors.primary,
+      borderRadius: 4,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    checkboxChecked: {
+      backgroundColor: theme.colors.primary
+    },
+    checkmark: {
+      color: theme.colors.white,
+      fontSize: 14,
+      fontWeight: "bold"
+    },
+    optionText: {
+      fontSize: 14,
+      fontWeight: "400",
+      color: theme.colors.primary,
+      alignSelf: "center",
+      overflow: "hidden",
+      flexGrow: 1
+    },
+    noOptions: {
+      width: "100%",
+      textAlign: "center",
+      color: theme.colors.grey2,
+      minHeight: 48,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    btn: {
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      minHeight: 40,
+      width: "100%",
+      overflow: "hidden",
+      position: "relative"
+    },
+    solidBtn: {
+      borderWidth: 1,
+      borderRadius: 12,
+      borderStyle: "solid",
+      borderColor: theme.colors.grey2,
+      paddingLeft: 16,
+      paddingRight: 12,
+      paddingTop: 10,
+      paddingBottom: 10
+    },
+    alignCenter: {
+      alignSelf: "center"
+    },
+    labelCon: {
+      position: "absolute",
+      left: 16,
+      paddingLeft: 1,
+      paddingRight: 1,
+      display: "flex",
+      flexDirection: "row",
+      zIndex: 30
+    },
+    labelInner: {
+      display: "flex",
+      flexDirection: "row"
+    },
+    label_text: {
+      fontSize: 12,
+      color: theme.colors.primary
+    },
+    required: {
+      fontSize: 12,
+      fontWeight: "400",
+      color: theme.colors.colorToastNegative,
+      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
+    },
+    searchContainer: {
+      padding: 16,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.grey2
+    },
+    searchPlaceholder: {
+      color: theme.colors.grey2,
+      fontSize: 14
+    },
+    footer: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      paddingHorizontal: 16,
+      paddingTop: 8,
+      borderTopWidth: 1,
+      borderTopColor: theme.colors.colorPrimaryBorder,
+      gap: 8
+    },
+    button: {
+      paddingHorizontal: 16,
+      paddingVertical: 8,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: theme.colors.grey2,
+      backgroundColor: theme.colors.white
+    },
+    primaryButton: {
+      backgroundColor: theme.colors.primary,
+      borderColor: theme.colors.primary
+    },
+    disabledButton: {
+      backgroundColor: theme.colors.grey3,
+      borderColor: theme.colors.grey3
+    },
+    buttonText: {
+      fontSize: 14,
+      fontWeight: "500",
+      color: theme.colors.primary
+    },
+    primaryButtonText: {
+      color: theme.colors.white
+    },
+    disabledButtonText: {
+      color: theme.colors.grey2
+    }
+  };
+});
+export default withTheme(TapasMultiSelector);
+//# sourceMappingURL=MultiSelector.js.map   title: {
+      height: 48,
+      display: "flex",
+      alignItems: "center",
+      fontSize: theme.fonts.sizeL,
+      color: "#000",
+      fontWeight: theme.fonts.weightL
+    },
+    optionsCon: {
+      position: "absolute",
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden",
+      backgroundColor: theme.colors.white,
+      paddingTop: 8,
+      paddingBottom: 16,
+      borderRadius: 12,
+      maxHeight: 224,
+      boxShadow: "0px 12px 40px 0px rgba(0, 0, 0, 0.14), 0px 24px 56px 0px rgba(0, 0, 0, 0.10)"
+    },
+    optionsScrollView: {
+      flex: 1,
+      display: "flex"
+    },
+    optionsInner: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "flex-start",
+      gap: 8
+    },
+    option: {
+      display: "flex",
+      flexDirection: "row",
+      width: "100%",
+      overflow: "hidden",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      height: 48,
+      gap: 8,
+      paddingLeft: 8
+    },
+    checkboxContainer: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 8,
+      flex: 1
+    },
+    checkbox: {
+      width: 20,
+      height: 20,
+      borderWidth: 2,
+      borderColor: theme.colors.primary,
+      borderRadius: 4,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    checkboxChecked: {
+      backgroundColor: theme.colors.primary
+    },
+    checkmark: {
+      color: theme.colors.white,
+      fontSize: 14,
+      fontWeight: "bold"
+    },
+    optionText: {
+      fontSize: 14,
+      fontWeight: "400",
+      color: theme.colors.primary,
+      alignSelf: "center",
+      overflow: "hidden",
+      flexGrow: 1
+    },
+    noOptions: {
+      width: "100%",
+      textAlign: "center",
+      color: theme.colors.grey2,
+      minHeight: 48,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    btn: {
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      minHeight: 40,
+      width: "100%",
+      overflow: "hidden",
+      position: "relative"
+    },
+    solidBtn: {
+      borderWidth: 1,
+      borderRadius: 12,
+      borderStyle: "solid",
+      borderColor: theme.colors.grey2,
+      paddingLeft: 16,
+      paddingRight: 12,
+      paddingTop: 10,
+      paddingBottom: 10
+    },
+    alignCenter: {
+      alignSelf: "center"
+    },
+    labelCon: {
+      position: "absolute",
+      left: 16,
+      paddingLeft: 1,
+      paddingRight: 1,
+      display: "flex",
+      flexDirection: "row",
+      zIndex: 30
+    },
+    labelInner: {
+      display: "flex",
+      flexDirection: "row"
+    },
+    label_text: {
+      fontSize: 12,
+      color: theme.colors.primary
+    },
+    required: {
+      fontSize: 12,
+      fontWeight: "400",
+      color: theme.colors.colorToastNegative,
+      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
+    },
+    searchContainer: {
+      padding: 16,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.grey2
+    },
+    searchPlaceholder: {
+      color: theme.colors.grey2,
+      fontSize: 14
+    },
+    footer: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      paddingHorizontal: 16,
+      paddingTop: 8,
+      borderTopWidth: 1,
+      borderTopColor: theme.colors.colorPrimaryBorder,
+      gap: 8
+    },
+    button: {
+      paddingHorizontal: 16,
+      paddingVertical: 8,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: theme.colors.grey2,
+      backgroundColor: theme.colors.white
+    },
+    primaryButton: {
+      backgroundColor: theme.colors.primary,
+      borderColor: theme.colors.primary
+    },
+    disabledButton: {
+      backgroundColor: theme.colors.grey3,
+      borderColor: theme.colors.grey3
+    },
+    buttonText: {
+      fontSize: 14,
+      fontWeight: "500",
+      color: theme.colors.primary
+    },
+    primaryButtonText: {
+      color: theme.colors.white
+    },
+    disabledButtonText: {
+      color: theme.colors.grey2
+    }
+  };
+});
+exports.default = (0, themed_1.withTheme)(TapasMultiSelector);
+//# sourceMappingURL=MultiSelector.js.map