m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Fix #17385 - Provide autohide callback for ActionMessage (#17392)

Browse Source 
* Fix #17385 - Provide autohide callback for ActionMessage

* Add autohide to the removeal message
This commit is contained in:
David Walsh 2023-01-27 08:31:43 -06:00 committed by GitHub
parent 30520a3352
commit b21e0df4fa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/components/ui/actionable-message/actionable-message.js
View File

@ -31,6 +31,7 @@ export default function ActionableMessage({
roundedButtons,
dataTestId,
autoHideTime = 0,
onAutoHide,
}) {
const [shouldDisplay, setShouldDisplay] = useState(true);
useEffect(
@ -40,6 +41,7 @@ export default function ActionableMessage({
}
const timeout = setTimeout(() => {
onAutoHide?.();
setShouldDisplay(false);
}, autoHideTime);
@ -190,4 +192,8 @@ ActionableMessage.propTypes = {
* Whether the actionable message should auto-hide itself after a given amount of time
*/
autoHideTime: PropTypes.number,
/**
* Callback when autoHide time expires
*/
onAutoHide: PropTypes.func,
};

11
ui/pages/home/home.component.js
View File

@ -274,6 +274,10 @@ export default class Home extends PureComponent {
clearNewCustomNetworkAdded,
setRpcTarget,
} = this.props;
const onAutoHide = () => setNewCollectibleAddedMessage('');
const autoHideDelay = 5 * SECOND;
return (
<MultipleNotifications>
{
@ -317,7 +321,8 @@ export default class Home extends PureComponent {
<ActionableMessage
type="success"
className="home__new-network-notification"
autoHideTime={5 * SECOND}
autoHideTime={autoHideDelay}
onAutoHide={onAutoHide}
message={
<Box display={DISPLAY.INLINE_FLEX}>
<i className="fa fa-check-circle home__new-nft-notification-icon" />
@ -330,7 +335,7 @@ export default class Home extends PureComponent {
<button
className="fas fa-times home__new-nft-notification-close"
title={t('close')}
onClick={() => setNewCollectibleAddedMessage('')}
onClick={onAutoHide}
/>
</Box>
}
@ -341,6 +346,8 @@ export default class Home extends PureComponent {
<ActionableMessage
type="danger"
className="home__new-network-notification"
autoHideTime={autoHideDelay}
onAutoHide={onAutoHide}
message={
<Box display={DISPLAY.INLINE_FLEX}>
<i className="fa fa-check-circle home__new-nft-notification-icon" />