@unif/react-native-camera 2.6.0 → 2.7.0

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

@@ -0,0 +1,45 @@
+import { render } from '@testing-library/react-native';
+import { PreviewOverlay } from './PreviewOverlay';
+import type { CustomPhotoFile } from '../../utils';
+
+const f = (
+  cameraMode: CustomPhotoFile['cameraMode'],
+  id: string
+): CustomPhotoFile => ({
+  id,
+  cameraType: 'back',
+  cameraMode,
+  path: `/${id}`,
+  uri: `file:///${id}`,
+  width: 1,
+  height: 1,
+  mime: cameraMode === 'video' ? 'video/mp4' : 'image/jpeg',
+  mode: cameraMode,
+});
+
+const noop = {
+  onRetake: () => {},
+  onSave: () => {},
+  onBack: () => {},
+  onDelete: () => {},
+};
+
+it('confirm 变体: 重拍/保存 在', () => {
+  const { getByTestId } = render(
+    <PreviewOverlay files={[f('single', 'a')]} variant="confirm" {...noop} />
+  );
+  expect(getByTestId('retake-btn')).toBeTruthy();
+  expect(getByTestId('save-btn')).toBeTruthy();
+});
+
+it('gallery 变体: 返回/删除 在', () => {
+  const { getByTestId } = render(
+    <PreviewOverlay
+      files={[f('single', 'a'), f('single', 'b')]}
+      variant="gallery"
+      {...noop}
+    />
+  );
+  expect(getByTestId('back-btn')).toBeTruthy();
+  expect(getByTestId('delete-btn')).toBeTruthy();
+});

package/src/camera/preview/PreviewOverlay.tsx

