@beppla/tapas-ui 1.5.12 → 1.5.13

package/components/ListItem/ListItem.tsx

@@ -1,305 +0,0 @@
-import React, { useState } from "react";
-import { ListItem, makeStyles, withTheme, ListItemProps } from "@rneui/themed";
-
-import Icon from "../Icons/TapasIcon";
-import {
-  LayoutChangeEvent,
-  Text,
-  TouchableOpacity,
-  ViewStyle,
-  StyleProp,
-  TextStyle,
-} from "react-native";
-import Hoverable from "../Hoverable/Hoverable";
-
-export interface ItemProps {
-  id?: string | number;
-  hide?: boolean;
-  name: string;
-  value: string | number;
-  desc?: string;
-  number?: number;
-}
-export interface Props extends ListItemProps {
-  selected: ItemProps;
-  item: ItemProps;
-  key: number | string;
-  onItemPress: (item: ItemProps) => void;
-  disabled?: boolean;
-  containerStyle?: StyleProp<ViewStyle>;
-  itemContainerStyle?: StyleProp<ViewStyle>;
-  titleContainerStyle?: StyleProp<ViewStyle>;
-  searchHighlightStyle?: StyleProp<TextStyle>;
-  titleStyle?: StyleProp<TextStyle>;
-  descStyle?: StyleProp<TextStyle>;
-  /** 是否为第一个 item */
-  isFirst?: boolean;
-  /** 是否为最后一个 item */
-  isLast?: boolean;
-  search?: string;
-  testID?: string;
-}
-
-const useStyle = makeStyles((theme: any, ...props: any) => {
-  const { disabled } = props[0] as Props;
-
-  return {
-    listItemContainer: {
-      backgroundColor: theme.colors.grey5,
-      padding: 0,
-      width: "100%",
-    },
-    itemContainer: {
-      backgroundColor: theme.colors.white,
-      display: "flex",
-      justifyContent: "space-between",
-      flexDirection: "row",
-      padding: 0,
-      paddingHorizontal: 16,
-      width: "100%",
-      height: 48,
-      alignItems: "center",
-      flex: 1,
-      overflow: "hidden",
-    },
-    selectedItem: {
-      backgroundColor: theme.colors.grey3,
-    },
-    title: {
-      fontFamily: theme.fonts.fontFamily,
-      fontSize: theme.fonts.sizeM,
-      fontWeight: theme.fonts.weightR,
-      color: theme.colors.colorTextPrimary,
-      justifyContent: "center",
-    },
-    icon: {
-      color: disabled ? theme.colors.disabled : theme.colors.colorTextAccent,
-      fontSize: 20,
-    },
-    disabled: {
-      backgroundColor: theme.colors.white,
-    },
-    hovered: {
-      backgroundColor: theme.colors.grey4,
-    },
-    disabledTitle: {
-      color: theme.colors.disabled,
-    },
-    disabledSelectedContainer: {
-      backgroundColor: theme.colors.grey5,
-    },
-    main: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      overflow: "hidden",
-      justifyContent: "center",
-    },
-    text: {
-      flexDirection: "row",
-      justifyContent: "flex-start",
-      width: "100%",
-      overflow: "hidden",
-      // whiteSpace: "nowrap", // Not supported in React Native
-      // textOverflow: "ellipsis", // Not supported in React Native
-    },
-    desc: {
-      fontSize: theme.fonts.sizeS,
-      fontWeight: theme.fonts.weightR,
-      color: theme.colors.colorTextSecondary,
-    },
-    hoverWrap: {
-      display: "flex",
-      flexDirection: "row",
-      justifyContent: "space-between",
-      flexGrow: 1,
-      padding: 0,
-    },
-    number: {
-      fontFamily: theme.fonts.fontFamily,
-      fontSize: theme.fonts.sizeS,
-      fontWeight: theme.fonts.weightL,
-      color: theme.colors.white,
-      height: 24,
-      width: 24,
-      lineHeight: 24,
-      textAlign: "center",
-      backgroundColor: theme.colors.colorTextAccent,
-      borderRadius: theme.radius.full,
-    },
-    highlightStyle: {
-      color: theme.colors.colorTextPrimary,
-    },
-  };
-});
-
-const CustomListItem: React.FC<Props> = ({
-  item,
-  key,
-  onItemPress,
-  containerStyle,
-  itemContainerStyle,
-  titleContainerStyle,
-  searchHighlightStyle,
-  titleStyle,
-  descStyle,
-  isFirst,
-  isLast,
-  testID,
-  ...props
-}) => {
-  const styles = useStyle(props);
-  const { selected, disabled } = props;
-  const [isHovered, setIsHovered] = useState(false);
-
-  const handleMouseEnter = () => {
-    setIsHovered(true);
-  };
-
-  const handleMouseLeave = () => {
-    setIsHovered(false);
-  };
-  const [innerConWidth, setInnerConWidth] = useState<number>(0);
-  // Inner Container Layout Event to set content width
-  const handleInnerConLayout = (event: LayoutChangeEvent) => {
-    const { width } = event.nativeEvent.layout;
-    if (innerConWidth === 0) {
-      setInnerConWidth(width - 32); // 32 is padding left and right
-    }
-  };
-  return (
-    <ListItem
-      testID={testID}
-      containerStyle={[
-        styles.listItemContainer,
-        disabled && styles.disabled,
-        containerStyle,
-        selected?.value === item?.value &&
-          disabled &&
-          styles.disabledSelectedContainer,
-      ]}
-      style={{ width: "100%" }}
-      key={key}
-    >
-      <ListItem.Content
-        onLayout={handleInnerConLayout}
-        style={[
-          styles.itemContainer,
-          itemContainerStyle,
-          selected?.value === item?.value
-            ? styles.selectedItem
-            : isHovered && styles.hovered,
-          // 第一个 item 添加左上和右上圆角
-          isFirst && {
-            borderTopLeftRadius: 12,
-            borderTopRightRadius: 12,
-          },
-          // 最后一个 item 添加左下和右下圆角
-          isLast && {
-            borderBottomLeftRadius: 12,
-            borderBottomRightRadius: 12,
-          },
-        ]}
-      >
-        <Hoverable
-          onHoverIn={handleMouseEnter}
-          onHoverOut={handleMouseLeave}
-          style={styles.hoverWrap}
-        >
-          <TouchableOpacity
-            style={{
-              ...styles.main,
-              width:
-                innerConWidth -
-                (selected?.value === item?.value || item?.number ? 36 : 0),
-            }}
-            onPress={() => {
-              !disabled && onItemPress(item);
-            }}
-          >
-            {item?.name ? (
-              <ListItem.Title
-                style={[
-                  styles.title,
-                  styles.text,
-                  titleContainerStyle,
-                  disabled && styles.disabledTitle,
-                ]}
-              >
-                <Text style={titleStyle}>
-                  {props.search && item.name
-                    ? item.name
-                        .split(new RegExp(`(${props.search})`, "gi"))
-                        .map((part, i) =>
-                          part
-                            .toLowerCase()
-                            .includes(props.search?.toLowerCase() || "") ? (
-                            <Text
-                              key={i}
-                              style={[
-                                styles.highlightStyle,
-                                searchHighlightStyle,
-                              ]}
-                            >
-                              {part}
-                            </Text>
-                          ) : (
-                            part
-                          )
-                        )
-                    : item.name}
-                </Text>
-              </ListItem.Title>
-            ) : (
-              <></>
-            )}
-            {item?.desc ? (
-              <ListItem.Subtitle
-                style={[
-                  styles.text,
-                  styles.desc,
-                  disabled && styles.disabledTitle,
-                ]}
-              >
-                <Text style={descStyle}>
-                  {props.search && item.desc
-                    ? item.desc
-                        .split(new RegExp(`(${props.search})`, "gi"))
-                        .map((part, i) =>
-                          part
-                            .toLowerCase()
-                            .includes(props.search?.toLowerCase() || "") ? (
-                            <Text
-                              key={i}
-                              style={[
-                                styles.highlightStyle,
-                                searchHighlightStyle,
-                              ]}
-                            >
-                              {part}
-                            </Text>
-                          ) : (
-                            part
-                          )
-                        )
-                    : item.desc}
-                </Text>
-              </ListItem.Subtitle>
-            ) : (
-              <></>
-            )}
-          </TouchableOpacity>
-          {item?.number ? (
-            <Text style={styles.number}>{item?.number}</Text>
-          ) : (
-            selected?.value === item?.value && (
-              <Icon name="check" style={styles.icon} />
-            )
-          )}
-        </Hoverable>
-      </ListItem.Content>
-    </ListItem>
-  );
-};
-
-export default withTheme(React.memo(CustomListItem));

