62 lines
1.9 KiB
JavaScript
62 lines
1.9 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { View, Text, TouchableWithoutFeedback } from 'react-native';
|
|
|
|
import styles from './styles';
|
|
import { themes } from '../../constants/colors';
|
|
import DisclosureIndicator from '../../containers/DisclosureIndicator';
|
|
|
|
export default class Button extends React.PureComponent {
|
|
static propTypes = {
|
|
title: PropTypes.string,
|
|
subtitle: PropTypes.string,
|
|
type: PropTypes.string,
|
|
theme: 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, theme
|
|
} = this.props;
|
|
const { active } = this.state;
|
|
const activeStyle = active && styles.buttonActive;
|
|
const isPrimary = (type === 'primary');
|
|
const buttonContainerStyle = {
|
|
backgroundColor: isPrimary ? themes[theme].actionTintColor : themes[theme].focusedBackground,
|
|
borderColor: isPrimary ? themes[theme].actionTintColor : themes[theme].borderColor
|
|
};
|
|
return (
|
|
<TouchableWithoutFeedback
|
|
onPress={onPress}
|
|
onPressIn={() => this.setState({ active: true })}
|
|
onPressOut={() => this.setState({ active: false })}
|
|
testID={testID}
|
|
>
|
|
<View style={[styles.buttonContainer, buttonContainerStyle]}>
|
|
<View style={styles.buttonIconContainer}>
|
|
{icon}
|
|
</View>
|
|
<View style={styles.buttonCenter}>
|
|
<Text style={[styles.buttonTitle, { color: isPrimary ? themes[theme].buttonText : themes[theme].tintColor }, activeStyle]}>{title}</Text>
|
|
{subtitle ? <Text style={[styles.buttonSubtitle, activeStyle, { color: themes[theme].auxiliaryText }]}>{subtitle}</Text> : null}
|
|
</View>
|
|
{type === 'secondary' ? <DisclosureIndicator theme={theme} /> : null}
|
|
</View>
|
|
</TouchableWithoutFeedback>
|
|
);
|
|
}
|
|
}
|