@beppla/tapas-ui 1.4.14 → 1.4.15

package/components/Toast/Toast.tsx

@@ -0,0 +1,167 @@
+import React, {  useEffect } from 'react';
+import {TouchableOpacity, View, Platform} from 'react-native';
+import {Text,  makeStyles,  withTheme} from '@rneui/themed';
+import Icon from '../Icons/TapasIcon'
+
+
+const isWeb = Platform.OS === 'web';
+
+const useStyles = makeStyles((theme) => {
+    return {
+        toastWrapper: {
+            zIndex: 99999,
+            height: 40,
+            textAlign: 'center',
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'center'
+        },
+        toastContainer: {
+            fontFamily: theme.fonts.fontFamily,
+            flexDirection: 'row',
+            alignItems: 'center',
+            height: 40,
+            backgroundColor: theme.colors.primary,
+            paddingVertical: 8,
+            paddingRight: 16,
+            paddingLeft: 12,
+            borderRadius: theme.radius.rounded,
+            maxWidth: isWeb ? 450 : 375,
+            minWidth: 168,
+        },
+        hasActionText: {
+            flex: 1,
+        },
+        messageContainer: {
+            flexGrow: 1,
+            flexShrink: 1,
+            flexBasis: 'auto',
+            justifyContent: 'center',
+            maxWidth: '100%',
+        },
+        messageText: {
+            fontSize: 14,
+            color: theme.colors.white,
+            // whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            // textOverflow: 'ellipsis',
+            maxWidth: '100%',
+        },
+        discText: {
+            fontSize: 12,
+            color: theme.colors.colorInvertNormalIcon,
+            // whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            // textOverflow: 'ellipsis',
+            maxWidth: '100%',
+        },
+        actionText: {
+            fontSize: 14,
+            color: theme.colors.white,
+            paddingHorizontal: 12,
+        },
+        iconContainer: {
+            paddingRight: 8,
+        },
+        Success: {
+            color: theme.colors.success,
+        },
+        Error: {
+            color: theme.colors.error,
+        },
+        Warning: {
+            color: theme.colors.warning,
+        },
+        Info: {
+            color: theme.colors.info,
+        },
+    }
+});
+
+export interface Props{
+    visible: boolean;
+    message: string;
+    duration?: number;
+    actionText?: string;
+    description?: string;
+    type?: 'Error' | 'Warning' |'Success' | 'Info';
+    onActionPress?: () => void;
+    hideToast?: () => void;
+    style?: any;
+}
+
+enum ToastType {
+    Success = 'check_circle_filled',
+    Error = 'warning_filled',
+    Warning = 'warning_filled',
+    Info = 'warning_filled',
+}
+
+export const Toast: React.FC<Props> = ({
+                                           visible = false,
+                                           message,
+                                           duration = 2000,
+                                           type = 'Info',
+                                           actionText,
+                                           onActionPress,
+                                           description,
+                                           hideToast,
+                                           style,
+                                           ...props
+                                       }) => {
+    const styles = useStyles(props);
+    useEffect((): any => {
+        if (visible) {
+            const timer = setTimeout(() => {
+                hideToast && hideToast();
+            }, duration);
+            return () => {
+                clearTimeout(timer)
+            };
+        }
+    }, [visible]);
+
+    const renderMessage = () => {
+        return (<View style={[styles.toastWrapper, style ]}>
+            <View style={[styles.toastContainer, actionText ? styles.hasActionText : {} ]} testID="toast">
+                <View style={styles.iconContainer}>
+                    <Icon style={styles[type]}  name={ToastType[type]} size={24} />
+                </View>
+                {
+                    (message || description) && (
+                        <View style={styles.messageContainer}>
+                            {
+                                message && (
+                                    <Text style={styles.messageText}>
+                                        {message}
+                                    </Text>
+                                )
+                            }
+                            {
+                                description && (
+                                    <Text style={styles.discText}>
+                                        {description}
+                                    </Text>
+                                )
+                            }
+                        </View>
+                    )
+                }
+                {
+                    actionText && (
+                        <TouchableOpacity onPress={onActionPress}>
+                            <Text style={styles.actionText}>{actionText}</Text>
+                        </TouchableOpacity>
+                    )
+                }
+            </View>
+        </View>)
+    }
+
+    return (
+        visible && renderMessage()
+    );
+};
+
+
+export default withTheme(Toast);

