@beppla/tapas-ui 1.4.15 → 1.4.17

package/components/Toast/Toast.tsx

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

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

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