116 lines
3.1 KiB
React
116 lines
3.1 KiB
React
|
import { View, Image } from "react-native";
|
|||
|
|
import React, { useState, useEffect } from "react";
|
|||
|
|
import { useTailwind } from "tailwind-rn";
|
|||
|
|
import { Icon } from "@rneui/themed";
|
|||
|
|
import { DraggableGrid } from "react-native-draggable-grid";
|
|||
|
|
import { useImageViewer } from "../../context/ImageViewProvider";
|
|||
|
|
import VideoModal from "../VideoModal";
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
props格式：
|
|||
|
|
setDragging 返回正在拖动的状态，用于该组件嵌套在ScrollView中的时候禁用ScrollView的滚动
|
|||
|
|
type 选择的媒体类型 "image"|"video"|"mix"
|
|||
|
|
maxCount 最大选择数量
|
|||
|
|
setAssets 向父组件返回媒体
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
export default function MediaGrid({
|
|||
|
|
setDragging = () => null,
|
|||
|
|
assets,
|
|||
|
|
setAssets,
|
|||
|
|
}) {
|
|||
|
|
const tailwind = useTailwind();
|
|||
|
|
|
|||
|
|
const { showImageViewer } = useImageViewer();
|
|||
|
|
|
|||
|
|
const [showVideo, setShowVideo] = useState(false);
|
|||
|
|
const [videoUrl, setVideoUrl] = useState("");
|
|||
|
|
|
|||
|
|
//当newAssets改变的时候添加新数据到assets
|
|||
|
|
useEffect(() => {
|
|||
|
|
const temAssets = assets.map((item) => ({
|
|||
|
|
...item,
|
|||
|
|
uri: item?.dur > 0 ? item.cover_urls[0] : item.urls[0],
|
|||
|
|
key: Date.now().toString(36) + Math.random().toString(36),
|
|||
|
|
}));
|
|||
|
|
setAssets(temAssets);
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const renderItem = (item) => {
|
|||
|
|
const handleDelete = () => {
|
|||
|
|
const updatedAssets = assets.filter((_item) => _item.key !== item.key);
|
|||
|
|
setAssets(updatedAssets);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<View
|
|||
|
|
activeOpacity={1}
|
|||
|
|
style={{
|
|||
|
|
aspectRatio: 1,
|
|||
|
|
padding: 2,
|
|||
|
|
...tailwind("w-full"),
|
|||
|
|
}}
|
|||
|
|
key={item.key}
|
|||
|
|
>
|
|||
|
|
<Image src={item.uri} style={tailwind("w-full h-full rounded")} />
|
|||
|
|
<View style={tailwind("absolute top-2 right-2")}>
|
|||
|
|
<Icon
|
|||
|
|
type="ionicon"
|
|||
|
|
name="close"
|
|||
|
|
color="white"
|
|||
|
|
size={18}
|
|||
|
|
onPress={handleDelete}
|
|||
|
|
style={tailwind("bg-black rounded-full opacity-70")}
|
|||
|
|
/>
|
|||
|
|
</View>
|
|||
|
|
{item?.dur > 0 && (
|
|||
|
|
<View
|
|||
|
|
style={tailwind(
|
|||
|
|
"absolute flex w-full h-full items-center justify-center"
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<Icon
|
|||
|
|
type="ionicon"
|
|||
|
|
name="play"
|
|||
|
|
color="white"
|
|||
|
|
size={14}
|
|||
|
|
style={tailwind("bg-black p-2 rounded-full opacity-70")}
|
|||
|
|
/>
|
|||
|
|
</View>
|
|||
|
|
)}
|
|||
|
|
</View>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<View style={tailwind("flex w-full")}>
|
|||
|
|
<DraggableGrid
|
|||
|
|
numColumns={4}
|
|||
|
|
renderItem={renderItem}
|
|||
|
|
data={assets}
|
|||
|
|
onDragStart={() => setDragging(true)}
|
|||
|
|
onDragRelease={(data) => {
|
|||
|
|
setAssets(data);
|
|||
|
|
setDragging(false);
|
|||
|
|
}}
|
|||
|
|
onItemPress={(item) => {
|
|||
|
|
if (item?.dur > 0) {
|
|||
|
|
setVideoUrl(item.urls[0]);
|
|||
|
|
setShowVideo(true);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
showImageViewer({
|
|||
|
|
imageUrls: [{ url: item.uri }],
|
|||
|
|
index: 0,
|
|||
|
|
});
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
<VideoModal
|
|||
|
|
visible={showVideo}
|
|||
|
|
setVisible={setShowVideo}
|
|||
|
|
url={videoUrl}
|
|||
|
|
/>
|
|||
|
|
</View>
|
|||
|
|
);
|
|||
|
|
}
|