@beppla/tapas-ui 1.4.34 → 1.5.0

package/components/Icons/smartFontLoader.ts

@@ -1,318 +0,0 @@
-import React from 'react';
-import { Platform } from 'react-native';
-
-/**
- * 智能字体加载器
- * 自动检测环境并选择合适的字体加载策略
- */
-class SmartFontLoader {
-  private static instance: SmartFontLoader;
-  private fontsLoaded = false;
-  private loading = false;
-  private listeners: Array<() => void> = [];
-  private fontPaths: string[] = [];
-
-  private constructor() {
-    this.initFontPaths();
-    this.init();
-  }
-
-  static getInstance(): SmartFontLoader {
-    if (!SmartFontLoader.instance) {
-      SmartFontLoader.instance = new SmartFontLoader();
-    }
-    return SmartFontLoader.instance;
-  }
-
-  /**
-   * 初始化字体路径列表
-   * 根据不同的构建环境提供多个可能的路径
-   */
-  private initFontPaths() {
-    if (Platform.OS === 'web') {
-      // Web 环境的可能路径
-      this.fontPaths = [
-        // Storybook 环境
-        '/assets/fonts/customfont.ttf',
-        // 开发环境
-        './assets/fonts/customfont.ttf',
-        '../assets/fonts/customfont.ttf',
-        // 生产环境
-        '/static/media/customfont.ttf',
-        '/static/media/customfont.[hash].ttf',
-        // 相对路径
-        'assets/fonts/customfont.ttf',
-        // 绝对路径
-        '/customfont.ttf'
-      ];
-    } else {
-      // React Native 环境 - 组件库不直接加载字体
-      // 字体应该由使用组件库的应用来加载
-      this.fontPaths = [];
-    }
-  }
-
-  /**
-   * 初始化字体加载器
-   */
-  private async init() {
-    if (Platform.OS !== 'web') {
-      // React Native 环境，组件库不直接加载字体
-      // 字体应该由使用组件库的应用来加载
-      console.log('TapasIcon: 字体加载应由应用端处理，请确保在应用中加载 customfont 字体');
-      this.fontsLoaded = true;
-      this.notifyListeners();
-      return;
-    }
-
-    try {
-      await this.loadWebFont();
-    } catch (error) {
-      console.warn('字体加载失败，将使用备用图标:', error);
-      // 即使失败也标记为已加载，使用备用图标
-      this.fontsLoaded = true;
-      this.notifyListeners();
-    }
-  }
-
-  /**
-   * 在 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 {
-      let fontLoaded = false;
-      
-      // 检查FontFace API是否可用
-      if (typeof FontFace !== 'undefined') {
-        // 尝试所有可能的字体路径
-        for (const path of this.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;
-          }
-        }
-      } else {
-        console.warn('FontFace API不可用，使用CSS方式加载字体');
-        this.loadFontWithCSS(doc);
-        return;
-      }
-
-      if (!fontLoaded) {
-        // 如果所有路径都失败，尝试动态检测
-        await this.detectAndLoadFont(doc);
-      }
-
-      // 等待字体完全加载
-      await this.waitForFontLoad(doc);
-      
-      this.fontsLoaded = true;
-      this.loading = false;
-      this.notifyListeners();
-    } catch (error) {
-      this.loading = false;
-      throw error;
-    }
-  }
-
-  /**
-   * 动态检测并加载字体
-   */
-  private async detectAndLoadFont(doc: any): Promise<void> {
-    // 尝试从已加载的样式中检测字体路径
-    const stylesheets = doc.styleSheets;
-    for (let i = 0; i < stylesheets.length; i++) {
-      try {
-        const rules = stylesheets[i].cssRules || stylesheets[i].rules;
-        for (let j = 0; j < rules.length; j++) {
-          const rule = rules[j];
-          if (rule.type === CSSRule.FONT_FACE_RULE) {
-            const src = rule.style.getPropertyValue('src');
-            if (src && src.includes('customfont')) {
-              // 提取字体URL
-              const urlMatch = src.match(/url\(['"]?([^'"]+)['"]?\)/);
-              if (urlMatch) {
-                const fontUrl = urlMatch[1];
-                const FontFace = (globalThis as any).FontFace;
-                const font = new FontFace('customfont', `url(${fontUrl})`);
-                await font.load();
-                doc.fonts.add(font);
-                console.log(`动态检测字体加载成功: ${fontUrl}`);
-                return;
-              }
-            }
-          }
-        }
-      } catch (error) {
-        // 跨域或其他错误，继续尝试下一个
-        continue;
-      }
-    }
-    
-    throw new Error('无法找到可用的字体文件');
-  }
-
-  /**
-   * 等待字体完全加载
-   */
-  private async waitForFontLoad(doc: any): Promise<void> {
-    if (doc.fonts && doc.fonts.ready) {
-      await doc.fonts.ready;
-    } else {
-      // 降级处理，等待一段时间
-      await new Promise(resolve => setTimeout(resolve, 1000));
-    }
-  }
-
-  /**
-   * 添加字体加载完成监听器
-   */
-  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);
-      }
-    };
-  }
-
-  /**
-   * 使用 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 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();
-  }
-
-  /**
-   * 添加自定义字体路径
-   */
-  addFontPath(path: string) {
-    if (!this.fontPaths.includes(path)) {
-      this.fontPaths.unshift(path); // 添加到最前面，优先尝试
-    }
-  }
-}
-
-export const smartFontLoader = SmartFontLoader.getInstance();
-
-/**
- * 智能字体加载 Hook
- */
-export function useSmartFontLoader() {
-  const [fontsLoaded, setFontsLoaded] = React.useState(smartFontLoader.isFontLoaded());
-  const [loading, setLoading] = React.useState(smartFontLoader.isLoading());
-
-  React.useEffect(() => {
-    const unsubscribe = smartFontLoader.addListener(() => {
-      setFontsLoaded(true);
-      setLoading(false);
-    });
-    return unsubscribe;
-  }, []);
-
-  return { fontsLoaded, loading };
-}

