82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
import React from 'react';
|
||
import { View, Pressable, Image, StyleSheet } from 'react-native';
|
||
import ContextMenu from "../../gusture/contextMenu";
|
||
import DownloadSvg from "@/assets/icons/svg/download.svg";
|
||
import CancelSvg from "@/assets/icons/svg/cancel.svg";
|
||
import { ContentPart } from "@/types/ask";
|
||
import { TFunction } from 'i18next';
|
||
import { saveMediaToGallery } from "../../ask/utils";
|
||
|
||
interface MediaGridProps {
|
||
mediaItems: ContentPart[];
|
||
setModalVisible: React.Dispatch<React.SetStateAction<{ visible: boolean, data: ContentPart }>>;
|
||
setCancel: React.Dispatch<React.SetStateAction<boolean>>;
|
||
cancel: boolean;
|
||
t: TFunction;
|
||
}
|
||
|
||
const MediaGrid = ({ mediaItems, setModalVisible, setCancel, cancel, t }: MediaGridProps) => {
|
||
// 只取前6个元素（2行，每行3个）
|
||
const displayItems = mediaItems.slice(0, 6);
|
||
|
||
return (
|
||
<View className="flex-row flex-wrap justify-between">
|
||
{displayItems.map((media) => (
|
||
<Pressable
|
||
key={media.id}
|
||
onPress={() => {
|
||
setModalVisible({ visible: true, data: media });
|
||
}}
|
||
className="mb-2 w-[32%] aspect-square"
|
||
>
|
||
<ContextMenu
|
||
items={[
|
||
{
|
||
svg: <DownloadSvg width={20} height={20} />,
|
||
label: t("ask:ask.save"),
|
||
onPress: () => {
|
||
if (media?.url) {
|
||
saveMediaToGallery(media?.url, t);
|
||
}
|
||
},
|
||
textStyle: { color: '#4C320C' }
|
||
},
|
||
{
|
||
svg: <CancelSvg width={20} height={20} color='red' />,
|
||
label: t("ask:ask.cancel"),
|
||
onPress: () => {
|
||
setCancel(true);
|
||
},
|
||
textStyle: { color: 'red' }
|
||
}
|
||
]}
|
||
cancel={cancel}
|
||
menuStyle={{
|
||
backgroundColor: 'white',
|
||
borderRadius: 8,
|
||
padding: 8,
|
||
minWidth: 150,
|
||
shadowColor: '#000',
|
||
shadowOffset: { width: 0, height: 2 },
|
||
shadowOpacity: 0.25,
|
||
shadowRadius: 4,
|
||
elevation: 5,
|
||
}}
|
||
>
|
||
<Image
|
||
source={{ uri: media?.url }}
|
||
className="w-full h-full rounded-xl"
|
||
resizeMode="cover"
|
||
loadingIndicatorSource={require('@/assets/images/png/placeholder.png')}
|
||
/>
|
||
</ContextMenu>
|
||
</Pressable>
|
||
))}
|
||
</View>
|
||
);
|
||
};
|
||
|
||
|
||
|
||
export default MediaGrid;
|