crop every photo;

make use of useCallback
zio/stable
João Ferreiro 2022-11-29 18:26:16 +00:00
parent 68e1abf4a9
commit 6ba5d15cb6
2 changed files with 72 additions and 29 deletions

View File

@ -1,8 +1,12 @@
import React from 'react'
import React, {useCallback} from 'react'
import {Image, StyleSheet, TouchableOpacity, ScrollView} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {colors} from '../../lib/styles'
import {openPicker, openCamera} from 'react-native-image-crop-picker'
import {
openPicker,
openCamera,
openCropper,
} from 'react-native-image-crop-picker'
export const PhotoCarouselPicker = ({
selectedPhotos,
@ -13,6 +17,58 @@ export const PhotoCarouselPicker = ({
setSelectedPhotos: React.Dispatch<React.SetStateAction<string[]>>
localPhotos: any
}) => {
const handleOpenCamera = useCallback(() => {
openCamera({
mediaType: 'photo',
cropping: true,
width: 1000,
height: 1000,
}).then(item => {
setSelectedPhotos([item.path, ...selectedPhotos])
})
}, [selectedPhotos, setSelectedPhotos])
const handleSelectPhoto = useCallback(
async (uri: string) => {
const img = await openCropper({
mediaType: 'photo',
path: uri,
width: 1000,
height: 1000,
})
setSelectedPhotos([img.path, ...selectedPhotos])
},
[selectedPhotos, setSelectedPhotos],
)
const handleOpenGallery = useCallback(() => {
openPicker({
multiple: true,
maxFiles: 4,
mediaType: 'photo',
}).then(async items => {
const result = []
for await (const image of items) {
const img = await openCropper({
mediaType: 'photo',
path: image.path,
width: 1000,
height: 1000,
})
result.push(img.path)
}
setSelectedPhotos([
// ...items.reduce(
// (accum, cur) => accum.concat(cur.sourceURL!),
// [] as string[],
// ),
...result,
...selectedPhotos,
])
})
}, [selectedPhotos, setSelectedPhotos])
return (
<ScrollView
horizontal
@ -20,11 +76,7 @@ export const PhotoCarouselPicker = ({
showsHorizontalScrollIndicator={false}>
<TouchableOpacity
style={[styles.galleryButton, styles.photo]}
onPress={() => {
openCamera({mediaType: 'photo'}).then(item => {
setSelectedPhotos([item.path, ...selectedPhotos])
})
}}>
onPress={handleOpenCamera}>
<FontAwesomeIcon
icon="camera"
size={24}
@ -35,27 +87,13 @@ export const PhotoCarouselPicker = ({
<TouchableOpacity
key={`local-image-${index}`}
style={styles.photoButton}
onPress={() => {
setSelectedPhotos([item.node.image.uri, ...selectedPhotos])
}}>
onPress={() => handleSelectPhoto(item.node.image.uri)}>
<Image style={styles.photo} source={{uri: item.node.image.uri}} />
</TouchableOpacity>
))}
<TouchableOpacity
style={[styles.galleryButton, styles.photo]}
onPress={() => {
openPicker({multiple: true, maxFiles: 4, mediaType: 'photo'}).then(
items => {
setSelectedPhotos([
...items.reduce(
(accum, cur) => accum.concat(cur.sourceURL!),
[] as string[],
),
...selectedPhotos,
])
},
)
}}>
onPress={handleOpenGallery}>
<FontAwesomeIcon icon="image" style={{color: colors.blue3}} size={24} />
</TouchableOpacity>
</ScrollView>

View File

@ -1,4 +1,4 @@
import React from 'react'
import React, {useCallback} from 'react'
import {Image, StyleSheet, TouchableOpacity, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {colors} from '../../lib/styles'
@ -17,6 +17,15 @@ export const SelectedPhoto = ({
? styles.image175
: styles.image85
const handleRemovePhoto = useCallback(
item => {
setSelectedPhotos(
selectedPhotos.filter(filterItem => filterItem !== item),
)
},
[selectedPhotos, setSelectedPhotos],
)
return selectedPhotos.length !== 0 ? (
<View style={styles.imageContainer}>
{selectedPhotos.length !== 0 &&
@ -25,11 +34,7 @@ export const SelectedPhoto = ({
key={`selected-image-${index}`}
style={[styles.image, imageStyle]}>
<TouchableOpacity
onPress={() => {
setSelectedPhotos(
selectedPhotos.filter(filterItem => filterItem !== item),
)
}}
onPress={() => handleRemovePhoto(item)}
style={styles.removePhotoButton}>
<FontAwesomeIcon
icon="xmark"