@unif/react-native-camera 1.2.6 → 2.1.0

package/src/components/Loading.tsx

@@ -1,76 +1,14 @@
-import React, { useEffect } from 'react';
-import { View, StyleSheet } from 'react-native';
-import Animated, {
-  Easing,
-  withRepeat,
-  withTiming,
-  useSharedValue,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
-import { pxToDpWidth } from '../utils';
-
-const Loading: React.FC = () => {
-  const firstDotScale = useSharedValue(0);
-  const secondDotScale = useSharedValue(0);
-  const thirdDotScale = useSharedValue(0);
-
-  useEffect(() => {
-    // 创建动画：依次跳动
-    firstDotScale.value = withRepeat(
-      withTiming(1, { duration: 500, easing: Easing.ease }),
-      -1,
-      true
-    );
-
-    secondDotScale.value = withRepeat(
-      withTiming(1, { duration: 500, easing: Easing.ease }),
-      -1,
-      true
-    );
-
-    thirdDotScale.value = withRepeat(
-      withTiming(1, { duration: 500, easing: Easing.ease }),
-      -1,
-      true
-    );
-  }, [firstDotScale, secondDotScale, thirdDotScale]);
-
-  // 使用 useAnimatedStyle 来绑定动画到样式上
-  const animatedStyle1 = useAnimatedStyle(() => ({
-    transform: [{ scale: firstDotScale.value }],
-  }));
-
-  const animatedStyle2 = useAnimatedStyle(() => ({
-    transform: [{ scale: secondDotScale.value }],
-  }));
-
-  const animatedStyle3 = useAnimatedStyle(() => ({
-    transform: [{ scale: thirdDotScale.value }],
-  }));
+import { StyleSheet, View } from 'react-native';
+import { Spinner, r } from '@unif/react-native-design';
 
+export function Loading() {
   return (
-    <View style={styles.container}>
-      <Animated.View style={[styles.dot, animatedStyle1]} />
-      <Animated.View style={[styles.dot, animatedStyle2]} />
-      <Animated.View style={[styles.dot, animatedStyle3]} />
+    <View style={styles.root} testID="loading">
+      <Spinner size={r(32)} />
     </View>
   );
-};
+}
 
 const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    flex: 1,
-  },
-  dot: {
-    width: pxToDpWidth(20),
-    height: pxToDpWidth(20),
-    borderRadius: 10,
-    backgroundColor: '#FF7600',
-    margin: 5,
-  },
+  root: { justifyContent: 'center', alignItems: 'center' },
 });
-
-export default Loading;

package/src/components/PreviewThumbnail.tsx

@@ -1,40 +1,45 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-02-26 14:42:00
- * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-17 11:33:28
- * @Description:
- * @PageName: 左侧预览
- */
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import {
-  StyleSheet,
-  TouchableOpacity,
-  type ImageStyle,
-  Image,
-  type GestureResponderEvent,
-} from 'react-native';
-import React from 'react';
+  Thumbnail,
+  r,
+  useThemedStyles,
+  type ColorTokens,
+} from '@unif/react-native-design';
+import type { CustomPhotoFile } from '../utils';
 
