response singleSelectedMode from array[] -> object{}

NitrogenZLab · Oct 29, 2021 · 389cd75 · 389cd75
1 parent 28f143e
commit 389cd75
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -126,7 +126,7 @@ const response = await MultipleImagePicker.openPicker(options);
 
 #### selectedAssets (Important)
 
-Get an Array value only. If you want React Native Multiple Image Picker to re-select previously selected images / videos, you need to add “selectedAssets” in [options](#Options). Perhaps I say a little bit confusing. See [Example](/~https://github.com/baronha/react-native-multiple-image-picker/tree/main/example) for more details.
+Get an Array value only(Only works when ```singleSelectedMode === false```). If you want React Native Multiple Image Picker to re-select previously selected images / videos, you need to add “selectedAssets” in [options](#Options). Perhaps I say a little bit confusing. See [Example](/~https://github.com/baronha/react-native-multiple-image-picker/tree/main/example) for more details.
 
 ## Response Object
 

diff --git a/android/src/main/java/com/reactnativemultipleimagepicker/MultipleImagePickerModule.kt b/android/src/main/java/com/reactnativemultipleimagepicker/MultipleImagePickerModule.kt
@@ -16,7 +16,10 @@ import com.luck.picture.lib.engine.PictureSelectorEngine
 import com.luck.picture.lib.entity.LocalMedia
 import com.luck.picture.lib.entity.LocalMedia.parseLocalMedia
 import com.luck.picture.lib.listener.OnResultCallbackListener
+import com.luck.picture.lib.manager.UCropManager
 import com.luck.picture.lib.style.PictureParameterStyle
+import com.yalantis.ucrop.model.AspectRatio
+import com.yalantis.ucrop.view.CropImageView
 import java.io.File
 import java.io.FileOutputStream
 import java.io.IOException
@@ -43,18 +46,46 @@ class MultipleImagePickerModule(reactContext: ReactApplicationContext) :
     private var isExportThumbnail: Boolean = false
     private var maxVideo: Int = 20
     private var isCamera: Boolean = true
+    private var isCrop: Boolean = false
+    private var isCropCircle: Boolean = false
 
     @ReactMethod
     fun openPicker(options: ReadableMap?, promise: Promise): Unit {
         PictureAppMaster.getInstance().app = this
         val activity = currentActivity
         setConfiguration(options)
 
+        //set up configration ucrop
+        val basicUCropConfig = UCropManager.basicOptions(appContext);
+        basicUCropConfig.setShowCropFrame(true)
+        basicUCropConfig.setShowCropGrid(true)
+        basicUCropConfig.setCropDragSmoothToCenter(true)
+        basicUCropConfig.setHideBottomControls(false)
+        basicUCropConfig.setCircleDimmedLayer(isCropCircle)
+        if(isCropCircle){
+            basicUCropConfig.withAspectRatio(1F,1F)
+            basicUCropConfig.setShowCropFrame(false)
+        }else{
+            basicUCropConfig.setAspectRatioOptions(
+                1,
+                AspectRatio("1:2", 1F, 2F),
+                AspectRatio("3:4", 3F, 4F),
+//            AspectRatio(
+//                "RATIO",
+//                CropImageView.DEFAULT_ASPECT_RATIO,
+//                CropImageView.DEFAULT_ASPECT_RATIO
+//            ),
+                AspectRatio("16:9", 16F, 9F),
+                AspectRatio("1:1", 1F, 1F)
+            )
+        }
+
         PictureSelector.create(activity)
             .openGallery(if (mediaType == "video") PictureMimeType.ofVideo() else if (mediaType == "image") PictureMimeType.ofImage() else PictureMimeType.ofAll())
             .loadImageEngine(GlideEngine.createGlideEngine())
             .maxSelectNum(maxSelectedAssets)
             .imageSpanCount(numberOfColumn)
+            .isSingleDirectReturn(true)
             .isZoomAnim(true)
             .isPageStrategy(true, 50)
             .isWithVideoImage(true)
@@ -65,20 +96,12 @@ class MultipleImagePickerModule(reactContext: ReactApplicationContext) :
             .setPictureStyle(mPictureParameterStyle)
             .isPreviewImage(isPreview)
             .isPreviewVideo(isPreview)
+            .isEnableCrop(isCrop)
+            .basicUCropConfig(basicUCropConfig)
             .isCamera(isCamera)
-            .isReturnEmpty(true)
             .selectionMode(if (singleSelectedMode) PictureConfig.SINGLE else PictureConfig.MULTIPLE)
             .forResult(object : OnResultCallbackListener<LocalMedia?> {
                 override fun onResult(result: MutableList<LocalMedia?>?) {
-                    //check difference
-                    if (singleSelectedMode) {
-                        val singleLocalMedia: WritableArray = WritableNativeArray()
-                        val media: WritableMap =
-                            createAttachmentResponse(result?.get(0) as LocalMedia)
-                        singleLocalMedia.pushMap(media)
-                        promise.resolve(singleLocalMedia)
-                        return
-                    }
                     val localMedia: WritableArray = WritableNativeArray()
                     if (result?.size == 0) {
                         promise.resolve(localMedia)
@@ -90,7 +113,6 @@ class MultipleImagePickerModule(reactContext: ReactApplicationContext) :
                     if (result != null) {
                         for (i in 0 until result.size) {
                             val item: LocalMedia = result[i] as LocalMedia
-                            println("item: $item")
                             val media: WritableMap = createAttachmentResponse(item)
                             localMedia.pushMap(media)
                         }
@@ -107,6 +129,7 @@ class MultipleImagePickerModule(reactContext: ReactApplicationContext) :
     private fun setConfiguration(options: ReadableMap?) {
         if (options != null) {
             handleSelectedAssets(options)
+            val cropping = options.getBoolean("isCrop")
             singleSelectedMode = options.getBoolean("singleSelectedMode")
             maxVideoDuration = options.getInt("maxVideoDuration")
             numberOfColumn = options.getInt("numberOfColumn")
@@ -117,16 +140,18 @@ class MultipleImagePickerModule(reactContext: ReactApplicationContext) :
             maxVideo = options.getInt("maxVideo")
             mPictureParameterStyle = getStyle(options)
             isCamera = options.getBoolean("usedCameraButton")
+            isCropCircle = options.getBoolean("isCropCircle")
+            isCrop = cropping == true && singleSelectedMode == true
         }
     }
 
     private fun getStyle(options: ReadableMap): PictureParameterStyle? {
         val pictureStyle = PictureParameterStyle()
-        pictureStyle.pictureCheckedStyle = R.drawable.picture_selector
+        pictureStyle.pictureCheckedStyle = if(singleSelectedMode) R.drawable.checkbox_selector else R.drawable.picture_selector
 
         //bottom style
         pictureStyle.pictureCompleteText = options.getString("doneTitle")
-        pictureStyle.isOpenCheckNumStyle = true
+        pictureStyle.isOpenCheckNumStyle = if(singleSelectedMode) false else true
         pictureStyle.isCompleteReplaceNum = true
         pictureStyle.pictureCompleteTextSize = 16
         pictureStyle.pictureCheckNumBgStyle = R.drawable.num_oval_orange
@@ -218,6 +243,13 @@ class MultipleImagePickerModule(reactContext: ReactApplicationContext) :
         media.putDouble("size", item.size.toDouble())
         media.putDouble("bucketId", item.bucketId.toDouble())
         media.putString("parentFolderName", item.parentFolderName)
+        if(item.isCut){
+            val crop = WritableNativeMap()
+            crop.putString("cropPath", item.cutPath)
+            crop.putDouble("width", item.cropImageWidth.toDouble())
+            crop.putDouble("height", item.cropImageHeight.toDouble())
+            media.putMap("crop", crop)
+        }
         if (type === "video" && isExportThumbnail) {
             val thumbnail = createThumbnail(item.realPath)
             println("thumbnail: $thumbnail")

diff --git a/android/src/main/res/drawable/checkbox_selector.xml b/android/src/main/res/drawable/checkbox_selector.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:drawable="@drawable/picture_icon_def" android:state_selected="false" />
-    <item android:drawable="@drawable/picture_icon_sel" android:state_selected="true" />
+    <item android:drawable="@drawable/picture_not_selected" android:state_selected="false" />
+    <item android:drawable="@drawable/ic_checkmark" android:state_selected="true" />
 </selector>
diff --git a/android/src/main/res/drawable/ic_checkmark.xml b/android/src/main/res/drawable/ic_checkmark.xml
@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M12,12m-12,0a12,12 0,1 1,24 0a12,12 0,1 1,-24 0"
+      android:fillColor="@color/app_color_pri"/>
+  <path
+      android:pathData="M15.7936,6.5936L10.1279,14.0879L7.6847,10.9253C7.4402,10.6113 7.081,10.4072 6.6861,10.358C6.2912,10.3088 5.8928,10.4185 5.5788,10.663C5.2648,10.9075 5.0607,11.2667 5.0115,11.6617C4.9623,12.0566 5.072,12.4549 5.3165,12.7689L8.9588,17.4304C9.0999,17.609 9.2799,17.7532 9.4851,17.8519C9.6902,17.9506 9.9152,18.0012 10.1429,18C10.3718,17.9994 10.5975,17.9465 10.8028,17.8451C11.008,17.7438 11.1873,17.5968 11.327,17.4154L18.1768,8.4222C18.4193,8.1042 18.5255,7.7029 18.4721,7.3065C18.4187,6.9102 18.21,6.5513 17.892,6.3088C17.574,6.0663 17.1727,5.9601 16.7763,6.0135C16.38,6.0669 16.0211,6.2756 15.7786,6.5936H15.7936Z"
+      android:fillColor="#ffffff"/>
+</vector>
diff --git a/example/src/App.js b/example/src/App.js
@@ -14,10 +14,13 @@ export default function App() {
         isExportThumbnail: true,
         maxVideo: 1,
         usedCameraButton: false,
+        singleSelectedMode: true,
+        isCrop: true,
+        isCropCircle: true,
         // selectedColor: '#f9813a',
       });
       console.log('done: ', response);
-      setImages(response);
+      setImages([response]);
     } catch (e) {
       console.log(e.code, e.message);
     }
@@ -38,7 +41,10 @@ export default function App() {
         <Image
           width={IMAGE_WIDTH}
           source={{
-            uri: item?.type === 'video' ? item?.thumbnail ?? '' : item?.path,
+            uri:
+              item?.type === 'video'
+                ? item?.thumbnail ?? ''
+                : 'file://' + item?.crop?.cropPath,
           }}
           style={style.media}
         />

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@baronha/react-native-multiple-image-picker",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "description": "react-native-multiple-image-picker enables application to pick images and videos from multiple smart album in iOS/Android, similar to the current facebook app.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

diff --git a/src/index.js b/src/index.js
@@ -40,13 +40,15 @@ let defaultOptions = {
   maxVideoDuration: 60, //for camera : max video recording duration
   numberOfColumn: 3,
   maxSelectedAssets: 20,
-  singleSelectedMode: false,
   doneTitle: 'Done',
   isPreview: true,
   mediaType: 'all',
   isExportThumbnail: false,
   maxVideo: 20,
   selectedAssets: [],
+  singleSelectedMode: false,
+  isCrop: false,
+  isCropCircle: false,
   //****//
 
   // fetchOption: Object,
@@ -61,11 +63,17 @@ exportObject = {
       ...defaultOptions,
       ...optionsPicker,
     };
+    const isSingle = options?.singleSelectedMode ?? false;
+    if (isSingle) options.selectedAssets = [];
+
     return new Promise(async (resolve, reject) => {
       try {
         const response = await MultipleImagePicker.openPicker(options);
         // console.log('res', response);
         if (response?.length) {
+          if (isSingle) {
+            resolve(response[0]);
+          }
           resolve(response);
           return;
         }