@beppla/tapas-ui 1.5.10 → 1.5.12

package/components/ListItem/ListItem.tsx

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

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

@@ -0,0 +1,248 @@
+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);