@unif/react-native-camera 2.6.1 → 2.7.0

package/src/camera/preview/PreView.tsx

@@ -1,32 +0,0 @@
-import { useState } from 'react';
-import { StyleSheet, View } from 'react-native';
-import { r } from '@unif/react-native-design';
-import type { CustomPhotoFile } from '../../utils';
-import { Carousel } from '../../components/Carousel';
-import { PreviewThumbnail } from '../../components/PreviewThumbnail';
-
-type Props = { files: CustomPhotoFile[] };
-
-export function PreView({ files }: Props) {
-  const [index, setIndex] = useState(0);
-  return (
-    <View style={styles.root} testID="multi-pre">
-      <Carousel data={files} onIndexChange={setIndex} />
-      <View style={styles.thumbWrap}>
-        <PreviewThumbnail files={files} currentIndex={index} onTap={setIndex} />
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  // 多图预览容器固定黑底:相机 UX 惯例,与 SinglePre / PreViewContainer 一致.
-  root: { flex: 1, backgroundColor: '#000' },
-  thumbWrap: {
-    position: 'absolute',
-    bottom: r(100),
-    left: 0,
-    right: 0,
-    alignItems: 'center',
-  },
-});

package/src/camera/preview/PreViewContainer.tsx

@@ -1,30 +0,0 @@
-import { StyleSheet, View } from 'react-native';
-import type { CustomPhotoFile } from '../../utils';
-import { SinglePre } from './SinglePre';
-import { PreView } from './PreView';
-import { PreviewFooter } from './PreviewFooter';
-
-type Props = {
-  files: CustomPhotoFile[];
-  onRetake: () => void;
-  onConfirm: () => void;
-};
-
-export function PreViewContainer({ files, onRetake, onConfirm }: Props) {
-  const first = files[0];
-  return (
-    <View style={styles.root}>
-      {files.length === 1 && first != null ? (
-        <SinglePre file={first} />
-      ) : files.length > 1 ? (
-        <PreView files={files} />
-      ) : null}
-      <PreviewFooter onRetake={onRetake} onConfirm={onConfirm} />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  // 预览容器固定黑底:相机 UX 惯例,与 SinglePre / PreView / SlideItem 一致.
-  root: { flex: 1, backgroundColor: '#000' },
-});

package/src/camera/preview/PreviewFooter.tsx

@@ -1,38 +0,0 @@
-import { StyleSheet, View } from 'react-native';
-import { Button, r } from '@unif/react-native-design';
-
-type Props = {
-  onRetake: () => void;
-  onConfirm: () => void;
-};
-
-export function PreviewFooter({ onRetake, onConfirm }: Props) {
-  return (
-    <View style={styles.root}>
-      <Button
-        variant="ghost"
-        label="重拍"
-        onPress={onRetake}
-        testID="retake-btn"
-      />
-      <Button
-        variant="primary"
-        label="使用照片"
-        onPress={onConfirm}
-        testID="confirm-btn"
-      />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  root: {
-    position: 'absolute',
-    bottom: r(40),
-    left: 0,
-    right: 0,
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    alignItems: 'center',
-  },
-});

package/src/camera/preview/SinglePre.tsx

@@ -1,30 +0,0 @@
-import { Image, StyleSheet, View } from 'react-native';
-import { Empty } from '@unif/react-native-design';
-import type { CustomPhotoFile } from '../../utils';
-
-type Props = { file: CustomPhotoFile };
-
-export function SinglePre({ file }: Props) {
-  return (
-    <View style={styles.root} testID="single-pre">
-      {file.mime === 'video/mp4' ? (
-        <Empty
-          title={`视频 · ${file.duration?.toFixed(1) ?? '0.0'}s`}
-          desc={file.path}
-        />
-      ) : (
-        <Image
-          source={{ uri: file.uri }}
-          style={StyleSheet.absoluteFill}
-          resizeMode="contain"
-        />
-      )}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  // 相机预览容器固定黑底:相机 UX 惯例(任何主题下都需要让照片 / 视频在纯黑上凸显),
-  // 不走 c.background token.
-  root: { flex: 1, backgroundColor: '#000' },
-});

package/src/camera/setup/SetUp.tsx

