@beppla/tapas-ui 1.0.65 → 1.0.67

package/components/Header/Header.tsx

@@ -1,240 +0,0 @@
-import React, { useState, useEffect } from "react";
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  Platform,
-  ViewStyle,
-  StyleProp,
-} from "react-native";
-import {
-  Header,
-  Input,
-  Avatar,
-  makeStyles,
-  HeaderProps,
-  withTheme,
-} from "@rneui/themed";
-import Icon from "../Icons/TapasIcon";
-
-// ts-ignore
-const useStyles = makeStyles((theme) => ({
-  headerContainer: {
-    backgroundColor: theme.colors.background,
-    height: 72,
-  },
-  title: {
-    color: theme.colors.primary,
-    fontFamily: theme.fonts.fontFamily,
-    fontSize: theme.fonts.h2,
-    fontWeight: theme.fonts.weightL,
-    letterSpacing: theme.fonts.letterSpacingM,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  mobileTitle: {
-    fontSize: theme.fonts.h3,
-    fontStyle: "normal",
-    letterSpacing: theme.fonts.letterSpacingS,
-  },
-  webTitle:{
-    minWidth: undefined,
-    flexDirection: "row",
-    flexGrow: 1,
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    justifyContent: "flex-start"
-  },
-  leftContainer: {
-    justifyContent: "center",
-    overflow: 'hidden',
-  },
-  rightContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-  searchContainer: {
-    width: 168,
-    marginRight: 8,
-    paddingLeft: 16,
-    paddingRight: 40,
-    paddingVertical: 8,
-    height: 40,
-    backgroundColor: theme.colors.colorSurface7,
-    borderRadius: theme.radius.full,
-    fontSize: theme.fonts.sizeM,
-    fontFamily: theme.fonts.fontFamily,
-  },
-  searchInputContainer: {
-    borderBottomWidth: 0,
-    // placeholderTextColor: theme.colors.colorTextPlaceholder, // Not supported in React Native
-    height: "100%",
-    width: "100%",
-  },
-  searchInput: {
-    fontFamily: theme.fonts.fontFamily,
-    fontSize: theme.fonts.sizeM,
-    // outlineWidth: 0, // Not supported in React Native
-  },
-  dropdownContent: {
-    paddingVertical: 10,
-    paddingHorizontal: 20,
-    backgroundColor: "#ffffff",
-    borderRadius: 5,
-  },
-  mobileSearchContainer: {
-    width: 40,
-    height: 40,
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: theme.colors.colorSurface7,
-    borderRadius: theme.radius.full,
-    marginRight: 8,
-  },
-}));
-
-const isWeb = Platform.OS === "web";
-
-export interface Props extends HeaderProps {
-  title: string;
-  searchPlaceholderText?: string;
-  avatarSource?: string; // @ts-ignore
-  avatarOnPress?: () => void;
-  searchOnChangeText?: (text: string) => void;
-  onLeftIconPress?: () => void;
-  leftIcon?: string;
-  showLeftIcon?: boolean;
-  hasBack?: boolean;
-  backIconStyle?: any;
-  isShowSearch?: boolean;
-  headerContainerStyle?: StyleProp<ViewStyle>;
-}
-
-const HeaderComponent: React.FC<Props> = ({
-  title,
-  searchPlaceholderText,
-  avatarSource,
-  hasBack = false,
-  // @ts-ignore
-  theme,
-  searchOnChangeText,
-  avatarOnPress,
-  leftIcon = "menu",
-  showLeftIcon = false,
-  onLeftIconPress,
-  backIconStyle,
-  isShowSearch = false,
-  ...props
-}) => {
-  const [searchText, setSearchText] = useState("");
-  const [visible] = useState(showLeftIcon);
-  const styles = useStyles(props);
-
-  // TODO: click avatar to show some dropdown menu for login/logout
-  // const [isDropdownVisible, setIsDropdownVisible] = useState(false);
-  // const handleMouseEnter = () => {
-  //     setIsDropdownVisible(true);
-  // };
-  // const handleMouseLeave = () => {
-  //     setIsDropdownVisible(false);
-  // };
-
-  useEffect(() => {
-    if (searchOnChangeText) {
-      searchOnChangeText(searchText);
-    }
-  }, [searchText]);
-
-  const handleLeftIconPress = () => {
-    onLeftIconPress && onLeftIconPress();
-  };
-
-  return (
-    <View testID="header">
-      <Header
-          leftContainerStyle={styles.leftContainer}
-          leftComponent={
-            <View
-              style={{
-                display: "flex",
-                flexDirection: "row",
-                alignItems: "center",
-                overflow: 'hidden',
-                width: '100%',
-              }}
-            >
-              {visible && (
-                <TouchableOpacity onPress={handleLeftIconPress}>
-                  <Icon
-                    style={{ marginRight: 10 }}
-                    name={leftIcon}
-                    size={20}
-                    color={theme?.colors?.grey1}
-                  />
-                </TouchableOpacity>
-              )}
-              {hasBack && (
-                <TouchableOpacity onPress={handleLeftIconPress}>
-                  <Icon
-                    style={{ marginRight: 10, ...backIconStyle }}
-                    name="back"
-                    size={20}
-                    color={theme?.colors?.grey1}
-                  />
-                </TouchableOpacity>
-              )}
-              <Text
-                style={[
-                  styles.title,
-                  !isWeb ? styles.mobileTitle : styles.webTitle,
-                  hasBack && styles.mobileTitle,
-                ]}
-              >
-                {title}
-              </Text>
-            </View>
-          }
-          rightComponent={
-            <View style={styles.rightContainer}>
-              {isWeb && isShowSearch && (
-                <Input
-                  placeholder={searchPlaceholderText}
-                  leftIcon={
-                    <Icon
-                      name="search"
-                      size={24}
-                      color={theme?.colors?.grey1}
-                    />
-                  }
-                  containerStyle={styles.searchContainer}
-                  inputContainerStyle={styles.searchInputContainer}
-                  inputStyle={styles.searchInput}
-                  onChangeText={setSearchText}
-                />
-              )}
-              {
-                !isWeb && isShowSearch && (
-                  <View style={styles.mobileSearchContainer}>
-                    <Icon name="search" size={24} color={theme?.colors?.grey1} />
-                  </View>
-                )
-              }
-              {avatarSource && (
-                <Avatar
-                  rounded
-                  source={{ uri: avatarSource }}
-                  size="small"
-                  onPress={avatarOnPress}
-                />
-              )}
-            </View>
-          }
-          centerContainerStyle={{flex: 0.01}}
-          containerStyle={[styles.headerContainer, props.headerContainerStyle]}
-        />
-    </View>
-  );
-};
-
-export default withTheme(HeaderComponent);

package/components/HelloWave/HelloWave.tsx

@@ -1,70 +0,0 @@
-import React from 'react';
-import { StyleSheet, Animated } from 'react-native';
-import { withTheme } from '@rneui/themed';
-import TapasText from '../Text/Text';
-
-export interface HelloWaveProps {
-  emoji?: string;
-  duration?: number;
-  repeatCount?: number;
-  style?: any;
-  textStyle?: any;
-  testID?: string;
-}
-
-const HelloWave: React.FC<HelloWaveProps> = ({
-  emoji = '👋',
-  duration = 150,
-  repeatCount = 4,
-  style,
-  textStyle,
-  testID,
-  ...props
-}) => {
-  const rotationAnimation = new Animated.Value(0);
-
-  React.useEffect(() => {
-    const createAnimation = () => {
-      return Animated.sequence([
-        Animated.timing(rotationAnimation, {
-          toValue: 25,
-          duration,
-          useNativeDriver: true,
-        }),
-        Animated.timing(rotationAnimation, {
-          toValue: 0,
-          duration,
-          useNativeDriver: true,
-        }),
-      ]);
-    };
-
-    const animation = Animated.loop(createAnimation(), { iterations: repeatCount });
-    animation.start();
-
-    return () => animation.stop();
-  }, [duration, repeatCount]);
-
-  const animatedStyle = {
-    transform: [{ rotate: rotationAnimation.interpolate({
-      inputRange: [0, 25],
-      outputRange: ['0deg', '25deg'],
-    }) }],
-  };
-
-  return (
-    <Animated.View style={[animatedStyle, style]} testID={testID} {...props}>
-      <TapasText style={[styles.text, textStyle]}>{emoji}</TapasText>
-    </Animated.View>
-  );
-};
-
-const styles = StyleSheet.create({
-  text: {
-    fontSize: 28,
-    lineHeight: 32,
-    marginTop: -6,
-  },
-});
-
-export default withTheme(HelloWave);

package/components/Hoverable/Hoverable.tsx

@@ -1,110 +0,0 @@
-import React, { useState, ReactNode, cloneElement, isValidElement } from 'react';
-import { Platform, View } from 'react-native';
-
-interface HoverableProps {
-  children: ReactNode | ((isHovered: boolean) => ReactNode);
-  onHoverIn?: () => void;
-  onHoverOut?: () => void;
-  style?: any;
-  testID?: string;
-}
-
-const Hoverable: React.FC<HoverableProps> = ({ 
-  children, 
-  onHoverIn, 
-  onHoverOut, 
-  style,
-  testID
-}) => {
-  const [isHovered, setIsHovered] = useState(false);
-
-  const handleHoverIn = () => {
-    setIsHovered(true);
-    onHoverIn?.();
-  };
-
-  const handleHoverOut = () => {
-    setIsHovered(false);
-    onHoverOut?.();
-  };
-
-  const renderChildren = () => {
-    if (typeof children === 'function') {
-      return children(isHovered);
-    }
-    
-    if (isValidElement(children)) {
-      return cloneElement(children, { isHovered });
-    }
-    
-    return children;
-  };
-
-  // 检测 Web 环境 - 使用更可靠的方法
-  // 在React Native Web中，Platform.OS可能是'ios'或'android'，所以主要依赖window和document检测
-  const isWeb = Platform.OS === 'web' || 
-    (typeof window !== 'undefined' && typeof document !== 'undefined') ||
-    (typeof global !== 'undefined' && global.window && global.document) ||
-    // 额外的Web环境检测
-    (typeof navigator !== 'undefined' && navigator.product === 'ReactNative' && typeof window !== 'undefined');
-
-  // Web 环境使用 onMouseEnter 和 onMouseLeave
-  if (isWeb) {
-    return (
-      <div
-        style={style}
-        onMouseEnter={handleHoverIn}
-        onMouseLeave={handleHoverOut}
-        data-testid={testID}
-      >
-        {renderChildren()}
-      </div>
-    );
-  }
-
-  // 检测是否为真正的移动端环境（非 Web）
-  // 在React Native Web中，Platform.OS可能是'ios'或'android'，所以需要额外检查
-  const isNativeMobile = Platform.OS === 'ios' || Platform.OS === 'android';
-  const isNotWeb = !isWeb && isNativeMobile && typeof window === 'undefined';
-
-  // 只有在确认是移动端且非 Web 环境时才尝试使用 react-native-hoverable
-  if (isNotWeb) {
-    try {
-      // 使用动态导入来避免Webpack静态分析
-      const loadNativeHoverable = () => {
-        try {
-          const moduleName = 'react-native-hoverable';
-          return eval(`require('${moduleName}')`).default;
-        } catch {
-          return null;
-        }
-      };
-      
-      const HoverableNative = loadNativeHoverable();
-      
-      if (HoverableNative) {
-        return (
-          <HoverableNative
-            onHoverIn={handleHoverIn}
-            onHoverOut={handleHoverOut}
-            style={style}
-            testID={testID}
-          >
-            {renderChildren()}
-          </HoverableNative>
-        );
-      }
-    } catch (error) {
-      // 如果 react-native-hoverable 不可用，使用简单的 View 作为降级
-    }
-  }
-
-  // 其他环境（包括 Web 但检测失败的情况）使用 View 作为降级
-  return (
-    <View style={style} testID={testID}>
-      {renderChildren()}
-    </View>
-  );
-};
-
-export default Hoverable;

package/components/IconText/IconText.tsx

@@ -1,132 +0,0 @@
-import React from 'react';
-import {ViewStyle, StyleProp, View, Text, TouchableOpacity, TextStyle} from 'react-native';
-import {makeStyles, withTheme, useTheme} from '@rneui/themed';
-import TapasIcon from '../Icons/TapasIcon';
-
-export interface IconTextProps {
-  title: string;
-  icon?: string;
-  index?: number;
-  type?: 'text' | 'label';
-  size?: 'small' | 'medium' | 'large';
-  style?: StyleProp<ViewStyle>;
-  titleStyle?: StyleProp<TextStyle>;
-  maxWidth?: number;
-  numberOfLines?: number;
-  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
-  onPress?: () => void;
-  onLayout?: (e: any) => void;
-  iconColor?: string;
-  backgroundColor?: string;
-}
-
-const IconText: React.FC<IconTextProps> = ({
-  onPress,
-  type = 'text',
-  title,
-  index,
-  icon,
-  style,
-  titleStyle,
-  onLayout,
-  iconColor,
-  backgroundColor,
-  size = 'medium',
-  ...props
-}) => {
-  const theme = useTheme();
-  const styles = useStyles({ size, backgroundColor });
-
-  const content = (
-    <View key={index} style={[styles.labelIconContainer, style]}>
-      {icon && (
-        <TapasIcon 
-          name={icon} 
-          style={styles.labelIcon} 
-          size={16}
-          color={iconColor || theme.theme.colors.secondary}
-        />
-      )}
-      <Text
-        style={[styles.labelTitle, titleStyle]}
-        {...props}
-        onLayout={(e) => onLayout && onLayout(e)}
-      >
-        {title}
-      </Text>
-    </View>
-  );
-
-  if (type === 'text') {
-    return (
-      <View style={[styles.container, style]}>
-        {content}
-      </View>
-    );
-  }
-
-  return (
-    <TouchableOpacity onPress={onPress}>
-      {content}
-    </TouchableOpacity>
-  );
-};
-
-const useStyles = makeStyles((theme, props?: { size?: string, backgroundColor?: string }) => {
-  const { size = 'medium', backgroundColor } = props || {};
-  let fontSize = theme.fonts?.sizeM || 16;
-  let iconSize = 16;
-  let pdh = 4;
-  let pdv = 4;
-
-  switch (size) {
-    case 'small':
-      fontSize = theme.fonts?.sizeXs || 12;
-      iconSize = 12;
-      pdv = 2;
-      break;
-    case 'medium':
-      fontSize = theme.fonts?.sizeS || 14;
-      iconSize = 16;
-      break;
-    case 'large':
-      fontSize = theme.fonts?.sizeM || 16;
-      iconSize = 20;
-      pdh = 8;
-      pdv = 8;
-      break;
-  }
-
-  return {
-    container: {
-      marginTop: 4,
-      marginRight: 8,
-      width: 'auto',
-      paddingHorizontal: 4,
-      paddingVertical: 2,
-      backgroundColor: backgroundColor || theme.colors.grey5,
-      color: theme.colors.grey1,
-      borderRadius: 4,
-    },
-    labelIconContainer: {
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-      paddingVertical: pdv,
-      paddingHorizontal: pdh,
-      marginBottom: 8,
-    },
-    labelIcon: {
-      marginRight: 4,
-      width: iconSize,
-      height: iconSize,
-    },
-    labelTitle: {
-      fontSize: fontSize,
-      letterSpacing: 0.1,
-      color: theme.colors.grey1,
-    },
-  };
-});
-
-export default withTheme(IconText);

package/components/Icons/TapasIcon.tsx

@@ -1,159 +0,0 @@
-import React, { useMemo } from 'react';
-import { Text } from 'react-native';
-import { withTheme, IconProps, makeStyles } from '@rneui/themed';
-
-// 导入图标映射
-import iconMapping from './real-icon-mapping.json';
-
-export interface TapasIconProps extends Omit<IconProps, 'name'> {
-  /** 图标名称 */
-  name: string;
-  /** 图标大小 */
-  size?: number;
-  /** 图标颜色 */
-  color?: string;
-  /** 是否禁用 */
-  disabled?: boolean;
-  /** 自定义样式 */
-  style?: any;
-  /** 点击事件 */
-  onPress?: () => void;
-}
-
-const useStyles = makeStyles(() => ({
-  icon: {
-    fontFamily: 'icomoon',
-    textAlign: 'center',
-    includeFontPadding: false,
-    textAlignVertical: 'center',
-  },
-  disabled: {
-    opacity: 0.5,
-  },
-}));
-
-/**
- * TapasIcon - 优雅的图标组件
- * 
- * 特性：
- * 1. 自动字体加载检测
- * 2. 优雅的降级处理
- * 3. 完整的TypeScript支持
- * 4. 跨平台兼容
- * 5. 主题集成
- */
-const TapasIcon: React.FC<TapasIconProps> = ({
-  name,
-  size = 24,
-  color,
-  disabled = false,
-  style,
-  onPress,
-  ...props
-}) => {
-  const styles = useStyles(props);
-  
-  // 获取图标信息
-  const iconInfo = useMemo(() => {
-    return iconMapping[name as keyof typeof iconMapping];
-  }, [name]);
-  
-  // 获取图标字符
-  const iconChar = useMemo(() => {
-    if (iconInfo) {
-      // 如果有图标信息，使用Unicode字符
-      if (iconInfo.unicode) {
-        return String.fromCodePoint(iconInfo.unicode);
-      }
-      // 如果有char字段，使用char
-      if (iconInfo.char) {
-        return iconInfo.char;
-      }
-    }
-    // 如果图标映射中没有找到或没有有效数据，使用备用图标
-    return getFallbackIcon(name);
-  }, [iconInfo, name]);
-  
-  // 获取图标颜色
-  const iconColor = useMemo(() => {
-    if (disabled) return '#999';
-    if (color) return color;
-    return '#000';
-  }, [color, disabled]);
-  
-  // 字体检测逻辑已简化，直接假设字体可用
-  // 这样可以避免复杂的检测逻辑导致的显示问题
-  
-  return (
-    <Text
-      style={[
-        styles.icon,
-        { fontSize: size, color: iconColor },
-        disabled && styles.disabled,
-        style,
-      ]}
-      onPress={onPress}
-      {...props}
-    >
-      {iconChar}
-    </Text>
-  );
-};
-
-/**
- * 获取备用图标
- * 当字体加载失败或图标不存在时使用
- */
-function getFallbackIcon(name: string): string {
-  // 首先尝试从映射中获取
-  const iconInfo = iconMapping[name as keyof typeof iconMapping];
-  if (iconInfo && iconInfo.char) {
-    return iconInfo.char;
-  }
-  
-  // 备用图标映射
-  const fallbackMap: { [key: string]: string } = {
-    // 导航类
-    'back': '←',
-    'home': '🏠',
-    'search': '🔍',
-    'settings': '⚙️',
-    
-    // 食物类
-    'seafood': '🐟',
-    'ingredients': '🥬',
-    'victuals': '🍖',
-    'toast': '🍞',
-    'milk': '🥛',
-    'pie': '🥧',
-    
-    // 功能类
-    'add': '➕',
-    'edit': '✏️',
-    'delete': '🗑️',
-    'close': '✕',
-    'check': '✓',
-    
-    // 状态类
-    'loading': '⏳',
-    'error': '❌',
-    'warning': '⚠️',
-    'info': 'ℹ️',
-    
-    // 业务类
-    'store': '🏪',
-    'warehouse': '🏭',
-    'shipping': '📦',
-    'order': '📋',
-    'user': '👤',
-    
-    // 默认
-    'default': '❓'
-  };
-  
-  const iconName = name as keyof typeof fallbackMap;
-  const fallbackIcon = fallbackMap[iconName];
-  return fallbackIcon ?? fallbackMap['default']!;
-}
-
-export default withTheme(TapasIcon);