@beppla/tapas-ui 1.4.15 → 1.4.17

package/components/Icons/TapasIconExpo.tsx

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

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

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

@@ -1,19 +0,0 @@
-// 导出图标组件
-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;
-}