Merge pull request #314 from kbss-cvut/progression-animation

Implement progression and sliding animation

Author: blcham

src/components/message/Message.jsx

@@ -5,22 +5,85 @@ import { dismissMessage } from "../../actions/MessageActions";
 import { useI18n } from "../../hooks/useI18n";
 import { MESSAGE_DURATION } from "../../constants/DefaultConstants";
 import PropTypes from "prop-types";
+import { useCallback, useEffect } from "react";
 
 export const Message = ({ message }) => {
   const { formatMessage } = useI18n();
   const dispatch = useDispatch();
-  const dismiss = React.useCallback(() => dispatch(dismissMessage(message)), [message, dispatch]);
-  React.useEffect(() => {
+  const [progress, setProgress] = React.useState(0);
+  const [isVisible, setIsVisible] = React.useState(false);
+
+  const dismiss = useCallback(() => dispatch(dismissMessage(message)), [message, dispatch]);
+
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      setIsVisible(true);
+    });
+
+    const startTime = Date.now();
     const timer = setTimeout(() => {
-      dismiss();
+      setIsVisible(false);
+
+      setTimeout(() => {
+        dismiss();
+      }, 400);
     }, MESSAGE_DURATION);
-    return () => clearTimeout(timer);
+
+    const progressInterval = setInterval(() => {
+      const elapsed = Date.now() - startTime;
+      const newProgress = Math.min((elapsed / MESSAGE_DURATION) * 100, 100);
+      setProgress(newProgress);
+    }, 50);
+
+    return () => {
+      clearTimeout(timer);
+      clearInterval(progressInterval);
+    };
   }, [dismiss, message]);
 
+  const size = 24;
+  const strokeWidth = 2;
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - (progress / 100) * circumference;
+
   return (
-    <Alert variant={message.type} onClose={dismiss} dismissible={true}>
-      {message.messageId ? formatMessage(message.messageId, message.values) : message.message}
-    </Alert>
+    <div
+      style={{
+        transform: isVisible ? "translateX(0)" : "translateX(100%)",
+        opacity: isVisible ? 1 : 0,
+        transition: "transform 0.4s ease-out, opacity 0.4s ease-out",
+      }}
+    >
+      <Alert variant={message.type} onClose={dismiss} dismissible={true}>
+        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+          <svg width={size} height={size} style={{ transform: "rotate(-90deg)" }}>
+            <circle
+              cx={size / 2}
+              cy={size / 2}
+              r={radius}
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={strokeWidth}
+              opacity={0.2}
+            />
+            <circle
+              cx={size / 2}
+              cy={size / 2}
+              r={radius}
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={strokeWidth}
+              strokeDasharray={circumference}
+              strokeDashoffset={offset}
+              strokeLinecap="round"
+              style={{ transition: "stroke-dashoffset 0.05s linear" }}
+            />
+          </svg>
+          <span>{message.messageId ? formatMessage(message.messageId, message.values) : message.message}</span>
+        </div>
+      </Alert>
+    </div>
   );
 };