@unif/react-native-camera 1.2.6 → 2.1.0

package/src/camera/preview/SinglePre.tsx

@@ -1,75 +1,30 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-12-16 09:54:00
- * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-27 10:55:55
- * @Description:
- * @PageName:
- */
-import { Image, StyleSheet, View, type ImageResizeMode } from 'react-native';
-import React from 'react';
-import PreviewFooter from './PreviewFooter';
-import { Back, Save } from '../../components';
-import { formatUri, type CustomPhotoFile } from '../../utils';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Image, StyleSheet, View } from 'react-native';
+import { Empty } from '@unif/react-native-design';
+import type { CustomPhotoFile } from '../../utils';
 
-export interface SingleProps extends CommonProps {
-  uri: string;
-  resizeMode?: ImageResizeMode | undefined;
-}
-export interface CommonProps {
-  onBack?: () => void;
-  onDel?: (photo?: CustomPhotoFile) => Promise<boolean> | undefined;
-  onSave?: () => void;
-}
-const SinglePre: React.FC<SingleProps> = ({
-  uri,
-  resizeMode,
-  onBack,
-  onSave,
-}) => {
-  const inset = useSafeAreaInsets();
+type Props = { file: CustomPhotoFile };
+
+export function SinglePre({ file }: Props) {
   return (
-    <View style={styles.container}>
-      <Image
-        style={styles.container}
-        resizeMode={resizeMode}
-        source={{ uri: formatUri(uri) }}
-      />
-      <View style={[styles.footer, { bottom: inset.bottom + 16 }]}>
-        <PreviewFooter
-          actions={[
-            <Back
-              key="back"
-              style={styles.image}
-              text="返回"
-              onPress={onBack}
-            />,
-            <Save
-              key="save"
-              style={styles.image}
-              text="保存"
-              onPress={onSave}
-            />,
-          ]}
+    <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>
+      )}
     </View>
   );
-};
-
-export default SinglePre;
-
-export const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
+}
 
-  footer: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
-  image: { width: 60, height: 60 },
+const styles = StyleSheet.create({
+  // 相机预览容器固定黑底:相机 UX 惯例(任何主题下都需要让照片 / 视频在纯黑上凸显),
+  // 不走 c.background token.
+  root: { flex: 1, backgroundColor: '#000' },
 });

package/src/camera/preview/index.tsx

@@ -1,13 +1,4 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-12-02 13:37:28
- * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-17 10:17:04
- * @Description:
- * @PageName:
- */
-import PreView from './PreView';
-import SinglePre from './SinglePre';
-import PreViewContainer from './PreViewContainer';
-
-export { PreView, SinglePre, PreViewContainer };
+export { SinglePre } from './SinglePre';
+export { PreView } from './PreView';
+export { PreviewFooter } from './PreviewFooter';
+export { PreViewContainer } from './PreViewContainer';

package/src/camera/setup/SetUp.tsx

@@ -1,230 +1,93 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-12-02 11:52:31
- * @LastEditors: 刘利军
- * @LastEditTime: 2025-01-21 11:10:20
- * @Description:
- * @PageName:
- */
-import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import React, { useState } from 'react';
-import { CONTROL_BUTTON_SIZE } from '../../utils';
-import type { FlashMode } from '../../utils';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { StyleSheet, View } from 'react-native';
+import {
+  Chip,
+  Icon,
+  r,
+  useColors,
+  type IconName,
+} from '@unif/react-native-design';
 
-const FlashOn = require('../../assets/tools/on.png');
-const FlashOff = require('../../assets/tools/off.png');
-const FlashAuto = require('../../assets/tools/auto.png');
-const volumeOff = require('../../assets/tools/volumeOff.png');
-const volumeOn = require('../../assets/tools/volumeOn.png');
+export type FlashMode = 'off' | 'on' | 'auto';
+export type AspectRatio = '4:3' | '16:9';
 
