@unif/react-native-camera 1.2.6 → 2.1.0

package/src/camera/footer/Footer.tsx

@@ -1,204 +1,113 @@
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import {
-  Image,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-  type GestureResponderEvent,
-} from 'react-native';
-import React, { useState } from 'react';
-import {
-  CameraModeEnum,
-  formatUri,
-  throttle,
-  type CameraMode,
-  type CameraModeType,
-} from '../../utils';
-import { Back, Rotate, PreviewThumbnail } from '../../components';
-import type { PhotoFile } from 'react-native-vision-camera';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+  Button,
+  Segmented,
+  r,
+  useThemedStyles,
+  type ColorTokens,
+} from '@unif/react-native-design';
+import type { CameraMode } from '../../utils';
+
+type Props = {
+  modes: CameraMode[];
+  currentIndex: number;
+  recording: boolean;
+  onShutter: () => void;
+  onSelectMode: (i: number) => void;
+  onCancel: () => void;
+  onFinishBurst?: () => void;
+  burstCount?: number;
+};
 
-const Take = require('../../assets/home/take.png');
+const labelMap: Record<CameraMode['mode'], string> = {
+  single: '拍照',
+  continuous: '连拍',
+  video: '视频',
+};
 
-const Footer: React.FC<{
-  cameraMode: CameraModeType[];
-  photos: PhotoFile[];
-  backPress?: (event: GestureResponderEvent) => void;
-  thumbnailPress?: (event: GestureResponderEvent) => void;
-  savePress?: (event: GestureResponderEvent) => void;
-  rotatePress?: (event: GestureResponderEvent) => void;
-  takePress?: (event: GestureResponderEvent) => void;
-  onChange?: (val: CameraModeType) => void;
-}> = ({
-  cameraMode,
-  photos,
-  backPress,
-  thumbnailPress,
-  takePress,
-  savePress,
-  rotatePress,
-  onChange,
-}) => {
-  const isPhotos = () => photos.length > 0;
-  const [stateText, setStateText] = useState('');
-  const back = (e: GestureResponderEvent) => {
-    backPress && backPress(e);
-  };
-  const [mode, setMode] = useState<CameraMode | undefined>(cameraMode[0]?.mode);
-  const insets = useSafeAreaInsets();
+export function Footer({
+  modes,
+  currentIndex,
+  recording,
+  onShutter,
+  onSelectMode,
+  onCancel,
+  onFinishBurst,
+  burstCount,
+}: Props) {
+  const styles = useThemedStyles(makeStyles);
+  const modeItems = modes.map((m, i) => ({
+    id: String(i),
+    label: labelMap[m.mode],
+    testID: `mode-${m.mode}`,
+  }));
   return (
-    <View style={[styles.footer, { paddingBottom: insets.bottom + 6 }]}>
-      {stateText ? (
-        <View>
-          <Text style={styles.stateText}>{stateText}</Text>
+    <View style={styles.root}>
+      {!recording && modeItems.length > 0 && (
+        <View style={styles.modesRow}>
+          <Segmented
+            items={modeItems}
+            value={String(currentIndex)}
+            onChange={(v) => onSelectMode(Number(v))}
+            testID="mode-segmented"
+          />
         </View>
-      ) : (
-        <>
-          <View style={styles.footerTop}>
-            {cameraMode.map((item) => {
-              return (
-                <TouchableOpacity
-                  key={item.mode}
-                  style={[
-                    styles.footerTopText,
-                    item.mode === mode
-                      ? styles.footerTopTextSelected
-                      : undefined,
-                  ]}
-                  onPress={() => {
-                    if (item.mode !== mode) {
-                      setMode(item.mode);
-                    }
-                    if (cameraMode.length > 1) {
-                      onChange && onChange(item);
-                    }
-                  }}
-                >
-                  <Text
-                    style={[
-                      styles.footerTopTextColor,
-                      item.mode === mode
-                        ? styles.footerTopTextSelected
-                        : undefined,
-                    ]}
-                  >
-                    {CameraModeEnum[item.mode]}
-                  </Text>
-                </TouchableOpacity>
-              );
-            })}
-          </View>
-          <View style={styles.footerBottom}>
-            <View style={styles.footerHorizontal}>
-              {isPhotos() ? (
-                <PreviewThumbnail
-                  uri={formatUri(photos[photos.length - 1]?.path || '')}
-                  onPress={thumbnailPress}
-                />
-              ) : (
-                <Back onPress={back} />
-              )}
-            </View>
-            <View style={styles.footerCenter}>
-              {isPhotos() && (
-                <Text style={styles.back} onPress={back}>
-                  返回
-                </Text>
-              )}
-              <TouchableOpacity
-                onPress={throttle(
-                  (e: GestureResponderEvent) => takePress?.(e),
-                  1000
-                )}
-              >
-                <Image source={Take} style={styles.image} />
-              </TouchableOpacity>
-              {isPhotos() && (
-                <Text
-                  style={styles.save}
-                  onPress={(e) => {
-                    setStateText('保存中...');
-                    savePress && savePress(e);
-                  }}
-                >
-                  保存
-                </Text>
-              )}
-            </View>
-            <View style={styles.footerHorizontal}>
-              <Rotate onPress={rotatePress} />
-            </View>
-          </View>
-        </>
       )}
+      <View style={styles.actions}>
+        <Button
+          variant="ghost"
+          label="取消"
+          onPress={onCancel}
+          testID="cancel-btn"
+          disabled={recording}
+        />
+        {/* shutter 按钮:相机 UX 惯例的圆形快门,无 design 对应组件,保留自定义实现 */}
+        <TouchableOpacity
+          onPress={onShutter}
+          testID="shutter-btn"
+          style={[styles.shutter, recording && styles.shutterRecording]}
+        />
+        {onFinishBurst && burstCount && burstCount > 0 ? (
+          <Button
+            variant="primary"
+            label={`完成 (${burstCount})`}
+            onPress={onFinishBurst}
+            testID="finish-burst-btn"
+          />
+        ) : (
+          <View style={styles.placeholder} />
+        )}
+      </View>
     </View>
   );
-};
-
-export default Footer;
+}
 
-const styles = StyleSheet.create({
-  image: { width: 62, height: 62 },
-  stateText: {
-    textAlign: 'center',
-    color: '#fff',
-  },
-  footer: {
-    ...StyleSheet.absoluteFillObject,
-    top: undefined,
-    backgroundColor: 'rgba(0,0,0,0.3)',
-    paddingTop: 6,
-    display: 'flex',
-    borderTopLeftRadius: 10,
-    borderTopRightRadius: 10,
-    paddingHorizontal: 16,
-    zIndex: 9,
-  },
-  footerBottom: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  footerHorizontal: { width: 34, height: 34 },
-  footerCenter: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexDirection: 'row',
-  },
-  footerTop: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    paddingBottom: 6,
-  },
-  footerTopText: {
-    paddingVertical: 6,
-    paddingHorizontal: 24,
-    marginHorizontal: 2,
-    borderRadius: 10,
-  },
-  footerTopTextColor: {
-    color: '#fff',
-    borderRadius: 10,
-    fontSize: 16,
-  },
-  footerTopTextSelected: {
-    color: '#E96C00',
-    borderRadius: 10,
-  },
-  save: {
-    flex: 1,
-    paddingVertical: 24,
-    marginLeft: 24,
-    color: '#fff',
-    textAlign: 'left',
-  },
-  back: {
-    paddingVertical: 24,
-    flex: 1,
-    textAlign: 'right',
-    color: '#fff',
-    marginRight: 24,
-  },
-});
+const makeStyles = (c: ColorTokens) =>
+  StyleSheet.create({
+    root: {
+      position: 'absolute',
+      bottom: r(30),
+      left: 0,
+      right: 0,
+      alignItems: 'center',
+    },
+    modesRow: { marginBottom: r(16) },
+    actions: {
+      flexDirection: 'row',
+      width: '100%',
+      justifyContent: 'space-around',
+      alignItems: 'center',
+    },
+    // shutter 圆形快门:相机 UX 惯例,沿用白底高对比度.
+    // 录制态切换为 c.error 红底标识"录制中".
+    shutter: {
+      width: r(64),
+      height: r(64),
+      borderRadius: r(32),
+      backgroundColor: c.surface,
+      borderWidth: r(4),
+      borderColor: c.outline,
+    },
+    shutterRecording: { backgroundColor: c.error },
+    placeholder: { width: r(60) },
+  });