package/components/Loading/Loading.tsx

@@ -1,97 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import { View, Modal, Image, Animated, Easing, ImageSourcePropType } from "react-native";
-import { withTheme, makeStyles } from "@rneui/themed";
-
-export interface LoadingProps {
-  visible: boolean;
-  logo?: ImageSourcePropType;
-  backgroundColor?: string;
-  defaultLogo?: ImageSourcePropType;
-  size?: number;
-  /** Test ID for E2E testing (default: "loading") */
-  testID?: string;
-}
-
-const Loading: React.FC<LoadingProps> = ({
-  visible,
-  logo,
-  backgroundColor,
-  defaultLogo,
-  size = 200,
-  testID,
-}) => {
-  const styles = useStyles();
-  const opacity = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    if (!visible) return;
-    
-    opacity.setValue(0);
-    const animation = Animated.loop(
-      Animated.sequence([
-        Animated.timing(opacity, {
-          toValue: 0.3,
-          duration: 800,
-          easing: Easing.inOut(Easing.ease),
-          useNativeDriver: true,
-        }),
-        Animated.timing(opacity, {
-          toValue: 0.05,
-          duration: 1000,
-          easing: Easing.inOut(Easing.ease),
-          useNativeDriver: true,
-        }),
-      ])
-    );
-    animation.start();
-    
-    return () => animation.stop();
-  }, [visible, opacity]);
-
-  if (!visible) return null;
-
-  // 图片优先级：1. 传入的 logo 2. 传入的 defaultLogo 3. 内置默认图片
-  // 使用 try-catch 来安全地引用图片，避免打包后的路径问题
-  let imageSource: ImageSourcePropType;
-  try {
-    if (logo) {
-      imageSource = logo;
-    } else if (defaultLogo) {
-      imageSource = defaultLogo;
-    } else {
-      // 直接使用占位符，避免路径问题
-      imageSource = { uri: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBmaWxsPSIjRjVGNUY1Ii8+Cjx0ZXh0IHg9IjEwMCIgeT0iMTAwIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTYiIGZpbGw9IiM5OTk5OTkiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj5UYXBhcyBVSTwvdGV4dD4KPC9zdmc+' };
-    }
-  } catch (error) {
-    // 如果出现任何错误，使用占位符
-    imageSource = { uri: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBmaWxsPSIjRjVGNUY1Ii8+Cjx0ZXh0IHg9IjEwMCIgeT0iMTAwIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTYiIGZpbGw9IiM5OTk5OTkiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj5UYXBhcyBVSTwvdGV4dD4KPC9zdmc+' };
-  }
-
-  return (
-    <Modal statusBarTranslucent={true} transparent visible={visible} testID={testID ?? "loading"}>
-      <View style={[styles.bg, backgroundColor ? { backgroundColor } : undefined]}>
-        <Animated.View style={[{ opacity, width: size, height: size }]}>
-          <Image
-            style={{ width: size, height: size }}
-            source={imageSource}
-            resizeMode="contain"
-          />
-        </Animated.View>
-      </View>
-    </Modal>
-  );
-};
-
-const useStyles = makeStyles((theme) => ({
-  bg: {
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignContent: "center",
-    alignItems: "center",
-    flex: 1,
-    backgroundColor: theme?.colors?.grey1,
-  },
-}));
-
-export default withTheme(Loading);

package/components/MessageBox/MessageBox.tsx

@@ -1,248 +0,0 @@
-import React, { useEffect, useState, useCallback, useMemo } from "react";
-import { View, Text, Modal, Pressable, useWindowDimensions } from "react-native";
-import { withTheme, makeStyles, useTheme } from "@rneui/themed";
-import TapasIcon from "../Icons/TapasIcon";
-
-export interface MessageBoxProps {
-  visible?: boolean;
-  state?: "success" | "warning" | "error";
-  icon?: string;
-  title?: string;
-  text?: string;
-  hideFooter?: boolean;
-  hideCloseBtn?: boolean;
-  hideConfirmBtn?: boolean;
-  confirmBtnText?: string;
-  closeBtnText?: string;
-  descNumberOfLines?: number;
-  onVisibilityChange?: (val: boolean) => void;
-  onConfirm?: () => void;
-  onClose?: () => void;
-  /** Test ID for E2E testing */
-  testID?: string;
-}
-
-const MessageBox: React.FC<MessageBoxProps> = ({
-  state,
-  title,
-  text,
-  icon,
-  visible,
-  confirmBtnText,
-  closeBtnText,
-  hideFooter = false,
-  hideCloseBtn = false,
-  hideConfirmBtn = false,
-  descNumberOfLines = 3,
-  onVisibilityChange,
-  onClose,
-  onConfirm,
-  testID,
-}) => {
-  const theme = useTheme();
-  const { width: windowWidth } = useWindowDimensions();
-  const isPhone = windowWidth <= 430;
-  const styles = useStyles();
-  const [modalVisible, setModalVisible] = useState(false);
-
-  useEffect(() => {
-    setModalVisible(Boolean(visible));
-  }, [visible]);
-
-  const stateIcon = useMemo(() => {
-    if (icon) return icon;
-    
-    switch (state) {
-      case "success":
-        return "check_circle";
-      case "warning":
-        return "warning";
-      case "error":
-        return "error";
-      default:
-        return "";
-    }
-  }, [state, icon]);
-
-  const handleClose = useCallback(() => {
-    if (onClose) {
-      onClose();
-    } else if (onVisibilityChange) {
-      onVisibilityChange(false);
-    } else {
-      setModalVisible(false);
-    }
-  }, [onClose, onVisibilityChange]);
-
-  const handleConfirm = useCallback(() => {
-    onConfirm?.();
-  }, [onConfirm]);
-
-  const handleRequestClose = useCallback(() => {
-    onVisibilityChange ? onVisibilityChange(false) : setModalVisible(false);
-  }, [onVisibilityChange]);
-
-  return (
-    <Modal
-      animationType="fade"
-      transparent={true}
-      visible={modalVisible}
-      onRequestClose={handleRequestClose}
-      testID={testID}
-    >
-      <View style={styles.modalContainer}>
-        <View style={[styles.modalContent, isPhone && { width: windowWidth - 32 }]}>
-          <View style={styles.messagebox_header}>
-            {stateIcon ? (
-              <View style={styles.messagebox_header_icon}>
-                <TapasIcon
-                  name={stateIcon}
-                  size={20}
-                  color={theme.theme.colors.primary}
-                />
-              </View>
-            ) : null}
-            <View style={styles.messagebox_header_txt_con}>
-              {title ? (
-                <Text
-                  style={styles.messagebox_header_txt}
-                  numberOfLines={1}
-                  ellipsizeMode="tail"
-                >
-                  {title}
-                </Text>
-              ) : null}
-            </View>
-          </View>
-          <View style={styles.messagebox_main}>
-            <Text
-              style={styles.messagebox_main_txt}
-              numberOfLines={descNumberOfLines}
-              ellipsizeMode="tail"
-            >
-              {text}
-            </Text>
-          </View>
-          {!hideFooter ? (
-            <View style={styles.messagebox_footer}>
-              {!hideCloseBtn ? (
-                <Pressable
-                  style={styles.messagebox_btn}
-                  onPress={handleClose}
-                >
-                  <Text
-                    style={styles.messagebox_btn_txt}
-                    numberOfLines={1}
-                    ellipsizeMode="tail"
-                  >
-                    {closeBtnText || "Close"}
-                  </Text>
-                </Pressable>
-              ) : null}
-              {!hideConfirmBtn ? (
-                <Pressable
-                  style={[
-                    styles.messagebox_btn,
-                    { backgroundColor: theme.theme.colors.primary },
-                  ]}
-                  onPress={handleConfirm}
-                >
-                  <Text
-                    style={[
-                      styles.messagebox_btn_txt,
-                      { color: theme.theme.colors.white },
-                    ]}
-                    numberOfLines={1}
-                    ellipsizeMode="tail"
-                  >
-                    {confirmBtnText || "Confirm"}
-                  </Text>
-                </Pressable>
-              ) : null}
-            </View>
-          ) : null}
-        </View>
-      </View>
-    </Modal>
-  );
-};
-
-const useStyles = makeStyles((theme) => ({
-  modalContainer: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: "rgba(0, 0, 0, 0.6)",
-    zIndex: 10,
-  },
-  modalContent: {
-    width: 392,
-    borderRadius: 12,
-    backgroundColor: theme?.colors?.white,
-    display: "flex",
-    flexDirection: "column",
-    padding: 16,
-    gap: 16,
-  },
-  messagebox_header: {
-    display: "flex",
-    flexDirection: "row",
-    gap: 4,
-    height: 20,
-  },
-  messagebox_header_icon: {
-    width: 20,
-    height: 20,
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignContent: "center",
-    alignItems: "center",
-  },
-  messagebox_header_txt_con: {
-    display: "flex",
-    flexDirection: "row",
-    flex: 1,
-    overflow: "hidden",
-  },
-  messagebox_header_txt: {
-    fontSize: 16,
-    fontWeight: "700",
-    color: theme?.colors?.primary,
-  },
-  messagebox_main: {
-    display: "flex",
-    flexDirection: "column",
-    flex: 1,
-    overflow: "hidden",
-  },
-  messagebox_main_txt: {
-    fontSize: 14,
-    fontWeight: "400",
-    color: theme?.colors?.secondary,
-  },
-  messagebox_footer: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "flex-end",
-    gap: 8,
-    height: 40,
-  },
-  messagebox_btn: {
-    height: 40,
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "center",
-    alignContent: "center",
-    alignItems: "center",
-    paddingLeft: 16,
-    paddingRight: 16,
-    borderRadius: 20,
-  },
-  messagebox_btn_txt: {
-    fontSize: 14,
-    fontWeight: "600",
-  },
-}));
-
-export default withTheme(MessageBox);