-export type PreviewThumbnailProps = {
-  uri: string;
-  onPress?: (event: GestureResponderEvent) => void;
-  style?: ImageStyle;
+type Props = {
+  files: CustomPhotoFile[];
+  currentIndex: number;
+  onTap: (i: number) => void;
 };
 
-const PreviewThumbnail: React.FC<PreviewThumbnailProps> = ({
-  onPress,
-  uri,
-  style,
-}) => {
+export function PreviewThumbnail({ files, currentIndex, onTap }: Props) {
+  const styles = useThemedStyles(makeStyles);
   return (
-    <TouchableOpacity onPress={onPress}>
-      <Image source={{ uri }} style={{ ...styles.image, ...style }} />
-    </TouchableOpacity>
+    <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>
   );
-};
-
-export default PreviewThumbnail;
+}
 
-const styles = StyleSheet.create({
-  image: { width: '100%', height: '100%', borderRadius: 5 },
-});
+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/components/index.tsx

@@ -1,8 +1,3 @@
-import PreviewThumbnail from './PreviewThumbnail';
-import Rotate from './Rotate';
-import Back from './Back';
-import Delete from './Delete';
-import Save from './Save';
+export { Loading } from './Loading';
+export { PreviewThumbnail } from './PreviewThumbnail';
 export * from './Carousel';
-export * from './Modal';
-export { Back, Rotate, PreviewThumbnail, Delete, Save };

package/src/hooks/index.ts

@@ -1,12 +1,3 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-01-17 16:29:43
- * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-18 15:13:08
- * @Description:
- * @PageName:
- */
-import useCreation from './useCreation';
-import useConfirm from './useConfirm';
-
-export { useCreation, useConfirm };
+export { useCreation } from './useCreation';
+export { useConfirm } from './useConfirm';
+export { useCamera } from './useCamera';

package/src/hooks/useCamera.tsx

@@ -0,0 +1,42 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import type { CameraApi, CameraResult, OpenConfig } from '../utils';
+import { Container, ModalView } from '../camera';
+
+export function useCamera(): [CameraApi, React.ReactElement] {
+  const [visible, setVisible] = useState(false);
+  const [config, setConfig] = useState<OpenConfig | null>(null);
+  const resolverRef = useRef<((r: CameraResult) => void) | null>(null);
+
+  const settle = useCallback((r: CameraResult) => {
+    if (resolverRef.current) {
+      resolverRef.current(r);
+      resolverRef.current = null;
+    }
+    setVisible(false);
+    setConfig(null);
+  }, []);
+
+  const api = useMemo<CameraApi>(
+    () => ({
+      open: (cfg: OpenConfig) =>
+        new Promise<CameraResult>((resolve) => {
+          resolverRef.current = resolve;
+          setConfig(cfg);
+          setVisible(true);
+        }),
+      close: () => settle({ code: 0, data: [], message: 'cancelled' }),
+    }),
+    [settle]
+  );
+
+  const holder = (
+    <ModalView
+      visible={visible}
+      onClose={() => settle({ code: 0, data: [], message: 'cancelled' })}
+    >
+      {config && <Container config={config} onSettle={settle} />}
+    </ModalView>
+  );
+
+  return [api, holder];
+}

package/src/hooks/useConfirm.tsx

@@ -1,58 +1,11 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-01-17 16:28:56
- * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-18 16:05:43
- * @Description:
- * @PageName:
- */
-import React, { useRef, useState } from 'react';
-import type { ConfirmConfigProps, ConfirmRef } from '../utils';
-import { Confirm } from '../components';
-
-export default function useConfirm() {
-  const [visible, setVisible] = useState(false);
-  const [config, setConfig] = useState<ConfirmConfigProps>();
-  const close = () => {
-    setVisible(false);
-  };
-
-  const ref = useRef<{ resolvePromise: (confirmed: boolean) => void }>({
-    resolvePromise: () => {},
-  });
-
-  const confirmApi = React.useMemo<ConfirmRef>(() => {
-    return {
-      open: async (openConfig) => {
-        setConfig(openConfig);
-        setVisible(true);
-        return new Promise<boolean>((resolve) => {
-          ref.current.resolvePromise = resolve;
-        });
-      },
-      close: () => close(),
-    };
-  }, []);
-
-  let contextHolder = null;
-  if (visible) {
-    contextHolder = (
-      <Confirm
-        title={config?.title}
-        text={config?.text}
-        onCancel={() => {
-          close();
-          ref.current.resolvePromise(false);
-        }}
-        onConfirm={() => {
-          close();
-          ref.current.resolvePromise(true);
-        }}
-      />
-    );
-  }
-  return {
-    confirmApi,
-    contextHolder,
-  };
+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) },
+      ]);
+    });
 }

package/src/hooks/useCreation.ts

@@ -0,0 +1,26 @@
+import { useRef } from 'react';
+import { depsAreSame } from '../utils';
+
+export function useCreation<T>(
+  factory: () => T,
+  deps: ReadonlyArray<unknown>
+): T {
+  const current = useRef<{
+    deps: ReadonlyArray<unknown>;
+    obj: T;
+    initialized: boolean;
+  }>({
+    deps,
+    obj: undefined as unknown as T,
+    initialized: false,
+  });
+  if (
+    !current.current.initialized ||
+    !depsAreSame(deps, current.current.deps)
+  ) {
+    current.current.deps = deps;
+    current.current.obj = factory();
+    current.current.initialized = true;
+  }
+  return current.current.obj;
+}

package/src/index.tsx

@@ -1,38 +1,4 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-01-09 13:54:14
- * @LastEditors: 刘利军
- * @LastEditTime: 2024-01-17 16:58:16
- * @Description:
- * @PageName:
- */
-import { NativeModules, Platform } from 'react-native';
+export { useCamera } from './hooks';
+export * from './utils';
 
