93 lines
1.9 KiB
TypeScript
93 lines
1.9 KiB
TypeScript
import React from "react";
|
|
import { Pressable, type PressableProps, StyleSheet } from "react-native";
|
|
import { Theme } from "../../theme/theme";
|
|
import AppText from "./AppText";
|
|
|
|
type Props = PressableProps & {
|
|
title: string;
|
|
variant?: "primary" | "secondary";
|
|
};
|
|
|
|
export default function Button({
|
|
title,
|
|
variant = "primary",
|
|
style,
|
|
disabled,
|
|
...props
|
|
}: Props) {
|
|
const isPrimary = variant === "primary";
|
|
|
|
return (
|
|
<Pressable
|
|
{...props}
|
|
disabled={disabled}
|
|
style={({ pressed }) => [
|
|
styles.base,
|
|
isPrimary ? styles.primary : styles.secondary,
|
|
|
|
// pressed 스타일(비활성화면 적용 안 함)
|
|
!disabled &&
|
|
pressed &&
|
|
(isPrimary ? styles.primaryPressed : styles.secondaryPressed),
|
|
|
|
// disabled 스타일
|
|
disabled && styles.disabled,
|
|
|
|
typeof style === "function" ? style({ pressed }) : style,
|
|
]}
|
|
>
|
|
<AppText
|
|
style={[
|
|
styles.text,
|
|
isPrimary ? styles.textPrimary : styles.textSecondary,
|
|
disabled && styles.textDisabled,
|
|
]}
|
|
>
|
|
{title}
|
|
</AppText>
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
base: {
|
|
paddingVertical: Theme.Spacing.md,
|
|
borderRadius: Theme.Radius.md,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
minHeight: 48,
|
|
},
|
|
primary: {
|
|
backgroundColor: Theme.Colors.primary,
|
|
},
|
|
primaryPressed: {
|
|
backgroundColor: Theme.Colors.primaryPressed,
|
|
},
|
|
secondary: {
|
|
backgroundColor: Theme.Colors.surface,
|
|
borderWidth: 1,
|
|
borderColor: Theme.Colors.border,
|
|
},
|
|
secondaryPressed: {
|
|
opacity: 0.9,
|
|
},
|
|
|
|
disabled: {
|
|
opacity: 0.5,
|
|
},
|
|
|
|
text: {
|
|
textAlign: "center",
|
|
fontWeight: Theme.FontWeight.bold,
|
|
},
|
|
textPrimary: {
|
|
color: Theme.Colors.text,
|
|
},
|
|
textSecondary: {
|
|
color: Theme.Colors.text,
|
|
},
|
|
textDisabled: {
|
|
color: Theme.Colors.mutedText,
|
|
},
|
|
});
|