@beppla/tapas-ui 1.0.65 → 1.0.66

package/components/UserSwitcher/UserSwitcher.tsx

@@ -1,273 +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 (
-      <Pressable 
-        style={[styles.userListContainer, { height }]} 
-        onPress={handleUserSwitcherPress}
-        testID={testID}
-      >
-        {displayUsers.map((user, index) => renderAvatar(user, index))}
-      </Pressable>
-    );
-  }, [getDisplayUsers, height, handleUserSwitcherPress, renderAvatar, styles, testID]);
-
-  return (
-    <View
-      {...otherProps}
-      style={[
-        styles.container,
-        { 
-          height, 
-          width: isLoggedIn ? containerWidth : "auto" 
-        },
-        style,
-      ]}
-    >
-      <Animated.View
-        style={{ 
-          opacity: fadeAnim, 
-          transform: [{ scale: scaleAnim }] 
-        }}
-      >
-        {isLoggedIn ? (
-          renderUserList()
-        ) : (
-          <TapasButton onPress={handleLoginPress}>
-            {loginButtonText}
-          </TapasButton>
-        )}
-      </Animated.View>
-    </View>
-  );
-};
-
-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';

package/components/common.ts

@@ -1,8 +0,0 @@
-import { Platform } from "react-native";
-
-export const isMobile = Platform.OS !== 'web' || (Platform.OS === 'web' && typeof window !== 'undefined' && window?.innerWidth <= 430);
-
-export const capitalizeFirstLetter = (str?: string): string => {
-  if (!str) return '';
-  return str.charAt(0).toUpperCase() + str.slice(1);
-};

package/components/index.tsx

