@beppla/tapas-ui 1.0.46 → 1.0.48

package/components/UserSwitcher/UserSwitcher.tsx

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

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

package/components/common.ts

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

@@ -0,0 +1,157 @@
+// 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/{CHANGELOG.md → package/CHANGELOG.md}

@@ -5,6 +5,31 @@
 格式基于 [Keep a Changelog](https://keepachangelog.com/zh-CN/1.0.0/)，
 版本号遵循 [语义化版本](https://semver.org/lang/zh-CN/)。
 
+## [1.0.48] - 2024-12-19
+
+### 修复
+- 🐛 **StickyColumn 宽度修复**：修复了 StaticFixedSizeGrid 中 StickyColumn 的宽度问题
+  - 将硬编码的 `width: 1` 改为使用计算出的 `stickyColumnsWidth`
+  - 修复了 VariableSizeGrid 使用错误的 `style.width` 而不是正确的 `rest.width`
+  - 修复了外层容器宽度计算，使用 `rest.width - stickyColumnsWidth`
+  - 解决了 sticky column 父容器宽度显示不正确的问题
+  - 修复了 tapas-orderly-client 中 Ongoing.tsx 的宽度显示问题
+
+## [1.0.47] - 2024-12-19
+
+### 测试和修复
+- 🧪 **Grid 组件测试完善**：为 StaticFixedSizeGrid 组件添加了全面的测试覆盖
+  - 添加了 7 个测试用例，覆盖基本渲染、属性处理、粘性列功能
+  - 测试单列、多列、空列、未定义列的粘性列场景
+  - 测试自定义样式属性处理
+  - 修复了 `rowHeight` 属性类型问题（从数字改为函数）
+  - 所有测试通过，确保组件稳定性
+
+### 调试和优化
+- 🔍 **Grid 组件调试**：添加了调试日志来诊断 `column-header-sticky` 父容器宽度问题
+  - 确认了 `style` prop 中 `width: 400` 的来源
+  - 为后续修复提供了准确的调试信息
+
 ## [1.0.46] - 2024-12-19
 
 ### 新增功能

package/package/README.md

@@ -0,0 +1,103 @@
+# 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/)