-const enlarge = require('../../assets/tools/enlarge.png');
-const narrow = require('../../assets/tools/narrow.png');
-const defaultEyeImage = require('../../assets/tools/defaultEye.png');
-const defaultFishEyeImage = require('../../assets/tools/fishEye.png');
-
-let volume = false;
-let screen = true;
+type Props = {
+  flash: FlashMode;
+  aspectRatio: AspectRatio;
+  onChangeFlash: (m: FlashMode) => void;
+  onChangeAspectRatio: (r: AspectRatio) => void;
+  onToggleLens: () => void;
+  lensLabel: string;
+};
 
-const SetUp: React.FC<{
-  isMultiCam: boolean;
-  onChange: (val: FlashMode) => void;
-  onAspectRationChange: (val: number) => void;
-  onVolumeChange: (val: boolean) => void;
-  onScreenChange: (val: 'cover' | 'contain' | undefined) => void;
-  onFishEyeOpen: (val: 'default' | 'fishEye') => void;
-}> = ({
-  isMultiCam,
-  onChange,
-  onAspectRationChange,
-  onScreenChange,
-  onVolumeChange,
-  onFishEyeOpen,
-}) => {
-  const [flashImage, setFlashImage] = useState(FlashOff);
-  const [volumeImage, setVolumeImage] = useState(volumeOff);
-  const [flashOpen, setFlashOpen] = useState(false);
-  const [screenImage, setScreenImage] = useState(narrow);
-  const [fishEyeOpen, setFishEyeOpen] = useState(false);
-  const [fishEyeImage, setFishEyeImage] = useState(defaultEyeImage);
-  const [openHeader, setOpenHeader] = useState(true);
-  const insets = useSafeAreaInsets();
+const flashLabel: Record<FlashMode, string> = {
+  off: '闪关',
+  on: '闪开',
+  auto: '自动',
+};
+const flashOrder: FlashMode[] = ['off', 'auto', 'on'];
 
-  // 闪光灯切换
-  const falshChange = (type: FlashMode) => {
-    switch (type) {
-      case 'on':
-        setFlashImage(FlashOn);
-        break;
-      case 'auto':
-        setFlashImage(FlashAuto);
-        break;
-      default:
-        setFlashImage(FlashOff);
-        break;
-    }
-    onChange(type);
-    setFlashOpen(false);
-    setOpenHeader(true);
-  };
+const flashIconMap: Record<FlashMode, IconName> = {
+  off: 'flash-off',
+  on: 'flash-on',
+  auto: 'flash-auto',
+};
 
-  // 广角切换
-  const fishEyeChange = (type: 'default' | 'fishEye') => {
-    onFishEyeOpen(type);
-    setFishEyeImage(type === 'default' ? defaultEyeImage : defaultFishEyeImage);
-    setFishEyeOpen(false);
-    setOpenHeader(true);
+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 (
-    <>
-      {openHeader && (
-        <View style={[styles.top, styles.header, { top: insets.top + 10 }]}>
-          {/* <Text style={styles.text}></Text> */}
-        </View>
-      )}
-      <View
-        style={[
-          styles.top,
-          styles.tools,
-          { top: undefined, bottom: insets.bottom + 125 },
-        ]}
-      >
-        <View style={styles.tool}>
-          <TouchableOpacity
-            style={styles.toolImg}
-            onPress={() => {
-              setOpenHeader(false);
-              setFlashOpen((val) => !val);
-            }}
-          >
-            <Image source={flashImage} style={styles.toolImg} />
-          </TouchableOpacity>
-          {flashOpen && (
-            <View style={styles.toolSetting}>
-              <Text onPress={() => falshChange('auto')} style={styles.toolText}>
-                自动
-              </Text>
-              <Text onPress={() => falshChange('on')} style={styles.toolText}>
-                打开
-              </Text>
-              <Text onPress={() => falshChange('off')} style={styles.toolText}>
-                关闭
-              </Text>
-            </View>
-          )}
-        </View>
-
-        <View style={styles.tool}>
-          <TouchableOpacity
-            style={styles.toolImg}
-            onPress={() => {
-              if (volume) {
-                setVolumeImage(volumeOff);
-              } else {
-                setVolumeImage(volumeOn);
-              }
-              volume = !volume;
-              onVolumeChange(volume);
-            }}
-          >
-            <Image source={volumeImage} style={styles.toolImg} />
-          </TouchableOpacity>
-        </View>
-
-        <View style={styles.tool}>
-          <TouchableOpacity
-            style={styles.toolImg}
-            onPress={() => {
-              if (screen) {
-                setScreenImage(enlarge);
-              } else {
-                setScreenImage(narrow);
-              }
-              onScreenChange(screen ? 'contain' : 'cover');
-              onAspectRationChange(screen ? 4 : 16);
-              screen = !screen;
-            }}
-          >
-            <Image source={screenImage} style={styles.toolImg} />
-          </TouchableOpacity>
-        </View>
-
-        {isMultiCam && (
-          <View style={styles.tool}>
-            <TouchableOpacity
-              style={styles.toolImg}
-              onPress={() => {
-                setOpenHeader(false);
-                setFishEyeOpen((val) => !val);
-              }}
-            >
-              <Image source={fishEyeImage} style={styles.toolImg} />
-            </TouchableOpacity>
-            {fishEyeOpen && (
-              <View style={styles.toolSetting}>
-                <Text
-                  onPress={() => fishEyeChange('default')}
-                  style={styles.toolText}
-                >
-                  默认
-                </Text>
-                <Text
-                  onPress={() => fishEyeChange('fishEye')}
-                  style={styles.toolText}
-                >
-                  广角
-                </Text>
-              </View>
-            )}
-          </View>
-        )}
-      </View>
-    </>
+    <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>
   );
-};
-
-export default SetUp;
+}
 
 const styles = StyleSheet.create({
-  text: { color: '#fff' },
-  top: {
-    ...StyleSheet.absoluteFillObject,
-    marginHorizontal: 20,
-    bottom: undefined,
-    zIndex: 9,
-  },
-  header: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  tools: {
-    display: 'flex',
-    width: '100%',
-  },
-  tool: {
-    display: 'flex',
-    flexDirection: 'row',
-    width: '100%',
-    height: CONTROL_BUTTON_SIZE / 2,
-    alignItems: 'center',
-    marginBottom: 8,
-  },
-  toolImg: {
-    width: CONTROL_BUTTON_SIZE / 2,
-    height: '100%',
-  },
-  toolSetting: {
-    display: 'flex',
-    flexDirection: 'row',
-  },
-  toolText: {
-    marginLeft: 8,
-    fontWeight: '900',
-    color: '#fff',
-  },
-  headerLeft: {
-    display: 'flex',
+  root: {
+    position: 'absolute',
+    top: r(60),
+    left: r(16),
+    right: r(16),
     flexDirection: 'row',
+    justifyContent: 'space-between',
   },
 });

package/src/camera/setup/index.tsx

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

package/src/components/Carousel/Carousel.tsx

@@ -1,49 +1,29 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-12-17 16:00:49
- * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-20 14:24:52
- * @Description:
- * @PageName:
- */
-import React from 'react';
-import Carousel, {
-  type ICarouselInstance,
-} from 'react-native-reanimated-carousel';
-import { useSharedValue } from 'react-native-reanimated';
-import {
-  pxToDpHeight,
-  pxToDpWidth,
-  renderItem,
-  type CustomPhotoFile,
-} from '../../utils';
-const CustomCarousel: React.FC<{
+import { StyleSheet, useWindowDimensions, View } from 'react-native';
+import RNCarousel from 'react-native-reanimated-carousel';
+import type { CustomPhotoFile } from '../../utils';
+import { SlideItem } from './SlideItem';
+
+type Props = {
   data: CustomPhotoFile[];
-  onSnapToItem?: ((index: number) => void) | undefined;
-  ref?: React.Ref<ICarouselInstance>;
-}> = ({ data, onSnapToItem, ref }) => {
-  const scrollOffsetValue = useSharedValue<number>(0);
+  onIndexChange?: (i: number) => void;
+};
 
+export function Carousel({ data, onIndexChange }: Props) {
+  const { width, height } = useWindowDimensions();
   return (
-    <>
-      <Carousel
-        ref={ref}
-        width={pxToDpWidth(679)}
-        height={pxToDpHeight(857)}
-        snapEnabled={true}
-        pagingEnabled={true}
+    <View style={styles.root}>
+      <RNCarousel
         data={data}
-        defaultScrollOffsetValue={scrollOffsetValue}
-        style={{ width: pxToDpWidth(679) }}
-        onConfigurePanGesture={(g: { enabled: (arg0: boolean) => any }) => {
-          'worklet';
-          g.enabled(true);
-        }}
-        onSnapToItem={onSnapToItem}
-        renderItem={renderItem({ rounded: true, totalIndex: data.length })}
+        width={width}
+        height={height}
+        loop={false}
+        onSnapToItem={onIndexChange}
+        renderItem={({ item }) => <SlideItem file={item} />}
       />
-    </>
+    </View>
   );
-};
+}
 
-export default CustomCarousel;
+const styles = StyleSheet.create({
+  root: { flex: 1 },
+});

package/src/components/Carousel/SlideItem.tsx

@@ -1,95 +1,20 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-12-17 15:50:46
- * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-20 14:22:58
- * @Description:
- * @PageName:
- */
-import React, { useMemo } from 'react';
-import {
-  type ImageSourcePropType,
-  type ImageStyle,
-  type StyleProp,
-  StyleSheet,
-  Text,
-  View,
-  type ViewProps,
-} from 'react-native';
-import type { AnimatedProps } from 'react-native-reanimated';
-import Animated from 'react-native-reanimated';
-import { pxToDpWidth } from '../../utils';
+import { Image, StyleSheet, View } from 'react-native';
+import type { CustomPhotoFile } from '../../utils';
 
-interface Props extends AnimatedProps<ViewProps> {
-  style?: StyleProp<ImageStyle>;
-  index?: number;
-  totalIndex?: number;
-  rounded?: boolean;
-  source?: ImageSourcePropType;
-}
-
-export const SlideItem: React.FC<Props> = (props) => {
-  const {
-    style,
-    index = 0,
-    totalIndex = 0,
-    rounded = false,
-    ...animatedViewProps
-  } = props;
-  const source = useMemo(() => props.source, [props.source]);
+export function SlideItem({ file }: { file: CustomPhotoFile }) {
   return (
-    <Animated.View style={styles.flex} {...animatedViewProps}>
-      <Animated.Image
-        style={[style, styles.container, rounded && styles.borderRadius]}
-        source={source}
+    <View style={styles.root}>
+      <Image
+        source={{ uri: file.uri }}
+        style={StyleSheet.absoluteFill}
         resizeMode="contain"
       />
-      <View style={styles.overlay}>
-        <View style={styles.overlayTextContainer}>
-          <Text style={styles.overlayText}>
-            第{index + 1}/{totalIndex}笔
-          </Text>
-        </View>
-      </View>
-    </Animated.View>
+    </View>
   );
-};
+}
 
 const styles = StyleSheet.create({
-  flex: {
-    flex: 1,
-    marginBottom: pxToDpWidth(20),
-    backgroundColor: 'rgba(255,255,255,0.2)',
-    borderRadius: pxToDpWidth(10),
-  },
-  borderRadius: {
-    borderRadius: pxToDpWidth(10),
-  },
-  container: {
-    width: '100%',
-    height: '100%',
-  },
-  overlay: {
-    position: 'absolute',
-    bottom: -pxToDpWidth(20),
-    left: 0,
-    right: 0,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  overlayText: {
-    color: '#fff',
-    fontSize: 14,
-    fontWeight: 'bold',
-    letterSpacing: 2,
-  },
-  overlayTextContainer: {
-    backgroundColor: '#E96C00',
-    paddingHorizontal: 15,
-    paddingVertical: 5,
-    minWidth: 80,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: pxToDpWidth(25),
-  },
+  // 相机 slide 固定黑底:与 SinglePre / PreView 一致,
+  // 让照片在纯黑上凸显的 UX 惯例,不走 c.background token.
+  root: { flex: 1, backgroundColor: '#000' },
 });

package/src/components/Carousel/index.tsx

@@ -1,13 +1,2 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-12-17 16:01:04
- * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-17 16:07:53
- * @Description:
- * @PageName:
- */
-import MyCarousel from './Carousel';
-
-import { SlideItem } from './SlideItem';
-
-export { MyCarousel, SlideItem };
+export { Carousel } from './Carousel';
+export { SlideItem } from './SlideItem';