tiefen_space_h5/components/ImagesMask/index.jsx

"use client";

import React, {
  useState,
  useEffect,
  useRef,
  forwardRef,
  useImperativeHandle,
} from "react";
import { Mask, Image } from "antd-mobile";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";
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(() => {
    if (scrollRef.current) {
      setTimeout(() => {
        scrollRef.current.scrollLeft = 414 * currentIndex;
      }, 200);
    }
  }, [currentIndex]);
  useImperativeHandle(ref, () => ({
    show: (arr, index) => {
      setCurrentIndex(index);
      setImages(arr);
      setVisible(true);
      // 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 (
    <Mask
      visible={visible}
      className="z-[99] h-screen flex justify-center items-center"
    >
      <div className="relative">
        <div className="text-center mb-2">
          {currentIndex + 1}/{images.length}
        </div>
        <div
          ref={scrollRef}
          id="imagesScrollBox"
          className="flex overflow-auto"
        >
          {images.map((item, index) => {
            return (
              // <Image
              //   key={index}
              //   fit="cover"
              //   className="mr-3"
              //   // src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/nodata.png"}
              //   src={item}
              //   placeholder=""
              //   width="100vw"
              //   // height="90vh"
              // />
              <img
                key={index}
                src={item}
                // onTouchMove={(e) => handleMoveImages(e, index)}
                onTouchMove={getDistance}
                onTouchEnd={(e) => handleMoveImages(e,index)}
                onClick={() => {
                  setVisible(false), setImages([]), setCurrentIndex(0);
                }}
              />
            );
          })}
        </div>
        <div className="flex justify-between items-center w-screen absolute top-1/2 px-4 pointer-events-none">
          <div
            className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full float-left pointer-events-auto"
            onClick={() => {
              setCurrentIndex((old) => (old > 0 ? old - 1 : old));
            }}
          >
            <FontAwesomeIcon icon={faAngleLeft} size="xl" />
          </div>
          <div
            className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full float-left pointer-events-auto"
            onClick={() => {
              setCurrentIndex((old) =>
                old < images.length - 1 ? old + 1 : old
              );
            }}
          >
            <FontAwesomeIcon icon={faAngleRight} size="xl" />
          </div>
        </div>
      </div>
    </Mask>
  );
}

export default forwardRef(ImagesMask);