mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 05:28:20 +08:00
59ad48476b
* chore: add boime lint * fix lint * use files ignore * revert change * ignore clarity.js * fix some errors * fix some errors * fix some errors * fix some errors * add yml file * Update clarity.js Signed-off-by: afc163 <afc163@gmail.com> * add npm run lint:biome * add npm run lint:biome * fix test case * fix ts errors * fix ts errors * fix lint and add .lintstagedrc * shorten prop name * chore: update package.json * update biome.json * chore: remove stylelint * chore: useOptionalChain * fix lint * biome format * prettier all code * prettier all code * fix site test --------- Signed-off-by: afc163 <afc163@gmail.com>
77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import type { BadgeProps, CalendarProps } from 'antd';
|
|
import { Badge, Calendar } from 'antd';
|
|
import type { Dayjs } from 'dayjs';
|
|
|
|
const getListData = (value: Dayjs) => {
|
|
let listData: { type: string; content: string }[] = []; // Specify the type of listData
|
|
switch (value.date()) {
|
|
case 8:
|
|
listData = [
|
|
{ type: 'warning', content: 'This is warning event.' },
|
|
{ type: 'success', content: 'This is usual event.' },
|
|
];
|
|
break;
|
|
case 10:
|
|
listData = [
|
|
{ type: 'warning', content: 'This is warning event.' },
|
|
{ type: 'success', content: 'This is usual event.' },
|
|
{ type: 'error', content: 'This is error event.' },
|
|
];
|
|
break;
|
|
case 15:
|
|
listData = [
|
|
{ type: 'warning', content: 'This is warning event' },
|
|
{ type: 'success', content: 'This is very long usual event......' },
|
|
{ type: 'error', content: 'This is error event 1.' },
|
|
{ type: 'error', content: 'This is error event 2.' },
|
|
{ type: 'error', content: 'This is error event 3.' },
|
|
{ type: 'error', content: 'This is error event 4.' },
|
|
];
|
|
break;
|
|
default:
|
|
}
|
|
return listData || [];
|
|
};
|
|
|
|
const getMonthData = (value: Dayjs) => {
|
|
if (value.month() === 8) {
|
|
return 1394;
|
|
}
|
|
};
|
|
|
|
const App: React.FC = () => {
|
|
const monthCellRender = (value: Dayjs) => {
|
|
const num = getMonthData(value);
|
|
return num ? (
|
|
<div className="notes-month">
|
|
<section>{num}</section>
|
|
<span>Backlog number</span>
|
|
</div>
|
|
) : null;
|
|
};
|
|
|
|
const dateCellRender = (value: Dayjs) => {
|
|
const listData = getListData(value);
|
|
return (
|
|
<ul className="events">
|
|
{listData.map((item) => (
|
|
<li key={item.content}>
|
|
<Badge status={item.type as BadgeProps['status']} text={item.content} />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
};
|
|
|
|
const cellRender: CalendarProps<Dayjs>['cellRender'] = (current, info) => {
|
|
if (info.type === 'date') return dateCellRender(current);
|
|
if (info.type === 'month') return monthCellRender(current);
|
|
return info.originNode;
|
|
};
|
|
|
|
return <Calendar cellRender={cellRender} />;
|
|
};
|
|
|
|
export default App;
|