@@ -0,0 +1,99 @@
+import { useEffect, useMemo, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { confirm, toast, useThemedStyles } from '@unif/react-native-design';
+import type { ColorTokens } from '@unif/react-native-design';
+import type { CustomPhotoFile, CameraModeName } from '../../utils';
+import { Carousel } from '../../components/Carousel';
+import { distinctTypes, filesOfType } from './groupTypes';
+import { PreviewTopBar } from './PreviewTopBar';
+import { PreviewBottomBar } from './PreviewBottomBar';
+
+type Props = {
+  files: CustomPhotoFile[];
+  variant: 'confirm' | 'gallery';
+  onRetake: () => void;
+  onSave: () => void;
+  onBack: () => void;
+  onDelete: (f: CustomPhotoFile) => void;
+};
+
+export function PreviewOverlay({
+  files,
+  variant,
+  onRetake,
+  onSave,
+  onBack,
+  onDelete,
+}: Props) {
+  const styles = useThemedStyles(makeStyles);
+  const types = useMemo(() => distinctTypes(files), [files]);
+  const [activeType, setActiveType] = useState<CameraModeName>(
+    types[0] ?? 'single'
+  );
+  const [index, setIndex] = useState(0);
+
+  // 删除回收:当前类型被删空 → 切到剩余首个类型(无则关由 Container 处理)
+  useEffect(() => {
+    if (!types.includes(activeType)) {
+      setActiveType(types[0] ?? 'single');
+      setIndex(0);
+    }
+  }, [types, activeType]);
+
+  // confirm 不分 tab(全 files);gallery 按 activeType 过滤
+  const data = variant === 'confirm' ? files : filesOfType(files, activeType);
+  const current = data[index] ?? data[0];
+
+  // 删除后 index 越界 → 夹紧到末张(避免「第 X/Y」计数错位)
+  useEffect(() => {
+    if (index >= data.length && data.length > 0) setIndex(data.length - 1);
+  }, [index, data.length]);
+
+  const handleSave = () => {
+    toast.success('已保存');
+    onSave();
+  };
+  const handleDelete = async () => {
+    const ok = await confirm({
+      title: '确认删除?',
+      message: '图片删除后无法恢复',
+    });
+    if (ok && current) onDelete(current);
+  };
+
+  return (
+    <View style={styles.root} testID="preview-overlay">
+      <PreviewTopBar
+        variant={variant}
+        files={files}
+        activeType={activeType}
+        onSelectType={(t) => {
+          setActiveType(t);
+          setIndex(0);
+        }}
+      />
+      <View style={styles.pager}>
+        <Carousel data={data} onIndexChange={setIndex} />
+      </View>
+      <PreviewBottomBar
+        variant={variant}
+        index={index}
+        total={data.length}
+        onRetake={onRetake}
+        onSave={handleSave}
+        onBack={onBack}
+        onDelete={handleDelete}
+      />
+    </View>
+  );
+}
+
+const makeStyles = (c: ColorTokens) =>
+  StyleSheet.create({
+    root: {
+      ...StyleSheet.absoluteFill,
+      backgroundColor: c.background,
+      zIndex: 50,
+    },
+    pager: { flex: 1 },
+  });

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

@@ -0,0 +1,46 @@
+import { render, fireEvent } from '@testing-library/react-native';
+import { PreviewTopBar } from './PreviewTopBar';
+import type { CustomPhotoFile } from '../../utils';
+
+const f = (
+  cameraMode: CustomPhotoFile['cameraMode'],
+  id: string
+): CustomPhotoFile => ({
+  id,
+  cameraType: 'back',
+  cameraMode,
+  path: `/${id}`,
+  uri: `file:///${id}`,
+  width: 1,
+  height: 1,
+  mime: cameraMode === 'video' ? 'video/mp4' : 'image/jpeg',
+  mode: cameraMode,
+});
+
+it('confirm 变体显示类型 label', () => {
+  const { getByText } = render(
+    <PreviewTopBar
+      variant="confirm"
+      files={[f('single', 'a')]}
+      activeType="single"
+      onSelectType={() => {}}
+    />
+  );
+  expect(getByText('单拍')).toBeTruthy();
+});
+
+it('gallery 多类型显示 tab + 共N张,点 tab 回调', () => {
+  const onSelectType = jest.fn();
+  const files = [f('continuous', 'a'), f('continuous', 'b'), f('single', 'c')];
+  const { getByTestId, getByText } = render(
+    <PreviewTopBar
+      variant="gallery"
+      files={files}
+      activeType="continuous"
+      onSelectType={onSelectType}
+    />
+  );
+  expect(getByText('共 3 张')).toBeTruthy();
+  fireEvent.press(getByTestId('type-tab-single'));
+  expect(onSelectType).toHaveBeenCalledWith('single');
+});

package/src/camera/preview/PreviewTopBar.tsx

@@ -0,0 +1,91 @@
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { r, useThemedStyles } from '@unif/react-native-design';
+import type { ColorTokens } from '@unif/react-native-design';
+import type { CustomPhotoFile, CameraModeName } from '../../utils';
+import { distinctTypes, filesOfType } from './groupTypes';
+
+const LABEL: Record<CameraModeName, string> = {
+  continuous: '连拍',
+  single: '单拍',
+  video: '视频',
+};
+
+type Props = {
+  variant: 'confirm' | 'gallery';
+  files: CustomPhotoFile[];
+  activeType: CameraModeName;
+  onSelectType: (t: CameraModeName) => void;
+};
+
+export function PreviewTopBar({
+  variant,
+  files,
+  activeType,
+  onSelectType,
+}: Props) {
+  const styles = useThemedStyles(makeStyles);
+  if (variant === 'confirm') {
+    return (
+      <View style={styles.root}>
+        <Text style={styles.label}>{LABEL[activeType]}</Text>
+      </View>
+    );
+  }
+  const types = distinctTypes(files);
+  const total = files.length;
+  return (
+    <View style={styles.root}>
+      {types.length > 1 && (
+        <View style={styles.tabs}>
+          {types.map((t) => {
+            const sel = t === activeType;
+            return (
+              <TouchableOpacity
+                key={t}
+                testID={`type-tab-${t}`}
+                onPress={() => onSelectType(t)}
+                style={[styles.tab, sel && styles.tabSel]}
+              >
+                <Text style={[styles.tabTxt, sel && styles.tabTxtSel]}>
+                  {LABEL[t]}
+                  {filesOfType(files, t).length}
+                </Text>
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+      )}
+      <Text style={styles.total}>共 {total} 张</Text>
+    </View>
+  );
+}
+
+const makeStyles = (c: ColorTokens) =>
+  StyleSheet.create({
+    root: {
+      minHeight: r(46),
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: r(10),
+      paddingHorizontal: r(14),
+      paddingTop: r(14),
+    },
+    label: { color: c.foreground, fontSize: r(14), fontWeight: '500' },
+    tabs: {
+      flexDirection: 'row',
+      gap: r(4),
+      padding: r(4),
+      borderRadius: r(999),
+      backgroundColor: c.surface,
+    },
+    tab: {
+      paddingVertical: r(7),
+      paddingHorizontal: r(16),
+      borderRadius: r(999),
+    },
+    tabSel: { backgroundColor: '#EB6E00' },
+    tabTxt: { color: c.foreground, fontSize: r(13), fontWeight: '600' },
+    tabTxtSel: { color: '#fff' },
+    total: { color: c.foreground, fontSize: r(13), opacity: 0.7 },
+  });

package/src/camera/preview/groupTypes.test.ts

@@ -0,0 +1,34 @@
+import { distinctTypes, filesOfType } from './groupTypes';
+import type { CustomPhotoFile } from '../../utils';
+
+const f = (
+  cameraMode: CustomPhotoFile['cameraMode'],
+  id: string
+): CustomPhotoFile => ({
+  id,
+  cameraType: 'back',
+  cameraMode,
+  path: `/${id}.jpg`,
+  uri: `file:///${id}.jpg`,
+  width: 1,
+  height: 1,
+  mime: cameraMode === 'video' ? 'video/mp4' : 'image/jpeg',
+  mode: cameraMode,
+});
+
+it('distinctTypes 按 连拍/单拍/视频 顺序去重', () => {
+  const files = [
+    f('single', 'a'),
+    f('video', 'b'),
+    f('single', 'c'),
+    f('continuous', 'd'),
+  ];
+  expect(distinctTypes(files)).toEqual(['continuous', 'single', 'video']);
+  expect(distinctTypes([f('single', 'a')])).toEqual(['single']);
+  expect(distinctTypes([])).toEqual([]);
+});
+
+it('filesOfType 过滤', () => {
+  const files = [f('single', 'a'), f('video', 'b'), f('single', 'c')];
+  expect(filesOfType(files, 'single').map((x) => x.id)).toEqual(['a', 'c']);
+});

package/src/camera/preview/groupTypes.ts

@@ -0,0 +1,15 @@
+import type { CustomPhotoFile, CameraModeName } from '../../utils';
+
+const ORDER: CameraModeName[] = ['continuous', 'single', 'video'];
+
+export function distinctTypes(files: CustomPhotoFile[]): CameraModeName[] {
+  const present = new Set(files.map((f) => f.cameraMode));
+  return ORDER.filter((t) => present.has(t));
+}
+
+export function filesOfType(
+  files: CustomPhotoFile[],
+  type: CameraModeName
+): CustomPhotoFile[] {
+  return files.filter((f) => f.cameraMode === type);
+}

package/src/camera/preview/index.tsx

@@ -1,4 +1,3 @@
-export { SinglePre } from './SinglePre';
-export { PreView } from './PreView';
-export { PreviewFooter } from './PreviewFooter';
-export { PreViewContainer } from './PreViewContainer';
+export { PreviewOverlay } from './PreviewOverlay';
+export { PreviewTopBar } from './PreviewTopBar';
+export { PreviewBottomBar } from './PreviewBottomBar';

package/src/camera/setup/SideRail.test.tsx

@@ -0,0 +1,37 @@
+import { render, fireEvent } from '@testing-library/react-native';
+import { SideRail } from './SideRail';
+
+const base = {
+  flash: 'off' as const,
+  aspectRatio: '4:3' as const,
+  sound: true,
+  grid: false,
+  onChangeFlash: jest.fn(),
+  onChangeAspectRatio: jest.fn(),
+  onToggleSound: jest.fn(),
+  onToggleGrid: jest.fn(),
+};
+
+it('toggles aspect / sound / grid', () => {
+  const p = {
+    ...base,
+    onChangeAspectRatio: jest.fn(),
+    onToggleSound: jest.fn(),
+    onToggleGrid: jest.fn(),
+  };
+  const { getByTestId } = render(<SideRail {...p} />);
+  fireEvent.press(getByTestId('aspect-btn'));
+  expect(p.onChangeAspectRatio).toHaveBeenCalledWith('16:9');
+  fireEvent.press(getByTestId('sound-btn'));
+  expect(p.onToggleSound).toHaveBeenCalled();
+  fireEvent.press(getByTestId('grid-btn'));
+  expect(p.onToggleGrid).toHaveBeenCalled();
+});
+
+it('flash dropdown selects a mode', () => {
+  const p = { ...base, onChangeFlash: jest.fn() };
+  const { getByTestId } = render(<SideRail {...p} />);
+  fireEvent.press(getByTestId('flash-btn'));
+  fireEvent.press(getByTestId('flash-opt-on'));
+  expect(p.onChangeFlash).toHaveBeenCalledWith('on');
+});

package/src/camera/setup/SideRail.tsx

@@ -0,0 +1,161 @@
+import { useState } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Icon, r, type IconName } from '@unif/react-native-design';
+import { DARK } from '../colors/dark';
+import { VolumeIcon } from '../icons/VolumeIcon';
+
+export type FlashMode = 'off' | 'on' | 'auto';
+export type AspectRatio = '4:3' | '16:9';
+
+type Props = {
+  flash: FlashMode;
+  aspectRatio: AspectRatio;
+  sound: boolean;
+  grid: boolean;
+  onChangeFlash: (m: FlashMode) => void;
+  onChangeAspectRatio: (r: AspectRatio) => void;
+  onToggleSound: () => void;
+  onToggleGrid: () => void;
+};
+
+const flashIcon: Record<FlashMode, IconName> = {
+  off: 'flash-off',
+  on: 'flash-on',
+  auto: 'flash-auto',
+};
+
+const FLASH_OPTS: { key: FlashMode; label: string }[] = [
+  { key: 'auto', label: '自动' },
+  { key: 'on', label: '打开' },
+  { key: 'off', label: '关闭' },
+];
+
+export function SideRail({
+  flash,
+  aspectRatio,
+  sound,
+  grid,
+  onChangeFlash,
+  onChangeAspectRatio,
+  onToggleSound,
+  onToggleGrid,
+}: Props) {
+  const [flashOpen, setFlashOpen] = useState(false);
+  return (
+    <View style={styles.rail}>
+      <TouchableOpacity
+        testID="aspect-btn"
+        style={styles.btn}
+        onPress={() =>
+          onChangeAspectRatio(aspectRatio === '4:3' ? '16:9' : '4:3')
+        }
+      >
+        <Icon
+          name={aspectRatio === '4:3' ? 'aspect-4-3' : 'aspect-16-9'}
+          size={r(20)}
+          color={DARK.white95}
+        />
+      </TouchableOpacity>
+
+      <View>
+        <TouchableOpacity
+          testID="flash-btn"
+          style={[styles.btn, flash !== 'off' && styles.btnActive]}
+          onPress={() => setFlashOpen((v) => !v)}
+        >
+          <Icon
+            name={flashIcon[flash]}
+            size={r(20)}
+            color={flash !== 'off' ? DARK.white : DARK.white95}
+          />
+        </TouchableOpacity>
+        {flashOpen && (
+          <View style={styles.dropdown}>
+            {FLASH_OPTS.map((o) => (
+              <TouchableOpacity
+                key={o.key}
+                testID={`flash-opt-${o.key}`}
+                style={styles.opt}
+                onPress={() => {
+                  onChangeFlash(o.key);
+                  setFlashOpen(false);
+                }}
+              >
+                <Icon
+                  name={flashIcon[o.key]}
+                  size={r(18)}
+                  color={flash === o.key ? DARK.orange : DARK.white}
+                />
+                <Text
+                  style={[styles.optTxt, flash === o.key && styles.optTxtSel]}
+                >
+                  {o.label}
+                </Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+        )}
+      </View>
+
+      <TouchableOpacity
+        testID="sound-btn"
+        style={[styles.btn, sound && styles.btnActive]}
+        onPress={onToggleSound}
+      >
+        <VolumeIcon
+          on={sound}
+          size={r(20)}
+          color={sound ? DARK.white : DARK.white95}
+        />
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        testID="grid-btn"
+        style={[styles.btn, grid && styles.btnActive]}
+        onPress={onToggleGrid}
+      >
+        <Icon
+          name="grid"
+          size={r(18)}
+          color={grid ? DARK.white : DARK.white95}
+        />
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  rail: {
+    gap: r(8),
+    padding: r(6),
+    paddingVertical: r(10),
+    borderRadius: r(26),
+    backgroundColor: DARK.black42,
+  },
+  btn: {
+    width: r(40),
+    height: r(40),
+    borderRadius: r(999),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  btnActive: { backgroundColor: DARK.orange95 },
+  dropdown: {
+    position: 'absolute',
+    left: r(52),
+    top: 0,
+    minWidth: r(130),
+    padding: r(6),
+    borderRadius: r(12),
+    backgroundColor: 'rgba(28,28,30,0.94)',
+  },
+  opt: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: r(8),
+    padding: r(10),
+    borderRadius: r(8),
+  },
+  optTxt: { color: DARK.white, fontSize: r(14) },
+  optTxtSel: { color: DARK.orange },
+});

package/src/camera/setup/index.tsx

@@ -1 +1,2 @@
-export { SetUp, type FlashMode, type AspectRatio } from './SetUp';
+export { SideRail } from './SideRail';
+export type { FlashMode, AspectRatio } from './SideRail';

package/src/components/Carousel/SlideItem.test.tsx

@@ -0,0 +1,27 @@
+import { render } from '@testing-library/react-native';
+import { SlideItem } from './SlideItem';
+import type { CustomPhotoFile } from '../../utils';
+
+const base = { id: '1', cameraType: 'back' as const, width: 1, height: 1 };
+const img: CustomPhotoFile = {
+  ...base,
+  cameraMode: 'single',
+  mode: 'single',
+  mime: 'image/jpeg',
+  path: '/a.jpg',
+  uri: 'file:///a.jpg',
+};
+const vid: CustomPhotoFile = {
+  ...base,
+  cameraMode: 'video',
+  mode: 'video',
+  mime: 'video/mp4',
+  path: '/v.mp4',
+  uri: 'file:///v.mp4',
+};
+
+it('renders image vs video branch', () => {
+  expect(() => render(<SlideItem file={img} />)).not.toThrow();
+  const { getByTestId } = render(<SlideItem file={vid} />);
+  expect(getByTestId('video-player')).toBeTruthy();
+});

package/src/components/Carousel/SlideItem.tsx

@@ -1,20 +1,24 @@
 import { Image, StyleSheet, View } from 'react-native';
 import type { CustomPhotoFile } from '../../utils';
+import { VideoPlayer } from '../VideoPlayer';
 
 export function SlideItem({ file }: { file: CustomPhotoFile }) {
   return (
     <View style={styles.root}>
-      <Image
-        source={{ uri: file.uri }}
-        style={StyleSheet.absoluteFill}
-        resizeMode="contain"
-      />
+      {file.mime === 'video/mp4' ? (
+        <VideoPlayer uri={file.uri} />
+      ) : (
+        <Image
+          source={{ uri: file.uri }}
+          style={StyleSheet.absoluteFill}
+          resizeMode="contain"
+        />
+      )}
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  // 相机 slide 固定黑底:与 SinglePre / PreView 一致,
-  // 让照片在纯黑上凸显的 UX 惯例,不走 c.background token.
+  // 相机 slide 固定黑底:让图/视频在纯黑上凸显的 UX 惯例,不走 c.background token.
   root: { flex: 1, backgroundColor: '#000' },
 });

package/src/components/VideoPlayer.test.tsx

@@ -0,0 +1,8 @@
+import { render, fireEvent } from '@testing-library/react-native';
+import { VideoPlayer } from './VideoPlayer';
+
+it('renders and toggles play on tap without crashing', () => {
+  const { getByTestId } = render(<VideoPlayer uri="file:///v.mp4" />);
+  expect(getByTestId('video-player')).toBeTruthy();
+  expect(() => fireEvent.press(getByTestId('video-player'))).not.toThrow();
+});

package/src/components/VideoPlayer.tsx

@@ -0,0 +1,30 @@
+import { useState } from 'react';
+import { Pressable, StyleSheet } from 'react-native';
+import { useVideoPlayer, VideoView } from 'react-native-video';
+
+export function VideoPlayer({ uri }: { uri: string }) {
+  const player = useVideoPlayer({ uri }, (p) => {
+    p.loop = true;
+  });
+  const [playing, setPlaying] = useState(false);
+  return (
+    <Pressable
+      testID="video-player"
+      style={StyleSheet.absoluteFill}
+      onPress={() => {
+        if (playing) {
+          player.pause();
+        } else {
+          player.play();
+        }
+        setPlaying((p) => !p);
+      }}
+    >
+      <VideoView
+        player={player}
+        style={StyleSheet.absoluteFill}
+        resizeMode="contain"
+      />
+    </Pressable>
+  );
+}

package/src/components/index.tsx

@@ -1,3 +1,2 @@
 export { Loading } from './Loading';
-export { PreviewThumbnail } from './PreviewThumbnail';
 export * from './Carousel';

package/src/hooks/index.ts

@@ -1,3 +1,2 @@
 export { useCreation } from './useCreation';
-export { useConfirm } from './useConfirm';
 export { useCamera } from './useCamera';