106 lines
2.4 KiB
TypeScript
106 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import { TouchableOpacity, TouchableOpacityProps, ActivityIndicator, GestureResponderEvent, StyleProp, ViewStyle, StyleSheet } from 'react-native';
|
|
import { Typography } from './Typography';
|
|
|
|
interface ButtonProps extends TouchableOpacityProps {
|
|
variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
|
|
title: string;
|
|
loading?: boolean;
|
|
onPress?: (event: GestureResponderEvent) => void;
|
|
disabled?: boolean;
|
|
style?: StyleProp<ViewStyle>;
|
|
}
|
|
|
|
export const Button: React.FC<ButtonProps> = ({
|
|
variant = 'primary',
|
|
title,
|
|
loading = false,
|
|
disabled,
|
|
style,
|
|
...props
|
|
}) => {
|
|
const getBackgroundStyle = () => {
|
|
if (disabled) return styles.bgDisabled;
|
|
switch (variant) {
|
|
case 'primary':
|
|
return styles.bgPrimary;
|
|
case 'secondary':
|
|
return styles.bgSecondary;
|
|
case 'outline':
|
|
return styles.bgOutline;
|
|
case 'ghost':
|
|
return styles.bgGhost;
|
|
default:
|
|
return styles.bgPrimary;
|
|
}
|
|
};
|
|
|
|
const getTextStyle = () => {
|
|
if (disabled) return styles.textDisabled;
|
|
switch (variant) {
|
|
case 'primary':
|
|
case 'secondary':
|
|
return styles.textWhite;
|
|
case 'outline':
|
|
case 'ghost':
|
|
return styles.textPrimary;
|
|
default:
|
|
return styles.textWhite;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
style={[styles.container, getBackgroundStyle(), style]}
|
|
disabled={disabled || loading}
|
|
activeOpacity={0.8}
|
|
{...props}
|
|
>
|
|
{loading ? (
|
|
<ActivityIndicator color={variant === 'outline' || variant === 'ghost' ? '#4F46E5' : '#FFFFFF'} />
|
|
) : (
|
|
<Typography weight="medium" style={getTextStyle()}>
|
|
{title}
|
|
</Typography>
|
|
)}
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
paddingVertical: 12,
|
|
paddingHorizontal: 24,
|
|
borderRadius: 12,
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
bgDisabled: {
|
|
backgroundColor: '#D1D5DB',
|
|
},
|
|
bgPrimary: {
|
|
backgroundColor: '#4F46E5',
|
|
},
|
|
bgSecondary: {
|
|
backgroundColor: '#10B981',
|
|
},
|
|
bgOutline: {
|
|
backgroundColor: 'transparent',
|
|
borderColor: '#4F46E5',
|
|
borderWidth: 2,
|
|
},
|
|
bgGhost: {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
textDisabled: {
|
|
color: '#6B7280',
|
|
},
|
|
textWhite: {
|
|
color: '#FFFFFF',
|
|
},
|
|
textPrimary: {
|
|
color: '#4F46E5',
|
|
},
|
|
});
|