-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
91 lines (82 loc) · 2.15 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import React, {FC} from 'react';
import {Pressable, PressableProps, ViewStyle, StyleSheet} from 'react-native';
import {palette} from '../../theme/palette';
import Text from '../Text';
import Icon from '../Icon';
interface PressableStyleProp {
pressed: boolean;
}
interface BaseButtonProps extends PressableProps {
title?: string | null;
icon?: string;
iconRight?: boolean;
disabled?: boolean;
borderRadius?: number;
pressedColor?: string;
style?: ViewStyle;
iconStyle?: ViewStyle;
textStyle?: ViewStyle;
children?: React.ReactNode;
}
const BaseButton: FC<BaseButtonProps> = ({
title = null,
icon = null,
iconRight = false,
disabled = false,
borderRadius = 0,
pressedColor,
style,
iconStyle,
textStyle,
children = null,
...props
}) => {
if (!title && !icon && !children) {
return null;
}
const bgColor = !disabled ? palette.primary.main : palette.grey[200];
const iconPaddingLeft = iconRight && title ? 8 : 0;
const iconPaddingRight = !iconRight && title ? 8 : 0;
const styles = StyleSheet.create({
container: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: 16,
paddingVertical: 10,
borderRadius,
backgroundColor: bgColor,
},
icon: {
color: palette.base.white,
paddingRight: iconPaddingRight,
paddingLeft: iconPaddingLeft,
},
title: {
fontSize: 14,
fontWeight: '500',
textAlign: 'center',
color: palette.base.white,
},
});
const noChildren = () => (
<>
{icon && !iconRight && <Icon name={icon} style={[styles.icon, iconStyle]} size={24} />}
{title && <Text style={[styles.title, textStyle]}>{title}</Text>}
{icon && iconRight && <Icon name={icon} style={[styles.icon, iconStyle]} size={24} />}
</>
);
/* istanbul ignore next */
const PressableStyle = ({pressed}: PressableStyleProp) => {
const backgroundColor = pressedColor ?? palette.primary.dark;
const pressedBgColor = pressed ? [{backgroundColor}] : [];
return [styles.container, style, ...pressedBgColor];
};
return (
<Pressable style={PressableStyle} disabled={disabled} {...props}>
{children ?? noChildren}
</Pressable>
);
};
export default BaseButton;