package/src/camera/footer/index.tsx

@@ -1,2 +1 @@
-import Footer from './Footer';
-export { Footer };
+export { Footer } from './Footer';

package/src/camera/index.tsx

@@ -1,13 +1,12 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-01-12 13:44:47
- * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-25 11:04:23
- * @Description:
- * @PageName:
- */
-import Camera from './Camera';
-import NoCamera from './NoCamera';
-import NoPermission from './NoPermission';
-import ModalView from './ModalView';
-export { Camera, NoCamera, NoPermission, ModalView };
+export { ModalView } from './ModalView';
+export { Container } from './Container';
+export { NoPermission } from './NoPermission';
+export { NoCamera } from './NoCamera';
+export { ErrorView } from './Error';
+export { Camera, type CameraHandle } from './Camera';
+export { FocusIndicator } from './FocusIndicator';
+export {
+  capturePhotoToFile,
+  type CapturedPhotoRaw,
+} from './capturePhotoHelper';
+export { Footer } from './footer';

package/src/camera/preview/PreView.tsx

@@ -1,113 +1,32 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-12-02 13:37:36
- * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-25 17:10:52
- * @Description:
- * @PageName:
- */
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import React, { useState } from 'react';
+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';
 
-import { CameraModeEnum, type CameraModeType } from '../../utils';
-import { Back, Delete, MyCarousel } from '../../components';
-import { pxToDpWidth, type CustomPhotoFile } from '../../utils';
-import PreviewFooter from './PreviewFooter';
+type Props = { files: CustomPhotoFile[] };
 
