@td-design/react-native-image-picker - npm Package Compare versions

Comparing version 1.6.5 to 1.6.6

lib/module/index.js

@@ -1,2 +0,2 @@
-import React from 'react';
+import React, { forwardRef, useImperativeHandle } from 'react';
 import { Image, TouchableOpacity, TouchableWithoutFeedback } from 'react-native';
@@ -14,35 +14,46 @@ import { ActionSheet, Box, helpers, Indicator, Modal, useTheme } from '@td-design/react-native';
 } = Indicator;
-const ImagePicker = props => {
-  const theme = useTheme();
-  const {
+const cameraOptions = {
+  mediaType: 'photo',
+  includeBase64: true,
+  quality: 1,
+  saveToPhotos: false,
+  durationLimit: 15,
+  videoQuality: 'high'
+};
+const cameraRationaleOptions = {
+  title: '获取摄像头权限',
+  message: '若不允许，您将无法使用摄像头功能',
+  buttonPositive: '同意',
+  buttonNegative: '取消',
+  buttonNeutral: '下次再说'
+};
+const libraryRationaleOptions = {
+  title: '获取读取文件权限',
+  message: '若不允许，您将无法访问图库',
+  buttonPositive: '同意',
+  buttonNegative: '取消',
+  buttonNeutral: '下次再说'
+};
+const ImagePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
     value,
     width = px(100),
     height = px(100),
-    options,
+    options = cameraOptions,
     showUploadImg = true,
-    beforeUpload,
-    upload,
-    uploadFinish,
-    onCancel,
-    onFail,
-    onGrantFail,
-    cameraRationale = {
-      title: '获取摄像头权限',
-      message: '若不允许，您将无法使用摄像头功能',
-      buttonPositive: '同意',
-      buttonNegative: '取消',
-      buttonNeutral: '下次再说'
-    },
-    libraryRationale = {
-      title: '获取读取文件权限',
-      message: '若不允许，您将无法访问图库',
-      buttonPositive: '同意',
-      buttonNegative: '取消',
-      buttonNeutral: '下次再说'
-    },
+    cameraRationale = cameraRationaleOptions,
+    libraryRationale = libraryRationaleOptions,
     launchLibraryText = '打开相册',
     launchCameraText = '打开摄像头',
     previewImgText = '预览图片',
-    deleteImgText = '删除图片'
-  } = props;
+    deleteImgText = '删除图片',
+    children,
+    onBeforeUpload,
+    onUpload,
+    onAfterUpload,
+    onCancel,
+    onFail,
+    onGrantFail
+  } = _ref;
+  const theme = useTheme();
   const {
@@ -65,6 +76,7 @@ currentImgSource,
     value,
+    showUploadImg,
     options,
-    beforeUpload,
-    upload,
-    uploadFinish,
+    onBeforeUpload,
+    onUpload,
+    onAfterUpload,
     onCancel,
@@ -76,3 +88,4 @@ onFail,
   });
-  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(TouchableOpacity, {
+  useImperativeHandle(ref, () => ({}));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TouchableOpacity, {
     activeOpacity: 0.5,
@@ -88,3 +101,3 @@ onPress: handlePress,
     }
-  }, showUploadImg && currentImgSource ? /*#__PURE__*/React.createElement(Image, {
+  }, !!currentImgSource ? /*#__PURE__*/React.createElement(Image, {
     source: {
@@ -98,3 +111,3 @@ uri: currentImgSource
     }
-  }) : props.children), loading && /*#__PURE__*/React.createElement(Box, {
+  }) : children), loading && /*#__PURE__*/React.createElement(Box, {
     width: width,
@@ -151,4 +164,4 @@ height: height,
   }))));
-};
+});
 export default ImagePicker;
 //# sourceMappingURL=index.js.map

lib/module/useImagePicker.js

@@ -9,3 +9,3 @@ import { useEffect } from 'react';
   }
-  return '';
+  return undefined;
 }
@@ -16,6 +16,6 @@ export default function useImagePicker(_ref) {
     options,
-    showUploadImg = true,
-    beforeUpload,
-    upload,
-    uploadFinish,
+    showUploadImg,
+    onBeforeUpload,
+    onUpload,
+    onAfterUpload,
     onCancel,
@@ -46,15 +46,7 @@ onFail,
     const source = getSource(value);
-    setCurrentImgSource(source);
-  }, [value]);
+    if (showUploadImg) {
+      setCurrentImgSource(source);
+    }
+  }, [value, showUploadImg]);
 
