@unif/react-native-hms-scan 0.6.2 → 1.0.0

package/src/Scanner/ResultFocus/ResultFocus.tsx

@@ -0,0 +1,43 @@
+import { ScrollView, Text, View } from 'react-native';
+import {
+  Button,
+  Card,
+  useColors,
+  useThemedStyles,
+  r,
+} from '@unif/react-native-design';
+import type { ResultFocusProps } from './types';
+import { styles, makeStyles } from './styles';
+
+/** A raw result is selected here; interpreting it belongs to the consumer. */
+export function ResultFocus({
+  result,
+  bottomInset,
+  onRescan,
+  onConfirm,
+}: ResultFocusProps) {
+  const colors = useColors();
+  const themed = useThemedStyles(makeStyles);
+  return (
+    <View style={[styles.wrap, { bottom: bottomInset + r(18) }]}>
+      <Card
+        borderColor={colors.primary}
+        borderWidth={2}
+        borderRadius={r(16)}
+        padding={r(14)}
+      >
+        <Text style={themed.badge}>已识别</Text>
+        <Text style={themed.format}>{result.format}</Text>
+        <ScrollView style={styles.content}>
+          <Text selectable style={themed.value}>
+            {result.value}
+          </Text>
+        </ScrollView>
+        <View style={styles.actions}>
+          <Button label="重扫" variant="secondary" block onPress={onRescan} />
+          <Button label="选用" variant="primary" block onPress={onConfirm} />
+        </View>
+      </Card>
+    </View>
+  );
+}

package/src/Scanner/ResultFocus/styles.ts

@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native';
+import {
+  r,
+  rf,
+  fw,
+  fontMono,
+  type ColorTokens,
+} from '@unif/react-native-design';
+
+export const styles = StyleSheet.create({
+  wrap: { position: 'absolute', left: r(16), right: r(16), zIndex: 50 },
+  content: { maxHeight: r(220), marginVertical: r(14) },
+  actions: { flexDirection: 'row', columnGap: r(10) },
+});
+export const makeStyles = (colors: ColorTokens) =>
+  StyleSheet.create({
+    badge: { fontSize: rf(13), fontWeight: fw.semi, color: colors.foreground },
+    format: {
+      fontSize: rf(12),
+      color: colors.foregroundMuted,
+      fontFamily: fontMono,
+      marginTop: r(4),
+    },
+    value: { fontSize: rf(16), lineHeight: rf(21), color: colors.foreground },
+  });

package/src/Scanner/ResultFocus/types.ts

@@ -0,0 +1,8 @@
+import type { ScanResult } from '../../types';
+
+export interface ResultFocusProps {
+  result: Readonly<ScanResult>;
+  bottomInset: number;
+  onRescan(): void;
+  onConfirm(): void;
+}

package/src/Scanner/Scanner.tsx

@@ -1,437 +1,19 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { AppState, Linking, StyleSheet, View } from 'react-native';
-import { HmsScanView } from '../HmsScanView';
-import { decodeImage } from '../decodeImage';
+import { useContext } from 'react';
 import {
-  getCameraPermissionStatus,
-  requestCameraPermission,
-} from '../permissions';
-import type {
-  BarcodeFormat,
-  ScanError,
-  ScanProduct,
-  ScanResult,
-} from '../types';
-import { scanChrome } from './scanChrome';
-import { Viewfinder } from './Viewfinder';
-import { ScanTopBar } from './ScanTopBar';
-import { ScanToolbar } from './ScanToolbar';
-import { ResultFocus } from './ResultFocus';
-import { ResultFail } from './ResultFail';
-import { DeniedOverlay } from './DeniedOverlay';
-import { ScanErrorOverlay } from './ScanErrorOverlay';
+  SafeAreaInsetsContext,
+  SafeAreaProvider,
+} from 'react-native-safe-area-context';
+import { ScannerInner } from './ScannerInner';
+import type { ScannerProps } from './types';
 
