src/widgets/Modal/model/ModalContainer.tsx - finalTask - pasha.json/react_pro_final_project_base

src/widgets/Modal/model/ModalContainer.tsx

74 строки2 KB

Pavel Nikolaev

tasks 1-5

19 ноя 2025, 17:07

19 ноя 2025, 17:07804edd8

import { useEffect, useRef, MouseEvent } from "react";
import ReactDOM from "react-dom";
import { Modal } from "../../../shared/ui/Modal";

type ModalProps = {
  isOpen: boolean;
  onClose: () => void;
  children: React.ReactNode;
};

export const ModalContainer = ({ isOpen, onClose, children }: ModalProps) => {
  const modalRoot = document.getElementById("modal-root");

  const overlayRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLElement | null>(null);
  const firstFocusableRef = useRef<HTMLButtonElement | null>(null);

  const openCounterRef = useRef<number>(1);

  useEffect(() => {
    if (isOpen) {
      openCounterRef.current += 1;
      triggerRef.current = document.activeElement as HTMLElement;
      setTimeout(() => {
        firstFocusableRef.current?.focus();
      }, 0);
    }
  }, [isOpen]);

  useEffect(() => {
    if (!isOpen && triggerRef.current) {
      triggerRef.current.focus();
    }
  }, [isOpen]);

  useEffect(() => {
    if (!isOpen) return;

    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        onClose();
      }
    };

    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [isOpen, onClose]);

  if (!isOpen || !modalRoot) return null;

  const overlayClickHandler = (e: MouseEvent<HTMLDivElement>) => {
    if (e.target === overlayRef.current) {
        onClose();
    }
  }

  const onCloseHandler = () => {
    onClose();
  }

  const modalContent = (
    <Modal
        overlayRef={overlayRef}
        overlayClickHandler={overlayClickHandler}
        firstFocusableRef={firstFocusableRef}
        onCloseHandler={onCloseHandler}
        openCounter={openCounterRef.current}
    >
      {children}
    </Modal>
  );

  return ReactDOM.createPortal(modalContent, modalRoot);
};