57 lines
1.6 KiB
JavaScript
57 lines
1.6 KiB
JavaScript
import React from 'react';
|
|
import { Text, TouchableOpacity } from 'react-native';
|
|
import buttonStyle from 'styles/button';
|
|
import Colors from 'styles/colors';
|
|
import Icon from 'react-native-vector-icons/FontAwesome5';
|
|
|
|
export default class Button extends React.PureComponent {
|
|
render() {
|
|
const { disabled, style, text, icon, iconColor, solid, theme, onPress, onLayout } = this.props;
|
|
|
|
let styles = [buttonStyle.button, buttonStyle.row];
|
|
if (style) {
|
|
if (style.length) {
|
|
styles = styles.concat(style);
|
|
} else {
|
|
styles.push(style);
|
|
}
|
|
}
|
|
|
|
if (disabled) {
|
|
styles.push(buttonStyle.disabled);
|
|
}
|
|
|
|
const textStyles = [buttonStyle.text];
|
|
if (icon && icon.trim().length > 0) {
|
|
textStyles.push(buttonStyle.textWithIcon);
|
|
}
|
|
|
|
if (theme === 'light') {
|
|
textStyles.push(buttonStyle.textDark);
|
|
} else {
|
|
// Dark background, default
|
|
textStyles.push(buttonStyle.textLight);
|
|
}
|
|
|
|
let renderIcon = (
|
|
<Icon name={icon} size={16} color={iconColor || (theme === 'light' ? Colors.DarkGrey : Colors.White)} />
|
|
);
|
|
if (solid) {
|
|
renderIcon = (
|
|
<Icon
|
|
name={icon}
|
|
size={16}
|
|
color={iconColor || (theme === 'light' ? Colors.DarkGrey : Colors.White)}
|
|
solid
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<TouchableOpacity disabled={disabled} style={styles} onPress={onPress} onLayout={onLayout}>
|
|
{icon && renderIcon}
|
|
{text && text.trim().length > 0 && <Text style={textStyles}>{text}</Text>}
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
}
|