-  // 初始化图片上传配置
-  const initialOptions = {
-    mediaType: 'photo',
-    includeBase64: true,
-    quality: 1,
-    saveToPhotos: false,
-    durationLimit: 15,
-    videoQuality: 'high'
-  };
-
   /** 打开相册 */
@@ -69,8 +61,4 @@ const launchLibrary = async () => {
     }
-    setTimeout(() => {
-      launchImageLibrary({
-        ...initialOptions,
-        ...options
-      }, handleCallback);
-    }, 200);
+    const response = await launchImageLibrary(options);
+    handleCallback(response);
   };
@@ -87,8 +75,4 @@
     }
-    setTimeout(() => {
-      launchRNCamera({
-        ...initialOptions,
-        ...options
-      }, handleCallback);
-    }, 200);
+    const response = await launchRNCamera(options);
+    handleCallback(response);
   };
@@ -98,36 +82,30 @@
   const handleCallback = async response => {
-    try {
-      if (response.didCancel) {
-        // 用户取消上传 回调
-        onCancel === null || onCancel === void 0 ? void 0 : onCancel(response);
-      } else if (response.errorCode) {
-        // 上传失败 回调
-        onFail === null || onFail === void 0 ? void 0 : onFail(response);
-      } else {
-        if (!response.assets || response.assets.length === 0) return;
-        const file = {
-          fileName: response.assets[0].fileName,
-          fileType: response.assets[0].type,
-          uri: response.assets[0].uri,
-          fileSize: response.assets[0].fileSize
-        };
-        // 执行上传前的操作及判断
-        if (beforeUpload) {
-          const result = await beforeUpload(file);
-          if (!result) {
-            return;
-          }
-        }
-        setLoading(true);
-        const result = await (upload === null || upload === void 0 ? void 0 : upload(file));
-        setLoading(false);
-        uploadFinish === null || uploadFinish === void 0 ? void 0 : uploadFinish(result);
-        if (result) {
-          setCurrentImgSource(result);
-        }
+    if (response.didCancel) {
+      // 用户取消上传 回调
+      onCancel === null || onCancel === void 0 ? void 0 : onCancel(response);
+    } else if (response.errorCode) {
+      // 上传失败 回调
+      onFail === null || onFail === void 0 ? void 0 : onFail(response);
+    }
+    if (!response.assets || response.assets.length === 0) return;
+    const file = {
+      fileName: response.assets[0].fileName,
+      fileType: response.assets[0].type,
+      uri: response.assets[0].uri,
+      fileSize: response.assets[0].fileSize
+    };
+    // 执行上传前的操作及判断
+    if (onBeforeUpload) {
+      const result = await onBeforeUpload(file);
+      if (!result) {
+        return;
       }
-    } catch (error) {
-      setLoading(false);
-      throw new Error('图片选择器出问题了');
     }
+    setLoading(true);
+    const result = await (onUpload === null || onUpload === void 0 ? void 0 : onUpload(file));
+    setLoading(false);
+    onAfterUpload === null || onAfterUpload === void 0 ? void 0 : onAfterUpload(result);
+    if (result && showUploadImg) {
+      setCurrentImgSource(result);
+    }
   };
@@ -139,4 +117,4 @@ const previewImage = () => {
   const deleteImage = () => {
-    uploadFinish === null || uploadFinish === void 0 ? void 0 : uploadFinish('');
-    setCurrentImgSource('');
+    onAfterUpload === null || onAfterUpload === void 0 ? void 0 : onAfterUpload(undefined);
+    setCurrentImgSource(undefined);
     setVisibleFalse();
@@ -143,0 +121,0 @@ };

lib/typescript/index.d.ts

@@ -1,48 +0,27 @@
-import { PropsWithChildren } from 'react';
+import React from 'react';
 import { Rationale } from 'react-native';
-import { CameraOptions, ImagePickerResponse } from 'react-native-image-picker';
-export interface File {
-    fileName: string;
-    fileType: string;
-    uri: string;
-    fileSize?: number;
-}
-export declare type ImagePickerProps = PropsWithChildren<{
-    /** 宽度 */
-    width?: number;
-    /** 高度 */
-    height?: number;
-    /** 当前选择的图片uri */
-    value?: string;
-    /** 其他图片自定义配置,详细参考react-native-image-picker的option配置 */
-    options?: CameraOptions;
-    /** 上传图片后是否在背景图展示，如果为 true 上传后会自动展示上传图片(此时只能上传一张) */
-    showUploadImg?: boolean;
-    /** 上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传,同时可以在里面执行一些上传提示操作 */
-    beforeUpload?: (file: File) => boolean | ((file: File) => Promise<boolean>);
-    /** 上传 */
-    upload?: (file: File) => Promise<string>;
-    /** 上传完成 */
-    uploadFinish?: (result?: string) => void;
-    /** 取消上传事件回调 */
-    onCancel?: (response: ImagePickerResponse) => void;
-    /** 上传失败事件回调 */
-    onFail?: (response: ImagePickerResponse) => void;
-    /** 授权失败的回调 */
-    onGrantFail?: () => void;
-    /** 打开相册授权的文本 */
-    libraryRationale?: Rationale;
-    /** 打开摄像头授权的文本 */
-    cameraRationale?: Rationale;
-    /** 打开相册文本 */
-    launchLibraryText?: string;
-    /** 打开摄像头文本 */
-    launchCameraText?: string;
-    /** 预览图片文本 */
-    previewImgText?: string;
-    /** 删除图片文本 */
-    deleteImgText?: string;
-}>;
-declare const ImagePicker: (props: ImagePickerProps) => JSX.Element;
+import { CameraOptions } from 'react-native-image-picker';
+import { ImagePickerRef } from './type';
+declare const ImagePicker: React.ForwardRefExoticComponent<{
+    width?: number | undefined;
+    height?: number | undefined;
+    value?: string | undefined;
+    options?: CameraOptions | undefined;
+    showUploadImg?: boolean | undefined;
+    onBeforeUpload?: ((file: import("./type").File) => boolean) | ((file: import("./type").File) => Promise<boolean>) | undefined;
+    onUpload?: ((file: import("./type").File) => Promise<string>) | undefined;
+    onAfterUpload?: ((result?: string | undefined) => void) | undefined;
+    onCancel?: ((response: import("react-native-image-picker").ImagePickerResponse) => void) | undefined;
+    onFail?: ((response: import("react-native-image-picker").ImagePickerResponse) => void) | undefined;
+    onGrantFail?: (() => void) | undefined;
+    libraryRationale?: Rationale | undefined;
+    cameraRationale?: Rationale | undefined;
+    launchLibraryText?: string | undefined;
+    launchCameraText?: string | undefined;
+    previewImgText?: string | undefined;
+    deleteImgText?: string | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<ImagePickerRef>>;
 export default ImagePicker;
 //# sourceMappingURL=index.d.ts.map

lib/typescript/useImagePicker.d.ts

@@ -1,4 +0,4 @@
-import type { ImagePickerProps } from '.';
-export default function useImagePicker({ value, options, showUploadImg, beforeUpload, upload, uploadFinish, onCancel, onFail, onGrantFail, cameraRationale, libraryRationale, }: ImagePickerProps): {
-    currentImgSource: string;
+import { HookProps } from './type';
+export default function useImagePicker({ value, options, showUploadImg, onBeforeUpload, onUpload, onAfterUpload, onCancel, onFail, onGrantFail, cameraRationale, libraryRationale, }: HookProps): {
+    currentImgSource: string | undefined;
     loading: boolean;
@@ -5,0 +5,0 @@ launchLibrary: () => Promise<void>;

package.json

 {
   "name": "@td-design/react-native-image-picker",
-  "version": "1.6.5",
+  "version": "1.6.6",
   "description": "基于 @td-design/react-native 的 image-picker 组件",
@@ -21,4 +21,4 @@ "keywords": [
     "@shopify/restyle": "2.0.0",
-    "@td-design/react-native": "^4.1.17",
-    "@td-design/rn-hooks": "^2.5.1",
+    "@td-design/react-native": "^4.3.1",
+    "@td-design/rn-hooks": "^2.7.1",
     "@types/react": "^18.0.21",
@@ -25,0 +25,0 @@ "@types/react-native": "0.70.6",

No alert changes

Improved metrics

Total package byte prevSize

28874

increased by8.22%

Number of package files

14

increased by40%

Lines of code

390

increased by5.41%

No dependency changes