share modal

src/components/modal/ShareModal.js

@@ -1,3 +1,8 @@
+import {
+  Feather,
+  FontAwesome,
+  MaterialCommunityIcons,
+} from "@expo/vector-icons";
 import React, {
   useCallback,
   useEffect,
@@ -15,21 +20,18 @@ import {
   View,
 } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
-import {
-  Feather,
-  FontAwesome,
-  MaterialCommunityIcons,
-} from "@expo/vector-icons";
 
-import AppActionSheet from "../AppActionSheet";
-import { Palette } from "../../styles";
-import { FONT_FAMILY } from "../../styles/Fonts";
-import { isWeb } from "../../hooks/useLayoutType";
+import { BlurView } from "expo-blur";
+import { setGlobal } from "reactn";
 import {
   musiclandShareHeading,
   musiclandShareMessage,
   musiclandShareUrl,
 } from "../../data";
+import { isWeb } from "../../hooks/useLayoutType";
+import { Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import AppActionSheet from "../AppActionSheet";
 
 const ShareModal = ({ payload }) => {
   const heading = payload?.heading ?? musiclandShareHeading;
@@ -38,9 +40,12 @@ const ShareModal = ({ payload }) => {
   const shareMessage = payload?.shareMessage ?? musiclandShareMessage;
   const linkLabel = payload?.linkLabel ?? url;
   const sectionTitle = payload?.sectionTitle ?? "Partager sur...";
+  const qrTitle = payload?.qrTitle ?? "Scannez le QR-code";
+  const qrUrl = payload?.qrUrl ?? musiclandShareUrl;
 
   const [copied, setCopied] = useState(false);
   const copyTimeout = useRef(null);
+  const qrOpenTimeout = useRef(null);
 
   const closeSheet = useCallback(() => {
     SheetManager.hide("Share");
@@ -61,6 +66,9 @@ const ShareModal = ({ payload }) => {
       if (copyTimeout.current) {
         clearTimeout(copyTimeout.current);
       }
+      if (qrOpenTimeout.current) {
+        clearTimeout(qrOpenTimeout.current);
+      }
     };
   }, []);
 
@@ -123,6 +131,22 @@ const ShareModal = ({ payload }) => {
 
   const handleShareOption = useCallback(
     async (option) => {
+      if (option?.type === "qr") {
+        const qrTitleValue = qrTitle;
+
+        closeSheet();
+        qrOpenTimeout.current = setTimeout(() => {
+          setGlobal({
+            shareQrModal: {
+              visible: true,
+              url: qrUrl,
+              title: qrTitleValue,
+            },
+          });
+        }, 200);
+        return;
+      }
+
       const target = option?.target;
 
       if (!target) {
@@ -151,7 +175,7 @@ const ShareModal = ({ payload }) => {
       await handleSystemShare();
       closeSheet();
     },
-    [closeSheet, handleSystemShare]
+    [closeSheet, handleSystemShare, qrTitle, qrUrl]
   );
 
   const onSystemShare = useCallback(async () => {
@@ -193,11 +217,11 @@ const ShareModal = ({ payload }) => {
       },
       {
         key: "qr",
+        type: "qr",
         label: "Partager par QR-code",
         Icon: (props) => (
           <MaterialCommunityIcons name="qrcode-scan" {...props} />
         ),
-        target: `https://api.qrserver.com/v1/create-qr-code/?size=512x512&data=${encodedUrl}`,
       },
     ];
   }, [encodedShareText, encodedUrl, payload?.options, shareTitle]);
@@ -205,7 +229,12 @@ const ShareModal = ({ payload }) => {
   return (
     <AppActionSheet id="Share">
       <View style={styles.container}>
-        <View style={styles.card}>
+        <BlurView
+          style={[styles.card, styles.blurCard]}
+          tint="dark"
+          intensity={40}
+          experimentalBlurMethod="dimezisBlurView"
+        >
           <Text style={styles.heading}>{heading}</Text>
           <View style={styles.linkRow}>
             <Text numberOfLines={1} style={styles.linkText}>
@@ -232,31 +261,39 @@ const ShareModal = ({ payload }) => {
               </Pressable>
             </View>
           </View>
-          {copied ? (
-            <Text style={styles.copiedText}>Lien copie</Text>
-          ) : null}
-        </View>
+          {copied ? <Text style={styles.copiedText}>Lien copié</Text> : null}
+        </BlurView>
 
-        <View style={styles.card}>
+        <BlurView
+          intensity={70}
+          experimentalBlurMethod="dimezisBlurView"
+          style={styles.card}
+        >
           <Text style={styles.sectionHeading}>{sectionTitle}</Text>
           <View style={styles.optionsList}>
-            {shareOptions.map((option) => {
+            {shareOptions.map((option, index) => {
               const Icon = option?.Icon ?? Feather;
               return (
-                <Pressable
-                  key={option?.key}
-                  onPress={() => handleShareOption(option)}
-                  style={styles.optionRow}
+                <BlurView
+                  key={option?.key || index}
+                  style={styles.optionBlur}
+                  intensity={40}
+                  experimentalBlurMethod="dimezisBlurView"
                 >
-                  <View style={styles.optionIconWrapper}>
-                    <Icon size={18} color={Palette.white} />
-                  </View>
-                  <Text style={styles.optionLabel}>{option?.label}</Text>
-                </Pressable>
+                  <Pressable
+                    onPress={() => handleShareOption(option)}
+                    style={styles.optionRow}
+                  >
+                    <View style={styles.optionIconWrapper}>
+                      <Icon size={18} color={Palette.white} />
+                    </View>
+                    <Text style={styles.optionLabel}>{option?.label}</Text>
+                  </Pressable>
+                </BlurView>
               );
             })}
           </View>
-        </View>
+        </BlurView>
       </View>
     </AppActionSheet>
   );
@@ -267,7 +304,8 @@ const styles = StyleSheet.create({
     gap: 24,
   },
   card: {
-    backgroundColor: Palette.glass,
+    // backgroundColor: Palette.glass,
+    overflow: "hidden",
     borderRadius: 24,
     borderWidth: 1,
     borderColor: "rgba(255, 255, 255, 0.08)",
@@ -275,6 +313,9 @@ const styles = StyleSheet.create({
     paddingVertical: 18,
     gap: 16,
   },
+  blurCard: {
+    overflow: "hidden",
+  },
   heading: {
     fontSize: 20,
     color: Palette.white,
@@ -325,11 +366,15 @@ const styles = StyleSheet.create({
   optionsList: {
     gap: 12,
   },
+  optionBlur: {
+    borderRadius: 18,
+    overflow: "hidden",
+  },
   optionRow: {
     flexDirection: "row",
     alignItems: "center",
     backgroundColor: "rgba(255, 255, 255, 0.04)",
-    borderRadius: 18,
+    // borderRadius: 18,
     paddingHorizontal: 14,
     paddingVertical: 14,
     gap: 14,
@@ -351,4 +396,3 @@ const styles = StyleSheet.create({
 });
 
 export default ShareModal;
-