148 lines
3.6 KiB
JavaScript
148 lines
3.6 KiB
JavaScript
import { Motion } from "@legendapp/motion";
|
|
import * as Haptics from "expo-haptics";
|
|
import { Text, View } from "react-native";
|
|
|
|
import { isDesktop, isMobile, isNative } from "../hooks/useLayoutType";
|
|
import { Fonts, Palette } from "../styles";
|
|
import Style, { gutters, mainBorderRadius } from "../styles/Style";
|
|
|
|
export default ({
|
|
type = "primary",
|
|
theme = "default", // "default" | "radioactiv"
|
|
|
|
text,
|
|
onPress = () => console.log("null"),
|
|
isAbsoluteBottom = false,
|
|
|
|
alternateAction = {},
|
|
|
|
contentContainerStyle = {},
|
|
containerStyle = {},
|
|
|
|
textStyle = {},
|
|
|
|
isMainDesktopPanel = false,
|
|
}) => {
|
|
const buttonWidth = alternateAction?.text ? "49%" : "100%";
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
flexDirection: "row",
|
|
justifyContent: alternateAction?.text ? "space-between" : "center",
|
|
...(isAbsoluteBottom
|
|
? {
|
|
position: "absolute",
|
|
bottom: gutters * (isMobile ? 2 : 1),
|
|
alignItems: "flex-end",
|
|
...(isDesktop && !isMainDesktopPanel
|
|
? {
|
|
maxWidth: 600,
|
|
minWidth: 400,
|
|
alignSelf: "center",
|
|
}
|
|
: {
|
|
right: gutters,
|
|
left: gutters,
|
|
alignSelf: "center",
|
|
}),
|
|
}
|
|
: {
|
|
width: "100%",
|
|
}),
|
|
...contentContainerStyle,
|
|
}}
|
|
>
|
|
{alternateAction?.text && alternateAction?.onPress ? (
|
|
<BaseButton
|
|
type={"secondary"}
|
|
theme={alternateAction?.theme || theme}
|
|
text={alternateAction.text}
|
|
onPress={alternateAction.onPress}
|
|
textStyle={{
|
|
...(alternateAction?.textStyle || {}),
|
|
}}
|
|
containerStyle={{
|
|
width: buttonWidth,
|
|
...(alternateAction?.containerStyle || {}),
|
|
}}
|
|
/>
|
|
) : null}
|
|
|
|
<BaseButton
|
|
type={type}
|
|
theme={theme}
|
|
text={text}
|
|
onPress={onPress}
|
|
containerStyle={{
|
|
width: buttonWidth,
|
|
...containerStyle,
|
|
}}
|
|
textStyle={{
|
|
...textStyle,
|
|
}}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export const BaseButton = ({
|
|
type = "primary",
|
|
theme = "default",
|
|
text,
|
|
onPress = () => console.log("null"),
|
|
containerStyle = {},
|
|
textStyle = {},
|
|
hasShadow = false,
|
|
}) => {
|
|
const primaryColor =
|
|
theme === "radioactiv" ? Palette.radioactivGreen : Palette.primary;
|
|
const primaryTransparentColor =
|
|
theme === "radioactiv"
|
|
? Palette.transparentRadioactivGreen
|
|
: Palette.transparentPrimary;
|
|
|
|
const textColor = type === "secondary" ? primaryColor : Palette.darkPurple;
|
|
|
|
return (
|
|
<Motion.Pressable
|
|
whileTap={{ scale: 0.8 }}
|
|
onPress={() => {
|
|
if (isNative) {
|
|
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
|
|
}
|
|
onPress();
|
|
}}
|
|
style={{
|
|
width: "100%",
|
|
height: 50,
|
|
marginTop: gutters / 2,
|
|
...Style.containerRow,
|
|
...Style.containerCenter,
|
|
backgroundColor: primaryColor,
|
|
borderRadius: mainBorderRadius,
|
|
...(type === "secondary"
|
|
? {
|
|
backgroundColor: primaryTransparentColor,
|
|
}
|
|
: hasShadow
|
|
? { ...Style.defaultShadows }
|
|
: {}),
|
|
...containerStyle,
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
...Fonts({
|
|
type: "default",
|
|
color: textColor,
|
|
}),
|
|
...textStyle,
|
|
}}
|
|
>
|
|
{text}
|
|
</Text>
|
|
</Motion.Pressable>
|
|
);
|
|
};
|