parent
68e1abf4a9
commit
6ba5d15cb6
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue