-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
index.tsx
108 lines (102 loc) · 3.22 KB
/
index.tsx
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import { ReactComponent as IconLeft } from '@ant-design/icons-svg/inline-svg/outlined/arrow-left.svg';
import { ReactComponent as IconClock } from '@ant-design/icons-svg/inline-svg/outlined/clock-circle.svg';
import { ReactComponent as IconEdit } from '@ant-design/icons-svg/inline-svg/outlined/edit.svg';
import {
FormattedMessage,
Link,
useIntl,
useLocation,
useRouteMeta,
useSidebarData,
useSiteData,
} from 'dumi';
import React, { useLayoutEffect, useState, type FC } from 'react';
import './index.less';
const ContentFooter: FC = () => {
const { pathname } = useLocation();
const sidebar = useSidebarData();
const { themeConfig } = useSiteData();
const { frontmatter } = useRouteMeta();
const intl = useIntl();
const [prev, setPrev] = useState<
typeof sidebar[0]['children'][0] | undefined
>(undefined);
const [next, setNext] = useState<typeof prev>(undefined);
const [isoLastUpdated, setIsoLastUpdated] = useState('');
const [lastUpdated, setLastUpdated] = useState('');
const showEditLink = themeConfig.editLink && frontmatter.filename;
const showLastUpdated = themeConfig.lastUpdated && frontmatter.lastUpdated;
// calculate the previous and next page
useLayoutEffect(() => {
if (sidebar) {
const items = sidebar.reduce<typeof sidebar[0]['children']>(
(ret, group) => ret.concat(group.children),
[],
);
const current = items.findIndex((item) => item.link === pathname);
setPrev(items[current - 1]);
setNext(items[current + 1]);
}
}, [pathname, sidebar]);
// to avoid timestamp mismatched between server and client
useLayoutEffect(() => {
if (showLastUpdated) {
setIsoLastUpdated(new Date(frontmatter.lastUpdated!).toISOString());
setLastUpdated(
new Intl.DateTimeFormat(undefined, {
dateStyle: 'short',
timeStyle: 'short',
}).format(frontmatter.lastUpdated),
);
}
}, [showLastUpdated]);
return (
<footer className="dumi-default-content-footer">
<dl>
{showLastUpdated && (
<dd>
<IconClock />
<FormattedMessage id="content.footer.last.updated" />
<time dateTime={isoLastUpdated}>{lastUpdated}</time>
</dd>
)}
{showEditLink && (
<dd>
<a
target="_blank"
href={`${intl.formatMessage(
{ id: '$internal.edit.link' },
{ filename: frontmatter.filename },
)}`}
rel="noreferrer"
>
<IconEdit />
<FormattedMessage id="content.footer.actions.edit" />
</a>
</dd>
)}
</dl>
<nav>
{prev && (
<Link to={prev.link} data-prev>
<small>
<IconLeft />
<FormattedMessage id="content.footer.actions.previous" />
</small>
{prev.title}
</Link>
)}
{next && (
<Link to={next.link} data-next>
<small>
<FormattedMessage id="content.footer.actions.next" />
<IconLeft />
</small>
{next.title}
</Link>
)}
</nav>
</footer>
);
};
export default ContentFooter;