@beppla/tapas-ui 1.4.14 → 1.4.15

package/components/Header/Header.tsx

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

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

@@ -0,0 +1,65 @@
+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 环境使用 div 元素
+  if (Platform.OS === 'web') {
+    return (
+      <div
+        style={style}
+        onMouseEnter={handleHoverIn}
+        onMouseLeave={handleHoverOut}
+        data-testid={testID}
+      >
+        {renderChildren()}
+      </div>
+    );
+  }
+
+  // 移动端使用 View
+  return (
+    <View style={style} testID={testID}>
+      {renderChildren()}
+    </View>
+  );
+};
+
+export default Hoverable;

package/components/IconText/IconText.tsx

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

@@ -0,0 +1,160 @@
+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: 'customfont',
+    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': '⚙️',
+    'vector': '📊',
+    
+    // 食物类
+    '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);