122 lines
3.1 KiB
JavaScript
122 lines
3.1 KiB
JavaScript
import { PortalProvider } from "@gorhom/portal";
|
|
import React, { useState } from "react";
|
|
import { Alert, Platform, Text } from "react-native";
|
|
|
|
import { BlurView } from "expo-blur";
|
|
import { View } from "react-native";
|
|
import { Fonts, gutters } from "../styles";
|
|
import GradientButton from "./GradientButton";
|
|
import Overlay from "./Overlay";
|
|
const WebAlertModal = ({ title, description, options }) => {
|
|
const [visible, setVisible] = useState(true);
|
|
|
|
const confirmOption = options?.find(({ style }) => style !== "cancel");
|
|
const cancelOption = options?.find(({ style }) => style === "cancel");
|
|
|
|
const onConfirm = () => {
|
|
setVisible(false);
|
|
confirmOption?.onPress();
|
|
};
|
|
|
|
const onCancel = () => {
|
|
setVisible(false);
|
|
cancelOption?.onPress();
|
|
};
|
|
|
|
return (
|
|
<PortalProvider>
|
|
<Overlay isVisible={visible}>
|
|
<BlurView
|
|
intensity={100}
|
|
tint="dark"
|
|
style={{
|
|
width: "60%",
|
|
maxWidth: 450,
|
|
minWidth: 300,
|
|
padding: "2.5%",
|
|
borderRadius: 12,
|
|
// ...Style.containerModal,
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
...Fonts({
|
|
type: "default",
|
|
style: {
|
|
textAlign: "center",
|
|
marginBottom: gutters / 2,
|
|
},
|
|
fontSize: 3,
|
|
}),
|
|
}}
|
|
>
|
|
{title}
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
...Fonts({
|
|
type: "default",
|
|
style: {
|
|
textAlign: "center",
|
|
marginBottom: gutters / 2,
|
|
},
|
|
}),
|
|
}}
|
|
>
|
|
{description}
|
|
</Text>
|
|
|
|
<View style={{ flexDirection: "row", gap: 10 }}>
|
|
<GradientButton
|
|
title={confirmOption?.text || "OK"}
|
|
onPress={onConfirm}
|
|
containerStyle={{ flex: 1 }}
|
|
/>
|
|
{cancelOption && (
|
|
<GradientButton
|
|
title={cancelOption.text}
|
|
onPress={onCancel}
|
|
colors={["#666666", "#333333"]}
|
|
containerStyle={{ flex: 1 }}
|
|
/>
|
|
)}
|
|
</View>
|
|
</BlurView>
|
|
</Overlay>
|
|
</PortalProvider>
|
|
);
|
|
};
|
|
|
|
const alertPolyfill = (title, description, options, extra) => {
|
|
const rootDiv = document.createElement("div");
|
|
document.body.appendChild(rootDiv);
|
|
|
|
const closeModal = () => {
|
|
document.body.removeChild(rootDiv);
|
|
};
|
|
|
|
const WebAlertComponent = () => (
|
|
<WebAlertModal
|
|
title={title}
|
|
description={description}
|
|
options={options}
|
|
onDismiss={closeModal}
|
|
/>
|
|
);
|
|
|
|
// Render the React component into the div
|
|
require("react-dom").render(<WebAlertComponent />, rootDiv);
|
|
};
|
|
|
|
const customAlert = (title, description, options, extra) => {
|
|
// Utilisation de la propriété userInterfaceStyle pour le mettre en mode sombre
|
|
Alert.alert(title, description, options, {
|
|
...extra,
|
|
userInterfaceStyle: "dark",
|
|
});
|
|
};
|
|
|
|
const alert = Platform.OS === "web" ? alertPolyfill : customAlert;
|
|
|
|
export default alert;
|