index.tsx
2.58 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import React, { useCallback, useEffect, useRef } from "react";
import { CopyrightOutlined } from "@ant-design/icons";
import { Button, Layout, Space, notification } from "antd";
import classNames from "classnames";
import styles from "./index.less";
import { useIntl } from "umi";
export interface IGlobalFooterProps {
links?: Array<{
key?: string;
title: React.ReactNode;
href: string;
blankTarget?: boolean;
}>;
}
const { Footer } = Layout;
const COPYRIGHT = `${new Date().getFullYear()} 重庆霏微科技有限公司 渝ICP备17016156号-3`;
const GlobalFooter = ({ links }: IGlobalFooterProps) => {
const notifiShowRef = useRef<boolean>(false);
const intl = useIntl();
useEffect(() => {
document.getElementById("fw_updater")?.addEventListener("click", showNotification);
return () => {
document.getElementById("fw_updater")?.removeEventListener("click", showNotification);
};
}, []);
const showNotification = useCallback(() => {
if (notifiShowRef?.current) {
return;
}
const key = `open${Date.now()}`;
const btn = (
<Space>
<Button
size="small"
onClick={() => {
notification.close(key);
notifiShowRef.current = false;
}}
>
{intl.formatMessage({ id: "app.update.tip.close" })}
</Button>
<Button type="primary" size="small" onClick={() => window.location.reload()}>
{intl.formatMessage({ id: "app.update.tip.confirm" })}
</Button>
</Space>
);
notification.open({
message: intl.formatMessage({ id: "app.update.tip.title" }),
description: intl.formatMessage({ id: "app.update.tip.message" }),
btn,
placement: "bottomRight",
key,
duration: 0,
onClose: () => {
notifiShowRef.current = false;
},
});
notifiShowRef.current = true;
}, []);
const clsString = classNames(styles.globalFooter);
return (
<Footer style={{ padding: 0 }}>
<div className={clsString}>
{links && (
<div className={styles.links}>
{links.map((link) => (
<a
key={link.key}
title={link.key}
target={link.blankTarget ? "_blank" : "_self"}
href={link.href}
rel="noreferrer"
>
{link.title}
</a>
))}
</div>
)}
<div className={styles.copyright}>
Copyright <CopyrightOutlined /> {COPYRIGHT}
</div>
</div>
</Footer>
);
};
export default GlobalFooter;