From 389cd75411e45f0b744c8da163fcd6904853af43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?B=E1=BA=A3o=20Gia?= Date: Fri, 29 Oct 2021 13:30:47 +0700 Subject: [PATCH] response singleSelectedMode from array[] -> object{} --- README.md | 2 +- .../MultipleImagePickerModule.kt | 58 ++++++++++++++----- .../main/res/drawable/checkbox_selector.xml | 4 +- .../src/main/res/drawable/ic_checkmark.xml | 12 ++++ example/src/App.js | 10 +++- package.json | 2 +- src/index.js | 10 +++- 7 files changed, 78 insertions(+), 20 deletions(-) create mode 100644 android/src/main/res/drawable/ic_checkmark.xml diff --git a/README.md b/README.md index ea89ea7b..c0ad6029 100644 --- 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 index 78137e24..e5fe2046 100644 --- 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,6 +46,8 @@ 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 { @@ -50,11 +55,37 @@ class MultipleImagePickerModule(reactContext: ReactApplicationContext) : 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 { override fun onResult(result: MutableList?) { - //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 index 7378cbd5..9599e179 100644 --- a/android/src/main/res/drawable/checkbox_selector.xml +++ b/android/src/main/res/drawable/checkbox_selector.xml @@ -1,5 +1,5 @@ - - + + diff --git a/android/src/main/res/drawable/ic_checkmark.xml b/android/src/main/res/drawable/ic_checkmark.xml new file mode 100644 index 00000000..cda54cf7 --- /dev/null +++ b/android/src/main/res/drawable/ic_checkmark.xml @@ -0,0 +1,12 @@ + + + + diff --git a/example/src/App.js b/example/src/App.js index 9e8a42ac..c4160376 100644 --- 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() { diff --git a/package.json b/package.json index b784c6bc..0d5999a5 100644 --- 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 index 64e99291..9087f805 100644 --- 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; }