@beppla/tapas-ui 1.5.12 → 1.5.13

package/components/Upload/Upload.tsx

@@ -1,142 +0,0 @@
-import React from 'react';
-import { Text, Pressable, Platform, StyleProp, ViewStyle } from 'react-native';
-import { makeStyles, withTheme } from '@rneui/themed';
-import TapasIcon from '../Icons/TapasIcon';
-
-export interface TapasUploadProps {
-  /** Callback when a file is selected */
-  onFileSelect?: (file: File) => void;
-  /** @deprecated Use onFileSelect instead */
-  attachSelectedFile?: (file: File) => void;
-  /** Button text (default: "Upload") */
-  btnText?: string;
-  /** Component height */
-  height?: number;
-  /** Component width */
-  width?: number;
-  /** Accept file types (e.g., "image/*", ".pdf") */
-  accept?: string;
-  /** Disabled state */
-  disabled?: boolean;
-  /** Test ID for testing */
-  testID?: string;
-  /** Container style override */
-  containerStyle?: StyleProp<ViewStyle>;
-}
-
-const TapasUpload: React.FC<TapasUploadProps> = ({
-  onFileSelect,
-  attachSelectedFile,
-  btnText = 'Upload',
-  width,
-  height,
-  accept,
-  disabled = false,
-  testID,
-  containerStyle,
-}) => {
-  const styles = useStyles();
-  const uniqueId = `fileInput-${Math.random().toString(36).substr(2, 9)}`;
-  const handleFile = onFileSelect ?? attachSelectedFile;
-
-  const handleSelectFile = () => {
-    if (disabled) return;
-    if (Platform.OS === 'web') {
-      document.getElementById(uniqueId)?.click();
-    }
-  };
-
-  const handleFileInputChange = (event: any) => {
-    const selectedFile = event.target.files[0];
-    if (selectedFile && handleFile) {
-      handleFile(selectedFile);
-    }
-  };
-
-  const handleDrop = (event: any) => {
-    event.preventDefault();
-    if (disabled) return;
-    const files = event.dataTransfer.files;
-    if (files?.length > 0 && handleFile) {
-      handleFile(files[0]);
-    }
-  };
-
-  return (
-    <Pressable
-      testID={testID}
-      onPress={handleSelectFile}
-      style={[
-        styles.container,
-        width != null && { width },
-        height != null && { height },
-        disabled && styles.disabled,
-        containerStyle,
-      ]}
-    >
-      {Platform.OS === 'web' ? (
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'center',
-            alignItems: 'center',
-            width: '100%',
-            height: '100%',
-            gap: 8,
-          }}
-          onDragEnter={(e) => e.preventDefault()}
-          onDragOver={(e) => e.preventDefault()}
-          onDragLeave={(e) => e.preventDefault()}
-          onDrop={handleDrop}
-        >
-          <input
-            type="file"
-            id={uniqueId}
-            accept={accept}
-            style={{ display: 'none' }}
-            onChange={handleFileInputChange}
-          />
-          <TapasIcon size={20} color={styles.icon.color} name="upload" />
-          <Text style={styles.text}>{btnText}</Text>
-        </div>
-      ) : (
-        <>
-          <TapasIcon size={20} color={styles.icon.color} name="upload" />
-          <Text style={styles.text}>{btnText}</Text>
-        </>
-      )}
-    </Pressable>
-  );
-};
-
-const useStyles = makeStyles((theme) => ({
-  container: {
-    display: 'flex',
-    flexDirection: 'row',
-    height: 48,
-    borderStyle: 'dashed',
-    borderWidth: 1,
-    borderColor: theme.colors.grey2,
-    borderRadius: 12,
-    flexGrow: 1,
-    overflow: 'hidden',
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: 8,
-    paddingHorizontal: 16,
-  },
-  disabled: {
-    opacity: 0.5,
-  },
-  icon: {
-    color: theme.colors.grey2,
-  },
-  text: {
-    fontSize: 12,
-    fontWeight: '400',
-    color: theme.colors.secondary,
-  },
-}));
-
-export default withTheme(React.memo(TapasUpload));

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';