Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | 4x 53x 53x 53x 12x 11x 53x 45x | import React, { JSX } from "react";
import {
ActivityIndicator,
StyleProp,
StyleSheet,
Text,
TextStyle,
TouchableOpacity,
TouchableOpacityProps,
View,
} from "react-native";
import { makeStyles } from "@repo/ui/themes/makeStyles";
import { useTheme } from "@repo/ui/themes/ThemeContext";
import { IconProps } from "@repo/types/icons";
export interface ButtonProps extends TouchableOpacityProps {
children: React.ReactNode;
leftIcon?: (props: IconProps) => JSX.Element;
rightIcon?: (props: IconProps) => JSX.Element;
onPress?: () => void;
isLoading?: boolean;
disabled?: boolean;
textStyle?: StyleProp<TextStyle>;
testID?: string;
}
export const Button = ({
children,
leftIcon: LeftIcon,
rightIcon: RightIcon,
onPress,
style,
isLoading = false,
disabled = false,
accessibilityLabel,
accessibilityRole = "button",
accessibilityHint,
textStyle,
testID,
}: ButtonProps) => {
const { theme } = useTheme();
const styles = useStyles();
const handlePress = () => {
if (onPress) {
onPress();
}
};
return (
<TouchableOpacity
onPress={handlePress}
style={[styles.button, style, disabled && styles.buttonDisabled]}
disabled={disabled || isLoading}
accessibilityRole={accessibilityRole}
accessibilityLabel={accessibilityLabel}
accessibilityHint={accessibilityHint}
testID={testID}
>
<View
style={[
styles.content,
isLoading && { opacity: theme.metrics.opacity[0] },
]}
>
{LeftIcon && <LeftIcon />}
<Text style={[styles.text, textStyle]}>{children}</Text>
{RightIcon && <RightIcon />}
</View>
{isLoading && (
<View style={styles.loader} testID="button-loading-indicator">
<ActivityIndicator color={theme.colors.text.white} />
</View>
)}
</TouchableOpacity>
);
};
const useStyles = makeStyles((theme) => ({
button: {
backgroundColor: theme.colors.background.info,
padding: theme.metrics.spacing[1],
borderRadius: theme.metrics.borderRadius[4],
width: theme.metrics.sizing.full,
justifyContent: "center",
alignItems: "center",
elevation: 0,
shadowOpacity: 0,
borderWidth: 0,
height: "auto",
},
buttonDisabled: {
opacity: theme.metrics.opacity[40],
},
text: {
color: theme.colors.text.white,
fontWeight: theme.metrics.fontWeight.medium,
textAlign: "center",
fontSize: theme.metrics.textSize[16],
lineHeight: 27,
},
content: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
gap: 10,
},
loader: {
...StyleSheet.absoluteFillObject,
justifyContent: "center",
alignItems: "center",
},
}));
|