1import React from 'react';
2import {
3  PixelRatio,
4  StyleSheet,
5  Text,
6  TextStyle,
7  TouchableHighlight,
8  TouchableHighlightProps,
9  View,
10  ViewStyle,
11} from 'react-native';
12
13import Colors from '../constants/Colors';
14
15interface Props extends TouchableHighlightProps {
16  title: string;
17}
18
19export default class ListButton extends React.Component<Props> {
20  render() {
21    const style: ViewStyle[] = [styles.button];
22    const labelStyles: TextStyle[] = [styles.label];
23    if (this.props.disabled) {
24      style.push(styles.disabledButton);
25      labelStyles.push(styles.disabledLabel);
26    }
27    return (
28      <View style={[styles.container, this.props.style]}>
29        <TouchableHighlight
30          style={style}
31          disabled={this.props.disabled}
32          onPress={this.props.onPress}
33          underlayColor="#dddddd">
34          <Text style={labelStyles}>{this.props.title}</Text>
35        </TouchableHighlight>
36      </View>
37    );
38  }
39}
40
41const styles = StyleSheet.create({
42  container: {},
43  button: {
44    paddingVertical: 10,
45    backgroundColor: 'transparent',
46    borderBottomWidth: 1.0 / PixelRatio.get(),
47    borderBottomColor: '#cccccc',
48  },
49  disabledButton: {},
50  label: {
51    color: Colors.tintColor,
52    fontWeight: '700',
53  },
54  disabledLabel: {
55    color: '#999999',
56  },
57});
58