@@ -1,93 +0,0 @@
-import { StyleSheet, View } from 'react-native';
-import {
-  Chip,
-  Icon,
-  r,
-  useColors,
-  type IconName,
-} from '@unif/react-native-design';
-
-export type FlashMode = 'off' | 'on' | 'auto';
-export type AspectRatio = '4:3' | '16:9';
-
-type Props = {
-  flash: FlashMode;
-  aspectRatio: AspectRatio;
-  onChangeFlash: (m: FlashMode) => void;
-  onChangeAspectRatio: (r: AspectRatio) => void;
-  onToggleLens: () => void;
-  lensLabel: string;
-};
-
-const flashLabel: Record<FlashMode, string> = {
-  off: '闪关',
-  on: '闪开',
-  auto: '自动',
-};
-const flashOrder: FlashMode[] = ['off', 'auto', 'on'];
-
-const flashIconMap: Record<FlashMode, IconName> = {
-  off: 'flash-off',
-  on: 'flash-on',
-  auto: 'flash-auto',
-};
-
-export function SetUp({
-  flash,
-  aspectRatio,
-  onChangeFlash,
-  onChangeAspectRatio,
-  onToggleLens,
-  lensLabel,
-}: Props) {
-  const c = useColors();
-  const nextFlash = () => {
-    const i = flashOrder.indexOf(flash);
-    const next = flashOrder[(i + 1) % flashOrder.length] as FlashMode;
-    onChangeFlash(next);
-  };
-  return (
-    <View style={styles.root}>
-      <Chip
-        label={flashLabel[flash]}
-        leading={
-          <Icon name={flashIconMap[flash]} size={r(14)} color={c.foreground} />
-        }
-        onPress={nextFlash}
-        selected={flash !== 'off'}
-        testID="flash-btn"
-      />
-      <Chip
-        label={aspectRatio}
-        leading={
-          <Icon
-            name={aspectRatio === '4:3' ? 'aspect-4-3' : 'aspect-16-9'}
-            size={r(14)}
-            color={c.foreground}
-          />
-        }
-        onPress={() =>
-          onChangeAspectRatio(aspectRatio === '4:3' ? '16:9' : '4:3')
-        }
-        testID="aspect-btn"
-      />
-      <Chip
-        label={lensLabel}
-        leading={<Icon name="lens-flip" size={r(14)} color={c.foreground} />}
-        onPress={onToggleLens}
-        testID="lens-btn"
-      />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  root: {
-    position: 'absolute',
-    top: r(60),
-    left: r(16),
-    right: r(16),
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-});

package/src/components/PreviewThumbnail.tsx

@@ -1,45 +0,0 @@
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
-import {
-  Thumbnail,
-  r,
-  useThemedStyles,
-  type ColorTokens,
-} from '@unif/react-native-design';
-import type { CustomPhotoFile } from '../utils';
-
-type Props = {
-  files: CustomPhotoFile[];
-  currentIndex: number;
-  onTap: (i: number) => void;
-};
-
-export function PreviewThumbnail({ files, currentIndex, onTap }: Props) {
-  const styles = useThemedStyles(makeStyles);
-  return (
-    <View style={styles.row}>
-      {files.map((f, i) => (
-        <TouchableOpacity
-          key={`${f.path}-${i}`}
-          onPress={() => onTap(i)}
-          style={[
-            styles.thumbWrap,
-            i === currentIndex && styles.thumbWrapActive,
-          ]}
-        >
-          <Thumbnail uri={f.uri} size="sm" />
-        </TouchableOpacity>
-      ))}
-    </View>
-  );
-}
-
-const makeStyles = (c: ColorTokens) =>
-  StyleSheet.create({
-    row: { flexDirection: 'row', gap: r(6), padding: r(8) },
-    thumbWrap: {
-      borderRadius: r(4),
-      borderWidth: 2,
-      borderColor: 'transparent',
-    },
-    thumbWrapActive: { borderColor: c.primary },
-  });

package/src/hooks/useConfirm.tsx

@@ -1,11 +0,0 @@
-import { Alert } from 'react-native';
-
-export function useConfirm() {
-  return (title: string, message: string) =>
-    new Promise<boolean>((resolve) => {
-      Alert.alert(title, message, [
-        { text: '取消', onPress: () => resolve(false), style: 'cancel' },
-        { text: '确认', onPress: () => resolve(true) },
-      ]);
-    });
-}