feat(web/notifications): add warning type (#315)

* update(notify): add warning it's own type

* update(notify): inform > info, change warning default icon to circle

* fix typo

* update(notify): case for def notifs, update icons

use circle icons for all notifs so its more unified, also looks a bit better imo

* fix(progressBar): spamming cancel

spamming cancel would sometimes not interrupt current progbar

* Revert "fix(progressBar): spamming cancel"

This reverts commit b030fddd20f9f2b92a07ce4199c73e3b43f435a3.
This commit is contained in:
mikigoalie
2023-05-01 12:08:02 +02:00
committed by GitHub
parent 073a3d0fdd
commit c94d019f67
2 changed files with 18 additions and 6 deletions

View File

@@ -1,5 +1,5 @@
---@alias NotificationPosition 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-right' | 'bottom-left' | 'center-right' | 'center-left' ---@alias NotificationPosition 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-right' | 'bottom-left' | 'center-right' | 'center-left'
---@alias NotificationType 'inform' | 'error' | 'success' ---@alias NotificationType 'info' | 'warning' | 'success' | 'error'
---@class NotifyProps ---@class NotifyProps
---@field id? string ---@field id? string
@@ -32,7 +32,7 @@ end
function lib.defaultNotify(data) function lib.defaultNotify(data)
-- Backwards compat for v3 -- Backwards compat for v3
data.type = data.status data.type = data.status
if data.type == 'info' or data.type == 'warning' then data.type = 'inform' end if data.type == 'inform' then data.type = 'info' end
return lib.notify(data) return lib.notify(data)
end end

View File

@@ -118,9 +118,21 @@ const Notifications: React.FC = () => {
break; break;
} }
if (!data.icon) { if (!data.icon) {
data.icon = data.type === 'error' ? 'xmark' : data.type === 'success' ? 'check' : 'info'; switch (data.type) {
} case 'error':
data.icon = 'circle-xmark';
break;
case 'success':
data.icon = 'circle-check';
break;
case 'warning':
data.icon = 'circle-exclamation';
break;
default:
data.icon = 'circle-info';
break;
}
}
toast.custom( toast.custom(
(t) => ( (t) => (
<Box <Box
@@ -147,7 +159,7 @@ const Notifications: React.FC = () => {
<> <>
{!data.iconColor ? ( {!data.iconColor ? (
<Avatar <Avatar
color={data.type === 'error' ? 'red' : data.type === 'success' ? 'teal' : 'blue'} color={data.type === 'error' ? 'red' : data.type === 'success' ? 'teal' : data.type === 'warning' ? 'yellow' : 'blue'}
radius="xl" radius="xl"
size={32} size={32}
> >