Skip to content

Commit

Permalink
fix: path for crop #161 and refactor import R.** #134
Browse files Browse the repository at this point in the history
  • Loading branch information
@baronha
baronha committed Jul 31, 2024
1 parent 2accac0 commit 469336a
Show file tree
Hide file tree
Showing 4 changed files with 53 additions and 97 deletions.
10 changes: 5 additions & 5 deletions android/build.gradle
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,17 +124,17 @@ dependencies {
// noinspection GradleDynamicVersion
api 'com.facebook.react:react-native:+'
implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
implementation 'com.github.bumptech.glide:glide:4.12.0'
implementation 'com.github.bumptech.glide:glide:4.16.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'
// PictureSelector basic (Necessary)
implementation 'io.github.lucksiege:pictureselector:v3.11.1'
implementation 'io.github.lucksiege:pictureselector:v3.11.2'

// image compress library (Not necessary)
implementation 'io.github.lucksiege:compress:v3.11.1'
implementation 'io.github.lucksiege:compress:v3.11.2'

// uCrop library (Not necessary)
implementation 'io.github.lucksiege:ucrop:v3.11.1'
implementation 'io.github.lucksiege:ucrop:v3.11.2'

// simple camerax library (Not necessary)
implementation 'io.github.lucksiege:camerax:v3.11.1'
implementation 'io.github.lucksiege:camerax:v3.11.2'
}
130 changes: 41 additions & 89 deletions android/src/main/java/com/reactnativemultipleimagepicker/MultipleImagePickerModule.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,6 @@ import android.content.Context
import android.graphics.Bitmap
import android.graphics.Color
import android.media.MediaMetadataRetriever
import android.os.Build
import android.os.Bundle
import androidx.annotation.RequiresApi
import androidx.core.content.ContextCompat
import com.facebook.react.bridge.*
import com.luck.picture.lib.app.IApp
Expand All @@ -20,23 +17,19 @@ import com.luck.picture.lib.entity.LocalMedia
import com.luck.picture.lib.entity.LocalMedia.generateLocalMedia
import com.luck.picture.lib.interfaces.OnResultCallbackListener
import com.luck.picture.lib.style.*
import com.luck.picture.lib.utils.StyleUtils
import com.reactnativemultipleimagepicker.R.color.app_color_black
import com.yalantis.ucrop.UCrop
import com.yalantis.ucrop.UCrop.Options
import java.io.*
import java.util.*


