diff --git a/api-generator/components/toast.js b/api-generator/components/toast.js
index 63432b5b44..3097139d39 100644
--- a/api-generator/components/toast.js
+++ b/api-generator/components/toast.js
@@ -75,6 +75,28 @@ const ToastEvents = [
name: 'onHide',
description: 'Callback to invoke when message becomes hidden.',
arguments: []
+ },
+ {
+ name: 'onMouseEnter',
+ description: 'Callback to invoke when a message gets focus with mouse.',
+ arguments: [
+ {
+ name: 'event',
+ type: 'MouseEvent',
+ description: 'Mouse Event'
+ }
+ ]
+ },
+ {
+ name: 'onMouseLeave',
+ description: 'Callback to invoke when a message loses focus with mouse.',
+ arguments: [
+ {
+ name: 'event',
+ type: 'MouseEvent',
+ description: 'Mouse Event'
+ }
+ ]
}
];
diff --git a/components/doc/toast/index.js b/components/doc/toast/index.js
index 277247cf9a..01b4b892e1 100644
--- a/components/doc/toast/index.js
+++ b/components/doc/toast/index.js
@@ -1,9 +1,9 @@
-import React, { memo } from 'react';
import Link from 'next/link';
-import { TabView, TabPanel } from '../../lib/tabview/TabView';
-import { useLiveEditorTabs } from '../common/liveeditor';
+import React, { memo } from 'react';
+import { TabPanel, TabView } from '../../lib/tabview/TabView';
import { CodeHighlight } from '../common/codehighlight';
import { DevelopmentSection } from '../common/developmentsection';
+import { useLiveEditorTabs } from '../common/liveeditor';
const ToastDoc = memo(() => {
const sources = {
@@ -827,6 +827,16 @@ toast.current.replace(newMessages);
- |
Callback to invoke when message becomes hidden. |
+
+ onMouseEnter |
+ event: Mouse Event |
+ Callback to invoke when a message gets focus with mouse. |
+
+
+ onMouseLeave |
+ event: Mouse Event |
+ Callback to invoke when a message loses focus with mouse. |
+
diff --git a/components/lib/api/Locale.js b/components/lib/api/Locale.js
index 40f4de08fb..978621867c 100644
--- a/components/lib/api/Locale.js
+++ b/components/lib/api/Locale.js
@@ -20,6 +20,7 @@ let locales = {
dateAfter: 'Date is after',
custom: 'Custom',
clear: 'Clear',
+ close: 'Close',
apply: 'Apply',
matchAll: 'Match All',
matchAny: 'Match Any',
diff --git a/components/lib/toast/Toast.js b/components/lib/toast/Toast.js
index 2b1409fc51..a4b123b4e9 100644
--- a/components/lib/toast/Toast.js
+++ b/components/lib/toast/Toast.js
@@ -98,7 +98,7 @@ export const Toast = React.memo(
return (
-
+
);
})}
@@ -126,5 +126,7 @@ Toast.defaultProps = {
onClick: null,
onRemove: null,
onShow: null,
- onHide: null
+ onHide: null,
+ onMouseEnter: null,
+ onMouseLeave: null
};
diff --git a/components/lib/toast/ToastMessage.js b/components/lib/toast/ToastMessage.js
index 8a5749c866..25dc2212e5 100644
--- a/components/lib/toast/ToastMessage.js
+++ b/components/lib/toast/ToastMessage.js
@@ -1,6 +1,7 @@
import * as React from 'react';
+import { localeOption } from '../api/Locale';
+import { Button } from '../button/Button';
import { useTimeout } from '../hooks/Hooks';
-import { Ripple } from '../ripple/Ripple';
import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
export const ToastMessage = React.memo(
@@ -8,12 +9,13 @@ export const ToastMessage = React.memo(
const messageInfo = props.messageInfo;
const { severity, content, summary, detail, closable, life, sticky, className: _className, style, contentClassName: _contentClassName, contentStyle } = messageInfo.message;
+ const [focused, setFocused] = React.useState(false);
const [clearTimer] = useTimeout(
() => {
onClose();
},
life || 3000,
- !sticky
+ !sticky && !focused
);
const onClose = () => {
@@ -27,14 +29,38 @@ export const ToastMessage = React.memo(
}
};
+ const onMouseEnter = (event) => {
+ props.onMouseEnter && props.onMouseEnter(event);
+
+ // do not continue if the user has canceled the event
+ if (event.defaultPrevented) {
+ return;
+ }
+
+ // stop timer while user has focused message
+ if (!sticky) {
+ clearTimer();
+ setFocused(true);
+ }
+ };
+
+ const onMouseLeave = (event) => {
+ props.onMouseLeave && props.onMouseLeave(event);
+
+ // do not continue if the user has canceled the event
+ if (event.defaultPrevented) {
+ return;
+ }
+
+ // restart timer when user has left message
+ if (!sticky) {
+ setFocused(false);
+ }
+ };
+
const createCloseIcon = () => {
if (closable !== false) {
- return (
-
- );
+ return ;
}
return null;
@@ -78,7 +104,7 @@ export const ToastMessage = React.memo(
const closeIcon = createCloseIcon();
return (
-