96 lines
No EOL
2.5 KiB
TypeScript
Executable file
96 lines
No EOL
2.5 KiB
TypeScript
Executable file
import React from "react";
|
|
import { Button as PaperButton, ButtonProps } from "react-native-paper";
|
|
// import { useTheme } from "../hooks/theme-context";
|
|
import { theme, useTheme } from "common-ui";
|
|
import { TouchableOpacity } from "react-native";
|
|
import MyText from "./text"; // Updated import path
|
|
|
|
|
|
// Omit 'children' from ButtonProps so it can't be passed
|
|
interface Props extends Omit<ButtonProps, "children"> {
|
|
variant?: "blue" | "red" | "green";
|
|
fillColor?: keyof ReturnType<typeof useTheme>["theme"]["colors"];
|
|
textColor?: keyof ReturnType<typeof useTheme>["theme"]["colors"];
|
|
borderColor?: keyof ReturnType<typeof useTheme>["theme"]["colors"];
|
|
fullWidth?: boolean;
|
|
textContent?: string;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
function MyButton({
|
|
variant = "blue",
|
|
fullWidth,
|
|
fillColor,
|
|
textColor,
|
|
borderColor,
|
|
children,
|
|
textContent,
|
|
...props
|
|
}: Props) {
|
|
const { colors } = useTheme().theme;
|
|
let backgroundColor = colors.brand500;
|
|
if (variant === "red") backgroundColor = colors.red1;
|
|
if (variant === "green") backgroundColor = theme.colors.brand500
|
|
if (fillColor && colors[fillColor]) backgroundColor = colors[fillColor];
|
|
|
|
let finalTextColor = "#fff";
|
|
if (textColor && colors[textColor]) finalTextColor = colors[textColor];
|
|
|
|
let borderCol = backgroundColor;
|
|
if (borderColor && colors[borderColor]) borderCol = colors[borderColor];
|
|
|
|
const labelStyle = {
|
|
color: finalTextColor,
|
|
fontWeight: "400" as const,
|
|
...(props.labelStyle as object),
|
|
};
|
|
|
|
return (
|
|
<PaperButton
|
|
{...props}
|
|
accessibilityLabel={props.accessibilityLabel || props.testID}
|
|
textColor={finalTextColor}
|
|
style={[
|
|
{
|
|
backgroundColor,
|
|
borderRadius: 8,
|
|
alignSelf: "flex-start",
|
|
borderWidth: 1,
|
|
borderColor: borderCol,
|
|
opacity: props.disabled ? 0.7 : 1,
|
|
...(fullWidth && { width: "100%" }),
|
|
},
|
|
props.style,
|
|
]}
|
|
labelStyle={labelStyle}
|
|
>
|
|
{textContent ? <MyText style={{ color: finalTextColor }}>{textContent}</MyText> : children}
|
|
</PaperButton>
|
|
);
|
|
}
|
|
|
|
// MyTextButton props: same as Props, but no children and with an extra 'text' property
|
|
interface MyTextButtonProps extends Omit<Props, "children"> {
|
|
text: string;
|
|
}
|
|
|
|
export function MyTextButton({
|
|
variant = "blue",
|
|
fillColor,
|
|
textColor,
|
|
text,
|
|
...props
|
|
}: MyTextButtonProps) {
|
|
return (
|
|
<MyButton
|
|
variant={variant}
|
|
fillColor={fillColor}
|
|
textColor={textColor}
|
|
{...props}
|
|
>
|
|
{text}
|
|
</MyButton>
|
|
);
|
|
}
|
|
|
|
export default MyButton; |