diff options
Diffstat (limited to 'src/view/com/composer/threadgate/ThreadgateBtn.tsx')
-rw-r--r-- | src/view/com/composer/threadgate/ThreadgateBtn.tsx | 68 |
1 files changed, 68 insertions, 0 deletions
diff --git a/src/view/com/composer/threadgate/ThreadgateBtn.tsx b/src/view/com/composer/threadgate/ThreadgateBtn.tsx new file mode 100644 index 000000000..efc4525ae --- /dev/null +++ b/src/view/com/composer/threadgate/ThreadgateBtn.tsx @@ -0,0 +1,68 @@ +import React from 'react' +import {TouchableOpacity, StyleSheet} from 'react-native' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' +import {usePalette} from 'lib/hooks/usePalette' +import {useAnalytics} from 'lib/analytics/analytics' +import {HITSLOP_10} from 'lib/constants' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' +import {useModalControls} from '#/state/modals' +import {ThreadgateSetting} from '#/state/queries/threadgate' + +export function ThreadgateBtn({ + threadgate, + onChange, +}: { + threadgate: ThreadgateSetting[] + onChange: (v: ThreadgateSetting[]) => void +}) { + const pal = usePalette('default') + const {track} = useAnalytics() + const {_} = useLingui() + const {openModal} = useModalControls() + + const onPress = () => { + track('Composer:ThreadgateOpened') + openModal({ + name: 'threadgate', + settings: threadgate, + onChange, + }) + } + + return ( + <TouchableOpacity + testID="openReplyGateButton" + onPress={onPress} + style={styles.button} + hitSlop={HITSLOP_10} + accessibilityRole="button" + accessibilityLabel={_(msg`Who can reply`)} + accessibilityHint=""> + <FontAwesomeIcon + icon={['far', 'comments']} + style={pal.link as FontAwesomeIconStyle} + size={24} + /> + {threadgate.length ? ( + <FontAwesomeIcon + icon="check" + size={16} + style={pal.link as FontAwesomeIconStyle} + /> + ) : null} + </TouchableOpacity> + ) +} + +const styles = StyleSheet.create({ + button: { + flexDirection: 'row', + alignItems: 'center', + paddingHorizontal: 6, + gap: 4, + }, +}) |