@beppla/tapas-ui 1.4.13 → 1.4.15

package/components/Icons/smartFontLoader.ts

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

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

@@ -0,0 +1,137 @@
+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);