leonm/musicland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modals

Browse Source
This commit is contained in:
leon-morival
2025-10-06 15:22:30 +02:00
parent c1af1cede9
commit 042b3d9019
11 changed files with 95 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Alert.js
+30 -19
View File
@@ -1,12 +1,12 @@
import React, { useState } from "react";
import { Alert, Platform, View, Text } from "react-native";
import { PortalProvider } from "@gorhom/portal";
import React, { useState } from "react";
import { Alert, Platform, Text } from "react-native";
import { Fonts, Style, gutters } from "../styles";
import { BlurView } from "expo-blur";
import { View } from "react-native";
import { Fonts, gutters } from "../styles";
import GradientButton from "./GradientButton";
import Overlay from "./Overlay";
import Button from "./Button";
const WebAlertModal = ({ title, description, options }) => {
const [visible, setVisible] = useState(true);
@@ -26,19 +26,27 @@ const WebAlertModal = ({ title, description, options }) => {
return (
<PortalProvider>
<Overlay isVisible={visible}>
<View
<BlurView
intensity={100}
tint="dark"
style={{
...Style.containerModal,
width: "60%",
maxWidth: 450,
minWidth: 300,
padding: "2.5%",
borderRadius: 12,
// ...Style.containerModal,
}}
>
<Text
style={{
...Fonts({
type: "mainTitle",
type: "default",
style: {
textAlign: "center",
marginBottom: gutters / 2,
},
fontSize: 3,
}),
}}
>
@@ -58,19 +66,22 @@ const WebAlertModal = ({ title, description, options }) => {
{description}
</Text>
<Button
text={confirmOption?.text || "OK"}
<View style={{ flexDirection: "row", gap: 10 }}>
<GradientButton
title={confirmOption?.text || "OK"}
onPress={onConfirm}
alternateAction={
cancelOption
? {
text: cancelOption.text,
onPress: () => onCancel(),
}
: null
}
containerStyle={{ flex: 1 }}
/>
{cancelOption && (
<GradientButton
title={cancelOption.text}
onPress={onCancel}
colors={["#666666", "#333333"]}
containerStyle={{ flex: 1 }}
/>
)}
</View>
</BlurView>
</Overlay>
</PortalProvider>
);
src/components/Button.js
+2 -6
View File
@@ -1,14 +1,10 @@
import { Motion } from "@legendapp/motion";
import { Text, View } from "react-native";
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";
import useLayoutType, {
isDesktop,
isMobile,
isNative,
} from "../hooks/useLayoutType";
export default ({
type = "primary",
src/components/ShareBtnWeb.js
+4 -3
View File
@@ -1,10 +1,11 @@
import { BlurView } from "expo-blur";
import { Image } from "expo-image";
import React from "react";
import { Alert, Platform, Pressable, Text } from "react-native";
import { Platform, Pressable, Text } from "react-native";
import { icons } from "../assets";
import { Palette } from "../styles";
import { FONT_FAMILY } from "../styles/Fonts";
import alert from "./Alert";
export default function ShareBtnWeb({ style }) {
const handleShare = () => {
@@ -18,11 +19,11 @@ export default function ShareBtnWeb({ style }) {
...(shareUrl ? { url: shareUrl } : {}),
})
.catch(() => {
Alert.alert("Partage", "Le partage a été annulé.");
alert("Partage", "Le partage a été annulé.");
});
return;
}
Alert.alert("Partage", "Fonctionnalité disponible prochainement.");
alert("Partage", "Fonctionnalité disponible prochainement.");
};
return (
src/screens/Home/Home.js
+13 -2
View File
@@ -5,9 +5,10 @@ import React, {
useRef,
useState,
} from "react";
import { Alert, Platform, StyleSheet, View } from "react-native";
import { Platform, StyleSheet, View } from "react-native";
import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
import { background } from "../../assets";
import Alert from "../../components/Alert";
import BorderGradientButton from "../../components/BorderGradientButton";
import FeatureCarousel from "../../components/FeatureCarousel/FeatureCarousel";
import GradientButton from "../../components/GradientButton";
@@ -160,7 +161,7 @@ const Home = () => {
{
label: "Supprimer",
onPress: () =>
Alert.alert(
Alert(
"Confirmer la suppression",
"Cette action supprimera définitivement ce projet.",
[
@@ -303,6 +304,16 @@ const Home = () => {
onPress={handleStageAction}
disabled={continueDisabled}
/>
<BorderGradientButton
containerStyle={{ width: Platform.OS === "web" ? 250 : "100%" }}
title={"Test Alert"}
onPress={() =>
Alert("Test", "Ceci est un test d'alert", [
{ text: "Annuler", style: "cancel" },
{ text: "OK", onPress: () => console.log("OK pressé") },
])
}
/>
{/* <BorderGradientButton
containerStyle={{ width: Platform.OS === "web" ? 250 : "100%" }}
title={"Continuer la création"}
src/screens/Home/HomeSave.js
+3 -2
View File
@@ -1,11 +1,12 @@
import { BlurView } from "expo-blur";
import React, { useMemo, useState } from "react";
import { Alert, FlatList, Image, Platform, Text, View } from "react-native";
import { FlatList, Image, Platform, Text, View } from "react-native";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { useGlobal } from "reactn";
import { background, img } from "../../assets";
import GradientButton from "../../components/GradientButton";
import MoreMenu from "../../components/MoreMenu";
import alert from "../../components/Alert";
import { projectsRef } from "../../config/firebase";
import Page from "../../layouts/Page";
import { Routes } from "../../navigation";
@@ -102,7 +103,7 @@ const HomeSave = () => {
{
label: "Supprimer",
onPress: () =>
Alert.alert(
alert(
"Confirmer la suppression",
"Cette action supprimera définitivement ce projet.",
[
src/screens/Playback/RecordPlayback.js
+3 -2
View File
@@ -8,12 +8,13 @@ import React, {
useRef,
useState,
} from "react";
import { Alert, Text, View } from "react-native";
import { Text, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import Svg, { Circle } from "react-native-svg";
import GradientButton from "../../components/GradientButton";
import KaraokeLyrics from "../../components/KaraokeLyrics";
import MusicLandHeader from "../../components/MusicLandHeader";
import alert from "../../components/Alert";
import { increment, projectsRef } from "../../config/firebase";
import { Routes } from "../../navigation";
import { goBack, navigate } from "../../navigation/NavigationService";
@@ -358,7 +359,7 @@ const RecordPlayback = ({ route }) => {
// Inform the user when using a simulator where recording isn't supported
const msg = String(e?.message || e || "");
if (/not supported on the simulator/i.test(msg)) {
Alert.alert(
alert(
"Indisponible sur simulateur",
"L’enregistrement vidéo n’est pas disponible sur le simulateur. Merci d’utiliser un appareil réel.",
[
src/screens/Playback/RecordPlayback.web.js
+3 -2
View File
@@ -8,12 +8,13 @@ import React, {
useRef,
useState,
} from "react";
import { Alert, Text, View } from "react-native";
import { Text, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import Svg, { Circle } from "react-native-svg";
import GradientButton from "../../components/GradientButton";
import KaraokeLyrics from "../../components/KaraokeLyrics";
import MusicLandHeader from "../../components/MusicLandHeader";
import alert from "../../components/Alert";
import { increment, projectsRef } from "../../config/firebase";
import { isWeb } from "../../hooks/useLayoutType";
import Page from "../../layouts/Page";
@@ -641,7 +642,7 @@ const RecordPlayback = ({ route }) => {
setIsPreparing(false);
const msg = String(e?.message || e || "");
if (/not supported on the simulator/i.test(msg)) {
Alert.alert(
alert(
"Indisponible sur simulateur",
"L’enregistrement vidéo n’est pas disponible sur le simulateur. Merci d’utiliser un appareil réel.",
[
src/screens/Studio/Studio.js
+3 -2
View File
@@ -1,8 +1,9 @@
import { View, Text, ScrollView, Pressable, Alert } from "react-native";
import { View, Text, ScrollView, Pressable } from "react-native";
import React, { useState } from "react";
import Page from "../../layouts/Page";
import { background } from "../../assets";
import GradientButton from "../../components/GradientButton";
import alert from "../../components/Alert";
import { navigate } from "../../navigation/NavigationService";
import { Routes } from "../../navigation";
import { gutters } from "../../styles";
@@ -102,7 +103,7 @@ const Studio = () => {
disabled={!selected}
onPress={() => {
if (selected.musicStatus === "GENERATING") {
Alert.alert(
alert(
"Attention",
"La chanson est en cours de génération. Veuillez patienter.",
);
src/screens/Writing/CreatingLyrics.js
+3 -2
View File
@@ -1,10 +1,11 @@
import { BlurView } from "expo-blur";
import React, { useEffect, useRef, useState } from "react";
import { Alert, Image, Platform, Text, View } from "react-native";
import { Image, Platform, Text, View } from "react-native";
import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
import { ai } from "../../assets";
import GradientButton from "../../components/GradientButton";
import ProgressBar from "../../components/ProgressBar";
import alert from "../../components/Alert";
import firebase from "../../config/firebase";
import { Routes } from "../../navigation";
import { navigate } from "../../navigation/NavigationService";
@@ -145,7 +146,7 @@ const CreatingLyrics = ({ active, config, selections }) => {
navigate(Routes.WritingLyrics);
};
Alert.alert(
alert(
"Brief à reformuler",
error.message,
[
src/screens/Writing/Lyrics.js
+10 -22
View File
@@ -1,10 +1,11 @@
import React, { useCallback, useMemo, useRef, useState } from "react";
import { Alert, ScrollView, View } from "react-native";
import { ScrollView, View } from "react-native";
import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
import { background } from "../../assets";
import BorderGradientButton from "../../components/BorderGradientButton";
import GradientButton from "../../components/GradientButton";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import alert from "../../components/Alert";
import MusicLandHeader from "../../components/MusicLandHeader";
import firebase, { projectsRef } from "../../config/firebase";
import { isWeb } from "../../hooks/useLayoutType";
@@ -96,26 +97,14 @@ const Lyrics = ({ navigation }) => {
return obj;
};
const alertMessage = useCallback(
(title, message) => {
const text = [title, message].filter(Boolean).join("\n\n");
if (isWeb && typeof window !== "undefined") {
window.alert(text);
return;
}
Alert.alert(title, message);
},
[isWeb]
);
const alertMessage = useCallback((title, message) => {
alert(title, message);
}, []);
const confirmSensitiveContent = useCallback(
async (title, message) => {
const text = [title, message].filter(Boolean).join("\n\n");
if (isWeb && typeof window !== "undefined") {
return window.confirm(text);
}
return new Promise((resolve) => {
Alert.alert(title, message, [
(title, message) =>
new Promise((resolve) => {
alert(title, message, [
{
text: "Annuler",
style: "cancel",
@@ -127,9 +116,8 @@ const Lyrics = ({ navigation }) => {
onPress: () => resolve(true),
},
]);
});
},
[isWeb]
}),
[]
);
const onValidate = useCallback(async () => {
src/screens/cover/PouchReady.js
+9 -13
View File
@@ -1,12 +1,13 @@
import { useIsFocused } from "@react-navigation/native";
import { Image as ExpoImage } from "expo-image";
import React, { useCallback, useEffect } from "react";
import { ActivityIndicator, Alert, Text, View } from "react-native";
import { ActivityIndicator, Text, View } from "react-native";
import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
import { background, icons } from "../../assets";
import BorderGradientButton from "../../components/BorderGradientButton";
import GradientButton from "../../components/GradientButton";
import MusicLandHeader from "../../components/MusicLandHeader";
import alert from "../../components/Alert";
import firebase, { tasksRef } from "../../config/firebase";
import loaderMessages from "../../config/loaderMessages";
import { isWeb } from "../../hooks/useLayoutType";
@@ -66,17 +67,10 @@ const PouchReady = () => {
!selectedProject?.cover?.generatedBackground &&
selectedProject?.coverStatus !== "GENERATING"
) {
if (isWeb) {
if (typeof window !== "undefined") {
const shouldGenerate = window.confirm("Générer une pochette ?");
if (shouldGenerate) {
generateCover();
}
}
return;
}
Alert.alert("Attention", "Générer une pochette ?", [
alert(
"Attention",
"Générer une pochette ?",
[
{
text: "Oui",
onPress: generateCover,
@@ -84,7 +78,9 @@ const PouchReady = () => {
{
text: "Non",
},
]);
],
{ cancelable: true }
);
}
}, [generateCover, isFocused, selectedProject]);