package/components/Image/Image.tsx

@@ -1,157 +0,0 @@
-import React, { useEffect, useRef, useState, useCallback } from "react";
-import { View, StyleSheet, Image, Animated, ViewProps } from "react-native";
-import { withTheme, makeStyles, useTheme } from "@rneui/themed";
-import TapasIcon from "../Icons/TapasIcon";
-
-export interface TapasImageProps extends ViewProps {
-  uri: string;
-  width?: number;
-  height?: number;
-  loading?: boolean;
-  radius?: boolean;
-  radiusSize?: number;
-  icon?: string;
-  disabled?: boolean;
-  testID?: string;
-}
-
-export type LoadingStatus = "loading" | "failed" | "idle";
-
-const TapasImage: React.FC<TapasImageProps> = ({
-  uri,
-  width = 40,
-  height = 40,
-  radius = true,
-  icon,
-  style,
-  disabled = false,
-  radiusSize,
-  testID,
-}) => {
-  const theme = useTheme();
-  const styles = useStyles();
-  const opacity = useRef(new Animated.Value(0)).current;
-  const [loadingVal, setLoadingVal] = useState(true);
-  const [status, setStatus] = useState<LoadingStatus>("idle");
-
-  useEffect(() => {
-    if (!loadingVal) return;
-    
-    opacity.setValue(0);
-    Animated.loop(
-      Animated.sequence([
-        Animated.timing(opacity, {
-          toValue: 1,
-          duration: 800,
-          useNativeDriver: true,
-        }),
-        Animated.timing(opacity, {
-          toValue: 0.3,
-          duration: 800,
-          useNativeDriver: true,
-        }),
-      ])
-    ).start();
-  }, [loadingVal, opacity]);
-
-  const handleLoad = useCallback(() => {
-    if (uri) {
-      setLoadingVal(true);
-      setStatus("loading");
-    }
-  }, [uri]);
-
-  const handleLoadEnd = useCallback(() => {
-    setLoadingVal(false);
-  }, []);
-
-  const handleError = useCallback(() => {
-    if (uri) {
-      setLoadingVal(false);
-      setStatus("failed");
-    }
-  }, [uri]);
-
-  const containerStyle = [
-    styles.img_con,
-    style,
-    { width, height },
-    radius && { borderRadius: radiusSize ?? width / 2 },
-  ];
-
-  const placeholderStyle = [
-    styles.placeholder,
-    { opacity, zIndex: 10, width, height },
-    radius && { borderRadius: radiusSize ?? width / 2 },
-  ];
-
-  const failedStyle = [
-    styles.placeholder,
-    styles.failed,
-    { width, height },
-    radius && { borderRadius: radiusSize ?? width / 2 },
-  ];
-
-  const imageStyle = [
-    styles.img,
-    { width, height },
-    radius && { borderRadius: radiusSize ?? width / 2 },
-    disabled && { opacity: 0.5 },
-  ];
-
-  return (
-    <View style={containerStyle} testID={testID}>
-      {loadingVal && (
-        <Animated.View style={placeholderStyle}>
-          {icon && (
-            <TapasIcon
-              name={icon}
-              size={width * 0.5}
-              color={theme.theme.colors.grey2}
-            />
-          )}
-        </Animated.View>
-      )}
-      {status === "failed" && (
-        <View style={failedStyle}>
-          <TapasIcon
-            name={icon ?? "broken_image"}
-            size={width * 0.5}
-            color={theme.theme.colors.grey2}
-          />
-        </View>
-      )}
-      <Image
-        style={imageStyle}
-        onLoad={handleLoad}
-        source={{ uri }}
-        onLoadEnd={handleLoadEnd}
-        onError={handleError}
-      />
-    </View>
-  );
-};
-
-const useStyles = makeStyles((theme) => ({
-  img_con: {
-    position: "relative",
-    backgroundColor: theme?.colors?.background,
-  },
-  img: {
-    resizeMode: "cover",
-  },
-  placeholder: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: theme?.colors?.grey3,
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  failed: {
-    zIndex: 5,
-    backgroundColor: theme?.colors?.grey4,
-  },
-}));
-
-export default withTheme(TapasImage);

