@beppla/tapas-ui 1.4.14 → 1.4.15

package/components/Icons/TapasIconExpo.tsx

@@ -0,0 +1,115 @@
+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 TapasIconExpoProps extends Omit<IconProps, 'name'> {
+  /** 图标名称 */
+  name: string;
+  /** 图标大小 */
+  size?: number;
+  /** 图标颜色 */
+  color?: string;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 自定义样式 */
+  style?: any;
+  /** 点击事件 */
+  onPress?: () => void;
+  /** 是否显示加载状态 */
+  showLoading?: boolean;
+}
+
+const useStyles = makeStyles(() => ({
+  icon: {
+    fontFamily: 'customfont',
+    textAlign: 'center',
+    includeFontPadding: false,
+    textAlignVertical: 'center',
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  loading: {
+    opacity: 0.3,
+  },
+}));
+
+const TapasIconExpo: React.FC<TapasIconExpoProps> = ({
+  name,
+  size = 24,
+  color,
+  disabled = false,
+  style,
+  onPress,
+  showLoading = true,
+  ...props
+}) => {
+  const styles = useStyles(props);
+
+  // 在 Expo 应用中，字体通常已经预加载
+  // 这里假设字体已经可用，实际使用时需要配合 expo-font 使用
+
+  const iconInfo = useMemo(() => {
+    return iconMapping[name as keyof typeof iconMapping];
+  }, [name]);
+
+  const iconChar = useMemo(() => {
+    if (iconInfo) {
+      if (iconInfo.unicode) {
+        return String.fromCodePoint(iconInfo.unicode);
+      }
+      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]);
+
+  // 在组件库环境中，直接渲染图标
+  // 在 Expo 应用中，需要配合 expo-font 使用
+
+  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(TapasIconExpo);

package/components/Icons/expoFontLoader.ts

@@ -0,0 +1,203 @@
+import React from 'react';
+import { Platform } from 'react-native';
+
+/**
+ * Expo 字体加载器
+ * 专为 Expo React Native 应用设计
+ */
+class ExpoFontLoader {
+  private static instance: ExpoFontLoader;
+  private fontsLoaded = false;
+  private loading = false;
+  private listeners: Array<() => void> = [];
+
+  private constructor() {
+    this.init();
+  }
+
+  static getInstance(): ExpoFontLoader {
+    if (!ExpoFontLoader.instance) {
+      ExpoFontLoader.instance = new ExpoFontLoader();
+    }
+    return ExpoFontLoader.instance;
+  }
+
+  /**
+   * 初始化字体加载器
+   */
+  private async init() {
+    if (Platform.OS === 'web') {
+      // Web 环境使用 CSS @font-face
+      this.loadWebFont();
+      return;
+    }
+
+    // React Native 环境使用 expo-font
+    try {
+      await this.loadNativeFont();
+    } catch (error) {
+      console.warn('字体加载失败，将使用备用图标:', error);
+    }
+  }
+
+  /**
+   * 在 React Native 环境中加载字体
+   */
+  private async loadNativeFont(): Promise<void> {
+    this.loading = true;
+
+    try {
+      // 注意：在组件库中，我们不直接加载字体
+      // 字体应该由使用组件库的应用来加载
+      // 这里只是检查字体是否已经可用
+      console.log('TapasIcon: 字体加载应由应用端处理，请确保在应用中加载 customfont 字体');
+      
+      // 假设字体已经由应用加载
+      this.fontsLoaded = true;
+      this.loading = false;
+      this.notifyListeners();
+    } catch (error) {
+      this.loading = false;
+      console.warn('TapasIcon: 字体检查失败，将使用备用图标:', error);
+      // 即使失败也标记为已加载，使用备用图标
+      this.fontsLoaded = true;
+      this.notifyListeners();
+    }
+  }
+
+  /**
+   * 在 Web 环境中加载字体
+   */
+  private loadWebFont(): void {
+    if (Platform.OS !== 'web') return;
+
+    // 检查 Web 环境是否可用
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+      console.warn('Web环境不可用，跳过字体加载');
+      this.fontsLoaded = true;
+      this.notifyListeners();
+      return;
+    }
+
+    try {
+      // 检查字体是否已经加载
+      if (document.fonts && document.fonts.check('1em customfont')) {
+        this.fontsLoaded = true;
+        this.notifyListeners();
+        return;
+      }
+
+      // 使用 CSS @font-face 加载字体
+      const style = document.createElement('style');
+      style.textContent = `
+        @font-face {
+          font-family: 'customfont';
+          src: url('/assets/fonts/customfont.ttf') format('truetype');
+          font-weight: normal;
+          font-style: normal;
+          font-display: swap;
+        }
+      `;
+      document.head.appendChild(style);
+
+      // 监听字体加载完成
+      if (document.fonts && document.fonts.ready) {
+        document.fonts.ready.then(() => {
+          this.fontsLoaded = true;
+          this.notifyListeners();
+          console.log('字体加载成功 (Web)');
+        }).catch((error) => {
+          console.warn('字体加载失败，将使用备用图标:', error);
+          this.fontsLoaded = true;
+          this.notifyListeners();
+        });
+      } else {
+        // 降级处理
+        setTimeout(() => {
+          this.fontsLoaded = true;
+          this.notifyListeners();
+        }, 1000);
+      }
+    } catch (error) {
+      console.warn('Web字体加载过程中出错，将使用备用图标:', error);
+      this.fontsLoaded = true;
+      this.notifyListeners();
+    }
+  }
+
+  /**
+   * 添加字体加载完成监听器
+   */
+  addListener(listener: () => void): () => void {
+    this.listeners.push(listener);
+    
+    // 如果字体已经加载，立即调用监听器
+    if (this.fontsLoaded) {
+      listener();
+    }
+
+    // 返回取消监听的函数
+    return () => {
+      const index = this.listeners.indexOf(listener);
+      if (index > -1) {
+        this.listeners.splice(index, 1);
+      }
+    };
+  }
+
+  /**
+   * 通知所有监听器
+   */
+  private notifyListeners() {
+    this.listeners.forEach(listener => {
+      try {
+        listener();
+      } catch (error) {
+        console.warn('字体加载监听器执行失败:', error);
+      }
+    });
+  }
+
+  /**
+   * 检查字体是否已加载
+   */
+  isFontLoaded(): boolean {
+    return this.fontsLoaded;
+  }
+
+  /**
+   * 检查是否正在加载
+   */
+  isLoading(): boolean {
+    return this.loading;
+  }
+
+  /**
+   * 重新加载字体
+   */
+  async reload(): Promise<void> {
+    this.fontsLoaded = false;
+    this.loading = false;
+    await this.init();
+  }
+}
+
+export const expoFontLoader = ExpoFontLoader.getInstance();
+
+/**
+ * Expo 字体加载 Hook
+ */
+export function useExpoFontLoader() {
+  const [fontsLoaded, setFontsLoaded] = React.useState(expoFontLoader.isFontLoaded());
+  const [loading, setLoading] = React.useState(expoFontLoader.isLoading());
+
+  React.useEffect(() => {
+    const unsubscribe = expoFontLoader.addListener(() => {
+      setFontsLoaded(true);
+      setLoading(false);
+    });
+    return unsubscribe;
+  }, []);
+
+  return { fontsLoaded, loading };
+}

package/components/Icons/fontLoader.ts

@@ -0,0 +1,247 @@
+import React from 'react';
+import { Platform } from 'react-native';
+
+/**
+ * 简化的字体加载器
+ * 负责在Web环境中加载字体文件
+ */
+class FontLoader {
+  private static instance: FontLoader;
+  private fontsLoaded = false;
+  private loading = false;
+  private listeners: Array<() => void> = [];
+
+  private constructor() {
+    this.init();
+  }
+
+  static getInstance(): FontLoader {
+    if (!FontLoader.instance) {
+      FontLoader.instance = new FontLoader();
+    }
+    return FontLoader.instance;
+  }
+
+  /**
+   * 初始化字体加载器
+   */
+  private async init() {
+    if (Platform.OS !== 'web') {
+      this.fontsLoaded = true;
+      this.notifyListeners();
+      return;
+    }
+
+    try {
+      await this.loadWebFont();
+    } catch (error) {
+      console.warn('字体加载失败，将使用备用图标:', error);
+    }
+  }
+
+  /**
+   * 在Web环境中加载字体
+   */
+  private async loadWebFont(): Promise<void> {
+    // 检查 Web 环境是否可用
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+      console.warn('Web环境不可用，跳过字体加载');
+      this.fontsLoaded = true;
+      this.notifyListeners();
+      return;
+    }
+
+    const doc = document;
+
+    // 检查字体是否已经加载
+    if (doc.fonts && doc.fonts.check('1em customfont')) {
+      this.fontsLoaded = true;
+      this.notifyListeners();
+      return;
+    }
+
+    this.loading = true;
+
+    try {
+      // 检查FontFace API是否可用
+      if (typeof FontFace !== 'undefined') {
+        // 尝试多个字体路径
+        const fontPaths = [
+          '/assets/fonts/customfont.ttf',
+          './assets/fonts/customfont.ttf',
+          '../assets/fonts/customfont.ttf',
+          '/customfont.ttf'
+        ];
+
+        let fontLoaded = false;
+        for (const path of fontPaths) {
+          try {
+            const font = new FontFace('customfont', `url(${path})`);
+            await font.load();
+            doc.fonts.add(font);
+            fontLoaded = true;
+            console.log(`字体加载成功: ${path}`);
+            break;
+          } catch (error) {
+            console.warn(`字体路径加载失败: ${path}`, error);
+            continue;
+          }
+        }
+
+        if (fontLoaded) {
+          // 等待字体完全加载
+          await this.waitForFontLoad(doc);
+          this.fontsLoaded = true;
+          this.notifyListeners();
+        } else {
+          throw new Error('所有字体路径都加载失败');
+        }
+      } else {
+        // FontFace API 不可用，使用 CSS @font-face 方式
+        console.warn('FontFace API不可用，使用CSS方式加载字体');
+        this.loadFontWithCSS(doc);
+      }
+      
+    } catch (error) {
+      console.warn('字体加载失败，将使用备用图标:', error);
+      this.fontsLoaded = true;
+      this.notifyListeners();
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  /**
+   * 使用 CSS @font-face 加载字体
+   */
+  private loadFontWithCSS(doc: Document): void {
+    try {
+      const style = doc.createElement('style');
+      style.textContent = `
+        @font-face {
+          font-family: 'customfont';
+          src: url('/assets/fonts/customfont.ttf') format('truetype');
+          font-weight: normal;
+          font-style: normal;
+          font-display: swap;
+        }
+      `;
+      doc.head.appendChild(style);
+
+      // 监听字体加载完成
+      if (doc.fonts && doc.fonts.ready) {
+        doc.fonts.ready.then(() => {
+          this.fontsLoaded = true;
+          this.notifyListeners();
+          console.log('字体加载成功 (CSS方式)');
+        }).catch((error) => {
+          console.warn('CSS字体加载失败，将使用备用图标:', error);
+          this.fontsLoaded = true;
+          this.notifyListeners();
+        });
+      } else {
+        // 降级处理
+        setTimeout(() => {
+          this.fontsLoaded = true;
+          this.notifyListeners();
+        }, 1000);
+      }
+    } catch (error) {
+      console.warn('CSS字体加载过程中出错，将使用备用图标:', error);
+      this.fontsLoaded = true;
+      this.notifyListeners();
+    }
+  }
+
+  /**
+   * 等待字体完全加载
+   */
+  private async waitForFontLoad(doc: Document): Promise<void> {
+    if (!doc.fonts || !doc.fonts.ready) {
+      return;
+    }
+
+    try {
+      await doc.fonts.ready;
+    } catch (error) {
+      console.warn('等待字体加载时出错:', error);
+    }
+  }
+
+  /**
+   * 添加字体加载状态监听器
+   */
+  addListener(listener: () => void): () => void {
+    this.listeners.push(listener);
+    
+    // 如果字体已经加载，立即通知
+    if (this.fontsLoaded) {
+      listener();
+    }
+
+    // 返回取消监听的函数
+    return () => {
+      const index = this.listeners.indexOf(listener);
+      if (index > -1) {
+        this.listeners.splice(index, 1);
+      }
+    };
+  }
+
+  /**
+   * 通知所有监听器
+   */
+  private notifyListeners() {
+    this.listeners.forEach(listener => {
+      try {
+        listener();
+      } catch (error) {
+        console.warn('字体加载监听器执行失败:', error);
+      }
+    });
+  }
+
+  /**
+   * 检查字体是否已加载
+   */
+  isFontLoaded(): boolean {
+    return this.fontsLoaded;
+  }
+
+  /**
+   * 检查是否正在加载
+   */
+  isLoading(): boolean {
+    return this.loading;
+  }
+
+  /**
+   * 强制重新加载字体
+   */
+  async reload(): Promise<void> {
+    this.fontsLoaded = false;
+    this.loading = false;
+    this.listeners = [];
+    await this.init();
+  }
+}
+
+// 导出单例实例
+export const fontLoader = FontLoader.getInstance();
+
+// 导出Hook
+export function useFontLoader() {
+  const [fontsLoaded, setFontsLoaded] = React.useState(fontLoader.isFontLoaded());
+  const [loading, setLoading] = React.useState(fontLoader.isLoading());
+
+  React.useEffect(() => {
+    const unsubscribe = fontLoader.addListener(() => {
+      setFontsLoaded(true);
+      setLoading(false);
+    });
+
+    return unsubscribe;
+  }, []);
+
+  return { fontsLoaded, loading };
+}

package/components/Icons/index.tsx

@@ -0,0 +1,19 @@
+// 导出图标组件
+export { default as TapasIcon } from './TapasIcon';
+export type { TapasIconProps } from './TapasIcon';
+export { default as TapasIconExpo } from './TapasIconExpo';
+export type { TapasIconExpoProps } from './TapasIconExpo';
+
+// 导出字体加载器
+export { fontLoader, useFontLoader } from './fontLoader';
+export { expoFontLoader, useExpoFontLoader } from './expoFontLoader';
+export { smartFontLoader, useSmartFontLoader } from './smartFontLoader';
+
+// 重新导出类型
+export interface IconProps {
+  name: string;
+  size?: number;
+  color?: string;
+  style?: any;
+  onPress?: () => void;
+}