import React from 'react'; import { TouchableHighlight, StyleSheet, Text, } from 'react-native'; import Colors from 'src/constants/colors'; import TextStyles from '../styles/TextStyles'; import AppController from 'src/controllers'; export interface ButtonProps { style?: any; onPress?: () => any | Promise<any>; disabled?: boolean; title?: string; isTransparent?: boolean; titleStyles?: any; withBorder?: boolean; underlayColor?: string; buttonForm?: boolean; } export default class Button extends React.Component<ButtonProps> { private _mounted = true; private _onPressHandler = async () => { const { onPress } = this.props; if (onPress) { try { await onPress(); } catch (err) { AppController.captureError(err); } } } componentWillUnmount() { this._mounted = false; } render() { const { disabled, title, style, titleStyles, withBorder, underlayColor, isTransparent, buttonForm } = this.props; const btnUnderlayColor = () => { if (isTransparent) { return Colors.borderColor; } if (buttonForm) { return Colors.button.buttonForm.underlay; } return Colors.button.defaultUnderlayColor; }; return ( <TouchableHighlight style={[ styles.button, disabled && styles.disabledButton, withBorder && styles.withBorder, isTransparent && styles.buttonTransparent, buttonForm && styles.buttonForm, style ]} onPress={this._onPressHandler} underlayColor={underlayColor ? underlayColor : btnUnderlayColor()} activeOpacity={1} disabled={disabled} > { title ? <Text style={[TextStyles.btnTitle, disabled && styles.disabledText, isTransparent ? { color: Colors.button.transparentText } : {}, buttonForm && styles.buttonFormText, titleStyles]}> {title} </Text> : <>{this.props.children}</> } </TouchableHighlight> ); } } const styles = StyleSheet.create({ button: { width: '100%', height: 65, maxHeight: 65, borderRadius: 5, backgroundColor: Colors.button.defaultBg, justifyContent: 'center', alignItems: 'center', position: 'relative', borderWidth: 0, borderColor: Colors.button.defaultBorder, flexShrink: 0, }, whiteTitle: { color: '#fff', }, disabledButton: { borderColor: Colors.button.disabledBorder, backgroundColor: Colors.button.disabledBg, }, disabledText: { color: Colors.button.disabledText, }, withBorder: { borderWidth: 1, }, buttonTransparent: { borderColor: Colors.borderColor, backgroundColor: 'transparent', }, buttonForm: { backgroundColor: Colors.button.buttonForm.bg, borderColor: Colors.button.buttonForm.border, }, buttonFormText: { color: Colors.button.buttonForm.text, }, });