-// 'done':autoConfirm 自动回调后的终态——相机暂停、不出卡片、不自动重扫(宿主通常已导航离开)。
-type Phase =
-  | 'init'
-  | 'scan'
-  | 'detecting'
-  | 'success'
-  | 'fail'
-  | 'denied'
-  | 'error'
-  | 'done';
-
-const VF_SIZE = 256;
-const DEFAULT_HINT = '将条码 / 二维码放入框内，自动扫描';
-
-function toScanError(error: unknown, fallbackMessage: string): ScanError {
-  if (error && typeof error === 'object') {
-    const native = error as { code?: unknown; message?: unknown };
-    return {
-      code: typeof native.code === 'string' ? native.code : 'E_UNKNOWN',
-      message:
-        typeof native.message === 'string' ? native.message : fallbackMessage,
-    };
-  }
-  return { code: 'E_UNKNOWN', message: fallbackMessage };
-}
-
-export interface ScannerProps {
-  /** 顶栏标题，默认 "扫一扫"。 */
-  title?: string;
-  /** 限定识别码制；不传 = 全部。 */
-  formats?: readonly BarcodeFormat[];
-  /** 取景态提示文案。 */
-  hintText?: string;
-  /** 顶部安全区（默认 54）。用 react-native-safe-area-context 时可传 insets.top。 */
-  topInset?: number;
-  /** 底部安全区（默认 34）。 */
-  bottomInset?: number;
-  /** 是否显示手电筒按钮，默认 true。手电由库内自管（Android 可用；iOS 为 best-effort，可在 iOS 上关掉）。 */
-  showTorch?: boolean;
-  /** 返回回调（退出扫码页，回到上一级）；按钮在底部工具栏，与手电筒并排。 */
-  onClose?: () => void;
-  /** 扫码相机或权限检查出错时上报。 */
-  onScanError?: (error: ScanError) => void;
-  /**
-   * 扫到条码后由宿主解析商品信息（用于浮层确认卡）。
-   * 返回 null/undefined 视为"未识别"，抛错亦然。不传则默认用扫到的原文当商品名。
-   */
-  resolveProduct?: (
-    result: ScanResult
-  ) => ScanProduct | null | undefined | Promise<ScanProduct | null | undefined>;
-  /** 用户点"确认"：把结果带回上一级（宿主通常在此导航返回）。 */
-  onConfirm?: (product: ScanProduct, result: ScanResult) => void;
-  /**
-   * 自动确认：传 `onConfirm` 时，扫到并解析成功后**不显示结果卡**，直接触发
-   * `onConfirm(product, result)`；未传回调时仍显示结果卡。默认 `false`（显示结果卡，
-   * 由用户点"确定"）。
-   * 适合"扫到即用、不需要二次确认"的场景。回调后相机暂停、不自动重扫——宿主通常在
-   * `onConfirm` 里导航离开；若需再扫由宿主控制（如重新挂载 `<Scanner>`）。
-   * 注：未识别（`resolveProduct` 返回 `null`/抛错）仍走失败态可重扫，不会误触发。
-   */
-  autoConfirm?: boolean;
-  /**
-   * 点"相册"：宿主用自己的图片选择器选图并返回本地 uri（取消则返回 null）。
-   * 库不内置图片选择器（遵循 RN 惯例）：**传了才显示相册按钮**，不传则隐藏。
-   */
-  pickImage?: () => Promise<string | null>;
-}
-
-/**
- * 成品「扫一扫」界面（聚焦款）。底层 <HmsScanView> 出相机画面，取景框 / 工具栏 / 结果卡
- * 全用 @unif/react-native-design 的主题令牌与组件绘制（统一风格），继承宿主主题与字号。
- * 无外层 ThemeProvider 时采用 Design 默认主题。
- */
+/** Uses the current window's SafeAreaProvider, or measures a local one. */
 export function Scanner(props: ScannerProps) {
-  return <ScannerInner {...props} />;
-}
-
-function ScannerInner({
-  title = '扫一扫',
-  formats,
-  hintText = DEFAULT_HINT,
-  topInset = 54,
-  bottomInset = 34,
-  showTorch = true,
-  onClose,
-  resolveProduct,
-  onConfirm,
-  autoConfirm = false,
-  pickImage,
-  onScanError,
-}: ScannerProps) {
-  const [phase, setPhase] = useState<Phase>('init');
-  const [torch, setTorch] = useState(false);
-  const [product, setProduct] = useState<ScanProduct | null>(null);
-  const [detectMs, setDetectMs] = useState(0);
-  const [scanSession, setScanSession] = useState(0);
-
-  const handlingRef = useRef(false);
-  const acceptingResultsRef = useRef(false);
-  const scanSessionRef = useRef(0);
-  const detectStartRef = useRef(0);
-  const lastResultRef = useRef<ScanResult | null>(null);
-  const mountedRef = useRef(true);
-  const permissionRunRef = useRef(0);
-  const processingRunRef = useRef(0);
-  const waitingForSettingsRef = useRef(false);
-  const onScanErrorRef = useRef(onScanError);
-  onScanErrorRef.current = onScanError;
-
-  const invalidateProcessing = useCallback(() => {
-    ++processingRunRef.current;
-  }, []);
-
-  const invalidateScanSession = useCallback(() => {
-    ++scanSessionRef.current;
-    acceptingResultsRef.current = false;
-  }, []);
-
-  const enterScan = useCallback(() => {
-    invalidateProcessing();
-    handlingRef.current = false;
-    const sessionId = ++scanSessionRef.current;
-    acceptingResultsRef.current = true;
-    setScanSession(sessionId);
-    setProduct(null);
-    lastResultRef.current = null;
-    setPhase('scan');
-  }, [invalidateProcessing]);
-
-  const enterDenied = useCallback(() => {
-    ++permissionRunRef.current;
-    invalidateProcessing();
-    invalidateScanSession();
-    setProduct(null);
-    setPhase('denied');
-  }, [invalidateProcessing, invalidateScanSession]);
-
-  const reportFatalError = useCallback(
-    (error: ScanError) => {
-      // fatal 后不允许已在途的权限检查或扫码 / 相册处理链覆盖 error phase。
-      ++permissionRunRef.current;
-      invalidateProcessing();
-      invalidateScanSession();
-      setProduct(null);
-      setPhase('error');
-      onScanErrorRef.current?.(error);
-    },
-    [invalidateProcessing, invalidateScanSession]
-  );
-
-  const runPermissionFlow = useCallback(
-    async (requestIfNeeded: boolean) => {
-      const runId = ++permissionRunRef.current;
-      const isCurrent = () =>
-        mountedRef.current && permissionRunRef.current === runId;
-      try {
-        let status = await getCameraPermissionStatus();
-        if (!isCurrent()) return;
-        if (
-          requestIfNeeded &&
-          (status === 'undetermined' || status === 'denied')
-        ) {
-          status = await requestCameraPermission();
-          if (!isCurrent()) return;
-        }
-        if (status === 'granted') {
-          enterScan();
-        } else {
-          enterDenied();
-        }
-      } catch (error) {
-        if (!isCurrent()) return;
-        reportFatalError(toScanError(error, '检查相机权限失败'));
-      }
-    },
-    [enterDenied, enterScan, reportFatalError]
-  );
-
-  // 权限流：已授权 → scan；否则请求；仍未授权 → denied。
-  useEffect(() => {
-    mountedRef.current = true;
-    void runPermissionFlow(true);
-    return () => {
-      mountedRef.current = false;
-      ++permissionRunRef.current;
-      invalidateProcessing();
-      invalidateScanSession();
-    };
-  }, [invalidateProcessing, invalidateScanSession, runPermissionFlow]);
-
-  useEffect(() => {
-    const subscription = AppState.addEventListener('change', (nextState) => {
-      if (nextState === 'active' && waitingForSettingsRef.current) {
-        waitingForSettingsRef.current = false;
-        void runPermissionFlow(false);
-      }
-    });
-    return () => subscription.remove();
-  }, [runPermissionFlow]);
-
-  useEffect(() => {
-    if (!showTorch) setTorch(false);
-  }, [showTorch]);
-
-  const reset = useCallback(() => {
-    enterScan();
-  }, [enterScan]);
-
-  const finalize = useCallback(
-    async (result: ScanResult, runId: number) => {
-      const isCurrent = () =>
-        mountedRef.current && processingRunRef.current === runId;
-      if (!isCurrent()) return;
-      lastResultRef.current = result;
-      try {
-        const resolved = resolveProduct
-          ? await resolveProduct(result)
-          : { name: result.value };
-        if (!isCurrent()) return;
-        if (!resolved) {
-          setPhase('fail');
-          return;
-        }
-        const p: ScanProduct = {
-          ...resolved,
-          barcode: resolved.barcode ?? result.value,
-        };
-        if (autoConfirm && onConfirm) {
-          // 跳过结果卡:直接回调,进 'done' 终态(相机暂停、不自动重扫)。
-          onConfirm(p, result);
-          if (!isCurrent()) return;
-          setPhase('done');
-          return;
-        }
-        setProduct(p);
-        setDetectMs(Date.now() - detectStartRef.current);
-        setPhase('success');
-      } catch {
-        if (isCurrent()) setPhase('fail');
-      }
-    },
-    [resolveProduct, autoConfirm, onConfirm]
-  );
-
-  const onCameraResult = useCallback(
-    (results: ScanResult[]) => {
-      if (
-        scanSession !== scanSessionRef.current ||
-        phase !== 'scan' ||
-        !acceptingResultsRef.current ||
-        handlingRef.current
-      ) {
-        return;
-      }
-      const first = results[0];
-      if (!first) return;
-      acceptingResultsRef.current = false;
-      handlingRef.current = true;
-      const runId = ++processingRunRef.current;
-      detectStartRef.current = Date.now();
-      setPhase('detecting');
-      void finalize(first, runId);
-    },
-    [phase, scanSession, finalize]
-  );
-
-  const handleViewScanError = useCallback(
-    (error: ScanError) => {
-      if (error.code === 'E_NO_CAMERA_PERMISSION') {
-        enterDenied();
-      } else if (error.code !== 'E_NO_RESULT') {
-        reportFatalError(error);
-        return;
-      }
-      onScanErrorRef.current?.(error);
-    },
-    [enterDenied, reportFatalError]
-  );
-
-  const onTorchStatus = useCallback(
-    (status: { available: boolean; on: boolean }) => {
-      setTorch(status.on);
-    },
-    []
-  );
-
-  const openSettings = useCallback(async () => {
-    waitingForSettingsRef.current = true;
-    try {
-      await Linking.openSettings();
-    } catch (error) {
-      waitingForSettingsRef.current = false;
-      if (mountedRef.current) {
-        reportFatalError(toScanError(error, '打开系统设置失败'));
-      }
-    }
-  }, [reportFatalError]);
-
-  const retryCamera = useCallback(() => {
-    invalidateProcessing();
-    invalidateScanSession();
-    handlingRef.current = false;
-    setProduct(null);
-    lastResultRef.current = null;
-    setPhase('init');
-    void runPermissionFlow(true);
-  }, [invalidateProcessing, invalidateScanSession, runPermissionFlow]);
-
-  const onAlbum = useCallback(async () => {
-    if (!pickImage || !acceptingResultsRef.current || handlingRef.current) {
-      return;
-    }
-    acceptingResultsRef.current = false;
-    handlingRef.current = true;
-    const runId = ++processingRunRef.current;
-    const isCurrent = () =>
-      mountedRef.current && processingRunRef.current === runId;
-    setPhase('detecting');
-    try {
-      const uri = await pickImage();
-      if (!isCurrent()) return;
-      if (!uri) {
-        reset();
-        return;
-      }
-      detectStartRef.current = Date.now();
-      const results = await decodeImage(uri, formats ? { formats } : undefined);
-      if (!isCurrent()) return;
-      const first = results[0];
-      if (!first) {
-        setPhase('fail');
-        return;
-      }
-      await finalize(first, runId);
-    } catch {
-      if (isCurrent()) setPhase('fail');
-    }
-  }, [pickImage, formats, finalize, reset]);
-
-  const onConfirmPress = useCallback(() => {
-    const r = lastResultRef.current;
-    const p = product;
-    if (p && r) onConfirm?.(p, r);
-    // 不在此 toast:确认页已展示结果,且 toast 是宿主职责(onConfirm 回调里宿主自己提示)——
-    // 避免重复 toast,也避免宿主导航离开后依赖 Scanner 自带 ToastHost 存活的隐患。
-    reset();
-  }, [product, onConfirm, reset]);
-
-  const showChrome = phase === 'scan' || phase === 'detecting';
-
-  return (
-    <View style={styles.root}>
-      {phase !== 'denied' && phase !== 'init' && phase !== 'error' && (
-        <HmsScanView
-          style={StyleSheet.absoluteFill}
-          formats={formats}
-          paused={phase !== 'scan'}
-          torch={torch}
-          onScanResult={onCameraResult}
-          onScanError={handleViewScanError}
-          onTorchStatus={onTorchStatus}
-        />
-      )}
-
-      {showChrome && (
-        <Viewfinder
-          size={VF_SIZE}
-          detecting={phase === 'detecting'}
-          hintText={hintText}
-        />
-      )}
-
-      {phase !== 'denied' && phase !== 'init' && phase !== 'error' && (
-        <ScanTopBar title={title} topInset={topInset} />
-      )}
-
-      {showChrome && (showTorch || !!pickImage || !!onClose) && (
-        <ScanToolbar
-          flash={torch}
-          bottomInset={bottomInset}
-          onFlash={showTorch ? () => setTorch((t) => !t) : undefined}
-          onAlbum={pickImage ? onAlbum : undefined}
-          onClose={onClose}
-        />
-      )}
-
-      {phase === 'success' && product && (
-        <ResultFocus
-          product={product}
-          detectMs={detectMs}
-          bottomInset={bottomInset}
-          onRescan={reset}
-          onConfirm={onConfirmPress}
-        />
-      )}
-
-      {phase === 'fail' && (
-        <ResultFail bottomInset={bottomInset} onRescan={reset} />
-      )}
-
-      {phase === 'error' && (
-        <ScanErrorOverlay onClose={onClose} onRetry={retryCamera} />
-      )}
-
-      {phase === 'denied' && (
-        <DeniedOverlay onClose={onClose} onSettings={openSettings} />
-      )}
-    </View>
+  const insets = useContext(SafeAreaInsetsContext);
+  return insets ? (
+    <ScannerInner {...props} />
+  ) : (
+    <SafeAreaProvider>
+      <ScannerInner {...props} />
+    </SafeAreaProvider>
   );
 }
-
-const styles = StyleSheet.create({
-  root: { flex: 1, backgroundColor: scanChrome.cameraBg },
-});

package/src/Scanner/Scanner.web.tsx

@@ -0,0 +1,26 @@
+import { useEffect, useRef } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { unsupportedScanError } from '../errors';
+import type { ScannerProps } from './types';
+
+export function Scanner({ onError, onClose }: ScannerProps) {
+  const callback = useRef(onError);
+  callback.current = onError;
+  useEffect(() => {
+    callback.current?.(unsupportedScanError());
+  }, []);
+  return (
+    <View>
+      <Text>HMS Scan 仅支持 Android 与 iOS 设备</Text>
+      {onClose && (
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel="返回"
+          onPress={onClose}
+        >
+          <Text>返回</Text>
+        </Pressable>
+      )}
+    </View>
+  );
+}