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
|
/**
* Copyright (c) JOB TODAY S.A. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
import {StyleSheet, TouchableOpacity, ViewStyle} from 'react-native'
import {SafeAreaView} from 'react-native-safe-area-context'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {createHitslop} from '#/lib/constants'
type Props = {
onRequestClose: () => void
}
const HIT_SLOP = createHitslop(16)
const ImageDefaultHeader = ({onRequestClose}: Props) => {
const {_} = useLingui()
return (
<SafeAreaView style={styles.root}>
<TouchableOpacity
style={[styles.closeButton, styles.blurredBackground]}
onPress={onRequestClose}
hitSlop={HIT_SLOP}
accessibilityRole="button"
accessibilityLabel={_(msg`Close image`)}
accessibilityHint={_(msg`Closes viewer for header image`)}
onAccessibilityEscape={onRequestClose}>
<FontAwesomeIcon icon="close" color={'#fff'} size={22} />
</TouchableOpacity>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
root: {
alignItems: 'flex-end',
pointerEvents: 'box-none',
},
closeButton: {
marginRight: 10,
marginTop: 10,
width: 44,
height: 44,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 22,
backgroundColor: '#00000077',
},
blurredBackground: {
backdropFilter: 'blur(10px)',
WebkitBackdropFilter: 'blur(10px)',
} as ViewStyle,
})
export default ImageDefaultHeader
|
