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";
import { createRoot } from "react-dom/client";

const root = createRoot(document?.getElementById("maskDomBox"));
function ImagesMask({}, ref) {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [visible, setVisible] = useState(false);
  const [images, setImages] = useState([]);
  const scrollRef = useRef(null);
  useEffect(() => {
    root.render(
      <div>
        <ImagesMaskContaint
          images={images}
          visible={visible}
          currentIndex={currentIndex}
          ref={scrollRef}
          setCurrentIndex={setCurrentIndex}
          setVisible={setVisible}
          setImages={setImages}
        />
      </div>
    );
    // root.render(<div>xxxx</div>);
  }, [visible]);
  useEffect(() => {
    if (scrollRef.current) {
      setTimeout(() => {
        scrollRef.current.scrollLeft = 414 * currentIndex;
      }, 200);
    }
  }, [currentIndex]);
  useImperativeHandle(ref, () => ({
    show: (arr, index) => {
      setCurrentIndex(index);
      setImages(arr);
      setVisible(old=>{
        console.log(arr, index,old)
        return !old
      });
      
      // Mask.show
      // const maskDomBox = document.getElementById("maskDomBox");
    },
    close: () => setVisible(false),
  }));

  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 (
      <div>
        <Mask
        visible={visible}
        className="z-[1002] h-screen flex justify-center items-center"
      >
        <div className="relative">
          <div className="text-center mb-2">
            {currentIndex + 1}/{images.length}
          </div>
          <div ref={ref} id="imagesScrollBox" className="flex overflow-auto scrollbarBoxX">
            {images.map((item, index) => {
              return (
                <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>
      </div>
    );
  }
);

export default forwardRef(ImagesMask);