1
0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2024-12-25 00:11:36 +01:00

Refactor Alert component to include dismiss animation and timeout

This commit is contained in:
Aleksandr Gumroian 2024-10-02 13:14:48 +02:00
parent 81b71f8153
commit 87c81a2a2d
No known key found for this signature in database
GPG Key ID: 9E77849C64F0A733

View File

@ -5,7 +5,7 @@
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
import React, { useRef } from "react"; import React, { useRef, useEffect, useState } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
@ -40,20 +40,36 @@ Alert.defaultProps = {
function Alert({ type, onDismiss, children }) { function Alert({ type, onDismiss, children }) {
const alertRef = useRef(); const alertRef = useRef();
const [isVisible, setIsVisible] = useState(true);
useFocusTrap(alertRef, !!onDismiss); useFocusTrap(alertRef, !!onDismiss);
useEffect(() => {
if (onDismiss) {
const timeout = setTimeout(() => setIsVisible(false), 7000);
return () => clearTimeout(timeout);
}
}, [onDismiss]);
const handleAnimationEnd = () => {
if (!isVisible && onDismiss) {
onDismiss();
}
};
return ( return (
<div <div
ref={alertRef} ref={alertRef}
className={`alert alert-${type} ${ className={`alert alert-${type} ${isVisible ? "alert-fade-in" : "alert-slide-out-top"} ${
onDismiss ? "alert-dismissible" : "" onDismiss ? "alert-dismissible" : ""
}`.trim()} }`.trim()}
role="alert" role="alert"
onAnimationEnd={handleAnimationEnd}
> >
{onDismiss && ( {onDismiss && (
<button <button
type="button" type="button"
className="btn-close" className="btn-close"
onClick={onDismiss} onClick={() => setIsVisible(false)}
aria-label={_("Close")} aria-label={_("Close")}
/> />
)} )}