53 lines
1.5 kB
1
import React from "@moonlight-mod/wp/react";
2
import Dispatcher from "@moonlight-mod/wp/discord/Dispatcher";
3
import * as Components from "@moonlight-mod/wp/discord/components/common/index";
4
import { useStateFromStoresObject } from "@moonlight-mod/wp/discord/packages/flux";
5
import NoticesStore from "@moonlight-mod/wp/notices_notices";
6
import type { Notice } from "@moonlight-mod/types/coreExtensions/notices";
7
8
// FIXME: types
9
const { Notice, NoticeCloseButton, PrimaryCTANoticeButton } = Components;
10
11
function popAndDismiss(notice: Notice) {
12
NoticesStore.popNotice();
13
if (notice?.onDismiss) {
14
notice.onDismiss();
15
}
16
if (!NoticesStore.shouldShowNotice()) {
17
Dispatcher.dispatch({
18
type: "NOTICE_DISMISS"
19
});
20
}
21
}
22
23
export default function UpdateNotice() {
24
const { notice } = useStateFromStoresObject([NoticesStore], () => ({
25
notice: NoticesStore.getCurrentNotice()
26
}));
27
28
if (notice == null) return <></>;
29
30
return (
31
<Notice color={notice.color}>
32
{notice.element}
33
34
{(notice.showClose ?? true) && (
35
<NoticeCloseButton onClick={() => popAndDismiss(notice)} noticeType="__moonlight_notice" />
36
)}
37
38
{(notice.buttons ?? []).map((button) => (
39
<PrimaryCTANoticeButton
40
key={button.name}
41
onClick={() => {
42
if (button.onClick()) {
43
popAndDismiss(notice);
44
}
45
}}
46
noticeType="__moonlight_notice"
47
>
48
{button.name}
49
</PrimaryCTANoticeButton>
50
))}
51
</Notice>
52
);
53
}
54