diff --git a/components/ImagesMask/index.jsx b/components/ImagesMask/index.jsx
index 4de306a..fe63a28 100644
--- a/components/ImagesMask/index.jsx
+++ b/components/ImagesMask/index.jsx
@@ -10,12 +10,32 @@ import React, {
import { Mask, Image } from "antd-mobile";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";
+import { createRoot } from "react-dom/client";
+
+const maskDomBox = window ? document?.getElementById("maskDomBox") : null;
+console.log(maskDomBox);
+const root = createRoot(maskDomBox);
function ImagesMask({}, ref) {
const [currentIndex, setCurrentIndex] = useState(0);
const [visible, setVisible] = useState(false);
const [images, setImages] = useState([]);
- const [distance, setDistance] = useState(0);
const scrollRef = useRef(null);
+ useEffect(() => {
+ root.render(
+
+
+
+ );
+ // root.render(
xxxx
);
+ }, [visible]);
useEffect(() => {
if (scrollRef.current) {
setTimeout(() => {
@@ -27,91 +47,91 @@ function ImagesMask({}, ref) {
show: (arr, index) => {
setCurrentIndex(index);
setImages(arr);
- setVisible(true);
+ setVisible(old=>{
+ console.log(arr, index,old)
+ return !old
+ });
+
// Mask.show
// const maskDomBox = document.getElementById("maskDomBox");
},
close: () => setVisible(false),
}));
- const getDistance = (e) => {
- e.stopPropagation();
- const distance = scrollRef.current.scrollLeft;
- setDistance(distance);
- };
- const handleMoveImages = (e,index) => {
- e.stopPropagation();
- // console.log("distance",distance)
- if (
- distance > window.innerWidth * currentIndex &&
- distance < window.innerWidth + window.innerWidth * currentIndex
- ) {
- setCurrentIndex(Math.ceil(distance/414))
- } else if(distance < window.innerWidth * currentIndex) {
- setCurrentIndex(Math.ceil(distance/414)-1)
- }
- };
- return (
-
-
-
- {currentIndex + 1}/{images.length}
-
-
-
-
{
- setCurrentIndex((old) => (old > 0 ? old - 1 : old));
- }}
- >
-
-
-
{
- setCurrentIndex((old) =>
- old < images.length - 1 ? old + 1 : old
- );
- }}
- >
-
-
-
-
- );
+
+ return <>;
}
+const ImagesMaskContaint = forwardRef(
+ ({ visible, images, currentIndex,setCurrentIndex,setVisible,setImages }, ref) => {
+ const [distance, setDistance] = useState(0);
+ const getDistance = (e) => {
+ e.stopPropagation();
+ const distance = ref.current.scrollLeft;
+ setDistance(distance);
+ };
+ const handleMoveImages = (e, index) => {
+ e.stopPropagation();
+ // console.log("distance",distance)
+ if (
+ distance > window.innerWidth * currentIndex &&
+ distance < window.innerWidth + window.innerWidth * currentIndex
+ ) {
+ setCurrentIndex(Math.ceil(distance / 414));
+ } else if (distance < window.innerWidth * currentIndex) {
+ setCurrentIndex(Math.ceil(distance / 414) - 1);
+ }
+ };
+ return (
+
+
+
+
+ {currentIndex + 1}/{images.length}
+
+
+
+
{
+ setCurrentIndex((old) => (old > 0 ? old - 1 : old));
+ }}
+ >
+
+
+
{
+ setCurrentIndex((old) =>
+ old < images.length - 1 ? old + 1 : old
+ );
+ }}
+ >
+
+
+
+
+
+ );
+ }
+);
+
export default forwardRef(ImagesMask);
diff --git a/components/Photos/index.js b/components/Photos/index.js
index 7e2ecb0..d5c7eff 100644
--- a/components/Photos/index.js
+++ b/components/Photos/index.js
@@ -7,8 +7,8 @@ import { faAngleUp, faClose } from "@fortawesome/free-solid-svg-icons";
import { useRouter } from "next/navigation";
import baseRequest from "@/utils/baseRequest";
import Player from "next-video/player";
-// import ImagesMask from "@/components/ImagesMask";
-// import Viewer from 'react-viewer';
+import ImagesMask from "@/components/ImagesMask";
+
export default function Photos({
isUnlocked,
mediaVisibleRange,
@@ -23,9 +23,10 @@ export default function Photos({
const [visible, setVisible] = useState(false);
const currentIndex = useRef();
const swiper = useRef(null);
- // const imagesMaskRef = useRef(null);
+ const imagesMaskRef = useRef(null);
const router = useRouter();
const base = baseRequest();
+
useEffect(() => {
if (media) {
let imgArr = media.images.map((item) => ({
@@ -74,88 +75,92 @@ export default function Photos({
// }, 400);
// 添加左右切换按钮
- const btns = document.createElement("div");
- btns.className = "imagesBtnsControllers";
- const btnL = document.createElement("div");
- btnL.className = "imagesBtnsControllerLeft";
- btnL.addEventListener("click", () => {
- if (currentIndex.current > 0) {
- currentIndex.current = currentIndex.current - 1;
- handleShowImages(currentIndex.current, photos, btns);
- if (!currentIndex.current) {
- btnL.style.opacity = 0.5;
- btnR.style.opacity = 1;
- } else {
- btnR.style.opacity = 1;
- btnL.style.opacity = 1;
- }
- }
- });
- const btnR = document.createElement("div");
- btnR.className = "imagesBtnsControllerRight";
- btnR.addEventListener("click", () => {
- if (currentIndex.current < currentPhotos.length - 1) {
- currentIndex.current = currentIndex.current + 1;
- handleShowImages(currentIndex.current, photos, btns);
- if (currentIndex.current == currentPhotos.length - 1) {
- btnR.style.opacity = 0.5;
- btnL.style.opacity = 1;
- } else {
- btnR.style.opacity = 1;
- btnL.style.opacity = 1;
- }
- }
- });
- btns.append(btnL, btnR);
- handleShowImages(index, photos, btns);
+ // const btns = document.createElement("div");
+ // btns.className = "imagesBtnsControllers";
+ // const btnL = document.createElement("div");
+ // btnL.className = "imagesBtnsControllerLeft";
+ // btnL.addEventListener("click", () => {
+ // if (currentIndex.current > 0) {
+ // currentIndex.current = currentIndex.current - 1;
+ // handleShowImages(currentIndex.current, photos, btns,interval);
+ // if (!currentIndex.current) {
+ // btnL.style.opacity = 0.5;
+ // btnR.style.opacity = 1;
+ // } else {
+ // btnR.style.opacity = 1;
+ // btnL.style.opacity = 1;
+ // }
+ // }
+ // });
+ // const btnR = document.createElement("div");
+ // btnR.className = "imagesBtnsControllerRight";
+ // btnR.addEventListener("click", () => {
+ // if (currentIndex.current < currentPhotos.length - 1) {
+ // currentIndex.current = currentIndex.current + 1;
+ // handleShowImages(currentIndex.current, photos, btns,interval);
+ // if (currentIndex.current == currentPhotos.length - 1) {
+ // btnR.style.opacity = 0.5;
+ // btnL.style.opacity = 1;
+ // } else {
+ // btnR.style.opacity = 1;
+ // btnL.style.opacity = 1;
+ // }
+ // }
+ // });
+ // btns.append(btnL, btnR);
+ // handleShowImages(index, photos, btns,interval);
// setVisible(true)
- // imagesMaskRef.current.show(photos.map((item) => item?.url),index)
+ console.log(imagesMaskRef.current);
+ imagesMaskRef.current.show(
+ photos.map((item) => item?.url),
+ index
+ );
};
- const handleShowImages = (index, photos, btns) => {
- const mediaDom = document.createElement("div");
- mediaDom.style.width = "100vw";
- document.body.appendChild(mediaDom);
- mediaDom.className = `${
- photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
- }`;
- mediaDom.appendChild(btns);
- ImageViewer.clear();
- ImageViewer.Multi.show({
- images: photos.map((item) => item?.url),
- defaultIndex: index,
- renderFooter: (image, index) => {
- return renderFooter(photos[index]?.type == "hid", mediaDom);
- },
+ // const handleShowImages = (index, photos, btns) => {
+ // const mediaDom = document.createElement("div");
+ // mediaDom.style.width = "100vw";
+ // document.body.appendChild(mediaDom);
+ // mediaDom.className = `${
+ // photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
+ // }`;
+ // mediaDom.appendChild(btns);
+ // ImageViewer.clear();
+ // ImageViewer.Multi.show({
+ // images: photos.map((item) => item?.url),
+ // defaultIndex: index,
+ // renderFooter: (image, index) => {
+ // return renderFooter(photos[index]?.type == "hid", mediaDom);
+ // },
- getContainer: mediaDom,
- onIndexChange: (index) => {
- currentIndex.current = index;
- mediaDom.className = `${
- photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
- }`;
- const leftBtn = document.getElementsByClassName("imagesBtnsControllerLeft")[0]
- const rightBtn = document.getElementsByClassName("imagesBtnsControllerRight")[0]
- if(leftBtn && rightBtn){
- if(!index){
- leftBtn.style.opacity=0.5
- rightBtn.style.opacity=1
- }else if(index==currentPhotos.length-1){
- leftBtn.style.opacity=1
- rightBtn.style.opacity=0.5
- }else{
- leftBtn.style.opacity=1
- rightBtn.style.opacity=1
- }
- }
- },
- afterClose: () => {
- mediaDom.remove();
- // clearInterval(interval);
- },
- classNames: { body: "photos-bodyBox" },
- });
- };
+ // getContainer: mediaDom,
+ // onIndexChange: (index) => {
+ // currentIndex.current = index;
+ // mediaDom.className = `${
+ // photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
+ // }`;
+ // const leftBtn = document.getElementsByClassName("imagesBtnsControllerLeft")[0]
+ // const rightBtn = document.getElementsByClassName("imagesBtnsControllerRight")[0]
+ // if(leftBtn && rightBtn){
+ // if(!index){
+ // leftBtn.style.opacity=0.5
+ // rightBtn.style.opacity=1
+ // }else if(index==currentPhotos.length-1){
+ // leftBtn.style.opacity=1
+ // rightBtn.style.opacity=0.5
+ // }else{
+ // leftBtn.style.opacity=1
+ // rightBtn.style.opacity=1
+ // }
+ // }
+ // },
+ // afterClose: () => {
+ // mediaDom.remove();
+ // // clearInterval(interval);
+ // },
+ // classNames: { body: "photos-bodyBox" },
+ // });
+ // };
const handleShowVideo = (video) => {
Dialog.className = "videoMask";
Dialog.show({
@@ -354,7 +359,7 @@ export default function Photos({
);
})}