GGLinnk/foris-js
1
0
Fork 0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2025-06-15 13:36:35 +02:00
Code Issues Releases Activity

Refactor Modal component to use useFocusTrap hook

Browse Source
This commit is contained in:
Aleksandr Gumroian
2024-09-16 17:59:21 +02:00
parent c86e2c8944
commit 02f3803265
2 changed files with 45 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/bootstrap/Modal.js
View File

@ -9,7 +9,7 @@ import React, { useRef, useEffect } from "react";
import PropTypes from "prop-types";
import { useClickOutside } from "../utils/hooks";
import { useClickOutside, useFocusTrap } from "../utils/hooks";
import Portal from "../utils/Portal";
import "./Modal.css";
@ -29,10 +29,11 @@ Modal.propTypes = {
};
export function Modal({ shown, setShown, scrollable, size, children }) {
const dialogRef = useRef();
const modalRef = useRef();
let modalSize = "modal-";
useClickOutside(dialogRef, () => setShown(false));
useClickOutside(modalRef, () => setShown(false));
useFocusTrap(modalRef, shown);
useEffect(() => {
const handleEsc = (event) => {
@ -65,11 +66,13 @@ export function Modal({ shown, setShown, scrollable, size, children }) {
return (
<Portal containerId="modal-container">
<div
ref={modalRef}
className={`modal fade ${shown ? "show" : ""}`.trim()}
role="dialog"
aria-modal="true"
aria-labelledby="modal-title"
>
<div
ref={dialogRef}
className={`${modalSize.trim()} modal-dialog modal-dialog-centered ${
scrollable ? "modal-dialog-scrollable" : ""
}`.trim()}
@ -90,7 +93,7 @@ ModalHeader.propTypes = {
export function ModalHeader({ setShown, title }) {
return (
<div className="modal-header">
<h5 className="modal-title">{title}</h5>
<h1 className="modal-title fs-5">{title}</h1>
<button
type="button"
className="btn-close"