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
|
import React from 'react'
import {Keyboard, StyleSheet} from 'react-native'
import {observer} from 'mobx-react-lite'
import {Button} from 'view/com/util/forms/Button'
import {usePalette} from 'lib/hooks/usePalette'
import {ShieldExclamation} from 'lib/icons'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
import {isNative} from 'platform/detection'
import {useLingui} from '@lingui/react'
import {msg} from '@lingui/macro'
import {useModalControls} from '#/state/modals'
export const LabelsBtn = observer(function LabelsBtn({
labels,
hasMedia,
onChange,
}: {
labels: string[]
hasMedia: boolean
onChange: (v: string[]) => void
}) {
const pal = usePalette('default')
const {_} = useLingui()
const {openModal} = useModalControls()
return (
<Button
type="default-light"
testID="labelsBtn"
style={[styles.button, !hasMedia && styles.dimmed]}
accessibilityLabel={_(msg`Content warnings`)}
accessibilityHint=""
onPress={() => {
if (isNative) {
if (Keyboard.isVisible()) {
Keyboard.dismiss()
}
}
openModal({name: 'self-label', labels, hasMedia, onChange})
}}>
<ShieldExclamation style={pal.link} size={26} />
{labels.length > 0 ? (
<FontAwesomeIcon
icon="check"
size={16}
style={pal.link as FontAwesomeIconStyle}
/>
) : null}
</Button>
)
})
const styles = StyleSheet.create({
button: {
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 14,
marginRight: 4,
},
dimmed: {
opacity: 0.4,
},
label: {
maxWidth: 100,
},
})
|
