1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
import React 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'
export const PhotoCarouselPicker = ({
selectedPhotos,
setSelectedPhotos,
localPhotos,
}: {
selectedPhotos: string[]
setSelectedPhotos: React.Dispatch<React.SetStateAction<string[]>>
localPhotos: any
}) => {
return (
<ScrollView
horizontal
style={styles.photosContainer}
showsHorizontalScrollIndicator={false}>
<TouchableOpacity
style={[styles.galleryButton, styles.photo]}
onPress={() => {
openCamera({mediaType: 'photo'}).then(item => {
setSelectedPhotos([item.path, ...selectedPhotos])
})
}}>
<FontAwesomeIcon
icon="camera"
size={24}
style={{color: colors.blue3}}
/>
</TouchableOpacity>
{localPhotos.photos.map((item: any, index: number) => (
<TouchableOpacity
key={`local-image-${index}`}
style={styles.photoButton}
onPress={() => {
setSelectedPhotos([item.node.image.uri, ...selectedPhotos])
}}>
<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,
])
},
)
}}>
<FontAwesomeIcon icon="image" style={{color: colors.blue3}} size={24} />
</TouchableOpacity>
</ScrollView>
)
}
const styles = StyleSheet.create({
photosContainer: {
width: '100%',
maxHeight: 96,
padding: 8,
overflow: 'hidden',
},
galleryButton: {
borderWidth: 1,
borderColor: colors.gray3,
alignItems: 'center',
justifyContent: 'center',
},
photoButton: {
width: 75,
height: 75,
marginRight: 8,
borderWidth: 1,
borderRadius: 16,
borderColor: colors.gray3,
},
photo: {
width: 75,
height: 75,
marginRight: 8,
borderRadius: 16,
},
})
|
