mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
Fix InlineNotification and ToastNotification timeout
* Dispatch close event when a notification closes due to timeout * Fix documentation text on the timeout prop (its removing the notification after opening it, not after closing it)
This commit is contained in:
parent
a5721a36dd
commit
ce607c6f26
2 changed files with 32 additions and 13 deletions
|
@ -17,6 +17,12 @@
|
|||
*/
|
||||
export let lowContrast = false;
|
||||
|
||||
/**
|
||||
* Set the timeout duration (ms) to hide the notification after opening it
|
||||
* @type {number} [timeout=0]
|
||||
*/
|
||||
export let timeout = 0;
|
||||
|
||||
/**
|
||||
* Set the `role` attribute
|
||||
* @type {string} [role="alert"]
|
||||
|
@ -54,7 +60,23 @@
|
|||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
$: open = true;
|
||||
let open = true;
|
||||
let timeoutId = undefined;
|
||||
|
||||
function close() {
|
||||
open = false;
|
||||
dispatch('close');
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (timeout) {
|
||||
timeoutId = setTimeout(() => close(), timeout);
|
||||
}
|
||||
|
||||
return () => {
|
||||
clearTimeout(timeoutId);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if open}
|
||||
|
@ -81,10 +103,7 @@
|
|||
<NotificationButton
|
||||
{iconDescription}
|
||||
{notificationType}
|
||||
on:click={() => {
|
||||
open = false;
|
||||
dispatch('close');
|
||||
}} />
|
||||
on:click={close()} />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
export let lowContrast = false;
|
||||
|
||||
/**
|
||||
* Set the timeout duration (ms) to hide the notification after closing it
|
||||
* Set the timeout duration (ms) to hide the notification after opening it
|
||||
* @type {number} [timeout=0]
|
||||
*/
|
||||
export let timeout = 0;
|
||||
|
@ -69,11 +69,14 @@
|
|||
let open = true;
|
||||
let timeoutId = undefined;
|
||||
|
||||
function close() {
|
||||
open = false;
|
||||
dispatch('close');
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (timeout) {
|
||||
timeoutId = setTimeout(() => {
|
||||
open = false;
|
||||
}, timeout);
|
||||
timeoutId = setTimeout(() => close(), timeout);
|
||||
}
|
||||
|
||||
return () => {
|
||||
|
@ -102,10 +105,7 @@
|
|||
<NotificationButton
|
||||
{iconDescription}
|
||||
{notificationType}
|
||||
on:click={() => {
|
||||
open = false;
|
||||
dispatch('close');
|
||||
}} />
|
||||
on:click={close()} />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue