@unif/react-native-hms-scan 0.6.1 → 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/ScanHint.tsx

@@ -1,5 +1,5 @@
 import { StyleSheet, Text, View } from 'react-native';
-import { Spinner, r, rf, fw } from '@unif/react-native-design';
+import { Spinner, r, rf, useThemedStyles, fw } from '@unif/react-native-design';
 import { scanChrome } from './scanChrome';
 
 interface ScanHintProps {
@@ -10,10 +10,11 @@ interface ScanHintProps {
 
 // 取景框下方提示。识别中显示 design 的 Spinner（白）+ "识别中…"。
 export function ScanHint({ detecting, text }: ScanHintProps) {
+  const s = useThemedStyles(makeTextStyles);
   return (
     <View style={styles.row}>
       {detecting && <Spinner size={r(15)} color={scanChrome.white} />}
-      <Text style={styles.text}>{detecting ? '识别中…' : text}</Text>
+      <Text style={s.text}>{detecting ? '识别中…' : text}</Text>
     </View>
   );
 }
@@ -26,13 +27,17 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     columnGap: r(7),
   },
-  text: {
-    color: scanChrome.hintText,
-    fontSize: rf(13.5),
-    fontWeight: fw.medium,
-    letterSpacing: 0.2,
-    textShadowColor: scanChrome.textShadow,
-    textShadowOffset: { width: 0, height: 1 },
-    textShadowRadius: 6,
-  },
 });
+
+const makeTextStyles = () =>
+  StyleSheet.create({
+    text: {
+      color: scanChrome.hintText,
+      fontSize: rf(13.5),
+      fontWeight: fw.medium,
+      letterSpacing: 0.2,
+      textShadowColor: scanChrome.textShadow,
+      textShadowOffset: { width: 0, height: 1 },
+      textShadowRadius: 6,
+    },
+  });

package/src/Scanner/ScanToolbar.tsx

@@ -1,5 +1,13 @@
 import { Pressable, StyleSheet, Text, View } from 'react-native';
-import { Icon, useColors, r, rf, fw, type IconName } from '@unif/react-native-design';
+import {
+  Icon,
+  useColors,
+  r,
+  rf,
+  useThemedStyles,
+  fw,
+  type IconName,
+} from '@unif/react-native-design';
 import { scanChrome } from './scanChrome';
 
 interface ScanToolbarProps {
@@ -23,7 +31,10 @@ export function ScanToolbar({
 }: ScanToolbarProps) {
   const c = useColors();
   return (
-    <View style={[styles.bar, { bottom: bottomInset + r(50) }]} pointerEvents="box-none">
+    <View
+      style={[styles.bar, { bottom: bottomInset + r(50) }]}
+      pointerEvents="box-none"
+    >
       {onClose && <ToolbarItem icon="undo" label="返回" onPress={onClose} />}
       {onFlash && (
         <ToolbarItem
@@ -49,6 +60,7 @@ function ToolbarItem({
   activeColor?: string;
   onPress: () => void;
 }) {
+  const s = useThemedStyles(makeTextStyles);
   return (
     <Pressable
       onPress={onPress}
@@ -62,14 +74,20 @@ function ToolbarItem({
             style={[
               styles.circle,
               activeColor
-                ? { backgroundColor: activeColor, borderColor: scanChrome.glassBorderActive }
-                : { backgroundColor: scanChrome.glassDisc2, borderColor: scanChrome.glassBorder },
+                ? {
+                    backgroundColor: activeColor,
+                    borderColor: scanChrome.glassBorderActive,
+                  }
+                : {
+                    backgroundColor: scanChrome.glassDisc2,
+                    borderColor: scanChrome.glassBorder,
+                  },
               pressed && { opacity: 0.7 },
             ]}
           >
             <Icon name={icon} size={r(23)} color={scanChrome.white} />
           </View>
-          <Text style={styles.label}>{label}</Text>
+          <Text style={s.label}>{label}</Text>
         </>
       )}
     </Pressable>
@@ -95,12 +113,16 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     borderWidth: StyleSheet.hairlineWidth,
   },
-  label: {
-    fontSize: rf(12),
-    fontWeight: fw.medium,
-    color: scanChrome.toolbarLabel,
-    textShadowColor: 'rgba(0,0,0,0.4)',
-    textShadowOffset: { width: 0, height: 1 },
-    textShadowRadius: 4,
-  },
 });
+
+const makeTextStyles = () =>
+  StyleSheet.create({
+    label: {
+      fontSize: rf(12),
+      fontWeight: fw.medium,
+      color: scanChrome.toolbarLabel,
+      textShadowColor: 'rgba(0,0,0,0.4)',
+      textShadowOffset: { width: 0, height: 1 },
+      textShadowRadius: 4,
+    },
+  });

package/src/Scanner/ScanTopBar.tsx

@@ -1,5 +1,5 @@
 import { StyleSheet, Text, View } from 'react-native';
-import { r, rf, fw } from '@unif/react-native-design';
+import { r, rf, useThemedStyles, fw } from '@unif/react-native-design';
 import { scanChrome } from './scanChrome';
 
 interface ScanTopBarProps {
@@ -10,9 +10,13 @@ interface ScanTopBarProps {
 // 顶栏：仅居中标题。关闭键已移到底部工具栏，与手电筒并排（见 ScanToolbar）。
 // 叠在深色相机预览之上，故文字恒为白（不随主题）。
 export function ScanTopBar({ title, topInset }: ScanTopBarProps) {
+  const s = useThemedStyles(makeTextStyles);
   return (
-    <View style={[styles.bar, { paddingTop: topInset }]} pointerEvents="box-none">
-      <Text style={styles.title}>{title}</Text>
+    <View
+      style={[styles.bar, { paddingTop: topInset }]}
+      pointerEvents="box-none"
+    >
+      <Text style={s.title}>{title}</Text>
     </View>
   );
 }
@@ -30,13 +34,17 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  title: {
-    color: scanChrome.white,
-    fontSize: rf(16),
-    fontWeight: fw.semi,
-    letterSpacing: 0.2,
-    textShadowColor: scanChrome.textShadow,
-    textShadowOffset: { width: 0, height: 1 },
-    textShadowRadius: 6,
-  },
 });
+
+const makeTextStyles = () =>
+  StyleSheet.create({
+    title: {
+      color: scanChrome.white,
+      fontSize: rf(16),
+      fontWeight: fw.semi,
+      letterSpacing: 0.2,
+      textShadowColor: scanChrome.textShadow,
+      textShadowOffset: { width: 0, height: 1 },
+      textShadowRadius: 6,
+    },
+  });