package/components/Image/PreviewImg.tsx

@@ -1,137 +0,0 @@
-import React, {useState} from 'react';
-import {View, TouchableOpacity} from 'react-native';
-import {Overlay, makeStyles, withTheme} from '@rneui/themed';
-import Icon from '../Icons/TapasIcon';
-
-export interface TapasPreviewProps {
-  isVisible?: boolean;
-  data: IFileState[];
-  defaultIndex?: number;
-  onClose: () => void;
-  onSelect?: (index: number) => void;
-}
-
-export interface IFileState {
-  fileId?: string;
-  fileName?: string;
-  fileUrl?: string;
-}
-
-const useStyles = makeStyles(() => {
-  return {
-    flx: {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center'
-    },
-    flxStart: {
-      alignItems: 'flex-start',
-      width: '100%'
-    },
-    container: {
-      backgroundColor: 'transparent',
-      padding: 0,
-      border: 0
-    },
-    bg: {
-      backgroundColor: 'rgba(0, 0, 0, 0.6)'
-    },
-    thumbnailWrapper: {
-      flexDirection: 'row',
-      marginTop: 16,
-      gap: 8
-    },
-    imgWrapper: {
-      width: 84,
-      height: 84,
-      borderWidth: 2,
-      borderRadius: 4
-    }
-  };
-});
-const PreviewImg: React.FC<TapasPreviewProps> = ({
-  isVisible = false,
-  data,
-  defaultIndex = 0,
-  ...props
-}) => {
-  const styles = useStyles(props);
-  const [visible, setVisible] = useState(isVisible);
-  const [currentIndex, setCurrentIndex] = React.useState<number>(defaultIndex);
-
-  const getIcon = (iconName: string, disabled?: boolean) => {
-    return disabled ? (
-      <Icon
-        size={24}
-        // @ts-ignore
-        color={props.theme.colors.colorInvertDisabledIcon}
-        name={iconName}
-      />
-    ) : (
-      <TouchableOpacity
-        onPress={() => {
-          if (iconName === 'chevron_left') {
-            setCurrentIndex(currentIndex - 1);
-          } else {
-            setCurrentIndex(currentIndex + 1);
-          }
-        }}
-      >
-        <Icon
-          size={24}
-          // @ts-ignore
-          color={props.theme.colors.colorInvertNormalIcon}
-          name={iconName}
-        />
-      </TouchableOpacity>
-    );
-  };
-  return (
-    <Overlay
-      isVisible={visible}
-      overlayStyle={[styles.flx, styles.container]}
-      backdropStyle={styles.bg}
-      onBackdropPress={() => {
-        setVisible(!visible);
-        props?.onClose && props.onClose();
-      }}
-    >
-      <TouchableOpacity
-        style={[styles.flx, styles.flxStart]}
-        onPress={() => {
-          props?.onClose && props.onClose();
-        }}
-      >
-        <Icon
-          size={40}
-          // @ts-ignore
-          color={props.theme.colors.colorInvertNormalIcon}
-          name="close"
-        />
-      </TouchableOpacity>
-      <img style={{height: window.innerHeight - 200}} src={data[currentIndex]?.fileUrl} />
-      <View style={[styles.flx, styles.thumbnailWrapper]}>
-        {data.length > 1 ? getIcon('chevron_left', currentIndex === 0) : null}
-        {data?.map((item, index) => {
-          return (
-            <TouchableOpacity
-              onPress={() => {
-                setCurrentIndex(index);
-              }}
-              style={[
-                styles.imgWrapper,
-                {borderColor: index === currentIndex ? '#F55523' : 'transparent'}
-              ]}
-            >
-              <img key={index} src={item?.fileUrl} />
-            </TouchableOpacity>
-          );
-        })}
-        {data.length > 1 ? getIcon('chevron_right', currentIndex === data.length - 1) : null}
-      </View>
-    </Overlay>
-  );
-};
-
-export default withTheme(PreviewImg);