@unif/react-native-camera 2.6.0 → 2.7.0

package/src/camera/footer/FlipButton.tsx

@@ -0,0 +1,22 @@
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { Icon, r } from '@unif/react-native-design';
+import { DARK } from '../colors/dark';
+
+export function FlipButton({ onFlip }: { onFlip: () => void }) {
+  return (
+    <TouchableOpacity testID="flip-btn" onPress={onFlip} style={styles.btn}>
+      <Icon name="lens-flip" size={r(20)} color={DARK.white} />
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  btn: {
+    width: r(44),
+    height: r(44),
+    borderRadius: r(22),
+    backgroundColor: DARK.white12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/camera/footer/ModeSwitcherPill.test.tsx

@@ -0,0 +1,29 @@
+import { render, fireEvent } from '@testing-library/react-native';
+import { ModeSwitcherPill } from './ModeSwitcherPill';
+
+const items = [
+  { key: 'continuous', label: '连拍' },
+  { key: 'single', label: '单拍' },
+  { key: 'video', label: '视频' },
+];
+
+it('selects by tap', () => {
+  const onSelect = jest.fn();
+  const { getByTestId } = render(
+    <ModeSwitcherPill items={items} currentIndex={1} onSelect={onSelect} />
+  );
+  fireEvent.press(getByTestId('mode-pill-2'));
+  expect(onSelect).toHaveBeenCalledWith(2);
+});
+
+it('single item shows label only (no pill)', () => {
+  const { queryByTestId, getByText } = render(
+    <ModeSwitcherPill
+      items={[{ key: 'single', label: '单拍' }]}
+      currentIndex={0}
+      onSelect={() => {}}
+    />
+  );
+  expect(queryByTestId('mode-pill-0')).toBeNull();
+  expect(getByText('单拍')).toBeTruthy();
+});

package/src/camera/footer/ModeSwitcherPill.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  Animated,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import type { LayoutChangeEvent } from 'react-native';
+import { r } from '@unif/react-native-design';
+import { DARK } from '../colors/dark';
+
+export type ModeItem = { key: string; label: string };
+
+export function ModeSwitcherPill({
+  items,
+  currentIndex,
+  onSelect,
+}: {
+  items: ModeItem[];
+  currentIndex: number;
+  onSelect: (i: number) => void;
+}) {
+  const [w, setW] = useState(0);
+  const slide = useRef(new Animated.Value(0)).current;
+  const itemW = items.length ? w / items.length : 0;
+
+  useEffect(() => {
+    Animated.timing(slide, {
+      toValue: currentIndex * itemW,
+      duration: 240,
+      useNativeDriver: true,
+    }).start();
+  }, [currentIndex, itemW, slide]);
+
+  if (items.length === 1) {
+    return <Text style={styles.singleLabel}>{items[0]!.label}</Text>;
+  }
+  return (
+    <View
+      style={styles.wrap}
+      onLayout={(e: LayoutChangeEvent) => setW(e.nativeEvent.layout.width)}
+    >
+      {itemW > 0 && (
+        <Animated.View
+          style={[
+            styles.slider,
+            { width: itemW, transform: [{ translateX: slide }] },
+          ]}
+        />
+      )}
+      {items.map((it, i) => {
+        const sel = i === currentIndex;
+        return (
+          <TouchableOpacity
+            key={it.key}
+            testID={`mode-pill-${i}`}
+            style={styles.item}
+            onPress={() => onSelect(i)}
+          >
+            <Text style={[styles.txt, sel && styles.txtSel]}>{it.label}</Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: { flexDirection: 'row', alignSelf: 'center', position: 'relative' },
+  slider: {
+    position: 'absolute',
+    top: r(4),
+    bottom: r(4),
+    left: 0,
+    borderRadius: r(999),
+    backgroundColor: DARK.orange16,
+  },
+  item: {
+    paddingVertical: r(8),
+    paddingHorizontal: r(22),
+    alignItems: 'center',
+  },
+  txt: {
+    color: DARK.white65,
+    fontSize: r(15),
+    fontWeight: '500',
+    letterSpacing: 1,
+  },
+  txtSel: { color: DARK.orange, fontWeight: '600' },
+  singleLabel: {
+    color: DARK.white65,
+    fontSize: r(14),
+    letterSpacing: 2,
+    alignSelf: 'center',
+  },
+});

package/src/camera/footer/RecordingTimer.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react-native';
+import { RecordingTimer, formatDuration } from './RecordingTimer';
+
+it('formatDuration → MM:SS', () => {
+  expect(formatDuration(0)).toBe('00:00');
+  expect(formatDuration(65)).toBe('01:05');
+  expect(formatDuration(3661)).toBe('61:01');
+  expect(formatDuration(-5)).toBe('00:00');
+});
+
+it('renders timer pill', () => {
+  const { getByTestId } = render(<RecordingTimer seconds={5} />);
+  expect(getByTestId('recording-timer')).toBeTruthy();
+});

package/src/camera/footer/RecordingTimer.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useRef } from 'react';
+import { Animated, StyleSheet, Text, View } from 'react-native';
+import { r } from '@unif/react-native-design';
+import { DARK } from '../colors/dark';
+
+export function formatDuration(totalSec: number): string {
+  const s = Math.max(0, Math.floor(totalSec));
+  const mm = String(Math.floor(s / 60)).padStart(2, '0');
+  const ss = String(s % 60).padStart(2, '0');
+  return `${mm}:${ss}`;
+}
+
+export function RecordingTimer({ seconds }: { seconds: number }) {
+  const blink = useRef(new Animated.Value(1)).current;
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(blink, {
+          toValue: 0,
+          duration: 500,
+          useNativeDriver: true,
+        }),
+        Animated.timing(blink, {
+          toValue: 1,
+          duration: 500,
+          useNativeDriver: true,
+        }),
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [blink]);
+  return (
+    <View style={styles.pill} testID="recording-timer">
+      <Animated.View style={[styles.dot, { opacity: blink }]} />
+      <Text style={styles.text}>{formatDuration(seconds)}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  pill: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: r(8),
+    paddingVertical: r(6),
+    paddingHorizontal: r(14),
+    borderRadius: r(999),
+    backgroundColor: 'rgba(255,59,48,0.18)',
+  },
+  dot: {
+    width: r(8),
+    height: r(8),
+    borderRadius: r(4),
+    backgroundColor: DARK.recRed,
+  },
+  text: { color: DARK.white, fontSize: r(13), fontVariant: ['tabular-nums'] },
+});

package/src/camera/footer/Shutter.test.tsx

@@ -0,0 +1,26 @@
+import { render, fireEvent } from '@testing-library/react-native';
+import { Shutter } from './Shutter';
+
+it('fires onPress and renders for each mode', () => {
+  const onPress = jest.fn();
+  const { getByTestId, rerender } = render(
+    <Shutter mode="single" recording={false} onPress={onPress} />
+  );
+  fireEvent.press(getByTestId('shutter-btn'));
+  expect(onPress).toHaveBeenCalledTimes(1);
+  expect(() =>
+    rerender(<Shutter mode="video" recording={false} onPress={onPress} />)
+  ).not.toThrow();
+  expect(() =>
+    rerender(<Shutter mode="video" recording={true} onPress={onPress} />)
+  ).not.toThrow();
+});
+
+it('disabled blocks press', () => {
+  const onPress = jest.fn();
+  const { getByTestId } = render(
+    <Shutter mode="single" recording={false} disabled onPress={onPress} />
+  );
+  fireEvent.press(getByTestId('shutter-btn'));
+  expect(onPress).not.toHaveBeenCalled();
+});

package/src/camera/footer/Shutter.tsx

@@ -0,0 +1,71 @@
+import { useRef } from 'react';
+import { Animated, Pressable, StyleSheet } from 'react-native';
+import { r } from '@unif/react-native-design';
+import { DARK } from '../colors/dark';
+
+type Props = {
+  mode: 'single' | 'continuous' | 'video';
+  recording: boolean;
+  disabled?: boolean;
+  onPress: () => void;
+};
+
+export function Shutter({ mode, recording, disabled, onPress }: Props) {
+  const scale = useRef(new Animated.Value(1)).current;
+  const to = (v: number) =>
+    Animated.timing(scale, {
+      toValue: v,
+      duration: 100,
+      useNativeDriver: true,
+    }).start();
+  const isVideo = mode === 'video';
+  const inner = recording
+    ? styles.innerRecording
+    : isVideo
+      ? styles.innerVideo
+      : styles.innerPhoto;
+  return (
+    <Pressable
+      testID="shutter-btn"
+      disabled={disabled}
+      onPress={onPress}
+      onPressIn={() => to(0.94)}
+      onPressOut={() => to(1)}
+    >
+      <Animated.View style={[styles.ring, { transform: [{ scale }] }]}>
+        <Animated.View style={[styles.innerBase, inner]} />
+      </Animated.View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  ring: {
+    width: r(72),
+    height: r(72),
+    borderRadius: r(36),
+    borderWidth: r(3),
+    borderColor: DARK.white95,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  innerBase: {},
+  innerPhoto: {
+    width: r(58),
+    height: r(58),
+    borderRadius: r(29),
+    backgroundColor: DARK.white,
+  },
+  innerVideo: {
+    width: r(58),
+    height: r(58),
+    borderRadius: r(29),
+    backgroundColor: DARK.recRed,
+  },
+  innerRecording: {
+    width: r(24),
+    height: r(24),
+    borderRadius: r(4),
+    backgroundColor: DARK.recRed,
+  },
+});

package/src/camera/footer/ThumbnailStack.test.tsx

@@ -0,0 +1,19 @@
+import { render, fireEvent } from '@testing-library/react-native';
+import { ThumbnailStack } from './ThumbnailStack';
+
+it('empty state, no badge, tappable', () => {
+  const onPress = jest.fn();
+  const { getByTestId, queryByTestId } = render(
+    <ThumbnailStack latestUri={undefined} count={0} onPress={onPress} />
+  );
+  fireEvent.press(getByTestId('thumbnail-stack'));
+  expect(onPress).toHaveBeenCalled();
+  expect(queryByTestId('thumb-badge')).toBeNull();
+});
+
+it('shows badge when count > 1', () => {
+  const { getByTestId } = render(
+    <ThumbnailStack latestUri="file:///a.jpg" count={3} onPress={() => {}} />
+  );
+  expect(getByTestId('thumb-badge')).toBeTruthy();
+});

package/src/camera/footer/ThumbnailStack.tsx

@@ -0,0 +1,58 @@
+import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { r } from '@unif/react-native-design';
+import { DARK } from '../colors/dark';
+
+type Props = { latestUri?: string; count: number; onPress: () => void };
+
+export function ThumbnailStack({ latestUri, count, onPress }: Props) {
+  return (
+    <TouchableOpacity
+      testID="thumbnail-stack"
+      onPress={onPress}
+      style={styles.wrap}
+    >
+      {latestUri ? (
+        <Image source={{ uri: latestUri }} style={styles.img} />
+      ) : (
+        <View style={styles.empty} />
+      )}
+      {count > 1 && (
+        <View style={styles.badge} testID="thumb-badge">
+          <Text style={styles.badgeText}>{count}</Text>
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: { width: r(44), height: r(44) },
+  img: {
+    width: r(44),
+    height: r(44),
+    borderRadius: r(6),
+    borderWidth: 2,
+    borderColor: DARK.white,
+  },
+  empty: {
+    width: r(44),
+    height: r(44),
+    borderRadius: r(8),
+    borderWidth: 1.5,
+    borderColor: DARK.white40,
+    backgroundColor: DARK.white08,
+  },
+  badge: {
+    position: 'absolute',
+    top: r(-6),
+    right: r(-6),
+    minWidth: r(20),
+    height: r(20),
+    borderRadius: r(999),
+    backgroundColor: DARK.orange,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: r(4),
+  },
+  badgeText: { color: DARK.white, fontSize: r(11), fontWeight: '700' },
+});

package/src/camera/footer/ZoomChips.test.tsx

@@ -0,0 +1,9 @@
+import { render, fireEvent } from '@testing-library/react-native';
+import { ZoomChips } from './ZoomChips';
+
+it('renders 3 chips and selects', () => {
+  const onSelect = jest.fn();
+  const { getByTestId } = render(<ZoomChips zoom={1} onSelect={onSelect} />);
+  fireEvent.press(getByTestId('zoom-chip-2'));
+  expect(onSelect).toHaveBeenCalledWith(2);
+});

package/src/camera/footer/ZoomChips.tsx

@@ -0,0 +1,53 @@
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { r } from '@unif/react-native-design';
+import { DARK } from '../colors/dark';
+
+const STOPS = [0.5, 1, 2] as const;
+
+export function ZoomChips({
+  zoom,
+  onSelect,
+}: {
+  zoom: number;
+  onSelect: (z: number) => void;
+}) {
+  return (
+    <View style={styles.row}>
+      {STOPS.map((z) => {
+        const active = Math.abs(zoom - z) < 0.05;
+        return (
+          <TouchableOpacity
+            key={z}
+            testID={`zoom-chip-${z}`}
+            onPress={() => onSelect(z)}
+            style={[styles.chip, active && styles.chipActive]}
+          >
+            <Text style={[styles.txt, active && styles.txtActive]}>
+              {active ? `${z}x` : `${z}`}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    gap: r(8),
+    padding: r(4),
+    borderRadius: r(999),
+    backgroundColor: DARK.black45,
+  },
+  chip: {
+    width: r(32),
+    height: r(32),
+    borderRadius: r(16),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  chipActive: { backgroundColor: DARK.white95 },
+  txt: { color: DARK.white, fontSize: r(12), fontWeight: '500' },
+  txtActive: { color: DARK.orange, fontSize: r(11), fontWeight: '700' },
+});

package/src/camera/footer/index.tsx

@@ -1 +1,7 @@
-export { Footer } from './Footer';
+export { ActionRow } from './ActionRow';
+export { ModeSwitcherPill } from './ModeSwitcherPill';
+export { Shutter } from './Shutter';
+export { ZoomChips } from './ZoomChips';
+export { RecordingTimer } from './RecordingTimer';
+export { ThumbnailStack } from './ThumbnailStack';
+export { FlipButton } from './FlipButton';

package/src/camera/icons/VolumeIcon.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react-native';
+import { VolumeIcon } from './VolumeIcon';
+
+it('renders without crashing (on/off)', () => {
+  expect(() => render(<VolumeIcon on size={20} color="#fff" />)).not.toThrow();
+  expect(() =>
+    render(<VolumeIcon on={false} size={20} color="#fff" />)
+  ).not.toThrow();
+});

package/src/camera/icons/VolumeIcon.tsx

@@ -0,0 +1,39 @@
+import Svg, { Path, Line } from 'react-native-svg';
+
+type Props = { on: boolean; size: number; color: string };
+
+export function VolumeIcon({ on, size, color }: Props) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      {/* 喇叭主体 */}
+      <Path
+        d="M4 9v6h4l5 4V5L8 9H4z"
+        fill={color}
+        stroke={color}
+        strokeWidth={1.6}
+        strokeLinejoin="round"
+      />
+      {on ? (
+        // 声波两道
+        <Path
+          d="M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12"
+          stroke={color}
+          strokeWidth={1.6}
+          strokeLinecap="round"
+          fill="none"
+        />
+      ) : (
+        // 关:斜杠
+        <Line
+          x1={16}
+          y1={8}
+          x2={21}
+          y2={16}
+          stroke={color}
+          strokeWidth={1.6}
+          strokeLinecap="round"
+        />
+      )}
+    </Svg>
+  );
+}

package/src/camera/index.tsx

@@ -9,4 +9,14 @@ export {
   capturePhotoToFile,
   type CapturedPhotoRaw,
 } from './capturePhotoHelper';
-export { Footer } from './footer';
+export {
+  ActionRow,
+  ModeSwitcherPill,
+  Shutter,
+  ZoomChips,
+  RecordingTimer,
+  ThumbnailStack,
+  FlipButton,
+} from './footer';
+export { CaptureFlash } from './CaptureFlash';
+export { SideRail, type FlashMode, type AspectRatio } from './setup';

package/src/camera/preview/PreviewBottomBar.test.tsx

@@ -0,0 +1,43 @@
+import { render, fireEvent } from '@testing-library/react-native';
+import { PreviewBottomBar } from './PreviewBottomBar';
+
+it('confirm 变体: 重拍/保存', () => {
+  const onRetake = jest.fn();
+  const onSave = jest.fn();
+  const { getByTestId } = render(
+    <PreviewBottomBar
+      variant="confirm"
+      index={0}
+      total={1}
+      onRetake={onRetake}
+      onSave={onSave}
+      onBack={() => {}}
+      onDelete={() => {}}
+    />
+  );
+  fireEvent.press(getByTestId('retake-btn'));
+  expect(onRetake).toHaveBeenCalled();
+  fireEvent.press(getByTestId('save-btn'));
+  expect(onSave).toHaveBeenCalled();
+});
+
+it('gallery 变体: 第X/Y张 + 返回/删除', () => {
+  const onBack = jest.fn();
+  const onDelete = jest.fn();
+  const { getByTestId, getByText } = render(
+    <PreviewBottomBar
+      variant="gallery"
+      index={1}
+      total={3}
+      onRetake={() => {}}
+      onSave={() => {}}
+      onBack={onBack}
+      onDelete={onDelete}
+    />
+  );
+  expect(getByText('第 2/3 张')).toBeTruthy();
+  fireEvent.press(getByTestId('back-btn'));
+  expect(onBack).toHaveBeenCalled();
+  fireEvent.press(getByTestId('delete-btn'));
+  expect(onDelete).toHaveBeenCalled();
+});

package/src/camera/preview/PreviewBottomBar.tsx

@@ -0,0 +1,79 @@
+import { StyleSheet, Text, View } from 'react-native';
+import { Button, r, useThemedStyles } from '@unif/react-native-design';
+import type { ColorTokens } from '@unif/react-native-design';
+
+type Props = {
+  variant: 'confirm' | 'gallery';
+  index: number;
+  total: number;
+  onRetake: () => void;
+  onSave: () => void;
+  onBack: () => void;
+  onDelete: () => void;
+};
+
+export function PreviewBottomBar({
+  variant,
+  index,
+  total,
+  onRetake,
+  onSave,
+  onBack,
+  onDelete,
+}: Props) {
+  const styles = useThemedStyles(makeStyles);
+  return (
+    <View style={styles.root}>
+      {variant === 'gallery' && (
+        <Text style={styles.counter}>
+          第 {index + 1}/{total} 张
+        </Text>
+      )}
+      <View style={styles.btns}>
+        {variant === 'confirm' ? (
+          <>
+            <Button
+              variant="ghost"
+              label="重拍"
+              onPress={onRetake}
+              testID="retake-btn"
+            />
+            <Button
+              variant="primary"
+              label="保存"
+              onPress={onSave}
+              testID="save-btn"
+            />
+          </>
+        ) : (
+          <>
+            <Button
+              variant="ghost"
+              label="返回"
+              onPress={onBack}
+              testID="back-btn"
+            />
+            <Button
+              variant="danger"
+              label="删除"
+              onPress={onDelete}
+              testID="delete-btn"
+            />
+          </>
+        )}
+      </View>
+    </View>
+  );
+}
+
+const makeStyles = (c: ColorTokens) =>
+  StyleSheet.create({
+    root: {
+      paddingHorizontal: r(16),
+      paddingBottom: r(26),
+      gap: r(12),
+      alignItems: 'center',
+    },
+    counter: { color: c.foreground, fontSize: r(15), fontWeight: '600' },
+    btns: { flexDirection: 'row', gap: r(12), justifyContent: 'center' },
+  });