Merge pull request #4372 from Budibase/dont-dismiss-error-notifications

Remove automatic dismissal of error notifications
This commit is contained in:
Andrew Kingston 2022-02-07 16:47:15 +00:00 committed by GitHub
commit 6a3333cb19
6 changed files with 76 additions and 20 deletions

View File

@ -1,7 +1,12 @@
<script> <script>
import { createEventDispatcher } from "svelte"
export let type = "info" export let type = "info"
export let icon = "Info" export let icon = "Info"
export let message = "" export let message = ""
export let dismissable = false
const dispatch = createEventDispatcher()
</script> </script>
<div class="spectrum-Toast spectrum-Toast--{type}"> <div class="spectrum-Toast spectrum-Toast--{type}">
@ -17,4 +22,28 @@
<div class="spectrum-Toast-body"> <div class="spectrum-Toast-body">
<div class="spectrum-Toast-content">{message || ""}</div> <div class="spectrum-Toast-content">{message || ""}</div>
</div> </div>
{#if dismissable}
<div class="spectrum-Toast-buttons">
<button
class="spectrum-ClearButton spectrum-ClearButton--overBackground spectrum-ClearButton--sizeM"
on:click={() => dispatch("dismiss")}
>
<div class="spectrum-ClearButton-fill">
<svg
class="spectrum-ClearButton-icon spectrum-Icon spectrum-UIIcon-Cross100"
focusable="false"
aria-hidden="true"
>
<use xlink:href="#spectrum-css-icon-Cross100" />
</svg>
</div>
</button>
</div>
{/if}
</div> </div>
<style>
.spectrum-Toast {
pointer-events: all;
}
</style>

View File

@ -1,7 +1,6 @@
<script> <script>
import "@spectrum-css/toast/dist/index-vars.css" import "@spectrum-css/toast/dist/index-vars.css"
import Portal from "svelte-portal" import Portal from "svelte-portal"
import { flip } from "svelte/animate"
import { notifications } from "../Stores/notifications" import { notifications } from "../Stores/notifications"
import Notification from "./Notification.svelte" import Notification from "./Notification.svelte"
import { fly } from "svelte/transition" import { fly } from "svelte/transition"
@ -9,9 +8,15 @@
<Portal target=".modal-container"> <Portal target=".modal-container">
<div class="notifications"> <div class="notifications">
{#each $notifications as { type, icon, message, id } (id)} {#each $notifications as { type, icon, message, id, dismissable } (id)}
<div animate:flip transition:fly={{ y: -30 }}> <div transition:fly={{ y: -30 }}>
<Notification {type} {icon} {message} /> <Notification
{type}
{icon}
{message}
{dismissable}
on:dismiss={() => notifications.dismiss(id)}
/>
</div> </div>
{/each} {/each}
</div> </div>

View File

@ -20,20 +20,29 @@ export const createNotificationStore = () => {
setTimeout(() => (block = false), timeout) setTimeout(() => (block = false), timeout)
} }
const send = (message, type = "default", icon = "") => { const send = (message, type = "default", icon = "", autoDismiss = true) => {
if (block) { if (block) {
return return
} }
let _id = id() let _id = id()
_notifications.update(state => { _notifications.update(state => {
return [...state, { id: _id, type, message, icon }] return [
...state,
{ id: _id, type, message, icon, dismissable: !autoDismiss },
]
})
if (autoDismiss) {
const timeoutId = setTimeout(() => {
dismissNotification(_id)
}, NOTIFICATION_TIMEOUT)
timeoutIds.add(timeoutId)
}
}
const dismissNotification = id => {
_notifications.update(state => {
return state.filter(n => n.id !== id)
}) })
const timeoutId = setTimeout(() => {
_notifications.update(state => {
return state.filter(({ id }) => id !== _id)
})
}, NOTIFICATION_TIMEOUT)
timeoutIds.add(timeoutId)
} }
const { subscribe } = _notifications const { subscribe } = _notifications
@ -42,10 +51,11 @@ export const createNotificationStore = () => {
subscribe, subscribe,
send, send,
info: msg => send(msg, "info", "Info"), info: msg => send(msg, "info", "Info"),
error: msg => send(msg, "error", "Alert"), error: msg => send(msg, "error", "Alert", false),
warning: msg => send(msg, "warning", "Alert"), warning: msg => send(msg, "warning", "Alert"),
success: msg => send(msg, "success", "CheckmarkCircle"), success: msg => send(msg, "success", "CheckmarkCircle"),
blockNotifications, blockNotifications,
dismiss: dismissNotification,
} }
} }

View File

@ -19,6 +19,8 @@
type={$notificationStore.type} type={$notificationStore.type}
message={$notificationStore.message} message={$notificationStore.message}
icon={$notificationStore.icon} icon={$notificationStore.icon}
dismissable={$notificationStore.dismissable}
on:dismiss={notificationStore.actions.dismiss}
/> />
</div> </div>
{/key} {/key}

View File

@ -25,8 +25,8 @@
} }
const proxyNotification = event => { const proxyNotification = event => {
const { message, type, icon } = event.detail const { message, type, icon, autoDismiss } = event.detail
notificationStore.actions.send(message, type, icon) notificationStore.actions.send(message, type, icon, autoDismiss)
} }
const proxyStateUpdate = event => { const proxyStateUpdate = event => {

View File

@ -19,7 +19,7 @@ const createNotificationStore = () => {
setTimeout(() => (block = false), timeout) setTimeout(() => (block = false), timeout)
} }
const send = (message, type = "info", icon) => { const send = (message, type = "info", icon, autoDismiss = true) => {
if (block) { if (block) {
return return
} }
@ -32,6 +32,7 @@ const createNotificationStore = () => {
message, message,
type, type,
icon, icon,
autoDismiss,
}, },
}) })
return return
@ -42,12 +43,20 @@ const createNotificationStore = () => {
type, type,
message, message,
icon, icon,
dismissable: !autoDismiss,
delay: get(store) != null, delay: get(store) != null,
}) })
clearTimeout(timeout) clearTimeout(timeout)
timeout = setTimeout(() => { if (autoDismiss) {
store.set(null) timeout = setTimeout(() => {
}, NOTIFICATION_TIMEOUT) store.set(null)
}, NOTIFICATION_TIMEOUT)
}
}
const dismiss = () => {
clearTimeout(timeout)
store.set(null)
} }
return { return {
@ -57,8 +66,9 @@ const createNotificationStore = () => {
info: msg => send(msg, "info", "Info"), info: msg => send(msg, "info", "Info"),
success: msg => send(msg, "success", "CheckmarkCircle"), success: msg => send(msg, "success", "CheckmarkCircle"),
warning: msg => send(msg, "warning", "Alert"), warning: msg => send(msg, "warning", "Alert"),
error: msg => send(msg, "error", "Alert"), error: msg => send(msg, "error", "Alert", false),
blockNotifications, blockNotifications,
dismiss,
}, },
} }
} }