@@ -1,157 +0,0 @@
-// Web兼容性说明：
-// 1. 某些组件在Web环境中可能需要额外的依赖
-// 2. react-native-vector-icons 在Web中需要特殊处理
-// 3. 建议在使用方项目中安装必要的Web兼容依赖
-
-// 基础组件
-export { default as TapasButton } from "./Button/Button";
-export { default as TapasButtonGroup } from "./Button/ButtonGroup";
-export { default as TapasText } from "./Text/Text";
-export { default as TapasInput } from "./Input/Input";
-export { default as TapasNumericInput } from "./NumericInput/NumericInput";
-export { default as TapasCheckBox } from "./CheckBox/CheckBox";
-export { default as TapasCheckBoxItem } from "./CheckBox/CheckBoxItem";
-export { default as TapasGroupCheckBox } from "./CheckBox/GroupCheckBox";
-export { default as TapasRadioButton } from "./RadioButton/RadioButton";
-export { default as TapasTag } from "./Tag/Tag";
-export { default as TapasStatus } from "./Status/Status";
-export { default as TapasProgress } from "./Progress/Progress";
-export { default as TapasCircularProgress } from "./CircularProgress/CircularProgress";
-export { default as TapasSteps } from "./Steps/Steps";
-export { default as TapasTimeline } from "./Timeline/Timeline";
-export { default as TapasTask } from "./Task/Task";
-export { default as TapasListItem } from "./ListItem/ListItem";
-export { default as TapasSheetTitle } from "./SheetTitle/SheetTitle";
-export { default as TapasOverlay } from "./Overlay/Overlay";
-export { default as TapasPopover } from "./Popover/Popover";
-export { default as TapasPagination } from "./Pagination/Pagination";
-export { default as TapasDashboardCard } from "./DashboardCard/DashboardCard";
-export { default as TapasImage } from "./Image/PreviewImg";
-export { default as TapasImageComponent } from "./Image/Image";
-export { default as TapasNavigation } from "./Navigation/Navigation";
-export { default as TapasShell } from "./Shell/Shell";
-
-// 图标组件
-export { default as TapasIcon } from "./Icons/TapasIcon";
-export { default as TapasIconExpo } from "./Icons/TapasIconExpo";
-export { fontLoader, useFontLoader } from "./Icons/fontLoader";
-export { expoFontLoader, useExpoFontLoader } from "./Icons/expoFontLoader";
-export { smartFontLoader, useSmartFontLoader } from "./Icons/smartFontLoader";
-
-// 布局组件
-export { default as TapasLayout } from "./Layout/Layout";
-export { default as TapasDrawer } from "./Drawer/Drawer";
-export { default as TapasHeader } from "./Header/Header";
-
-// 表单组件
-export { default as TapasDropdown, TapasDropdownModal } from "./Dropdown/Dropdown";
-export { default as TapasCustomDropdown } from "./Dropdown/CustomDropdown";
-export { default as TapasInputDropdown } from "./Dropdown/InputDropdown";
-
-// 日历组件
-export { default as TapasCalendar } from "./Calendar/Calendar";
-export { default as TapasCalendarBase } from "./Calendar/Calendar.base";
-export { default as TapasDaySelector } from "./Calendar/DaySelector";
-export { default as TapasMonthSelector } from "./Calendar/MonthSelector";
-export { default as TapasWeekDaySelector } from "./Calendar/WeekDaySelector";
-export { default as TapasTimeSelector } from "./Calendar/TimeSelector";
-export { default as TapasConcreteTimeSelector } from "./Calendar/ConcreteTimeSelector";
-export { default as TapasCustomRange } from "./Calendar/CustomRange";
-
-// 高级组件
-export { default as TapasGantt } from "./Gantt/Gantt";
-export { default as TapasFixedSizeGrid } from "./Grid/FixedSizeGrid";
-export { default as TapasVariableSizeGrid } from "./Grid/VariableSizeGrid";
-export { default as TapasStaticFixedSizeGrid } from "./Grid/StaticFixedSizeGrid";
-export { default as TapasDraggableFlatList } from "./DraggableFlatList/DraggableFlatList";
-
-// 通知组件
-export { default as TapasToast } from "./Toast/Toast";
-export { default as TapasAlert } from "./Alert/Alert";
-
-// 主题和工具
-export { default as TapasThemeProvider } from "./Theme/ThemeProvider";
-
-// 为了确保构建后正确导出，使用明确的导出
-import { defaultTheme } from "./Theme/defaultTheme";
-export const TapasDefaultTheme = defaultTheme;
-
-// 创建一个默认主题实例，方便应用端直接使用
-export const TapasDefaultThemeInstance = defaultTheme();
-
-// 重新导出 @rneui/themed 的核心功能
-export { 
-  useTheme, 
-  withTheme, 
-  makeStyles, 
-  ThemeProvider,
-  Text,
-  ListItem,
-  Overlay,
-  BottomSheet,
-  Avatar,
-  Divider,
-  TabView,
-  Tab,
-  SearchBar,
-  Input,
-  Button
-} from "@rneui/themed";
-
-// 类型导出 - 简化版本
-export type { Props as TapasButtonProps } from "./Button/Button";
-export type { TapasInputProps } from "./Input/Input";
-export type { SearchInputProps } from "./SearchInput/SearchInput";
-export type { ReasonModalProps, ReasonOption } from "./ReasonModal/ReasonModal";
-export type { TapasUserSwitcherProps, UserData } from "./UserSwitcher/UserSwitcher";
-export type { TapasTabTitleProps } from "./TabTitle/TabTitle";
-export type { TapasAnimatedNavItemProps } from "./AnimatedNavItem/AnimatedNavItem";
-export type { TapasTableColumnHeaderProps, SortDirection, SortState } from "./TableColumnHeader/TableColumnHeader";
-export type { TapasDataCellProps, DataType, CellAlignment, StatusConfig, ActionItem } from "./DataCell/DataCell";
-export type { TapasMultiSelectorProps, TapasMultiSelectorItem } from "./MultiSelector/MultiSelector";
-export type { TapasQuantityProps } from "./Quantity/Quantity";
-export type { DropdownProps } from "./Dropdown/Dropdown";
-
-// 重新导出 @rneui/themed 的常用类型
-export type { 
-  ButtonProps,
-  InputProps,
-  ListItemProps,
-  TextProps,
-  BottomSheetProps,
-  OverlayProps,
-  TabProps,
-  TabItemProps,
-  Theme
-} from "@rneui/themed";
-
-// 导出其他类型文件
-export * from "./Calendar/types";
-export * from "./Gantt/types";
-export { defaultTheme } from "./Theme/defaultTheme";
-export * from "./Shell/types";
-
-// 新增的遗漏组件
-export { default as TapasLoading } from "./Loading/Loading";
-export { default as TapasScanButton } from "./ScanButton/ScanButton";
-export { default as TapasIconText } from "./IconText/IconText";
-export { default as TapasExternalLink } from "./ExternalLink/ExternalLink";
-export { default as TapasCollapsible } from "./Collapsible/Collapsible";
-export { default as TapasCard } from "./Card/Card";
-export { default as TapasTextArea } from "./TextArea/TextArea";
-export { default as TapasMessageBox } from "./MessageBox/MessageBox";
-export { default as TapasSearchInput } from "./SearchInput/SearchInput";
-export { default as TapasHelloWave } from "./HelloWave/HelloWave";
-export { default as TapasDeviceSelectionModal } from "./DeviceSelectionModal/DeviceSelectionModal";
-export { default as TapasReasonModal } from "./ReasonModal/ReasonModal";
-export { default as TapasUserSwitcher } from "./UserSwitcher/UserSwitcher";
-export { default as TapasTabTitle } from "./TabTitle/TabTitle";
-export { default as TapasAnimatedNavItem } from "./AnimatedNavItem/AnimatedNavItem";
-export { default as TapasTableColumnHeader } from "./TableColumnHeader/TableColumnHeader";
-export { default as TapasDataCell } from "./DataCell/DataCell";
-export { default as TapasMultiSelector } from "./MultiSelector/MultiSelector";
-export { default as TapasQuantity } from "./Quantity/Quantity";
-export { default as TapasNotification } from "./Notification";
-
-// 工具函数
-export { isMobile, capitalizeFirstLetter } from "./common";

