144 lines
3.0 KiB
TypeScript
144 lines
3.0 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { StyleSheet, ActivityIndicator, View, Image, StyleProp, ViewStyle } from 'react-native';
|
|
import InteractiveBase from './InteractiveBase';
|
|
import { Text, useTheme } from 'native-base';
|
|
|
|
interface ButtonProps {
|
|
title?: string;
|
|
style?: StyleProp<ViewStyle>;
|
|
onPress?: () => Promise<void>;
|
|
isDisabled?: boolean;
|
|
icon?: (size: string, color: string) => React.ReactNode;
|
|
iconImage?: string;
|
|
type: 'filled' | 'outlined' | 'menu';
|
|
}
|
|
|
|
const ButtonBase: React.FC<ButtonProps> = ({
|
|
title,
|
|
style,
|
|
onPress,
|
|
isDisabled,
|
|
icon,
|
|
iconImage,
|
|
type = 'filled',
|
|
}) => {
|
|
const { colors } = useTheme();
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const styleButton = StyleSheet.create({
|
|
Default: {
|
|
scale: 1,
|
|
shadowOpacity: 0.3,
|
|
shadowRadius: 4.65,
|
|
elevation: 8,
|
|
backgroundColor: colors.primary[400],
|
|
},
|
|
onHover: {
|
|
scale: 1.02,
|
|
shadowOpacity: 0.37,
|
|
shadowRadius: 7.49,
|
|
elevation: 12,
|
|
backgroundColor: colors.primary[500],
|
|
},
|
|
onPressed: {
|
|
scale: 0.98,
|
|
shadowOpacity: 0.23,
|
|
shadowRadius: 2.62,
|
|
elevation: 4,
|
|
backgroundColor: colors.primary[600],
|
|
},
|
|
Disabled: {
|
|
scale: 1,
|
|
shadowOpacity: 0.3,
|
|
shadowRadius: 4.65,
|
|
elevation: 8,
|
|
backgroundColor: colors.primary[400],
|
|
},
|
|
});
|
|
|
|
const styleMenu = StyleSheet.create({
|
|
Default: {
|
|
scale: 1,
|
|
shadowOpacity: 0.3,
|
|
shadowRadius: 4.65,
|
|
elevation: 8,
|
|
backgroundColor: 'rgba(16,16,20,0.5)',
|
|
},
|
|
onHover: {
|
|
scale: 1.01,
|
|
shadowOpacity: 0.37,
|
|
shadowRadius: 7.49,
|
|
elevation: 12,
|
|
backgroundColor: 'rgba(16,16,20,0.4)',
|
|
},
|
|
onPressed: {
|
|
scale: 0.99,
|
|
shadowOpacity: 0.23,
|
|
shadowRadius: 2.62,
|
|
elevation: 4,
|
|
backgroundColor: 'rgba(16,16,20,0.6)',
|
|
},
|
|
Disabled: {
|
|
scale: 1,
|
|
shadowOpacity: 0.3,
|
|
shadowRadius: 4.65,
|
|
elevation: 8,
|
|
backgroundColor: 'rgba(16,16,20,0.5)',
|
|
},
|
|
});
|
|
|
|
const typeToStyleAnimator = { filled: styleButton, outlined: styleButton, menu: styleMenu };
|
|
|
|
return (
|
|
<InteractiveBase
|
|
style={[styles.container, style]}
|
|
styleAnimate={typeToStyleAnimator[type]}
|
|
onPress={async () => {
|
|
if (onPress && !isDisabled) {
|
|
setLoading(true);
|
|
await onPress();
|
|
setLoading(false);
|
|
}
|
|
}}
|
|
isDisabled={isDisabled}
|
|
isOutlined={type === 'outlined'}
|
|
>
|
|
{loading ? (
|
|
<ActivityIndicator
|
|
size="small"
|
|
color={type === 'outlined' ? '#6075F9' : '#FFFFFF'}
|
|
/>
|
|
) : (
|
|
<View style={styles.content}>
|
|
{icon && icon('18', type === 'outlined' ? '#6075F9' : '#FFFFFF')}
|
|
{iconImage && <Image source={{ uri: iconImage }} style={styles.icon} />}
|
|
{title && <Text style={styles.text}>{title}</Text>}
|
|
</View>
|
|
)}
|
|
</InteractiveBase>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
borderRadius: 8,
|
|
},
|
|
content: {
|
|
padding: 10,
|
|
justifyContent: 'center',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
icon: {
|
|
width: 18,
|
|
height: 18,
|
|
// marginRight: 8,
|
|
},
|
|
text: {
|
|
color: '#fff',
|
|
marginHorizontal: 8,
|
|
},
|
|
});
|
|
|
|
export default ButtonBase;
|