diff --git a/native/components/relationship-button.react.js b/native/components/relationship-button.react.js new file mode 100644 --- /dev/null +++ b/native/components/relationship-button.react.js @@ -0,0 +1,94 @@ +// @flow + +import Icon from '@expo/vector-icons/FontAwesome5.js'; +import * as React from 'react'; +import { Text } from 'react-native'; + +import Button from './button.react.js'; +import { useStyles, useColors } from '../themes/colors.js'; + +type RelationshipButtonType = + | 'add' + | 'withdraw' + | 'accept' + | 'reject' + | 'block' + | 'unblock'; + +type Props = { + +type: RelationshipButtonType, + +onPress: () => mixed, +}; + +function RelationshipButton(props: Props): React.Node { + const { type, onPress } = props; + + const styles = useStyles(unboundStyles); + const colors = useColors(); + + const buttonStyle = React.useMemo(() => { + const result = [styles.buttonContainer]; + + if (type === 'add' || type === 'accept' || type === 'unblock') { + result.push(styles.greenButton); + } else { + result.push(styles.redButton); + } + + return result; + }, [styles.buttonContainer, styles.greenButton, styles.redButton, type]); + + let buttonText = 'Add Friend'; + let icon = 'user-plus'; + if (type === 'withdraw') { + buttonText = 'Withdraw Friend Request'; + icon = 'user-minus'; + } else if (type === 'accept') { + buttonText = 'Accept'; + } else if (type === 'reject') { + buttonText = 'Reject'; + icon = 'user-minus'; + } else if (type === 'block') { + buttonText = 'Block User'; + icon = 'user-shield'; + } else if (type === 'unblock') { + buttonText = 'Unblock User'; + icon = 'user-shield'; + } + + return ( + + ); +} + +const unboundStyles = { + buttonContainer: { + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + paddingVertical: 8, + borderRadius: 8, + }, + buttonIcon: { + paddingRight: 8, + }, + buttonText: { + color: 'floatingButtonLabel', + }, + greenButton: { + backgroundColor: 'vibrantGreenButton', + }, + redButton: { + backgroundColor: 'vibrantRedButton', + }, +}; + +export default RelationshipButton;