share modal
This commit is contained in:
@@ -1,120 +1,354 @@
|
||||
import React, { useMemo } from "react";
|
||||
import { Linking, Pressable, Text, View } from "react-native";
|
||||
import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import {
|
||||
Linking,
|
||||
Platform,
|
||||
Pressable,
|
||||
Share,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { SheetManager } from "react-native-actions-sheet";
|
||||
import { shareLink } from "../../helpers";
|
||||
import {
|
||||
Feather,
|
||||
FontAwesome,
|
||||
MaterialCommunityIcons,
|
||||
} from "@expo/vector-icons";
|
||||
|
||||
import AppActionSheet from "../AppActionSheet";
|
||||
import { Palette } from "../../styles";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
import AppActionSheet from "../AppActionSheet";
|
||||
import { isWeb } from "../../hooks/useLayoutType";
|
||||
import {
|
||||
musiclandShareHeading,
|
||||
musiclandShareMessage,
|
||||
musiclandShareUrl,
|
||||
} from "../../data";
|
||||
|
||||
const ShareModal = ({ payload }) => {
|
||||
const {
|
||||
title = "Partager",
|
||||
message = "Choisis une application pour partager",
|
||||
text = "Découvre ce playback sur MusicLand",
|
||||
url = "",
|
||||
} = payload || {};
|
||||
const heading = payload?.heading ?? musiclandShareHeading;
|
||||
const url = payload?.url ?? musiclandShareUrl;
|
||||
const shareTitle = payload?.shareTitle ?? heading;
|
||||
const shareMessage = payload?.shareMessage ?? musiclandShareMessage;
|
||||
const linkLabel = payload?.linkLabel ?? url;
|
||||
const sectionTitle = payload?.sectionTitle ?? "Partager sur...";
|
||||
|
||||
const onClose = () => {
|
||||
const [copied, setCopied] = useState(false);
|
||||
const copyTimeout = useRef(null);
|
||||
|
||||
const closeSheet = useCallback(() => {
|
||||
SheetManager.hide("Share");
|
||||
};
|
||||
}, []);
|
||||
|
||||
const shareText = useMemo(() => {
|
||||
return [text, url].filter(Boolean).join(" ");
|
||||
}, [text, url]);
|
||||
return [shareMessage, url].filter(Boolean).join(" ");
|
||||
}, [shareMessage, url]);
|
||||
|
||||
const openScheme = async () => {
|
||||
try {
|
||||
const supported = await Linking.canOpenURL(url);
|
||||
if (supported) {
|
||||
await Linking.openURL(url);
|
||||
} else {
|
||||
// fallback vers partage natif
|
||||
shareLink({ url, title: "Partager", message: shareText });
|
||||
const encodedUrl = useMemo(() => encodeURIComponent(url), [url]);
|
||||
const encodedShareText = useMemo(
|
||||
() => encodeURIComponent(shareText),
|
||||
[shareText]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (copyTimeout.current) {
|
||||
clearTimeout(copyTimeout.current);
|
||||
}
|
||||
} catch (e) {
|
||||
shareLink({ url, title: "Partager", message: shareText });
|
||||
} finally {
|
||||
onClose();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleCopy = useCallback(async () => {
|
||||
try {
|
||||
if (copyTimeout.current) {
|
||||
clearTimeout(copyTimeout.current);
|
||||
}
|
||||
|
||||
if (isWeb && typeof navigator !== "undefined" && navigator.clipboard) {
|
||||
await navigator.clipboard.writeText(url);
|
||||
} else {
|
||||
const Clipboard = await import("expo-clipboard");
|
||||
if (typeof Clipboard?.setStringAsync === "function") {
|
||||
await Clipboard.setStringAsync(url);
|
||||
} else if (typeof Clipboard?.default?.setStringAsync === "function") {
|
||||
await Clipboard.default.setStringAsync(url);
|
||||
}
|
||||
}
|
||||
|
||||
setCopied(true);
|
||||
copyTimeout.current = setTimeout(() => {
|
||||
setCopied(false);
|
||||
}, 2000);
|
||||
} catch (error) {
|
||||
console.error("share.copy.failed", error);
|
||||
}
|
||||
};
|
||||
}, [url]);
|
||||
|
||||
const handleSystemShare = useCallback(async () => {
|
||||
if (Platform.OS === "web" && typeof navigator !== "undefined") {
|
||||
try {
|
||||
if (typeof navigator.share === "function") {
|
||||
await navigator.share({
|
||||
url,
|
||||
text: shareText,
|
||||
title: shareTitle,
|
||||
});
|
||||
return;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("share.system.web", error);
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
await Share.share(
|
||||
Platform.select({
|
||||
ios: url
|
||||
? { url, message: shareText, title: shareTitle }
|
||||
: { message: shareText, title: shareTitle },
|
||||
android: { message: shareText, title: shareTitle },
|
||||
default: { message: shareText, title: shareTitle },
|
||||
})
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("share.system.native", error);
|
||||
}
|
||||
}, [shareText, shareTitle, url]);
|
||||
|
||||
const handleShareOption = useCallback(
|
||||
async (option) => {
|
||||
const target = option?.target;
|
||||
|
||||
if (!target) {
|
||||
await handleSystemShare();
|
||||
closeSheet();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (Platform.OS === "web") {
|
||||
window.open(target, "_blank", "noopener,noreferrer");
|
||||
closeSheet();
|
||||
return;
|
||||
}
|
||||
|
||||
const supported = await Linking.canOpenURL(target);
|
||||
if (supported) {
|
||||
await Linking.openURL(target);
|
||||
closeSheet();
|
||||
return;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`share.option.error.${option?.key || "unknown"}`, error);
|
||||
}
|
||||
|
||||
await handleSystemShare();
|
||||
closeSheet();
|
||||
},
|
||||
[closeSheet, handleSystemShare]
|
||||
);
|
||||
|
||||
const onSystemShare = useCallback(async () => {
|
||||
await handleSystemShare();
|
||||
closeSheet();
|
||||
}, [closeSheet, handleSystemShare]);
|
||||
|
||||
const shareOptions = useMemo(() => {
|
||||
if (Array.isArray(payload?.options) && payload.options.length) {
|
||||
return payload.options;
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
key: "facebook",
|
||||
label: "Partager sur Facebook",
|
||||
Icon: (props) => <FontAwesome name="facebook" {...props} />,
|
||||
target: `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`,
|
||||
},
|
||||
{
|
||||
key: "instagram",
|
||||
label: "Partager sur Instagram",
|
||||
Icon: (props) => <FontAwesome name="instagram" {...props} />,
|
||||
target: `https://www.instagram.com/?url=${encodedUrl}`,
|
||||
},
|
||||
{
|
||||
key: "x",
|
||||
label: "Partager sur X",
|
||||
Icon: (props) => <FontAwesome name="twitter" {...props} />,
|
||||
target: `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedShareText}`,
|
||||
},
|
||||
{
|
||||
key: "email",
|
||||
label: "Partager par e-mail",
|
||||
Icon: (props) => <Feather name="mail" {...props} />,
|
||||
target: `mailto:?subject=${encodeURIComponent(
|
||||
shareTitle
|
||||
)}&body=${encodedShareText}`,
|
||||
},
|
||||
{
|
||||
key: "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]);
|
||||
|
||||
return (
|
||||
<AppActionSheet id="Share">
|
||||
<View style={{ gap: 24 }}>
|
||||
<View style={{ gap: 6 }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 20,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueMedium,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.white,
|
||||
opacity: 0.8,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
{message}
|
||||
</Text>
|
||||
<View style={styles.container}>
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.heading}>{heading}</Text>
|
||||
<View style={styles.linkRow}>
|
||||
<Text numberOfLines={1} style={styles.linkText}>
|
||||
{linkLabel}
|
||||
</Text>
|
||||
<View style={styles.linkActions}>
|
||||
<Pressable
|
||||
hitSlop={8}
|
||||
onPress={handleCopy}
|
||||
style={styles.iconButton}
|
||||
>
|
||||
<Feather
|
||||
name={copied ? "check" : "copy"}
|
||||
size={16}
|
||||
color={Palette.white}
|
||||
/>
|
||||
</Pressable>
|
||||
<Pressable
|
||||
hitSlop={8}
|
||||
onPress={onSystemShare}
|
||||
style={styles.iconButton}
|
||||
>
|
||||
<Feather name="share-2" size={16} color={Palette.white} />
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
{copied ? (
|
||||
<Text style={styles.copiedText}>Lien copie</Text>
|
||||
) : null}
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
gap: 16,
|
||||
paddingHorizontal: 12,
|
||||
}}
|
||||
>
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
openScheme();
|
||||
}}
|
||||
style={{ alignItems: "center", gap: 8, flex: 1 }}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 28,
|
||||
borderWidth: 1,
|
||||
borderColor: "#FFFFFF60",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterMedium,
|
||||
fontSize: 12,
|
||||
}}
|
||||
>
|
||||
partager
|
||||
</Text>
|
||||
</View>
|
||||
<Text
|
||||
style={{
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterMedium,
|
||||
fontSize: 12,
|
||||
}}
|
||||
>
|
||||
partager
|
||||
</Text>
|
||||
</Pressable>
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.sectionHeading}>{sectionTitle}</Text>
|
||||
<View style={styles.optionsList}>
|
||||
{shareOptions.map((option) => {
|
||||
const Icon = option?.Icon ?? Feather;
|
||||
return (
|
||||
<Pressable
|
||||
key={option?.key}
|
||||
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>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</AppActionSheet>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
gap: 24,
|
||||
},
|
||||
card: {
|
||||
backgroundColor: Palette.glass,
|
||||
borderRadius: 24,
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(255, 255, 255, 0.08)",
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 18,
|
||||
gap: 16,
|
||||
},
|
||||
heading: {
|
||||
fontSize: 20,
|
||||
color: Palette.white,
|
||||
textAlign: "center",
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueMedium,
|
||||
},
|
||||
linkRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
backgroundColor: "rgba(255, 255, 255, 0.06)",
|
||||
borderRadius: 16,
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 10,
|
||||
gap: 12,
|
||||
},
|
||||
linkText: {
|
||||
flex: 1,
|
||||
color: Palette.white,
|
||||
fontSize: 15,
|
||||
fontFamily: FONT_FAMILY.InterMedium,
|
||||
},
|
||||
linkActions: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
},
|
||||
iconButton: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 16,
|
||||
backgroundColor: "rgba(255, 255, 255, 0.08)",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
copiedText: {
|
||||
fontSize: 12,
|
||||
textAlign: "center",
|
||||
color: Palette.white,
|
||||
opacity: 0.8,
|
||||
fontFamily: FONT_FAMILY.InterMedium,
|
||||
},
|
||||
sectionHeading: {
|
||||
fontSize: 18,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueMedium,
|
||||
textAlign: "center",
|
||||
},
|
||||
optionsList: {
|
||||
gap: 12,
|
||||
},
|
||||
optionRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
backgroundColor: "rgba(255, 255, 255, 0.04)",
|
||||
borderRadius: 18,
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 14,
|
||||
gap: 14,
|
||||
},
|
||||
optionIconWrapper: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 18,
|
||||
backgroundColor: "rgba(255, 255, 255, 0.08)",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
optionLabel: {
|
||||
flex: 1,
|
||||
fontSize: 15,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterMedium,
|
||||
},
|
||||
});
|
||||
|
||||
export default ShareModal;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user