@beppla/tapas-ui 1.5.10 → 1.5.12

package/components/MultiSelector/MultiSelector.tsx

@@ -0,0 +1,627 @@
+import React, { useEffect, useRef, useState } from "react";
+import {
+  View,
+  Modal,
+  TouchableOpacity,
+  Text,
+  ViewStyle,
+  TextStyle,
+  Dimensions,
+  Pressable,
+  Animated,
+  ScrollView,
+} from "react-native";
+import { makeStyles, useTheme, withTheme } from "@rneui/themed";
+import Icon from "../Icons/TapasIcon";
+
+export interface TapasMultiSelectorItem {
+  key: number;
+  value: string;
+  secondaryValue?: string;
+}
+
+export interface TapasMultiSelectorProps {
+  width?: number;
+  height?: number;
+  icon?: string;
+  title?: string;
+  label?: string;
+  required?: boolean;
+  iconStyle?: ViewStyle | TextStyle;
+  dropdownItems?: TapasMultiSelectorItem[];
+  dropdownSubWidth?: number;
+  dropdownSubHeight?: number;
+  selected?: number[];
+  showSelectedValue?: boolean;
+  type?: "clear" | "solid";
+  onSelect?: (selectedKeys: number[]) => void;
+  backgroundColor?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  state?: "normal" | "error";
+  stateMsg?: string;
+  showStateMsg?: boolean;
+  radius?: number;
+  offsetWidth?: number;
+  showSearchBar?: boolean;
+  noLabelAnim?: boolean;
+  visible?: boolean;
+  setVisible?: (val: boolean) => void;
+  searchPlaceholder?: string;
+  testID?: string;
+  clearButtonText?: string;
+  confirmButtonText?: string;
+}
+
+const TapasMultiSelector: React.FC<TapasMultiSelectorProps> = ({
+  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<number[]>(
+    selected ?? []
+  );
+
+  const [top, setTop] = useState(18);
+
+  const buttonRef = useRef<any>(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: number, _fy: number, width: number, height: number, px: number, py: number) => {
+        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: number) => {
+    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: TapasMultiSelectorItem) => (
+    <View style={styles.checkboxContainer}>
+      <View style={[
+        styles.checkbox,
+        selectedItemKey.includes(item.key) && styles.checkboxChecked
+      ]}>
+        {selectedItemKey.includes(item.key) && (
+          <Text style={styles.checkmark}>✓</Text>
+        )}
+      </View>
+      <Text style={styles.optionText} numberOfLines={1} ellipsizeMode="tail">
+        {item.value}
+      </Text>
+    </View>
+  );
+
+  const renderButton = (text: string, onPress: () => void, disabled = false, primary = false) => (
+    <TouchableOpacity
+      style={[
+        styles.button,
+        primary && styles.primaryButton,
+        disabled && styles.disabledButton
+      ]}
+      onPress={onPress}
+      disabled={disabled}
+    >
+      <Text style={[
+        styles.buttonText,
+        primary && styles.primaryButtonText,
+        disabled && styles.disabledButtonText
+      ]}>
+        {text}
+      </Text>
+    </TouchableOpacity>
+  );
+
+  return (
+    <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 && (
+        <Animated.View
+          style={[
+            styles.labelCon,
+            { top: topAnim },
+            { backgroundColor: backgroundColor || theme.theme.colors.white },
+          ]}
+        >
+          <Pressable style={styles.labelInner} onPress={openDropdown}>
+            <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}
+            </Text>
+            {required && <Text style={styles.required}>*</Text>}
+          </Pressable>
+        </Animated.View>
+      )}
+      <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 ? (
+          <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(", ")}
+          </Text>
+        ) : noLabelAnim && label ? (
+          <Text
+            style={[
+              styles.alignCenter,
+              { flexGrow: 1, marginRight: 2 },
+              disabled && { color: theme.theme.colors.grey3 },
+            ]}
+            numberOfLines={1}
+            ellipsizeMode="tail"
+          >
+            {label}
+          </Text>
+        ) : null}
+        <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 }
+          ]}
+        />
+      </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
+        transparent
+        visible={modalVisible}
+        onRequestClose={closeModal}
+        animationType="fade"
+      >
+        <TouchableOpacity
+          style={{ flex: 1 }}
+          onPress={closeModal}
+        >
+          <View
+            style={[
+              styles.optionsCon,
+              {
+                top: dropdownPosition.top,
+                left: dropdownPosition.left,
+                width: dropdownWidthCalc,
+              },
+              dropdownSubHeight ? { maxHeight: dropdownSubHeight } : null,
+            ]}
+          >
+            {title && (
+              <View style={[styles.flx, styles.titleCon]}>
+                <Text numberOfLines={1} ellipsizeMode="tail" style={styles.title}>{title}</Text>
+              </View>
+            )}
+            {showSearchBar && (
+              <View style={styles.searchContainer}>
+                <Text style={styles.searchPlaceholder}>{searchPlaceholder}</Text>
+              </View>
+            )}
+            <ScrollView
+              style={styles.optionsScrollView}
+              showsHorizontalScrollIndicator={false}
+              showsVerticalScrollIndicator={false}
+            >
+              <View style={styles.optionsInner}>
+                {dropdownItems.length > 0 ? (
+                  dropdownItems.map((item) => (
+                    <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)}
+                    </Pressable>
+                  ))
+                ) : (
+                  <Text
+                    numberOfLines={1}
+                    ellipsizeMode="tail"
+                    style={[styles.optionText, styles.noOptions]}
+                  >
+                    {"No options"}
+                  </Text>
+                )}
+              </View>
+            </ScrollView>
+            <View style={styles.footer}>
+              {renderButton(clearButtonText, handleClear)}
+              {renderButton(confirmButtonText, handleConfirm, !selectedItemKey?.length, true)}
+            </View>
+          </View>
+        </TouchableOpacity>
+      </Modal>
+    </View>
+  );
+};
+
+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);

package/components/MultiSelector/index.tsx

@@ -0,0 +1,2 @@
+export { default } from './MultiSelector';
+export type { TapasMultiSelectorProps, TapasMultiSelectorItem } from './MultiSelector';