@Suppress("INCOMPATIBLE_ENUM_COMPARISON", "UNCHECKED_CAST")
class MultipleImagePickerModule(reactContext: ReactApplicationContext) :
ReactContextBaseJavaModule(reactContext), IApp {

override fun getName(): String {
return "MultipleImagePicker"
}

var style = PictureSelectorStyle()
private var style = PictureSelectorStyle()

private var selectedAssets: List<LocalMedia> = ArrayList()
private var singleSelectedMode: Boolean = false
Expand All @@ -48,15 +41,15 @@ class MultipleImagePickerModule(reactContext: ReactApplicationContext) :
private var isExportThumbnail: Boolean = false
private var maxVideo: Int = 20
private var isCamera: Boolean = true
private var cropOption: UCrop.Options? = null;
private var primaryColor: Int = Color.BLACK;
private var cropOption: Options? = null
private var primaryColor: Int = Color.BLACK


@ReactMethod
fun openPicker(options: ReadableMap?, promise: Promise): Unit {
PictureAppMaster.getInstance().app = this
val activity = currentActivity
var imageEngine = GlideEngine.createGlideEngine();
val imageEngine = GlideEngine.createGlideEngine()

// set config
setConfiguration(options)
Expand Down Expand Up @@ -125,7 +118,7 @@ class MultipleImagePickerModule(reactContext: ReactApplicationContext) :

setStyle(options) // set style for UI

val isCrop = options.getBoolean("isCrop") && singleSelectedMode == true
val isCrop = options.getBoolean("isCrop") && singleSelectedMode

if (isCrop) {
setCropOptions(options)
Expand All @@ -137,7 +130,7 @@ class MultipleImagePickerModule(reactContext: ReactApplicationContext) :

@SuppressLint("ResourceAsColor")
private fun setCropOptions(libOption: ReadableMap) {
val options = UCrop.Options()
val options = Options()
val mainStyle: SelectMainStyle = style.selectMainStyle

options.setShowCropFrame(true)
Expand All @@ -148,7 +141,7 @@ class MultipleImagePickerModule(reactContext: ReactApplicationContext) :
options.isForbidSkipMultipleCrop(true)
options.setMaxScaleMultiplier(100f)
options.setLogoColor(primaryColor)
options.setToolbarWidgetColor(app_color_black)
options.setToolbarWidgetColor(Color.BLACK)
options.setStatusBarColor(mainStyle.statusBarColor)
options.isDarkStatusBarBlack(mainStyle.isDarkStatusBarBlack)

Expand All @@ -162,22 +155,22 @@ class MultipleImagePickerModule(reactContext: ReactApplicationContext) :

// ANIMATION SLIDE FROM BOTTOM
val animationStyle = PictureWindowAnimationStyle()
animationStyle.setActivityEnterAnimation(com.luck.picture.lib.R.anim.ps_anim_up_in)
animationStyle.setActivityExitAnimation(com.luck.picture.lib.R.anim.ps_anim_down_out)
animationStyle.setActivityEnterAnimation(R.anim.ps_anim_up_in)
animationStyle.setActivityExitAnimation(R.anim.ps_anim_down_out)

// TITLE BAR
val titleBar = TitleBarStyle()
titleBar.titleBackgroundColor =
ContextCompat.getColor(appContext, R.color.app_color_white)

titleBar.setHideCancelButton(true);
titleBar.setAlbumTitleRelativeLeft(true);
titleBar.isHideCancelButton = true
titleBar.isAlbumTitleRelativeLeft = true

titleBar.setTitleAlbumBackgroundResource(com.luck.picture.lib.R.drawable.ps_album_bg);
titleBar.setTitleDrawableRightResource(com.luck.picture.lib.R.drawable.ps_ic_grey_arrow);
titleBar.setPreviewTitleLeftBackResource(com.luck.picture.lib.R.drawable.ps_ic_black_back);
titleBar.setTitleLeftBackResource(com.luck.picture.lib.R.drawable.ps_ic_black_back);
titleBar.setHideCancelButton(true)
titleBar.titleAlbumBackgroundResource = R.drawable.ps_album_bg
titleBar.titleDrawableRightResource = R.drawable.ps_ic_grey_arrow
titleBar.previewTitleLeftBackResource = R.drawable.ps_ic_black_back
titleBar.titleLeftBackResource = R.drawable.ps_ic_black_back
titleBar.isHideCancelButton = true

// BOTTOM BAR
val bottomBar = BottomNavBarStyle()
Expand All @@ -186,74 +179,50 @@ class MultipleImagePickerModule(reactContext: ReactApplicationContext) :
bottomBar.bottomPreviewSelectTextColor =
ContextCompat.getColor(appContext, R.color.app_color_pri)
bottomBar.bottomNarBarBackgroundColor =
ContextCompat.getColor(appContext, com.luck.picture.lib.R.color.ps_color_white)
ContextCompat.getColor(appContext, R.color.ps_color_white)
bottomBar.bottomSelectNumResources = R.drawable.num_oval_orange
bottomBar.bottomEditorTextColor =
ContextCompat.getColor(appContext, com.luck.picture.lib.R.color.ps_color_53575e)
ContextCompat.getColor(appContext, R.color.ps_color_53575e)
bottomBar.bottomOriginalTextColor =
ContextCompat.getColor(appContext, com.luck.picture.lib.R.color.ps_color_53575e)
ContextCompat.getColor(appContext, R.color.ps_color_53575e)
bottomBar.bottomPreviewNormalTextColor = R.color.app_color_53575e
bottomBar.bottomPreviewNormalTextColor = app_color_black
bottomBar.setCompleteCountTips(false)
bottomBar.bottomPreviewNormalTextColor = Color.BLACK
bottomBar.isCompleteCountTips = false

// MAIN STYLE
val mainStyle = SelectMainStyle()

mainStyle.setPreviewSelectRelativeBottom(true)
mainStyle.setSelectNumberStyle(if (singleSelectedMode) false else true)
mainStyle.setPreviewSelectNumberStyle(true);
mainStyle.isPreviewSelectRelativeBottom = true
mainStyle.isSelectNumberStyle = !singleSelectedMode
mainStyle.isPreviewSelectNumberStyle = true
mainStyle.isSelectNumberStyle = true
mainStyle.selectBackground = R.drawable.picture_selector
mainStyle.mainListBackgroundColor =
ContextCompat.getColor(appContext, com.luck.picture.lib.R.color.ps_color_white)
ContextCompat.getColor(appContext, R.color.ps_color_white)
mainStyle.previewSelectBackground =
R.drawable.picture_selector

// custom select text on top
mainStyle.setSelectText(doneTitle)
mainStyle.setCompleteSelectRelativeTop(true)
mainStyle.setSelectNormalText(doneTitle)
mainStyle.selectText = doneTitle
mainStyle.isCompleteSelectRelativeTop = true
mainStyle.selectNormalText = doneTitle


mainStyle.selectNormalTextColor =
ContextCompat.getColor(appContext, com.luck.picture.lib.R.color.ps_color_9b)
ContextCompat.getColor(appContext, R.color.ps_color_9b)
mainStyle.selectTextColor = primaryColor
mainStyle.selectText = doneTitle

mainStyle.setStatusBarColor(
ContextCompat.getColor(
appContext,
R.color.app_color_white
)
);
mainStyle.setDarkStatusBarBlack(true);

style.setTitleBarStyle(titleBar)
style.setBottomBarStyle(bottomBar)
style.setSelectMainStyle(mainStyle)
style.setWindowAnimationStyle(animationStyle)


// pictureStyle.selectMainStyle.adapterImageEditorResources =
// if (singleSelectedMode) R.drawable.checkbox_selector else R.drawable.picture_selector
// numberSelectMainStyle.isSelectNumberStyle = if (singleSelectedMode) false else true
// //bottom style
// pictureStyle.bottomBarStyle.bottomOriginalText = options.getString("doneTitle")
// pictureStyle.isOpenCheckNumStyle = if(singleSelectedMode) false else true
// pictureStyle.isCompleteReplaceNum = true
// pictureStyle.pictureCompleteTextSize = 16
// pictureStyle.pictureCheckNumBgStyle = R.drawable.num_oval_orange
// pictureStyle.pictureCompleteTextColor = Color.parseColor("#ffffff")
// pictureStyle.pictureNavBarColor = Color.parseColor("#000000")
// pictureStyle.pictureBottomBgColor = Color.parseColor("#393a3e")
// //preview Style
// pictureStyle.picturePreviewBottomBgColor = Color.parseColor("#000000")
// pictureStyle.pictureUnPreviewTextColor = Color.parseColor("#ffffff")
// //header
// pictureStyle.pictureTitleDownResId = R.drawable.picture_icon_arrow_down
// pictureStyle.pictureCancelTextColor = Color.parseColor("#393a3e")
// pictureStyle.pictureStatusBarColor = Color.parseColor("#393a3e")
// pictureStyle.pictureTitleBarBackgroundColor = Color.parseColor("#393a3e")
mainStyle.statusBarColor = ContextCompat.getColor(
appContext,
R.color.app_color_white
)
mainStyle.isDarkStatusBarBlack = true

style.titleBarStyle = titleBar
style.bottomBarStyle = bottomBar
style.selectMainStyle = mainStyle
style.windowAnimationStyle = animationStyle
}

private fun handleSelectedAssets(options: ReadableMap?) {
Expand All @@ -265,7 +234,7 @@ class MultipleImagePickerModule(reactContext: ReactApplicationContext) :
if (assets.size() > 0) {
val list = mutableListOf<LocalMedia>()
for (i in 0 until assets.size()) {
val asset: ReadableNativeMap = assets.getMap(i) as ReadableNativeMap
val asset: ReadableNativeMap = assets.getMap(i)
val localMedia: LocalMedia = handleSelectedAssetItem(asset)
list.add(localMedia)
}
Expand All @@ -285,7 +254,6 @@ class MultipleImagePickerModule(reactContext: ReactApplicationContext) :
return generateLocalMedia(appContext, path)
}

@RequiresApi(Build.VERSION_CODES.LOLLIPOP)
private fun createAttachmentResponse(item: LocalMedia): WritableMap {
val media: WritableMap = WritableNativeMap()
val type: String = if (item.mimeType.startsWith("video/")) "video" else "image"
Expand All @@ -305,7 +273,7 @@ class MultipleImagePickerModule(reactContext: ReactApplicationContext) :
media.putString("parentFolderName", item.parentFolderName)
if (item.isCut) {
val crop = WritableNativeMap()
crop.putString("path", item.cutPath)
crop.putString("path", "file://${item.cutPath}")
crop.putDouble("width", item.cropImageWidth.toDouble())
crop.putDouble("height", item.cropImageHeight.toDouble())
media.putMap("crop", crop)
Expand Down Expand Up @@ -346,22 +314,6 @@ class MultipleImagePickerModule(reactContext: ReactApplicationContext) :
}
}

private fun createDirIfNotExists(path: String): File {
val dir = File(path)
if (dir.exists()) {
return dir
}
try {
dir.mkdirs()
// Add .nomedia to hide the thumbnail directory from gallery
val noMedia = File(path, ".nomedia")
noMedia.createNewFile()
} catch (e: IOException) {
e.printStackTrace()
}
return dir
}

override fun getAppContext(): Context {
return reactApplicationContext
}
Expand Down
8 changes: 6 additions & 2 deletions example/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,8 @@ export default function App() {

const crop = response.crop;

console.log('crop: ', crop);

if (crop) {
response.path = crop.path;
response.width = crop.width;
Expand All @@ -61,7 +63,9 @@ export default function App() {

setImages(Array.isArray(response) ? response : [response]);
layoutEffect();
} catch (e) {}
} catch (e) {
//
}
};

const onRemovePhoto = (_, index) => {
Expand All @@ -82,7 +86,7 @@ export default function App() {
width={Dimensions.get('window').width - 6}
sourceKey={'path'}
videoKey={'type'}
prefixPath={Platform.OS === 'ios' ? 'file://' : null}
prefixPath={Platform.OS === 'ios' ? 'file://' : ''}
conditionCheckVideo={'video'}
videoURLKey={'thumbnail'}
showDelete
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@baronha/react-native-multiple-image-picker",
"version": "1.1.8",
"version": "1.1.9",
"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",
Expand Down

0 comments on commit 469336a

Please sign in to comment.