128 lines
3.9 KiB
JavaScript
128 lines
3.9 KiB
JavaScript
import { View, Text, TouchableOpacity, Modal } from "react-native";
|
|
import React from "react";
|
|
import { useTailwind } from "tailwind-rn";
|
|
|
|
export default function MyModal({
|
|
visible,
|
|
setVisible,
|
|
title,
|
|
content,
|
|
confirm,
|
|
custom,
|
|
customText,
|
|
confirmText,
|
|
cancelText,
|
|
confirmLeft = false,
|
|
highlightCancel = false,
|
|
}) {
|
|
const tailwind = useTailwind();
|
|
return (
|
|
<Modal
|
|
visible={visible}
|
|
statusBarTranslucent
|
|
transparent={true}
|
|
style={tailwind("flex-1")}
|
|
>
|
|
<View
|
|
style={{
|
|
backgroundColor: "#00000080",
|
|
...tailwind("flex-1 items-center justify-center"),
|
|
}}
|
|
>
|
|
<View
|
|
style={tailwind("p-2 rounded-2xl bg-[#17161A] items-center w-3/4")}
|
|
>
|
|
<Text
|
|
style={tailwind(
|
|
"text-white text-xl font-semibold text-center mt-2"
|
|
)}
|
|
>
|
|
{title}
|
|
</Text>
|
|
<Text
|
|
style={tailwind("text-[#FFFFFF80] text-sm font-medium mt-2 mb-4")}
|
|
>
|
|
{content}
|
|
</Text>
|
|
<View style={tailwind("flex-row justify-around")}>
|
|
{custom ? (
|
|
<TouchableOpacity
|
|
onPress={custom}
|
|
style={tailwind(
|
|
"border-t-2 border-[#2c2b2f] w-full pt-1 justify-center items-center"
|
|
)}
|
|
>
|
|
<Text
|
|
style={tailwind(
|
|
"text-white text-base font-medium text-center"
|
|
)}
|
|
>
|
|
{customText ? customText : "确认"}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
) : (
|
|
<>
|
|
{confirmLeft && (
|
|
<TouchableOpacity
|
|
onPress={confirm}
|
|
style={tailwind(
|
|
"border-r-2 border-t-2 border-[#2c2b2f] basis-1/2 pt-1 justify-center items-center"
|
|
)}
|
|
>
|
|
<Text
|
|
style={{
|
|
...tailwind("text-base font-medium text-center"),
|
|
color: highlightCancel ? "#FFFFFF80" : "#ffffff",
|
|
}}
|
|
>
|
|
{confirmText ? confirmText : "确认"}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
<TouchableOpacity
|
|
onPress={() => setVisible(false)}
|
|
style={
|
|
confirmLeft
|
|
? tailwind(
|
|
"border-t-2 border-[#2c2b2f] basis-1/2 pt-1 justify-center items-center"
|
|
)
|
|
: tailwind(
|
|
"border-r-2 border-t-2 border-[#2c2b2f] basis-1/2 pt-1 justify-center items-center"
|
|
)
|
|
}
|
|
>
|
|
<Text
|
|
style={{
|
|
...tailwind("text-base font-medium text-center"),
|
|
color: highlightCancel ? "#ffffff" : "#FFFFFF80",
|
|
}}
|
|
>
|
|
{cancelText ? cancelText : "取消"}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
{!confirmLeft && (
|
|
<TouchableOpacity
|
|
onPress={confirm}
|
|
style={tailwind(
|
|
"border-t-2 border-[#2c2b2f] basis-1/2 pt-1 justify-center items-center"
|
|
)}
|
|
>
|
|
<Text
|
|
style={{
|
|
...tailwind("text-base font-medium text-center"),
|
|
color: highlightCancel ? "#FFFFFF80" : "#ffffff",
|
|
}}
|
|
>
|
|
{confirmText ? confirmText : "确认"}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
</>
|
|
)}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
);
|
|
}
|