-import { styles as singleStyles, type CommonProps } from './SinglePre';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-const PreView: React.FC<
-  {
-    cameraMode: CameraModeType[];
-    data: CustomPhotoFile[];
-  } & CommonProps
-> = ({ cameraMode, data, onBack, onDel }) => {
-  const inset = useSafeAreaInsets();
-  const [mode, setMode] = useState(data[0]?.mode);
-  const showData = data.filter((item) => item.mode === mode);
-  const [snapToIndex, setSnapToIndex] = useState<number>(0);
+export function PreView({ files }: Props) {
+  const [index, setIndex] = useState(0);
   return (
-    <View style={styles.container}>
-      <View style={styles.mode}>
-        {cameraMode
-          .filter((item) => {
-            return data.some((dItem) => {
-              return item.mode === dItem.mode;
-            });
-          })
-          .map((item, index) => {
-            return (
-              <TouchableOpacity
-                style={styles.modeItem}
-                key={`${item.mode}_${index}`}
-                onPress={() => setMode(item.mode)}
-              >
-                <Text
-                  style={[
-                    styles.modeText,
-                    item.mode === mode ? styles.modeTextSelected : undefined,
-                  ]}
-                >
-                  {CameraModeEnum[item.mode]}
-                </Text>
-              </TouchableOpacity>
-            );
-          })}
-      </View>
-      <View style={{ paddingHorizontal: pxToDpWidth(34) }}>
-        <MyCarousel data={showData} onSnapToItem={setSnapToIndex} />
-      </View>
-      <View style={[singleStyles.footer, { bottom: inset.bottom + 16 }]}>
-        <PreviewFooter
-          actions={[
-            <Back
-              key="back"
-              style={singleStyles.image}
-              text="返回"
-              onPress={onBack}
-            />,
-            <Delete
-              key="del"
-              style={singleStyles.image}
-              text="删除"
-              onPress={async () => {
-                if (onDel) {
-                  const isDel = await onDel(showData[snapToIndex]);
-                  if (isDel && snapToIndex > 0) {
-                    setSnapToIndex((val) => val - 1);
-                  }
-                }
-              }}
-            />,
-          ]}
-        />
+    <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>
   );
-};
-
-export default PreView;
+}
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#3C3A3E',
-  },
-  mode: {
-    flexDirection: 'row',
-    marginVertical: pxToDpWidth(24),
-  },
-  modeItem: {
-    padding: 10,
-  },
-  modeText: {
-    color: '#fff',
-    fontSize: 14,
-    fontWeight: 400,
-  },
-  modeTextSelected: {
-    color: '#E96C00',
-    fontSize: 16,
-    fontWeight: 500,
+  // 多图预览容器固定黑底:相机 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,34 +1,30 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-12-02 13:37:36
- * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-27 13:29:19
- * @Description:
- * @PageName:
- */
 import { StyleSheet, View } from 'react-native';
-import React, { type PropsWithChildren } from 'react';
+import type { CustomPhotoFile } from '../../utils';
+import { SinglePre } from './SinglePre';
+import { PreView } from './PreView';
+import { PreviewFooter } from './PreviewFooter';
 
-const PreViewContainer: React.FC<PropsWithChildren<{ visible: boolean }>> = ({
-  visible,
-  children,
-}) => {
-  if (!visible) {
-    return null;
-  }
-  return <View style={styles.container}>{children}</View>;
+type Props = {
+  files: CustomPhotoFile[];
+  onRetake: () => void;
+  onConfirm: () => void;
 };
 
-export default PreViewContainer;
+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({
-  container: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    right: 0,
-    left: 0,
-    backgroundColor: '#fff',
-    zIndex: 19,
-  },
+  // 预览容器固定黑底:相机 UX 惯例,与 SinglePre / PreView / SlideItem 一致.
+  root: { flex: 1, backgroundColor: '#000' },
 });

package/src/camera/preview/PreviewFooter.tsx

@@ -1,32 +1,38 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-12-16 09:21:56
- * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-25 17:12:01
- * @Description:
- * @PageName:
- */
 import { StyleSheet, View } from 'react-native';
-import React, { type ReactNode } from 'react';
+import { Button, r } from '@unif/react-native-design';
 
-export interface PreviewFooterProps {
-  actions: ReactNode[];
-}
-const PreviewFooter: React.FC<PreviewFooterProps> = ({ actions }) => {
+type Props = {
+  onRetake: () => void;
+  onConfirm: () => void;
+};
+
+export function PreviewFooter({ onRetake, onConfirm }: Props) {
   return (
-    <View style={styles.footer}>
-      {actions.map((item) => {
-        return item;
-      })}
+    <View style={styles.root}>
+      <Button
+        variant="ghost"
+        label="重拍"
+        onPress={onRetake}
+        testID="retake-btn"
+      />
+      <Button
+        variant="primary"
+        label="使用照片"
+        onPress={onConfirm}
+        testID="confirm-btn"
+      />
     </View>
   );
-};
-
-export default PreviewFooter;
+}
 
 const styles = StyleSheet.create({
-  footer: {
+  root: {
+    position: 'absolute',
+    bottom: r(40),
+    left: 0,
+    right: 0,
     flexDirection: 'row',
-    justifyContent: 'space-evenly',
+    justifyContent: 'space-around',
+    alignItems: 'center',
   },
 });