share modal
This commit is contained in:
@@ -222,78 +222,151 @@ const ShareModal = ({ payload }) => {
|
||||
];
|
||||
}, [encodedShareText, encodedUrl, payload?.options, shareTitle]);
|
||||
|
||||
return (
|
||||
<AppActionSheet id="Share">
|
||||
<View style={styles.container}>
|
||||
<BlurView
|
||||
style={[styles.card, styles.blurCard]}
|
||||
tint="dark"
|
||||
intensity={40}
|
||||
{...blurProps}
|
||||
>
|
||||
{/* <Pressable
|
||||
onPress={closeSheet}
|
||||
style={styles.closeButton}
|
||||
hitSlop={8}
|
||||
>
|
||||
<Feather name="x" size={18} color={Palette.white} />
|
||||
</Pressable> */}
|
||||
<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>
|
||||
const mobileContent = (
|
||||
<View style={styles.container}>
|
||||
<BlurView
|
||||
style={[styles.card, styles.blurCard]}
|
||||
tint="dark"
|
||||
intensity={40}
|
||||
{...blurProps}
|
||||
>
|
||||
<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>
|
||||
{copied ? <Text style={styles.copiedText}>Lien copié</Text> : null}
|
||||
</BlurView>
|
||||
</View>
|
||||
{copied ? <Text style={styles.copiedText}>Lien copié</Text> : null}
|
||||
</BlurView>
|
||||
|
||||
<BlurView intensity={40} tint="dark" style={styles.card} {...blurProps}>
|
||||
<Text style={styles.sectionHeading}>{sectionTitle}</Text>
|
||||
<View style={styles.optionsList}>
|
||||
<BlurView intensity={40} tint="dark" style={styles.card} {...blurProps}>
|
||||
<Text style={styles.sectionHeading}>{sectionTitle}</Text>
|
||||
<View style={styles.optionsList}>
|
||||
{shareOptions.map((option, index) => {
|
||||
const Icon = option?.Icon ?? Feather;
|
||||
return (
|
||||
<BlurView
|
||||
key={option?.key || index}
|
||||
style={styles.optionBlur}
|
||||
intensity={100}
|
||||
{...blurProps}
|
||||
>
|
||||
<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>
|
||||
</BlurView>
|
||||
</View>
|
||||
);
|
||||
|
||||
const webContent = (
|
||||
<View style={styles.webContainer}>
|
||||
<View style={styles.webHeader}>
|
||||
<Text style={styles.webHeading}>{heading}</Text>
|
||||
<Pressable
|
||||
onPress={closeSheet}
|
||||
hitSlop={12}
|
||||
style={styles.webCloseButton}
|
||||
>
|
||||
<Feather name="x" size={16} color={Palette.white} />
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
<Text style={styles.webSubheading}>{shareMessage}</Text>
|
||||
|
||||
<View style={styles.webContent}>
|
||||
<View style={styles.webLinkCard}>
|
||||
<Text style={styles.webLinkLabel}>{linkLabel}</Text>
|
||||
<View style={styles.webLinkActions}>
|
||||
<Pressable
|
||||
onPress={handleCopy}
|
||||
style={[
|
||||
styles.webActionButton,
|
||||
styles.webPrimaryButton,
|
||||
copied && styles.webActionButtonActive,
|
||||
]}
|
||||
>
|
||||
<Feather
|
||||
name={copied ? "check" : "copy"}
|
||||
size={16}
|
||||
color={Palette.white}
|
||||
/>
|
||||
<Text style={styles.webActionLabel}>
|
||||
{copied ? "Lien copié" : "Copier le lien"}
|
||||
</Text>
|
||||
</Pressable>
|
||||
|
||||
<Pressable
|
||||
onPress={onSystemShare}
|
||||
style={[styles.webActionButton, styles.webSecondaryButton]}
|
||||
>
|
||||
<Feather name="share-2" size={16} color={Palette.white} />
|
||||
<Text style={styles.webActionLabel}>Partager</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.webOptionsCard}>
|
||||
<Text style={styles.webSectionHeading}>{sectionTitle}</Text>
|
||||
<View style={styles.webOptionsGrid}>
|
||||
{shareOptions.map((option, index) => {
|
||||
const Icon = option?.Icon ?? Feather;
|
||||
return (
|
||||
<BlurView
|
||||
<Pressable
|
||||
key={option?.key || index}
|
||||
style={styles.optionBlur}
|
||||
intensity={100}
|
||||
{...blurProps}
|
||||
onPress={() => handleShareOption(option)}
|
||||
style={styles.webOptionRow}
|
||||
>
|
||||
<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 style={styles.webOptionIcon}>
|
||||
<Icon size={18} color={Palette.white} />
|
||||
</View>
|
||||
<Text style={styles.webOptionLabel}>{option?.label}</Text>
|
||||
<Feather
|
||||
name="chevron-right"
|
||||
size={16}
|
||||
color="rgba(255, 255, 255, 0.6)"
|
||||
/>
|
||||
</Pressable>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
</BlurView>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
return (
|
||||
<AppActionSheet id="Share" webModal={isWeb} onClose={closeSheet}>
|
||||
{isWeb ? webContent : mobileContent}
|
||||
</AppActionSheet>
|
||||
);
|
||||
};
|
||||
@@ -405,6 +478,119 @@ const styles = StyleSheet.create({
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterMedium,
|
||||
},
|
||||
webContainer: {
|
||||
gap: 24,
|
||||
},
|
||||
webHeader: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
gap: 12,
|
||||
},
|
||||
webHeading: {
|
||||
flex: 1,
|
||||
fontSize: 24,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueMedium,
|
||||
},
|
||||
webCloseButton: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 16,
|
||||
backgroundColor: "rgba(255, 255, 255, 0.08)",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
webSubheading: {
|
||||
fontSize: 14,
|
||||
color: "rgba(255, 255, 255, 0.65)",
|
||||
fontFamily: FONT_FAMILY.InterMedium,
|
||||
},
|
||||
webContent: {
|
||||
gap: 20,
|
||||
},
|
||||
webLinkCard: {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.06)",
|
||||
borderRadius: 20,
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 18,
|
||||
gap: 16,
|
||||
},
|
||||
webLinkLabel: {
|
||||
color: Palette.white,
|
||||
fontSize: 15,
|
||||
fontFamily: FONT_FAMILY.InterMedium,
|
||||
overflow: "hidden",
|
||||
},
|
||||
webLinkActions: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 12,
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
webActionButton: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: 10,
|
||||
paddingHorizontal: 18,
|
||||
paddingVertical: 12,
|
||||
borderRadius: 16,
|
||||
},
|
||||
webPrimaryButton: {
|
||||
backgroundColor: Palette.primary,
|
||||
},
|
||||
webSecondaryButton: {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.08)",
|
||||
},
|
||||
webActionButtonActive: {
|
||||
backgroundColor: Palette.darkRadioactivGreen,
|
||||
},
|
||||
webActionLabel: {
|
||||
fontSize: 14,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterMedium,
|
||||
},
|
||||
webOptionsCard: {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.06)",
|
||||
borderRadius: 20,
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 22,
|
||||
gap: 16,
|
||||
},
|
||||
webSectionHeading: {
|
||||
fontSize: 18,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueMedium,
|
||||
},
|
||||
webOptionsGrid: {
|
||||
gap: 12,
|
||||
},
|
||||
webOptionRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
gap: 12,
|
||||
backgroundColor: "rgba(255, 255, 255, 0.04)",
|
||||
borderRadius: 16,
|
||||
paddingHorizontal: 18,
|
||||
paddingVertical: 14,
|
||||
},
|
||||
webOptionIcon: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 18,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
backgroundColor: "rgba(255, 255, 255, 0.08)",
|
||||
marginRight: 4,
|
||||
},
|
||||
webOptionLabel: {
|
||||
flex: 1,
|
||||
fontSize: 15,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterMedium,
|
||||
},
|
||||
});
|
||||
|
||||
export default ShareModal;
|
||||
|
||||
Reference in New Issue
Block a user