package/package/README.md

@@ -1,103 +0,0 @@
-# Tapas UI
-![image](https://user-images.githubusercontent.com/3481514/145904252-92e3dc1e-591f-410f-88a1-b4250f4ba6f2.png)
-
-一个现代化的 React Native UI 组件库，支持 Web 和移动端。
-
-## 🚀 特性
-
-- 🎨 丰富的 UI 组件
-- 📱 React Native 原生支持
-- 🌐 Web 兼容性
-- 🎯 TypeScript 支持
-- 🎭 主题系统
-- 📖 Storybook 文档
-
-## 📦 安装
-
-```bash
-npm install @beppla/tapas-ui
-# 或
-yarn add @beppla/tapas-ui
-```
-
-## 🔧 依赖要求
-
-### 必需依赖
-
-```json
-{
-  "dependencies": {
-    "react": "^18.0.0",
-    "react-native": "^0.70.0"
-  }
-}
-```
-
-### Web 环境依赖
-
-如果您在 Web 环境中使用，需要安装以下依赖：
-
-```bash
-npm install react-native-web react-native-vector-icons
-# 或
-yarn add react-native-web react-native-vector-icons
-```
-
-### 图标支持
-
-组件库使用 `react-native-vector-icons` 提供图标支持。在 Web 环境中，您可能需要额外的配置：
-
-```bash
-# 安装字体文件
-npm install @expo/vector-icons
-# 或
-yarn add @expo/vector-icons
-```
-
-## 🎯 使用方法
-
-```tsx
-import React from 'react';
-import { TapasButton, TapasText } from '@beppla/tapas-ui';
-
-const App = () => {
-  return (
-    <div>
-      <TapasText>Hello Tapas UI!</TapasText>
-      <TapasButton title="Click me" onPress={() => alert('Hello!')} />
-    </div>
-  );
-};
-```
-
-## 🌐 Web 兼容性
-
-### 已知问题
-
-1. **图标组件**: 在 Web 环境中，某些图标可能显示为文本占位符
-2. **原生模块**: 某些 React Native 特定功能在 Web 中不可用
-3. **字体文件**: 需要确保字体文件在 Web 环境中正确加载
-
-### 解决方案
-
-1. 安装 `react-native-web` 和相关依赖
-2. 配置 Webpack 别名和 fallback
-3. 使用提供的 Web 兼容组件
-
-## 📚 文档
-
-访问 [Storybook](https://your-storybook-url.com) 查看完整的组件文档和示例。
-
-## 🤝 贡献
-
-欢迎提交 Issue 和 Pull Request！
-
-## 📄 许可证
-
-MIT License
-
-## 🔗 相关链接
-
-- [React Native](https://reactnative.dev/)
-- [React Native Web](https://necolas.github.io/react-native-web/)
-- [Storybook](https://storybook.js.org/)