mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-22 22:48:29 +08:00
2cdf586291
* chore: fix lint * chore: fix lint * test: fix 16 * fix: lint
153 lines
3.9 KiB
TypeScript
153 lines
3.9 KiB
TypeScript
/* eslint-disable react/no-array-index-key */
|
|
import * as React from 'react';
|
|
import { Suspense } from 'react';
|
|
import dayjs from 'dayjs';
|
|
import { FormattedMessage } from 'dumi';
|
|
import { createStyles } from 'antd-style';
|
|
import { Avatar, Divider, Empty, Skeleton, Tabs } from 'antd';
|
|
import type { Article, Authors } from '../../../pages/index/components/util';
|
|
import { useSiteData } from '../../../pages/index/components/util';
|
|
import useLocale from '../../../hooks/useLocale';
|
|
|
|
const useStyle = createStyles(({ token, css }) => {
|
|
const { antCls } = token;
|
|
|
|
return {
|
|
articles: css`
|
|
h4 {
|
|
margin: 40px 0 24px;
|
|
font-weight: 500;
|
|
font-size: 20px;
|
|
}
|
|
|
|
${antCls}-skeleton {
|
|
h3 {
|
|
margin: 0;
|
|
}
|
|
|
|
ul li {
|
|
display: block;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
${antCls}-tabs-nav::before {
|
|
display: none;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
|
|
td {
|
|
width: 50%;
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
`,
|
|
articleList: css`
|
|
li {
|
|
margin: 1em 0;
|
|
padding: 0;
|
|
font-size: 14px;
|
|
list-style: none;
|
|
}
|
|
|
|
${antCls}-avatar > img {
|
|
max-width: unset;
|
|
}
|
|
`,
|
|
};
|
|
});
|
|
|
|
interface ArticleListProps {
|
|
name: React.ReactNode;
|
|
data: Article[];
|
|
authors: Authors;
|
|
}
|
|
|
|
const ArticleList: React.FC<ArticleListProps> = ({ name, data = [], authors = [] }) => {
|
|
const { styles } = useStyle();
|
|
return (
|
|
<td>
|
|
<h4>{name}</h4>
|
|
<ul className={styles.articleList}>
|
|
{data.length === 0 ? (
|
|
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
|
) : (
|
|
data.map((article, index) => {
|
|
const author = authors.find((auth) => auth.name === article.author);
|
|
return (
|
|
<li key={index}>
|
|
<a href={author?.href} target="_blank" rel="noreferrer">
|
|
<Avatar size="small" src={author?.avatar} />
|
|
</a>
|
|
<Divider type="vertical" />
|
|
<a href={article.href} target="_blank" rel="noreferrer">
|
|
{article?.title}
|
|
</a>
|
|
</li>
|
|
);
|
|
})
|
|
)}
|
|
</ul>
|
|
</td>
|
|
);
|
|
};
|
|
|
|
const Articles = () => {
|
|
const [, lang] = useLocale();
|
|
const isZhCN = lang === 'cn';
|
|
const { articles = { cn: [], en: [] }, authors = [] } = useSiteData();
|
|
|
|
// ========================== Data ==========================
|
|
const mergedData = React.useMemo(() => {
|
|
const yearData: Record<number | string, Record<string, Article[]>> = {};
|
|
articles[lang]?.forEach((article) => {
|
|
const year = dayjs(article.date).year();
|
|
yearData[year] = yearData[year] || {};
|
|
yearData[year][article.type] = [...(yearData[year][article.type] || []), article];
|
|
});
|
|
return yearData;
|
|
}, [articles]);
|
|
|
|
const yearList = Object.keys(mergedData).sort((a, b) => Number(b) - Number(a));
|
|
|
|
return yearList.length ? (
|
|
<Tabs>
|
|
{yearList.map((year) => (
|
|
<Tabs.TabPane tab={`${year}${isZhCN ? ' 年' : ''}`} key={year}>
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<ArticleList
|
|
name={<FormattedMessage id="app.docs.resource.design" />}
|
|
data={mergedData[year].design}
|
|
authors={authors}
|
|
/>
|
|
<ArticleList
|
|
name={<FormattedMessage id="app.docs.resource.develop" />}
|
|
data={mergedData[year].develop}
|
|
authors={authors}
|
|
/>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</Tabs.TabPane>
|
|
))}
|
|
</Tabs>
|
|
) : null;
|
|
};
|
|
|
|
export default () => {
|
|
const { styles } = useStyle();
|
|
|
|
return (
|
|
<div id="articles" className={styles.articles}>
|
|
<Suspense fallback={<Skeleton active />}>
|
|
<Articles />
|
|
</Suspense>
|
|
</div>
|
|
);
|
|
};
|