mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import React from 'react'
2import {
3 StyleProp,
4 StyleSheet,
5 TextStyle,
6 TouchableOpacity,
7 ViewStyle,
8} from 'react-native'
9import {Text} from '../text/Text'
10import {useTheme} from '../../../lib/ThemeContext'
11import {choose} from '../../../../lib/functions'
12
13export type ButtonType =
14 | 'primary'
15 | 'secondary'
16 | 'inverted'
17 | 'primary-outline'
18 | 'secondary-outline'
19 | 'primary-light'
20 | 'secondary-light'
21 | 'default-light'
22
23export function Button({
24 type = 'primary',
25 label,
26 style,
27 onPress,
28 children,
29}: React.PropsWithChildren<{
30 type?: ButtonType
31 label?: string
32 style?: StyleProp<ViewStyle>
33 onPress?: () => void
34}>) {
35 const theme = useTheme()
36 const outerStyle = choose<ViewStyle, Record<ButtonType, ViewStyle>>(type, {
37 primary: {
38 backgroundColor: theme.palette.primary.background,
39 },
40 secondary: {
41 backgroundColor: theme.palette.secondary.background,
42 },
43 inverted: {
44 backgroundColor: theme.palette.inverted.background,
45 },
46 'primary-outline': {
47 backgroundColor: theme.palette.default.background,
48 borderWidth: 1,
49 borderColor: theme.palette.primary.border,
50 },
51 'secondary-outline': {
52 backgroundColor: theme.palette.default.background,
53 borderWidth: 1,
54 borderColor: theme.palette.secondary.border,
55 },
56 'primary-light': {
57 backgroundColor: theme.palette.default.background,
58 },
59 'secondary-light': {
60 backgroundColor: theme.palette.default.background,
61 },
62 'default-light': {
63 backgroundColor: theme.palette.default.background,
64 },
65 })
66 const labelStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(type, {
67 primary: {
68 color: theme.palette.primary.text,
69 fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
70 },
71 secondary: {
72 color: theme.palette.secondary.text,
73 fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
74 },
75 inverted: {
76 color: theme.palette.inverted.text,
77 fontWeight: theme.palette.inverted.isLowContrast ? '500' : undefined,
78 },
79 'primary-outline': {
80 color: theme.palette.primary.textInverted,
81 fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
82 },
83 'secondary-outline': {
84 color: theme.palette.secondary.textInverted,
85 fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
86 },
87 'primary-light': {
88 color: theme.palette.primary.textInverted,
89 fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
90 },
91 'secondary-light': {
92 color: theme.palette.secondary.textInverted,
93 fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
94 },
95 'default-light': {
96 color: theme.palette.default.text,
97 fontWeight: theme.palette.default.isLowContrast ? '500' : undefined,
98 },
99 })
100 return (
101 <TouchableOpacity
102 style={[outerStyle, styles.outer, style]}
103 onPress={onPress}>
104 {label ? (
105 <Text type="button" style={[labelStyle]}>
106 {label}
107 </Text>
108 ) : (
109 children
110 )}
111 </TouchableOpacity>
112 )
113}
114
115const styles = StyleSheet.create({
116 outer: {
117 paddingHorizontal: 10,
118 paddingVertical: 8,
119 },
120})