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