package/components/UserSwitcher/UserSwitcher.tsx

@@ -0,0 +1,272 @@
+import React, { useEffect, useRef, useState, useCallback } from "react";
+import { Animated, View, ViewProps, Pressable } from "react-native";
+import { withTheme, makeStyles } from "@rneui/themed";
+import TapasButton from "../Button/Button";
+import TapasIcon from "../Icons/TapasIcon";
+import TapasImage from "../Image/Image";
+
+export interface UserData {
+  /** 用户唯一标识 */
+  id: number;
+  /** 用户名称 */
+  name: string;
+  /** 头像数据（base64编码的SVG或图片URL） */
+  avatar: string;
+  /** 用户键值 */
+  key: string;
+}
+
+export interface TapasUserSwitcherProps extends ViewProps {
+  /** 用户列表，最多显示3个 */
+  userList: UserData[];
+  /** 是否处于登录状态 */
+  isLoggedIn?: boolean;
+  /** 组件高度 */
+  height?: number;
+  /** 当前用户ID */
+  currentUserId?: number;
+  /** 头像类型 */
+  avatarType?: "svg" | "image";
+  /** 登录按钮文本 */
+  loginButtonText?: string;
+  /** 点击用户切换器的回调 */
+  onUserSwitcherPress?: () => void;
+  /** 点击登录按钮的回调 */
+  onLoginPress?: () => void;
+  /** 用户列表改变时的回调 */
+  onUserListChange?: (userList: UserData[]) => void;
+  /** 动画持续时间（毫秒） */
+  animationDuration?: number;
+}
+
+const TapasUserSwitcher: React.FC<TapasUserSwitcherProps> = ({
+  userList = [],
+  isLoggedIn = false,
+  height = 40,
+  currentUserId,
+  avatarType = "svg",
+  loginButtonText = "Login",
+  onUserSwitcherPress,
+  onLoginPress,
+  onUserListChange,
+  animationDuration = 500,
+  style,
+  testID,
+  ...otherProps
+}) => {
+  const styles = useStyles();
+  const [containerWidth, setContainerWidth] = useState(80);
+  
+  // 动画相关
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const scaleAnim = useRef(new Animated.Value(0.9)).current;
+
+  // 头像尺寸配置
+  const avatarSizes = [40, 32, 24];
+
+  // 根据用户数量计算容器宽度
+  useEffect(() => {
+    if (userList.length >= 3) {
+      setContainerWidth(68);
+    } else if (userList.length === 2) {
+      setContainerWidth(56);
+    } else {
+      setContainerWidth(40);
+    }
+  }, [userList.length]);
+
+  // 当前用户ID改变时触发动画
+  useEffect(() => {
+    // 在测试环境中跳过动画以避免 act() 警告
+    if (process.env.NODE_ENV === 'test') {
+      fadeAnim.setValue(1);
+      scaleAnim.setValue(1);
+      return;
+    }
+    
+    fadeAnim.setValue(0);
+    scaleAnim.setValue(0.9);
+    
+    Animated.parallel([
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: animationDuration,
+        useNativeDriver: true,
+      }),
+      Animated.timing(scaleAnim, {
+        toValue: 1,
+        duration: animationDuration,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, [currentUserId, animationDuration]);
+
+  // 将当前用户移动到列表前面
+  const moveUserToFront = useCallback((users: UserData[], userId: number): UserData[] => {
+    const currentUserIndex = users.findIndex(user => user.id === userId);
+    if (currentUserIndex === -1) return users;
+    
+    const currentUser = users[currentUserIndex];
+    if (!currentUser) return users;
+    
+    const otherUsers = users.filter(user => user.id !== userId);
+    return [currentUser, ...otherUsers];
+  }, []);
+
+  // 获取要显示的用户列表（最多3个）
+  const getDisplayUsers = useCallback((): UserData[] => {
+    const orderedUsers = currentUserId 
+      ? moveUserToFront(userList, currentUserId)
+      : userList;
+    return orderedUsers.slice(0, 3);
+  }, [userList, currentUserId, moveUserToFront]);
+
+  // 处理用户切换器点击
+  const handleUserSwitcherPress = useCallback(() => {
+    onUserSwitcherPress?.();
+  }, [onUserSwitcherPress]);
+
+  // 处理登录按钮点击
+  const handleLoginPress = useCallback(() => {
+    onLoginPress?.();
+  }, [onLoginPress]);
+
+  // 渲染头像
+  const renderAvatar = useCallback((user: UserData, index: number) => {
+    const size = avatarSizes[index] || 40;
+    const leftPosition = index === 0 ? 0 : index === 1 ? 24 : 44;
+    const zIndex = 10 - index * 2;
+    const opacity = 1 - index * 0.15;
+
+    const avatarContainerStyle = [
+      styles.avatarContainer,
+      {
+        left: leftPosition,
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        zIndex,
+        opacity,
+      },
+    ];
+
+    if (user.avatar) {
+      return (
+        <View key={user.id || `user-${index}`} style={avatarContainerStyle}>
+          {avatarType === "svg" ? (
+            <View style={{ width: size, height: size, backgroundColor: '#f0f0f0', borderRadius: size / 2 }} testID="svg-avatar">
+              {/* SVG 渲染暂时使用占位符，因为 react-native-svg 14.x 版本中 SvgXml 已被移除 */}
+              <TapasIcon name="user" size={size * 0.6} color="#666" />
+            </View>
+          ) : (
+            <TapasImage
+              width={size}
+              height={size}
+              radius
+              uri={user.avatar}
+            />
+          )}
+        </View>
+      );
+    }
+
+    // 默认头像
+    return (
+      <View key={user.id || `user-${index}`} style={avatarContainerStyle}>
+        <View style={[styles.defaultAvatarBackground, { opacity }]}>
+          <TapasIcon
+            style={styles.defaultAvatarIcon}
+            size={size / 2}
+            color="#999"
+            name="person"
+          />
+        </View>
+      </View>
+    );
+  }, [avatarType, styles]);
+
+  // 渲染用户列表
+  const renderUserList = useCallback(() => {
+    const displayUsers = getDisplayUsers();
+    
+    return (
+      <View style={[styles.userListContainer, { height }]}>
+        {displayUsers.map((user, index) => renderAvatar(user, index))}
+      </View>
+    );
+  }, [getDisplayUsers, height, renderAvatar, styles]);
+
+  return (
+    <Pressable
+      {...otherProps}
+      style={[
+        styles.container,
+        { 
+          height, 
+          width: isLoggedIn ? containerWidth : "auto" 
+        },
+        style,
+      ]}
+      testID={testID}
+      onPress={isLoggedIn ? handleUserSwitcherPress : undefined}
+      disabled={!isLoggedIn}
+    >
+      <Animated.View
+        style={{ 
+          opacity: fadeAnim, 
+          transform: [{ scale: scaleAnim }] 
+        }}
+      >
+        {isLoggedIn ? (
+          renderUserList()
+        ) : (
+          <TapasButton onPress={handleLoginPress}>
+            {loginButtonText}
+          </TapasButton>
+        )}
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    display: "flex",
+    height: 40,
+    alignSelf: "center",
+  },
+  userListContainer: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    height: 40,
+    position: "relative",
+  },
+  avatarContainer: {
+    display: "flex",
+    position: "absolute",
+    flexDirection: "column",
+    justifyContent: "center",
+    overflow: "hidden",
+    zIndex: 1,
+  },
+  defaultAvatarBackground: {
+    display: "flex",
+    flexGrow: 1,
+    borderRadius: 20,
+    justifyContent: "center",
+    flexDirection: "column",
+    backgroundColor: theme.colors.grey2,
+  },
+  defaultAvatarIcon: {
+    display: "flex",
+    alignSelf: "center",
+  },
+}));
+
+export default withTheme(TapasUserSwitcher);
+
+// Export aliases for compatibility
+export const UserSwitcher = withTheme(TapasUserSwitcher);
+export { TapasUserSwitcher };

package/components/UserSwitcher/index.tsx

@@ -0,0 +1,3 @@
+export { default } from './UserSwitcher';
+export type { TapasUserSwitcherProps, UserData } from './UserSwitcher';
+export { UserSwitcher, TapasUserSwitcher } from './UserSwitcher';