@beppla/tapas-ui 1.5.11 → 1.5.13

package/components/MultiSelector/MultiSelector.tsx

@@ -1,627 +0,0 @@
-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

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