-const LINKING_ERROR =
-  `The package '@unif/react-native-camera' doesn't seem to be linked. Make sure: \n\n` +
-  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
-  '- You rebuilt the app after installing the package\n' +
-  '- You are not using Expo Go\n';
-
-// @ts-expect-error
-const isTurboModuleEnabled = global.__turboModuleProxy != null;
-
-const ReactNativeCameraModule = isTurboModuleEnabled
-  ? require('./NativeReactNativeCamera').default
-  : NativeModules.ReactNativeCamera;
-
-const ReactNativeCamera = ReactNativeCameraModule
-  ? ReactNativeCameraModule
-  : new Proxy(
-      {},
-      {
-        get() {
-          throw new Error(LINKING_ERROR);
-        },
-      }
-    );
-
-export default ReactNativeCamera;
-
-import useCamera from './hooks/useCamera.tsx';
-export { useCamera };
+export const VERSION = '2.0.0';

package/src/utils/depsAreSame.ts

@@ -1,12 +1,11 @@
-import type { DependencyList } from 'react';
-
-export default function depsAreSame(
-  oldDeps: DependencyList,
-  deps: DependencyList
+export function depsAreSame(
+  a: ReadonlyArray<unknown>,
+  b: ReadonlyArray<unknown>
 ): boolean {
-  if (oldDeps === deps) return true;
-  for (let i = 0; i < oldDeps.length; i++) {
-    if (!Object.is(oldDeps[i], deps[i])) return false;
+  if (a === b) return true;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (!Object.is(a[i], b[i])) return false;
   }
   return true;
 }

package/src/utils/index.ts

@@ -1,14 +1,4 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-01-11 14:53:09
- * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-25 17:48:42
- * @Description:
- * @PageName:
- */
-export * from './common';
-export * from './render-item';
-export * from './px-to-dp';
 export * from './interface';
-export * from './watermark';
 export * from './util';
+export * from './depsAreSame';
+export * from './px-to-dp';

package/src/utils/interface.ts

@@ -1,104 +1,43 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-01-12 11:38:13
- * @LastEditors: 刘利军
- * @LastEditTime: 2025-01-16 15:05:07
- * @Description:
- * @PageName:
- */
 export type CameraType = 'back' | 'front';
-export type FlashMode = 'auto' | 'on' | 'off';
 
-export enum CameraModeEnum {
-  'continuous' = '连拍',
-  'single' = '单拍',
-  'video' = '视频',
-}
-export type CameraMode = keyof typeof CameraModeEnum;
+export type PhotoQuality = 'speed' | 'balanced' | 'quality';
 
-/** 公用 */
-export type CameraModeCommonType = {
-  type?: CameraType;
-  flashMode?: FlashMode;
-  mode: CameraMode;
-};
-
-/** 图片 */
-export type CameraModeImageType = {
-  quality?: number;
-};
+export type DataRetainedMode = 'clear' | 'retain';
 
-export type Resolution = {
-  width: number;
-  height: number;
-};
-export type CameraModeVidoType = {
-  recTime?: number;
-  videoResolution?: Resolution;
-  photoResolution?: Resolution;
-};
+export type CameraModeName = 'single' | 'continuous' | 'video';
 
-/** 相机 */
-export type CameraModeType = CameraModeCommonType &
-  CameraModeImageType &
-  CameraModeVidoType;
+export type Point = { x: number; y: number };
 
-export type DataRetainedModeType = 'retain' | 'clear';
-export type CameraProps = {
-  cameraMode: CameraModeType[];
-  dataRetainedMode: DataRetainedModeType;
-  watermark?: WatermarkType;
+export type CameraMode = {
+  mode: CameraModeName;
+  photoQuality?: PhotoQuality;
+  jpegQuality?: number;
 };
 
-export type CameraModeListItem = {
-  label: string;
-  value: CameraMode;
+export type OpenConfig = {
+  cameraMode: CameraMode[];
+  dataRetainedMode: DataRetainedMode;
 };
 
-export type CameraBackDataItem = {
-  id: string;
+export type CustomPhotoFile = {
   path: string;
-  cameraType: string;
+  uri: string;
+  width: number;
+  height: number;
+  mime: 'image/jpeg' | 'video/mp4';
+  mode: CameraModeName;
+  duration?: number;
 };
-export type CameraBackDataList = CameraBackDataItem[];
-
-export type CameraBack =
-  | {
-      code: 200;
-      data: CameraBackDataList;
-      message: string;
-    }
-  | undefined
-  | null;
-
-export interface CameraRef {
-  open: (config?: CameraProps) => Promise<CameraBack>;
-  close: () => void;
-}
 
-import type { PhotoFile } from 'react-native-vision-camera';
+export type CameraResultCode = 0 | 200 | 403 | 404 | 500 | 503;
 
-export interface CustomPhotoFile extends PhotoFile {
-  mode: CameraMode;
-  frontTime: number;
-  cameraType: CameraType;
-}
-
-export interface ConfirmConfigProps {
-  text?: string;
-  title?: string;
-}
+export type CameraResult = {
+  code: CameraResultCode;
+  data: CustomPhotoFile[];
+  message: string;
+};
 
-export interface ConfirmRef {
-  open: (config?: ConfirmConfigProps) => Promise<boolean>;
+export type CameraApi = {
+  open: (config: OpenConfig) => Promise<CameraResult>;
   close: () => void;
-}
-
-export type WatermarkType = {
-  content?: string[];
-  image?: string;
-  gap?: number[]; // 水印之间距离
-  rotate?: number; // 水印旋转角度
-  width?: number;
-  height?: number;
 };

package/src/utils/px-to-dp.tsx

@@ -1,12 +1,8 @@
-import { Dimensions } from 'react-native';
+import { Dimensions, PixelRatio } from 'react-native';
 
-function pxToDpWidth(uiElementPx: number) {
+const DESIGN_WIDTH = 375;
+
+export function pxToDp(px: number): number {
   const { width } = Dimensions.get('window');
-  return (uiElementPx * width) / 750;
-}
-function pxToDpHeight(uiElementPx: number) {
-  const { height } = Dimensions.get('window');
-  return (uiElementPx * height) / 1334;
+  return PixelRatio.roundToNearestPixel((px * width) / DESIGN_WIDTH);
 }
-
-export { pxToDpWidth, pxToDpHeight };

package/src/utils/util.ts

@@ -1,47 +1,22 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-12-25 17:48:18
- * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-25 17:48:44
- * @Description:
- * @PageName:
- */
-export const formatUri = (uri: string) => {
-  const startPath = 'file://';
-  if (uri.startsWith(startPath)) {
-    return uri;
-  }
-  return `${startPath}${uri}`;
-};
+import type { CustomPhotoFile, CameraModeName } from './interface';
 
-export function throttle(fn: Function, limit: number) {
-  let lastCall = 0;
-
-  return (...args: any[]) => {
-    const now = Date.now();
-    if (now - lastCall >= limit) {
-      fn(...args);
-      lastCall = now;
-    }
-  };
+export function toFileUri(path: string): string {
+  if (path.startsWith('file://')) return path;
+  return `file://${path}`;
 }
 
-/**
- * 防抖函数
- * @param fn 要执行的函数
- * @param delay 延迟时间（毫秒）
- * @returns 防抖后的函数
- */
-export function debounce(fn: Function, delay: number) {
-  let timer: NodeJS.Timeout | null = null;
-
-  return (...args: any[]) => {
-    if (timer) {
-      clearTimeout(timer);
-    }
-
-    timer = setTimeout(() => {
-      fn(...args);
-    }, delay);
+export function buildPhotoFile(
+  raw: { path: string; width: number; height: number; duration?: number },
+  mode: CameraModeName,
+  isVideo: boolean = false
+): CustomPhotoFile {
+  return {
+    path: raw.path,
+    uri: toFileUri(raw.path),
+    width: raw.width,
+    height: raw.height,
+    mime: isVideo ? 'video/mp4' : 'image/jpeg',
+    mode,
+    ...(raw.duration != null ? { duration: raw.duration } : {}),
   };
 }

package/UnifRNCamera.podspec

@@ -1,41 +0,0 @@
-require "json"
-
-package = JSON.parse(File.read(File.join(__dir__, "package.json")))
-folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
-
-Pod::Spec.new do |s|
-  s.name         = "UnifRNCamera"
-  s.version      = package["version"]
-  s.summary      = package["description"]
-  s.homepage     = package["homepage"]
-  s.license      = package["license"]
-  s.authors      = package["author"]
-
-  s.platforms    = { :ios => "11.0" }
-  s.source       = { :git => "https://github.com/tongyizixun/unif-react-native-camera.git", :tag => "#{s.version}" }
-
-  s.source_files = "ios/**/*.{h,m,mm}", "cpp/**/*.{hpp,cpp,c,h}"
-
-  # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
-  # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.
-  if respond_to?(:install_modules_dependencies, true)
-    install_modules_dependencies(s)
-  else
-  s.dependency "React-Core"
-
-  # Don't install the dependencies when we run `pod install` in the old architecture.
-  if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
-    s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
-    s.pod_target_xcconfig    = {
-        "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
-        "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
-        "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
-    }
-    s.dependency "React-Codegen"
-    s.dependency "RCT-Folly"
-    s.dependency "RCTRequired"
-    s.dependency "RCTTypeSafety"
-    s.dependency "ReactCommon/turbomodule/core"
-   end
-  end    
-end