verdnatura-chat/app/views/OnboardingView/Button.js

56 lines
1.5 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import {
View, Text, TouchableWithoutFeedback, Image
} from 'react-native';
import styles from './styles';
export default class Button extends React.PureComponent {
static propTypes = {
title: PropTypes.string,
subtitle: PropTypes.string,
type: PropTypes.string,
icon: PropTypes.node.isRequired,
testID: PropTypes.string.isRequired,
onPress: PropTypes.func
}
static defaultProps = {
title: 'Press me!',
type: 'primary',
onPress: () => alert('It works!')
}
state = {
active: false
};
render() {
const {
title, subtitle, type, onPress, icon, testID
} = this.props;
const { active } = this.state;
const activeStyle = active && styles.buttonActive;
return (
<TouchableWithoutFeedback
onPress={onPress}
onPressIn={() => this.setState({ active: true })}
onPressOut={() => this.setState({ active: false })}
testID={testID}
>
<View style={[styles.buttonContainer, styles[`button_container_${ type }`]]}>
<View style={styles.buttonIconContainer}>
{icon}
</View>
<View style={styles.buttonCenter}>
<Text style={[styles.buttonTitle, styles[`button_text_${ type }`], activeStyle]}>{title}</Text>
{subtitle ? <Text style={[styles.buttonSubtitle, activeStyle]}>{subtitle}</Text> : null}
</View>
{type === 'secondary' ? <Image source={{ uri: 'disclosure_indicator' }} style={styles.buttonIcon} /> : null}
</View>
</TouchableWithoutFeedback>
);
}
}