mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-04 00:49:39 +08:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

chore: merge master into feature

Browse Source
This commit is contained in:
栗嘉男 2024-09-16 17:23:52 +08:00
commit 5db0ecc0b0
66 changed files with 3138 additions and 1590 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.dumi/theme/builtins/ComponentTokenTable/index.tsx
View File

@ -8,6 +8,7 @@ import tokenData from 'antd/es/version/token.json';
import useLocale from '../../../hooks/useLocale';
import { useColumns } from '../TokenTable';
import type { TokenData } from '../TokenTable';
const compare = (token1: string, token2: string) => {
const hasColor1 = token1.toLowerCase().includes('color');
@ -108,13 +109,13 @@ const SubTokenTable: React.FC<SubTokenTableProps> = (props) => {
const data = tokens
.sort(component ? undefined : compare)
.map((name) => {
.map<TokenData>((name) => {
const meta = component
? tokenMeta.components[component].find((item) => item.token === name)
: tokenMeta.global[name];
if (!meta) {
return null;
return null as unknown as TokenData;
}
return {
@ -177,7 +178,7 @@ const SubTokenTable: React.FC<SubTokenTableProps> = (props) => {
</div>
{open && (
<ConfigProvider theme={{ token: { borderRadius: 0 } }}>
<Table
<Table<TokenData>
size="middle"
columns={columns}
bordered

2
.dumi/theme/builtins/ResourceCards/index.tsx
View File

@ -11,7 +11,7 @@ const useStyle = createStyles(({ token, css }) => ({
card: css`
position: relative;
overflow: hidden;
.${token.antCls}-card-cover {
${token.antCls}-card-cover {
overflow: hidden;
}
img {

2
.dumi/theme/builtins/TokenTable/index.tsx
View File

@ -14,7 +14,7 @@ type TokenTableProps = {
lang: 'zh' | 'en';
};
type TokenData = {
export type TokenData = {
name: string;
desc: string;
type: string;

3
.dumirc.ts
View File

@ -1,6 +1,7 @@
import path from 'path';
import { defineConfig } from 'dumi';
import * as fs from 'fs-extra';
import os from 'node:os';
import rehypeAntd from './.dumi/rehypeAntd';
import remarkAntd from './.dumi/remarkAntd';
@ -21,7 +22,7 @@ export default defineConfig({
: false,
hash: true,
mfsu: false,
mako: {},
mako: ['Darwin', 'Linux'].includes(os.type()) ? {} : false,
crossorigin: {},
runtimePublicPath: {},
outputPath: '_site',

97
.github/workflows/issue-schedule.yml vendored Normal file
View File

@ -0,0 +1,97 @@
name: Issue Schedule
on:
workflow_dispatch:
schedule:
- cron: '30 1 * * *'
jobs:
send-message:
runs-on: ubuntu-latest
steps:
- name: Send Unconfirmed Issues to DingTalk
uses: actions/github-script@v7
env:
DINGDING_BOT_TOKEN: ${{ secrets.DINGDING_BOT_TOKEN }}
actionTitle: '近 7 天未确认的 issue'
with:
script: |
const dingdingTokenKey = process.env.DINGDING_BOT_TOKEN;
const fromNow = (data) => {
const relativeTimeFormat = new Intl.RelativeTimeFormat('zh-CN');
const date = new Date(data);
const now = new Date();
const diffInSeconds = Math.floor((now - date) / 1000);
const diffInMinutes = Math.floor(diffInSeconds / 60);
const diffInHours = Math.floor(diffInMinutes / 60);
const diffInDays = Math.floor(diffInHours / 24);
if (diffInDays > 0) {
return relativeTimeFormat.format(-diffInDays, 'day');
} else if (diffInHours > 0) {
return relativeTimeFormat.format(-diffInHours, 'hour');
} else if (diffInMinutes > 0) {
return relativeTimeFormat.format(-diffInMinutes, 'minute');
} else {
return relativeTimeFormat.format(-diffInSeconds, 'second');
}
};
const response = await fetch('https://api.github.com/search/issues?q=repo:ant-design/ant-design&is:open+is:issue+label:unconfirmed&per_page=100');
const data = await response.json();
const issueList = [];
for (const item of data.items) {
const { created_at, html_url, pull_request, state, title, labels } = item;
const createdAt = new Date(created_at);
const now = new Date();
const diffTime = Math.abs(now - createdAt);
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
const isUnconfirmed = labels.some(label => label.name === 'unconfirmed');
if (!isUnconfirmed) {
continue;
}
if (diffDays > 7) {
break;
}
if (!pull_request && !html_url.includes('pull') && state === 'open') {
issueList.push({
html_url,
created_at,
title
})
}
}
const actionTitle = process.env.actionTitle + `(${issueList.length})`;
const markdownList = `<h2>${actionTitle}</h2>\n\n`
+ issueList.map(issue => `- [${issue.title}](${issue.html_url}) ${fromNow(issue.created_at)}`).join('\n')
+ `\n\n > 🫵🏻 快去帮忙处理吧，社区需要你的帮助！`;
console.log(markdownList);
try {
await fetch(
`https://oapi.dingtalk.com/robot/send?access_token=${dingdingTokenKey}`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
msgtype: 'markdown',
markdown: {
title: actionTitle,
text: markdownList,
},
}),
}
);
} catch (error) {
console.log('发送失败, error:', error);
}

15
components/descriptions/demo/text.tsx
View File

@ -2,7 +2,14 @@ import React from 'react';
import { Badge, Descriptions, Table } from 'antd';
import type { DescriptionsProps, TableProps } from 'antd';
const dataSource = [
interface DataType {
key: React.Key;
name: string;
age: number;
address: string;
}
const dataSource: DataType[] = [
{
key: '1',
name: '胡彦斌',
@ -17,7 +24,7 @@ const dataSource = [
},
];
const columns: TableProps['columns'] = [
const columns: TableProps<DataType>['columns'] = [
{
title: '姓名',
dataIndex: 'name',
@ -111,7 +118,9 @@ const items: DescriptionsProps['items'] = [
{
key: '12',
label: 'Config Info',
children: <Table size="small" pagination={false} dataSource={dataSource} columns={columns} />,
children: (
<Table<DataType> size="small" pagination={false} dataSource={dataSource} columns={columns} />
),
},
];

1
components/divider/index.tsx
View File

@ -98,7 +98,6 @@ const Divider: React.FC<DividerProps> = (props) => {
className={classString}
style={{ ...divider?.style, ...style }}
{...restProps}
// biome-ignore lint/a11y/useAriaPropsForRole: divider do not need aria-value
role="separator"
>
{children && type !== 'vertical' && (

6
components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -5182,8 +5182,4 @@ exports[`renders components/layout/demo/top-side-2.tsx extend context correctly
</div>
`;
exports[`renders components/layout/demo/top-side-2.tsx extend context correctly 2`] = `
[
"Warning: [antd: Breadcrumb] \`Breadcrumb.Item and Breadcrumb.Separator\` is deprecated. Please use \`items\` instead.",
]
`;
exports[`renders components/layout/demo/top-side-2.tsx extend context correctly 2`] = `[]`;

9
components/layout/demo/top-side-2.tsx
View File

@ -58,11 +58,10 @@ const App: React.FC = () => {
/>
</Sider>
<Layout style={{ padding: '0 24px 24px' }}>
<Breadcrumb style={{ margin: '16px 0' }}>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>List</Breadcrumb.Item>
<Breadcrumb.Item>App</Breadcrumb.Item>
</Breadcrumb>
<Breadcrumb
items={[{ title: 'Home' }, { title: 'List' }, { title: 'App' }]}
style={{ margin: '16px 0' }}
/>
<Content
style={{
padding: 24,

2
components/layout/style/sider.ts
View File

@ -27,7 +27,7 @@ const genSiderStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
} = token;
return {
[`${componentCls}`]: {
[componentCls]: {
position: 'relative',
// fix firefox can't set width smaller than content on flex item

558
components/modal/demo/dark.tsx
View File

@ -1,4 +1,3 @@
// @ts-nocheck
import React, { useState } from 'react';
import { ClockCircleOutlined, DownOutlined } from '@ant-design/icons';
import {
@ -20,6 +19,8 @@ import {
Tree,
Typography,
} from 'antd';
import type { TableProps, TransferProps } from 'antd';
import type { TransferKey } from 'antd/es/transfer/interface';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import difference from 'lodash/difference';
@ -39,133 +40,126 @@ const text = `
it can be found as a welcome guest in many households across the world.
`;
const mockData = [];
for (let i = 0; i < 20; i++) {
mockData.push({
key: i.toString(),
title: `content${i + 1}`,
description: `description of content${i + 1}`,
disabled: i % 3 < 1,
});
interface DataType {
key: string;
title: string;
description: string;
disabled: boolean;
}
const oriTargetKeys = mockData.filter((item) => +item.key % 3 > 1).map((item) => item.key);
interface RecordType {
key: string;
name: string;
age: number;
address: string;
}
const data = [
interface DataTableType {
key: string;
name: string;
borrow: number;
repayment: number;
}
interface ExpandDataType {
key: React.Key;
date: string;
name: string;
upgradeNum: string;
}
interface NestDataType {
key: React.Key;
name: string;
platform: string;
version: string;
upgradeNum: number;
creator: string;
createdAt: string;
}
interface FixedDataType {
key: string;
name: string;
age: number;
address: string;
}
const mockData = Array.from({ length: 20 }).map<DataType>((_, i) => ({
key: i.toString(),
title: `content${i + 1}`,
description: `description of content${i + 1}`,
disabled: i % 3 < 1,
}));
const oriTargetKeys = mockData
.filter((item) => Number(item.key) % 3 > 1)
.map<TransferKey>((item) => item.key);
const dataSource: RecordType[] = [
{ key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
{ key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
{ key: '3', name: 'Joe Black', age: 32, address: 'Sydney No. 1 Lake Park' },
{ key: '4', name: 'Jim Red', age: 32, address: 'London No. 2 Lake Park' },
];
const columnsTable: TableProps<DataTableType>['columns'] = [
{ title: 'Name', dataIndex: 'name' },
{ title: 'Borrow', dataIndex: 'borrow' },
{ title: 'Repayment', dataIndex: 'repayment' },
];
const summaryDataSource: DataTableType[] = [
{ key: '1', name: 'John Brown', borrow: 10, repayment: 33 },
{ key: '2', name: 'Jim Green', borrow: 100, repayment: 0 },
{ key: '3', name: 'Joe Black', borrow: 10, repayment: 10 },
{ key: '4', name: 'Jim Red', borrow: 75, repayment: 45 },
];
const expandDataSource = Array.from({ length: 3 }).map<ExpandDataType>((_, i) => ({
key: i,
date: '2014-12-24 23:12:00',
name: 'This is production name',
upgradeNum: 'Upgraded: 56',
}));
const expandColumns: TableProps<ExpandDataType>['columns'] = [
{ title: 'Date', dataIndex: 'date', key: 'date' },
{ title: 'Name', dataIndex: 'name', key: 'name' },
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
title: 'Status',
key: 'state',
render: () => (
<span>
<Badge status="success" />
Finished
</span>
),
},
{ title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sydney No. 1 Lake Park',
},
{
key: '4',
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park',
title: 'Action',
dataIndex: 'operation',
key: 'operation',
render: () => (
<span className="table-operation">
<a>Pause</a>
<a>Stop</a>
<Dropdown>
<a>
More <DownOutlined />
</a>
</Dropdown>
</span>
),
},
];
const columnsTable = [
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Borrow',
dataIndex: 'borrow',
},
{
title: 'Repayment',
dataIndex: 'repayment',
},
];
const expandedRowRender = () => (
<Table<ExpandDataType> columns={expandColumns} dataSource={expandDataSource} pagination={false} />
);
const dataTable = [
{
key: '1',
name: 'John Brown',
borrow: 10,
repayment: 33,
},
{
key: '2',
name: 'Jim Green',
borrow: 100,
repayment: 0,
},
{
key: '3',
name: 'Joe Black',
borrow: 10,
repayment: 10,
},
{
key: '4',
name: 'Jim Red',
borrow: 75,
repayment: 45,
},
];
const expandedRowRender = () => {
const columnsExpand = [
{ title: 'Date', dataIndex: 'date', key: 'date' },
{ title: 'Name', dataIndex: 'name', key: 'name' },
{
title: 'Status',
key: 'state',
render: () => (
<span>
<Badge status="success" />
Finished
</span>
),
},
{ title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{
title: 'Action',
dataIndex: 'operation',
key: 'operation',
render: () => (
<span className="table-operation">
<a>Pause</a>
<a>Stop</a>
<Dropdown>
<a>
More <DownOutlined />
</a>
</Dropdown>
</span>
),
},
];
const dataExpand = [];
for (let i = 0; i < 3; ++i) {
data.push({
key: i,
date: '2014-12-24 23:12:00',
name: 'This is production name',
upgradeNum: 'Upgraded: 56',
});
}
return <Table columns={columnsExpand} dataSource={dataExpand} pagination={false} />;
};
const columnsNest = [
const columnsNest: TableProps<NestDataType>['columns'] = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Platform', dataIndex: 'platform', key: 'platform' },
{ title: 'Version', dataIndex: 'version', key: 'version' },
@ -175,34 +169,19 @@ const columnsNest = [
{ title: 'Action', key: 'operation', render: () => <a>Publish</a> },
];
const dataNest = [];
for (let i = 0; i < 3; ++i) {
dataNest.push({
key: i,
name: 'Screem',
platform: 'iOS',
version: '10.3.4.5654',
upgradeNum: 500,
creator: 'Jack',
createdAt: '2014-12-24 23:12:00',
});
}
const nestDataSource = Array.from({ length: 3 }).map<NestDataType>((_, i) => ({
key: i,
name: 'Screem',
platform: 'iOS',
version: '10.3.4.5654',
upgradeNum: 500,
creator: 'Jack',
createdAt: '2014-12-24 23:12:00',
}));
const columnsFixed = [
{
title: 'Full Name',
width: 100,
dataIndex: 'name',
key: 'name',
fixed: 'left',
},
{
title: 'Age',
width: 100,
dataIndex: 'age',
key: 'age',
fixed: 'left',
},
const columnsFixed: TableProps<FixedDataType>['columns'] = [
{ title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
{ title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
{ title: 'Column 1', dataIndex: 'address', key: '1' },
{ title: 'Column 2', dataIndex: 'address', key: '2' },
{ title: 'Column 3', dataIndex: 'address', key: '3' },
@ -211,107 +190,148 @@ const columnsFixed = [
{ title: 'Column 6', dataIndex: 'address', key: '6' },
{ title: 'Column 7', dataIndex: 'address', key: '7' },
{ title: 'Column 8', dataIndex: 'address', key: '8' },
{ title: 'Action', key: 'operation', fixed: 'right', width: 100, render: () => <a>action</a> },
];
const fixedDataSource: FixedDataType[] = [
{ key: '1', name: 'John Brown', age: 32, address: 'New York Park' },
{ key: '2', name: 'Jim Green', age: 40, address: 'London Park' },
];
const TableTransfer: React.FC<
Readonly<Partial<Record<'leftColumns' | 'rightColumns', TableProps<DataType>['columns']>>> &
TransferProps<DataType>
> = (props) => {
const { leftColumns, rightColumns, ...restProps } = props;
return (
<Transfer<DataType> {...restProps} showSelectAll={false}>
{(transferProps) => {
const {
direction,
filteredItems,
onItemSelectAll,
onItemSelect,
selectedKeys: listSelectedKeys,
disabled: listDisabled,
} = transferProps;
const columns = (direction === 'left' ? leftColumns : rightColumns) ?? [];
const rowSelection: TableProps<DataType>['rowSelection'] = {
getCheckboxProps: (item) => ({ disabled: listDisabled || item.disabled }),
onSelectAll(selected, selectedRows) {
const treeSelectedKeys = selectedRows
.filter((item) => !item.disabled)
.map(({ key }) => key);
const diffKeys = selected
? difference(treeSelectedKeys, listSelectedKeys)
: difference(listSelectedKeys, treeSelectedKeys);
onItemSelectAll(diffKeys, selected);
},
onSelect({ key }, selected) {
onItemSelect(key, selected);
},
selectedRowKeys: listSelectedKeys,
};
return (
<Table<DataType>
id="components-transfer-table"
rowSelection={rowSelection}
columns={columns}
dataSource={filteredItems}
size="small"
style={{ pointerEvents: listDisabled ? 'none' : 'auto' }}
onRow={({ key, disabled: itemDisabled }) => ({
onClick: () => {
if (itemDisabled || listDisabled) {
return;
}
onItemSelect(key, !listSelectedKeys.includes(key));
},
})}
/>
);
}}
</Transfer>
);
};
const columns: TableProps<RecordType>['columns'] = [
{
title: 'Action',
key: 'operation',
fixed: 'right',
width: 100,
render: () => <a>action</a>,
title: 'Name',
dataIndex: 'name',
key: 'name',
filters: [
{ text: 'Joe', value: 'Joe' },
{ text: 'Jim', value: 'Jim' },
],
filteredValue: null,
onFilter: (value, record) => record.name.includes(value as string),
sorter: (a, b) => a.name.length - b.name.length,
sortOrder: 'ascend',
ellipsis: true,
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
sorter: false,
sortOrder: 'ascend',
ellipsis: true,
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
filters: [
{ text: 'London', value: 'London' },
{ text: 'New York', value: 'New York' },
],
filteredValue: null,
onFilter: (value, record) => record.address.includes(value as string),
sorter: false,
sortOrder: 'ascend',
ellipsis: true,
},
];
const dataFixed = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York Park',
},
{
key: '2',
name: 'Jim Green',
age: 40,
address: 'London Park',
},
const tableTransferColumns: TableProps<DataType>['columns'] = [
{ dataIndex: 'title', title: 'Name' },
{ dataIndex: 'description', title: 'Description' },
];
const TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => (
<Transfer {...restProps} showSelectAll={false}>
{({
direction,
filteredItems,
onItemSelectAll,
onItemSelect,
selectedKeys: listSelectedKeys,
disabled: listDisabled,
}) => {
const columns = direction === 'left' ? leftColumns : rightColumns;
const rowSelection = {
getCheckboxProps: (item) => ({ disabled: listDisabled || item.disabled }),
onSelectAll(selected, selectedRows) {
const treeSelectedKeys = selectedRows
.filter((item) => !item.disabled)
.map(({ key }) => key);
const diffKeys = selected
? difference(treeSelectedKeys, listSelectedKeys)
: difference(listSelectedKeys, treeSelectedKeys);
onItemSelectAll(diffKeys, selected);
},
onSelect({ key }, selected) {
onItemSelect(key, selected);
},
selectedRowKeys: listSelectedKeys,
};
return (
<Table
id="components-transfer-table"
rowSelection={rowSelection}
columns={columns}
dataSource={filteredItems}
size="small"
style={{ pointerEvents: listDisabled ? 'none' : null }}
onRow={({ key, disabled: itemDisabled }) => ({
onClick: () => {
if (itemDisabled || listDisabled) return;
onItemSelect(key, !listSelectedKeys.includes(key));
},
})}
/>
);
}}
</Transfer>
);
export default () => {
const Demo: React.FC = () => {
const [open, setOpen] = useState(false);
const [targetKeys, setTargetKeys] = useState(oriTargetKeys);
const [selectedKeys, setSelectedKeys] = useState([]);
const [targetKeys, setTargetKeys] = useState<TransferKey[]>(oriTargetKeys);
const [selectedKeys, setSelectedKeys] = useState<TransferKey[]>([]);
const [disabled, setDisabled] = useState(false);
const [showSearch, setShowSearch] = useState(false);
const handleDisable = (isDisabled) => {
const handleDisable = (isDisabled: boolean) => {
setDisabled(isDisabled);
};
const handleTableTransferChange = (nextTargetKeys) => {
const handleTableTransferChange = (nextTargetKeys: TransferKey[]) => {
setTargetKeys(nextTargetKeys);
};
const triggerDisable = (isDisabled) => {
const triggerDisable = (isDisabled: boolean) => {
setDisabled(isDisabled);
};
const triggerShowSearch = (isShowSearch) => {
const triggerShowSearch = (isShowSearch: boolean) => {
setShowSearch(isShowSearch);
};
const handleTransferChange = (nextTargetKeys) => {
setTargetKeys(nextTargetKeys);
const handleTransferChange = (keys: TransferKey[]) => {
setTargetKeys(keys);
};
const handleTransferSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
const handleTransferSelectChange = (
sourceSelectedKeys: TransferKey[],
targetSelectedKeys: TransferKey[],
) => {
setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
};
@ -319,54 +339,16 @@ export default () => {
setOpen(true);
};
const handleOk = (e) => {
const handleOk = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
console.log(e);
setOpen(false);
};
const handleCancel = (e) => {
const handleCancel = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
console.log(e);
setOpen(false);
};
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
filters: [
{ text: 'Joe', value: 'Joe' },
{ text: 'Jim', value: 'Jim' },
],
filteredValue: null,
onFilter: (value, record) => record.name.includes(value),
sorter: (a, b) => a.name.length - b.name.length,
sortOrder: true,
ellipsis: true,
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
sorter: false,
sortOrder: true,
ellipsis: true,
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
filters: [
{ text: 'London', value: 'London' },
{ text: 'New York', value: 'New York' },
],
filteredValue: null,
onFilter: (value, record) => record.address.includes(value),
sorter: false,
sortOrder: true,
ellipsis: true,
},
];
return (
<>
<Button type="primary" onClick={showModal}>
@ -404,7 +386,7 @@ export default () => {
<p>{text}</p>
</Panel>
</Collapse>
<Transfer
<Transfer<DataType>
dataSource={mockData}
titles={['Source', 'Target']}
targetKeys={targetKeys}
@ -419,26 +401,12 @@ export default () => {
targetKeys={targetKeys}
disabled={disabled}
showSearch={showSearch}
leftColumns={tableTransferColumns}
rightColumns={tableTransferColumns}
onChange={handleTableTransferChange}
filterOption={(inputValue, item) =>
item.title.indexOf(inputValue) !== -1 || item.tag?.indexOf(inputValue) !== -1
filterOption={(inputValue: string, item: any) =>
item.title?.includes(inputValue) || item.tag?.includes(inputValue)
}
leftColumns={[
{
dataIndex: 'title',
title: 'Name',
},
{
dataIndex: 'description',
title: 'Description',
},
]}
rightColumns={[
{
dataIndex: 'title',
title: 'Name',
},
]}
/>
<Switch
unCheckedChildren="disabled"
@ -499,22 +467,20 @@ export default () => {
</TreeNode>
</TreeNode>
</Tree>
<Table columns={columns} dataSource={data} footer={() => 'Footer'} />
<Table
<Table<RecordType> columns={columns} dataSource={dataSource} footer={() => 'Footer'} />
<Table<DataTableType>
columns={columnsTable}
dataSource={dataTable}
dataSource={summaryDataSource}
pagination={false}
id="table-demo-summary"
bordered
summary={(pageData) => {
let totalBorrow = 0;
let totalRepayment = 0;
pageData.forEach(({ borrow, repayment }) => {
totalBorrow += borrow;
totalRepayment += repayment;
});
return (
<>
<tr>
@ -537,13 +503,25 @@ export default () => {
}}
/>
<br />
<Table columns={columnsNest} expandable={{ expandedRowRender }} dataSource={dataNest} />
<Table columns={columnsFixed} dataSource={dataFixed} scroll={{ x: 1300, y: 100 }} />
<Table<NestDataType>
columns={columnsNest}
expandable={{ expandedRowRender }}
dataSource={nestDataSource}
/>
<Table<FixedDataType>
columns={columnsFixed}
dataSource={fixedDataSource}
scroll={{ x: 1300, y: 100 }}
/>
<Card
hoverable
style={{ width: 240 }}
cover={
<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
<img
draggable={false}
alt="example"
src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
/>
}
>
<Meta title="Europe Street beat" description="www.instagram.com" />
@ -557,3 +535,5 @@ export default () => {
</>
);
};
export default Demo;

2
components/slider/demo/input-number.tsx
View File

@ -36,7 +36,7 @@ const DecimalStep: React.FC = () => {
const [inputValue, setInputValue] = useState(0);
const onChange: InputNumberProps['onChange'] = (value) => {
if (isNaN(value as number)) {
if (Number.isNaN(value)) {
return;
}
setInputValue(value as number);

416
components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -2258,6 +2258,108 @@ Array [
<tbody
class="ant-table-tbody"
>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="0"
>
<td
class="ant-table-cell ant-table-row-expand-icon-cell"
>
<button
aria-expanded="false"
aria-label="Expand row"
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
type="button"
/>
</td>
<td
class="ant-table-cell ant-table-selection-column"
>
<label
class="ant-checkbox-wrapper"
>
<span
class="ant-checkbox ant-wave-target"
>
<input
class="ant-checkbox-input"
type="checkbox"
/>
<span
class="ant-checkbox-inner"
/>
</span>
</label>
</td>
<td
class="ant-table-cell"
>
John Brown
</td>
<td
class="ant-table-cell"
>
2
</td>
<td
class="ant-table-cell"
>
New York No. 0 Lake Park
</td>
<td
class="ant-table-cell"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-middle ant-space-gap-col-middle"
>
<div
class="ant-space-item"
>
<a>
Delete
</a>
</div>
<div
class="ant-space-item"
>
<a>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space-item"
>
More actions
</div>
<div
class="ant-space-item"
>
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</div>
</div>
</a>
</div>
</div>
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="1"
@ -3176,108 +3278,6 @@ Array [
</div>
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="10"
>
<td
class="ant-table-cell ant-table-row-expand-icon-cell"
>
<button
aria-expanded="false"
aria-label="Expand row"
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
type="button"
/>
</td>
<td
class="ant-table-cell ant-table-selection-column"
>
<label
class="ant-checkbox-wrapper"
>
<span
class="ant-checkbox ant-wave-target"
>
<input
class="ant-checkbox-input"
type="checkbox"
/>
<span
class="ant-checkbox-inner"
/>
</span>
</label>
</td>
<td
class="ant-table-cell"
>
John Brown
</td>
<td
class="ant-table-cell"
>
102
</td>
<td
class="ant-table-cell"
>
New York No. 10 Lake Park
</td>
<td
class="ant-table-cell"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-middle ant-space-gap-col-middle"
>
<div
class="ant-space-item"
>
<a>
Delete
</a>
</div>
<div
class="ant-space-item"
>
<a>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space-item"
>
More actions
</div>
<div
class="ant-space-item"
>
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</div>
</div>
</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
@ -6807,6 +6807,108 @@ Array [
<tbody
class="ant-table-tbody"
>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="0"
>
<td
class="ant-table-cell ant-table-row-expand-icon-cell"
>
<button
aria-expanded="false"
aria-label="Expand row"
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
type="button"
/>
</td>
<td
class="ant-table-cell ant-table-selection-column"
>
<label
class="ant-checkbox-wrapper"
>
<span
class="ant-checkbox ant-wave-target"
>
<input
class="ant-checkbox-input"
type="checkbox"
/>
<span
class="ant-checkbox-inner"
/>
</span>
</label>
</td>
<td
class="ant-table-cell"
>
John Brown
</td>
<td
class="ant-table-cell"
>
2
</td>
<td
class="ant-table-cell"
>
New York No. 0 Lake Park
</td>
<td
class="ant-table-cell"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-middle ant-space-gap-col-middle"
>
<div
class="ant-space-item"
>
<a>
Delete
</a>
</div>
<div
class="ant-space-item"
>
<a>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space-item"
>
More actions
</div>
<div
class="ant-space-item"
>
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</div>
</div>
</a>
</div>
</div>
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="1"
@ -7725,108 +7827,6 @@ Array [
</div>
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="10"
>
<td
class="ant-table-cell ant-table-row-expand-icon-cell"
>
<button
aria-expanded="false"
aria-label="Expand row"
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
type="button"
/>
</td>
<td
class="ant-table-cell ant-table-selection-column"
>
<label
class="ant-checkbox-wrapper"
>
<span
class="ant-checkbox ant-wave-target"
>
<input
class="ant-checkbox-input"
type="checkbox"
/>
<span
class="ant-checkbox-inner"
/>
</span>
</label>
</td>
<td
class="ant-table-cell"
>
John Brown
</td>
<td
class="ant-table-cell"
>
102
</td>
<td
class="ant-table-cell"
>
New York No. 10 Lake Park
</td>
<td
class="ant-table-cell"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-middle ant-space-gap-col-middle"
>
<div
class="ant-space-item"
>
<a>
Delete
</a>
</div>
<div
class="ant-space-item"
>
<a>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space-item"
>
More actions
</div>
<div
class="ant-space-item"
>
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</div>
</div>
</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
@ -11853,7 +11853,7 @@ exports[`renders components/table/demo/filter-search.tsx extend context correctl
exports[`renders components/table/demo/fixed-header.tsx extend context correctly 1`] = `
<div
class="ant-table-wrapper"
class="ant-table-wrapper acss-6kbv1r"
>
<div
class="ant-spin-nested-loading"
@ -11903,7 +11903,7 @@ exports[`renders components/table/demo/fixed-header.tsx extend context correctly
</div>
<div
class="ant-table-body"
style="overflow-y: scroll; max-height: 240px;"
style="overflow-y: scroll; max-height: 275px;"
>
<table
style="table-layout: fixed;"
@ -13218,7 +13218,7 @@ exports[`renders components/table/demo/fixed-header.tsx extend context correctly
exports[`renders components/table/demo/grouping-columns.tsx extend context correctly 1`] = `
<div
class="ant-table-wrapper"
class="ant-table-wrapper acss-6kbv1r"
>
<div
class="ant-spin-nested-loading"
@ -13582,7 +13582,7 @@ exports[`renders components/table/demo/grouping-columns.tsx extend context corre
</div>
<div
class="ant-table-body"
style="overflow-x: auto; overflow-y: scroll; max-height: 240px;"
style="overflow-x: auto; overflow-y: scroll; max-height: 235px;"
>
<table
style="width: calc(700px + 50%); min-width: 100%; table-layout: fixed;"

2170
components/table/__tests__/__snapshots__/demo.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

6
components/table/demo/ajax.tsx
View File

@ -84,9 +84,7 @@ const App: React.FC = () => {
});
};
useEffect(() => {
fetchData();
}, [
useEffect(fetchData, [
tableParams.pagination?.current,
tableParams.pagination?.pageSize,
tableParams?.sortOrder,
@ -109,7 +107,7 @@ const App: React.FC = () => {
};
return (
<Table
<Table<DataType>
columns={columns}
rowKey={(record) => record.login.uuid}
dataSource={data}

2
components/table/demo/basic.tsx
View File

@ -83,6 +83,6 @@ const data: DataType[] = [
},
];
const App: React.FC = () => <Table columns={columns} dataSource={data} />;
const App: React.FC = () => <Table<DataType> columns={columns} dataSource={data} />;
export default App;

2
components/table/demo/bordered.tsx
View File

@ -49,7 +49,7 @@ const data: DataType[] = [
];
const App: React.FC = () => (
<Table
<Table<DataType>
columns={columns}
dataSource={data}
bordered

2
components/table/demo/colspan-rowspan.tsx
View File

@ -115,6 +115,6 @@ const data: DataType[] = [
},
];
const App: React.FC = () => <Table columns={columns} dataSource={data} bordered />;
const App: React.FC = () => <Table<DataType> columns={columns} dataSource={data} bordered />;
export default App;

40
components/table/demo/component-token.tsx
View File

@ -61,18 +61,18 @@ const columns: ColumnsType<DataType> = [
},
];
const data: DataType[] = [];
for (let i = 1; i <= 10; i++) {
data.push({
key: i,
name: 'John Brown',
age: Number(`${i}2`),
address: `New York No. ${i} Lake Park`,
description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
});
}
const dataSource = Array.from({ length: 10 }).map<DataType>((_, i) => ({
key: i,
name: 'John Brown',
age: Number(`${i}2`),
address: `New York No. ${i} Lake Park`,
description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
}));
const defaultExpandable: ExpandableConfig<DataType> = {
expandedRowRender: (record: DataType) => <p>{record.description}</p>,
};
const defaultExpandable = { expandedRowRender: (record: DataType) => <p>{record.description}</p> };
const defaultTitle = () => 'Here is title';
const defaultFooter = () => 'Here is footer';
@ -228,12 +228,7 @@ const App: React.FC = () => {
</Radio.Group>
</Form.Item>
<Form.Item label="Pagination Top">
<Radio.Group
value={top}
onChange={(e) => {
setTop(e.target.value);
}}
>
<Radio.Group value={top} onChange={(e) => setTop(e.target.value)}>
<Radio.Button value="topLeft">TopLeft</Radio.Button>
<Radio.Button value="topCenter">TopCenter</Radio.Button>
<Radio.Button value="topRight">TopRight</Radio.Button>
@ -241,12 +236,7 @@ const App: React.FC = () => {
</Radio.Group>
</Form.Item>
<Form.Item label="Pagination Bottom">
<Radio.Group
value={bottom}
onChange={(e) => {
setBottom(e.target.value);
}}
>
<Radio.Group value={bottom} onChange={(e) => setBottom(e.target.value)}>
<Radio.Button value="bottomLeft">BottomLeft</Radio.Button>
<Radio.Button value="bottomCenter">BottomCenter</Radio.Button>
<Radio.Button value="bottomRight">BottomRight</Radio.Button>
@ -290,11 +280,11 @@ const App: React.FC = () => {
},
}}
>
<Table
<Table<DataType>
{...tableProps}
pagination={{ position: [top, bottom] }}
columns={tableColumns}
dataSource={hasData ? data : []}
dataSource={hasData ? dataSource : []}
scroll={scroll}
/>
</ConfigProvider>

23
components/table/demo/custom-empty.tsx
View File

@ -1,9 +1,16 @@
import type { GetProp } from 'antd';
import { Button, Empty, ConfigProvider, Table } from 'antd';
import React, { useState } from 'react';
import type { GetProp } from 'antd';
import { Button, ConfigProvider, Empty, Table } from 'antd';
interface DataType {
key: number;
name: string;
age: number;
address: string;
}
const genFakeData = (count = 5) =>
Array.from({ length: count }).map((_, index) => ({
Array.from({ length: count }).map<DataType>((_, index) => ({
key: index,
name: `Edward King ${index}`,
age: 32 + index,
@ -17,13 +24,13 @@ const renderEmpty: GetProp<typeof ConfigProvider, 'renderEmpty'> = (componentNam
};
function App() {
const [dataSource, setDataSource] = useState(genFakeData);
const [dataSource, setDataSource] = useState<DataType[]>(genFakeData);
const handleToggle = () => {
setDataSource(dataSource.length ? [] : genFakeData(Math.floor(Math.random() * 10)));
};
const columns: GetProp<typeof Table, 'columns'> = [
const columns: GetProp<typeof Table<DataType>, 'columns'> = [
{
title: 'Name',
dataIndex: 'name',
@ -57,13 +64,11 @@ function App() {
<ConfigProvider renderEmpty={renderEmpty}>
{dataSource.length ? toggleButton : null}
<div style={{ marginBlock: 8 }} />
<Table
<Table<DataType>
bordered
dataSource={dataSource}
columns={columns}
locale={{
emptyText: <Empty description="No Data">{toggleButton}</Empty>,
}}
locale={{ emptyText: <Empty description="No Data">{toggleButton}</Empty> }}
/>
</ConfigProvider>
);

2
components/table/demo/custom-filter-panel.tsx
View File

@ -163,7 +163,7 @@ const App: React.FC = () => {
},
];
return <Table columns={columns} dataSource={data} />;
return <Table<DataType> columns={columns} dataSource={data} />;
};
export default App;

2
components/table/demo/drag-column-sorting.tsx
View File

@ -172,7 +172,7 @@ const App: React.FC = () => {
>
<SortableContext items={columns.map((i) => i.key)} strategy={horizontalListSortingStrategy}>
<DragIndexContext.Provider value={dragIndex}>
<Table
<Table<DataType>
rowKey="key"
columns={columns}
dataSource={dataSource}

2
components/table/demo/drag-sorting-handler.tsx
View File

@ -105,7 +105,7 @@ const App: React.FC = () => {
return (
<DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>
<SortableContext items={dataSource.map((i) => i.key)} strategy={verticalListSortingStrategy}>
<Table
<Table<DataType>
rowKey="key"
components={{ body: { row: Row } }}
columns={columns}

8
components/table/demo/drag-sorting.tsx
View File

@ -38,7 +38,7 @@ interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
'data-row-key': string;
}
const Row = (props: RowProps) => {
const Row: React.FC<Readonly<RowProps>> = (props) => {
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
id: props['data-row-key'],
});
@ -103,11 +103,9 @@ const App: React.FC = () => {
items={dataSource.map((i) => i.key)}
strategy={verticalListSortingStrategy}
>
<Table
<Table<DataType>
components={{
body: {
row: Row,
},
body: { row: Row },
}}
rowKey="key"
columns={columns}

42
components/table/demo/dynamic-settings.tsx
View File

@ -61,18 +61,18 @@ const columns: ColumnsType<DataType> = [
},
];
const data: DataType[] = [];
for (let i = 1; i <= 10; i++) {
data.push({
key: i,
name: 'John Brown',
age: Number(`${i}2`),
address: `New York No. ${i} Lake Park`,
description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
});
}
const data = Array.from({ length: 10 }).map<DataType>((_, i) => ({
key: i,
name: 'John Brown',
age: Number(`${i}2`),
address: `New York No. ${i} Lake Park`,
description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
}));
const defaultExpandable: ExpandableConfig<DataType> = {
expandedRowRender: (record: DataType) => <p>{record.description}</p>,
};
const defaultExpandable = { expandedRowRender: (record: DataType) => <p>{record.description}</p> };
const defaultTitle = () => 'Here is title';
const defaultFooter = () => 'Here is footer';
@ -80,9 +80,7 @@ const App: React.FC = () => {
const [bordered, setBordered] = useState(false);
const [loading, setLoading] = useState(false);
const [size, setSize] = useState<SizeType>('large');
const [expandable, setExpandable] = useState<ExpandableConfig<DataType> | undefined>(
defaultExpandable,
);
const [expandable, setExpandable] = useState<ExpandableConfig<DataType>>(defaultExpandable);
const [showTitle, setShowTitle] = useState(false);
const [showHeader, setShowHeader] = useState(true);
const [showFooter, setShowFooter] = useState(true);
@ -228,12 +226,7 @@ const App: React.FC = () => {
</Radio.Group>
</Form.Item>
<Form.Item label="Pagination Top">
<Radio.Group
value={top}
onChange={(e) => {
setTop(e.target.value);
}}
>
<Radio.Group value={top} onChange={(e) => setTop(e.target.value)}>
<Radio.Button value="topLeft">TopLeft</Radio.Button>
<Radio.Button value="topCenter">TopCenter</Radio.Button>
<Radio.Button value="topRight">TopRight</Radio.Button>
@ -241,12 +234,7 @@ const App: React.FC = () => {
</Radio.Group>
</Form.Item>
<Form.Item label="Pagination Bottom">
<Radio.Group
value={bottom}
onChange={(e) => {
setBottom(e.target.value);
}}
>
<Radio.Group value={bottom} onChange={(e) => setBottom(e.target.value)}>
<Radio.Button value="bottomLeft">BottomLeft</Radio.Button>
<Radio.Button value="bottomCenter">BottomCenter</Radio.Button>
<Radio.Button value="bottomRight">BottomRight</Radio.Button>
@ -254,7 +242,7 @@ const App: React.FC = () => {
</Radio.Group>
</Form.Item>
</Form>
<Table
<Table<DataType>
{...tableProps}
pagination={{ position: [top, bottom] }}
columns={tableColumns}

4
components/table/demo/edit-cell.tsx
View File

@ -103,7 +103,7 @@ interface DataType {
address: string;
}
type ColumnTypes = Exclude<TableProps['columns'], undefined>;
type ColumnTypes = Exclude<TableProps<DataType>['columns'], undefined>;
const App: React.FC = () => {
const [dataSource, setDataSource] = useState<DataType[]>([
@ -205,7 +205,7 @@ const App: React.FC = () => {
<Button onClick={handleAdd} type="primary" style={{ marginBottom: 16 }}>
Add a row
</Button>
<Table
<Table<DataType>
components={components}
rowClassName={() => 'editable-row'}
bordered

44
components/table/demo/edit-row.tsx
View File

@ -2,28 +2,26 @@ import React, { useState } from 'react';
import type { TableProps } from 'antd';
import { Form, Input, InputNumber, Popconfirm, Table, Typography } from 'antd';
interface Item {
interface DataType {
key: string;
name: string;
age: number;
address: string;
}
const originData: Item[] = [];
for (let i = 0; i < 100; i++) {
originData.push({
key: i.toString(),
name: `Edward ${i}`,
age: 32,
address: `London Park no. ${i}`,
});
}
const originData = Array.from({ length: 100 }).map<DataType>((_, i) => ({
key: i.toString(),
name: `Edward ${i}`,
age: 32,
address: `London Park no. ${i}`,
}));
interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
editing: boolean;
dataIndex: string;
title: any;
inputType: 'number' | 'text';
record: Item;
record: DataType;
index: number;
}
@ -63,12 +61,12 @@ const EditableCell: React.FC<React.PropsWithChildren<EditableCellProps>> = ({
const App: React.FC = () => {
const [form] = Form.useForm();
const [data, setData] = useState(originData);
const [data, setData] = useState<DataType[]>(originData);
const [editingKey, setEditingKey] = useState('');
const isEditing = (record: Item) => record.key === editingKey;
const isEditing = (record: DataType) => record.key === editingKey;
const edit = (record: Partial<Item> & { key: React.Key }) => {
const edit = (record: Partial<DataType> & { key: React.Key }) => {
form.setFieldsValue({ name: '', age: '', address: '', ...record });
setEditingKey(record.key);
};
@ -79,7 +77,7 @@ const App: React.FC = () => {
const save = async (key: React.Key) => {
try {
const row = (await form.validateFields()) as Item;
const row = (await form.validateFields()) as DataType;
const newData = [...data];
const index = newData.findIndex((item) => key === item.key);
@ -123,7 +121,7 @@ const App: React.FC = () => {
{
title: 'operation',
dataIndex: 'operation',
render: (_: any, record: Item) => {
render: (_: any, record: DataType) => {
const editable = isEditing(record);
return editable ? (
<span>
@ -143,13 +141,13 @@ const App: React.FC = () => {
},
];
const mergedColumns: TableProps<Item>['columns'] = columns.map((col) => {
const mergedColumns: TableProps<DataType>['columns'] = columns.map((col) => {
if (!col.editable) {
return col;
}
return {
...col,
onCell: (record: Item) => ({
onCell: (record: DataType) => ({
record,
inputType: col.dataIndex === 'age' ? 'number' : 'text',
dataIndex: col.dataIndex,
@ -161,19 +159,15 @@ const App: React.FC = () => {
return (
<Form form={form} component={false}>
<Table
<Table<DataType>
components={{
body: {
cell: EditableCell,
},
body: { cell: EditableCell },
}}
bordered
dataSource={data}
columns={mergedColumns}
rowClassName="editable-row"
pagination={{
onChange: cancel,
}}
pagination={{ onChange: cancel }}
/>
</Form>
);

2
components/table/demo/ellipsis-custom-tooltip.tsx
View File

@ -98,6 +98,6 @@ const data: DataType[] = [
},
];
const App: React.FC = () => <Table columns={columns} dataSource={data} />;
const App: React.FC = () => <Table<DataType> columns={columns} dataSource={data} />;
export default App;

2
components/table/demo/ellipsis.tsx
View File

@ -73,6 +73,6 @@ const data = [
},
];
const App: React.FC = () => <Table columns={columns} dataSource={data} />;
const App: React.FC = () => <Table<DataType> columns={columns} dataSource={data} />;
export default App;

2
components/table/demo/expand.tsx
View File

@ -54,7 +54,7 @@ const data: DataType[] = [
];
const App: React.FC = () => (
<Table
<Table<DataType>
columns={columns}
expandable={{
expandedRowRender: (record) => <p style={{ margin: 0 }}>{record.description}</p>,

4
components/table/demo/filter-in-tree.tsx
View File

@ -107,6 +107,8 @@ const onChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter,
console.log('params', pagination, filters, sorter, extra);
};
const App: React.FC = () => <Table columns={columns} dataSource={data} onChange={onChange} />;
const App: React.FC = () => (
<Table<DataType> columns={columns} dataSource={data} onChange={onChange} />
);
export default App;

4
components/table/demo/filter-search.tsx
View File

@ -87,6 +87,8 @@ const onChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter,
console.log('params', pagination, filters, sorter, extra);
};
const App: React.FC = () => <Table columns={columns} dataSource={data} onChange={onChange} />;
const App: React.FC = () => (
<Table<DataType> columns={columns} dataSource={data} onChange={onChange} />
);
export default App;

59
components/table/demo/fixed-columns-header.tsx
View File

@ -1,6 +1,24 @@
import React from 'react';
import { Table } from 'antd';
import type { TableColumnsType } from 'antd';
import { createStyles } from 'antd-style';
const useStyle = createStyles(({ css, token }) => {
const { antCls } = token;
return {
customTable: css`
${antCls}-table {
${antCls}-table-container {
${antCls}-table-body,
${antCls}-table-content {
scrollbar-width: thin;
scrollbar-color: unset;
}
}
}
`,
};
});
interface DataType {
key: React.Key;
@ -67,6 +85,18 @@ const columns: TableColumnsType<DataType> = [
width: 150,
},
{ title: 'Column 8', dataIndex: 'address', key: '8' },
{ title: 'Column 9', dataIndex: 'address', key: '9' },
{ title: 'Column 10', dataIndex: 'address', key: '10' },
{ title: 'Column 11', dataIndex: 'address', key: '11' },
{ title: 'Column 12', dataIndex: 'address', key: '12' },
{ title: 'Column 13', dataIndex: 'address', key: '13' },
{ title: 'Column 14', dataIndex: 'address', key: '14' },
{ title: 'Column 15', dataIndex: 'address', key: '15' },
{ title: 'Column 16', dataIndex: 'address', key: '16' },
{ title: 'Column 17', dataIndex: 'address', key: '17' },
{ title: 'Column 18', dataIndex: 'address', key: '18' },
{ title: 'Column 19', dataIndex: 'address', key: '19' },
{ title: 'Column 20', dataIndex: 'address', key: '20' },
{
title: 'Action',
key: 'operation',
@ -76,18 +106,23 @@ const columns: TableColumnsType<DataType> = [
},
];
const data: DataType[] = [];
for (let i = 0; i < 100; i++) {
data.push({
key: i,
name: `Edward ${i}`,
age: 32,
address: `London Park no. ${i}`,
});
}
const dataSource = Array.from({ length: 100 }).map<DataType>((_, i) => ({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
}));
const App: React.FC = () => (
<Table columns={columns} dataSource={data} scroll={{ x: 1500, y: 300 }} />
);
const App: React.FC = () => {
const { styles } = useStyle();
return (
<Table<DataType>
className={styles.customTable}
columns={columns}
dataSource={dataSource}
scroll={{ x: 'max-content', y: 55 * 5 }}
/>
);
};
export default App;

59
components/table/demo/fixed-columns.tsx
View File

@ -1,6 +1,24 @@
import React from 'react';
import { Table } from 'antd';
import type { TableColumnsType } from 'antd';
import { createStyles } from 'antd-style';
const useStyle = createStyles(({ css, token }) => {
const { antCls } = token;
return {
customTable: css`
${antCls}-table {
${antCls}-table-container {
${antCls}-table-body,
${antCls}-table-content {
scrollbar-width: thin;
scrollbar-color: unset;
}
}
}
`,
};
});
interface DataType {
key: React.Key;
@ -33,6 +51,18 @@ const columns: TableColumnsType<DataType> = [
{ title: 'Column 6', dataIndex: 'address', key: '6' },
{ title: 'Column 7', dataIndex: 'address', key: '7' },
{ title: 'Column 8', dataIndex: 'address', key: '8' },
{ title: 'Column 9', dataIndex: 'address', key: '9' },
{ title: 'Column 10', dataIndex: 'address', key: '10' },
{ title: 'Column 11', dataIndex: 'address', key: '11' },
{ title: 'Column 12', dataIndex: 'address', key: '12' },
{ title: 'Column 13', dataIndex: 'address', key: '13' },
{ title: 'Column 14', dataIndex: 'address', key: '14' },
{ title: 'Column 15', dataIndex: 'address', key: '15' },
{ title: 'Column 16', dataIndex: 'address', key: '16' },
{ title: 'Column 17', dataIndex: 'address', key: '17' },
{ title: 'Column 18', dataIndex: 'address', key: '18' },
{ title: 'Column 19', dataIndex: 'address', key: '19' },
{ title: 'Column 20', dataIndex: 'address', key: '20' },
{
title: 'Action',
key: 'operation',
@ -42,21 +72,22 @@ const columns: TableColumnsType<DataType> = [
},
];
const data: DataType[] = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York Park',
},
{
key: '2',
name: 'Jim Green',
age: 40,
address: 'London Park',
},
const dataSource: DataType[] = [
{ key: '1', name: 'Olivia', age: 32, address: 'New York Park' },
{ key: '2', name: 'Ethan', age: 40, address: 'London Park' },
];
const App: React.FC = () => <Table columns={columns} dataSource={data} scroll={{ x: 1300 }} />;
const App: React.FC = () => {
const { styles } = useStyle();
return (
<Table<DataType>
className={styles.customTable}
pagination={false}
columns={columns}
dataSource={dataSource}
scroll={{ x: 'max-content' }}
/>
);
};
export default App;

72
components/table/demo/fixed-gapped-columns.tsx
View File

@ -1,6 +1,24 @@
import React from 'react';
import { Table } from 'antd';
import type { TableColumnsType } from 'antd';
import { createStyles } from 'antd-style';
const useStyle = createStyles(({ css, token }) => {
const { antCls } = token;
return {
customTable: css`
${antCls}-table {
${antCls}-table-container {
${antCls}-table-body,
${antCls}-table-content {
scrollbar-width: thin;
scrollbar-color: unset;
}
}
}
`,
};
});
interface DataType {
key: React.Key;
@ -21,14 +39,26 @@ const columns: TableColumnsType<DataType> = [
width: 100,
dataIndex: 'age',
},
{ title: 'Column 1', dataIndex: 'address', fixed: 'left' },
{ title: 'Column 2', dataIndex: 'address' },
{ title: 'Column 3', dataIndex: 'address' },
{ title: 'Column 4', dataIndex: 'address' },
{ title: 'Column 5', dataIndex: 'address' },
{ title: 'Column 6', dataIndex: 'address' },
{ title: 'Column 7', dataIndex: 'address' },
{ title: 'Column 8', dataIndex: 'address' },
{ title: 'Column 1', dataIndex: 'address', key: '1', fixed: 'left' },
{ title: 'Column 2', dataIndex: 'address', key: '2' },
{ title: 'Column 3', dataIndex: 'address', key: '3' },
{ title: 'Column 4', dataIndex: 'address', key: '4' },
{ title: 'Column 5', dataIndex: 'address', key: '5' },
{ title: 'Column 6', dataIndex: 'address', key: '6' },
{ title: 'Column 7', dataIndex: 'address', key: '7' },
{ title: 'Column 8', dataIndex: 'address', key: '8' },
{ title: 'Column 9', dataIndex: 'address', key: '9' },
{ title: 'Column 10', dataIndex: 'address', key: '10' },
{ title: 'Column 11', dataIndex: 'address', key: '11' },
{ title: 'Column 12', dataIndex: 'address', key: '12' },
{ title: 'Column 13', dataIndex: 'address', key: '13' },
{ title: 'Column 14', dataIndex: 'address', key: '14' },
{ title: 'Column 15', dataIndex: 'address', key: '15' },
{ title: 'Column 16', dataIndex: 'address', key: '16' },
{ title: 'Column 17', dataIndex: 'address', key: '17' },
{ title: 'Column 18', dataIndex: 'address', key: '18' },
{ title: 'Column 19', dataIndex: 'address', key: '19' },
{ title: 'Column 20', dataIndex: 'address', key: '20' },
{
title: 'Action 1',
fixed: 'right',
@ -48,17 +78,23 @@ const columns: TableColumnsType<DataType> = [
},
];
const data: DataType[] = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York Park',
},
const dataSource: DataType[] = [
{ key: '1', name: 'Olivia', age: 32, address: 'New York Park' },
{ key: '2', name: 'Ethan', age: 40, address: 'London Park' },
];
const App: React.FC = () => (
<Table columns={columns} dataSource={data} scroll={{ x: 1300 }} pagination={false} bordered />
);
const App: React.FC = () => {
const { styles } = useStyle();
return (
<Table<DataType>
bordered
className={styles.customTable}
columns={columns}
dataSource={dataSource}
scroll={{ x: 'max-content' }}
pagination={false}
/>
);
};
export default App;

48
components/table/demo/fixed-header.tsx
View File

@ -1,6 +1,24 @@
import React from 'react';
import { Table } from 'antd';
import type { TableColumnsType } from 'antd';
import { createStyles } from 'antd-style';
const useStyle = createStyles(({ css, token }) => {
const { antCls } = token;
return {
customTable: css`
${antCls}-table {
${antCls}-table-container {
${antCls}-table-body,
${antCls}-table-content {
scrollbar-width: thin;
scrollbar-color: unset;
}
}
}
`,
};
});
interface DataType {
key: React.Key;
@ -26,18 +44,24 @@ const columns: TableColumnsType<DataType> = [
},
];
const data: DataType[] = [];
for (let i = 0; i < 100; i++) {
data.push({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
});
}
const dataSource = Array.from({ length: 100 }).map<DataType>((_, i) => ({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
}));
const App: React.FC = () => (
<Table columns={columns} dataSource={data} pagination={{ pageSize: 50 }} scroll={{ y: 240 }} />
);
const App: React.FC = () => {
const { styles } = useStyle();
return (
<Table<DataType>
className={styles.customTable}
columns={columns}
dataSource={dataSource}
pagination={{ pageSize: 50 }}
scroll={{ y: 55 * 5 }}
/>
);
};
export default App;

65
components/table/demo/grouping-columns.tsx
View File

@ -1,6 +1,24 @@
import React from 'react';
import { Table } from 'antd';
import type { TableColumnsType } from 'antd';
import { createStyles } from 'antd-style';
const useStyle = createStyles(({ css, token }) => {
const { antCls } = token;
return {
customTable: css`
${antCls}-table {
${antCls}-table-container {
${antCls}-table-body,
${antCls}-table-content {
scrollbar-width: thin;
scrollbar-color: unset;
}
}
}
`,
};
});
interface DataType {
key: React.Key;
@ -98,29 +116,30 @@ const columns: TableColumnsType<DataType> = [
},
];
const data: DataType[] = [];
for (let i = 0; i < 100; i++) {
data.push({
key: i,
name: 'John Brown',
age: i + 1,
street: 'Lake Park',
building: 'C',
number: 2035,
companyAddress: 'Lake Street 42',
companyName: 'SoftLake Co',
gender: 'M',
});
}
const dataSource = Array.from({ length: 100 }).map<DataType>((_, i) => ({
key: i,
name: 'John Brown',
age: i + 1,
street: 'Lake Park',
building: 'C',
number: 2035,
companyAddress: 'Lake Street 42',
companyName: 'SoftLake Co',
gender: 'M',
}));
const App: React.FC = () => (
<Table
columns={columns}
dataSource={data}
bordered
size="middle"
scroll={{ x: 'calc(700px + 50%)', y: 240 }}
/>
);
const App: React.FC = () => {
const { styles } = useStyle();
return (
<Table<DataType>
className={styles.customTable}
columns={columns}
dataSource={dataSource}
bordered
size="middle"
scroll={{ x: 'calc(700px + 50%)', y: 47 * 5 }}
/>
);
};
export default App;

2
components/table/demo/head.tsx
View File

@ -99,7 +99,7 @@ const onChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter,
};
const App: React.FC = () => (
<Table
<Table<DataType>
columns={columns}
dataSource={data}
onChange={onChange}

5
components/table/demo/hidden-columns.tsx
View File

@ -35,7 +35,7 @@ const data: DataType[] = [
},
];
const defaultCheckedList = columns.map((item) => item.key as string);
const defaultCheckedList = columns.map((item) => item.key);
const App: React.FC = () => {
const [checkedList, setCheckedList] = useState(defaultCheckedList);
@ -60,8 +60,7 @@ const App: React.FC = () => {
setCheckedList(value as string[]);
}}
/>
<Table columns={newColumns} dataSource={data} style={{ marginTop: 24 }} />
<Table<DataType> columns={newColumns} dataSource={data} style={{ marginTop: 24 }} />
</>
);
};

2
components/table/demo/jsx.tsx
View File

@ -40,7 +40,7 @@ const data: DataType[] = [
];
const App: React.FC = () => (
<Table dataSource={data}>
<Table<DataType> dataSource={data}>
<ColumnGroup title="Name">
<Column title="First Name" dataIndex="firstName" key="firstName" />
<Column title="Last Name" dataIndex="lastName" key="lastName" />

4
components/table/demo/multiple-sorter.tsx
View File

@ -76,6 +76,8 @@ const onChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter,
console.log('params', pagination, filters, sorter, extra);
};
const App: React.FC = () => <Table columns={columns} dataSource={data} onChange={onChange} />;
const App: React.FC = () => (
<Table<DataType> columns={columns} dataSource={data} onChange={onChange} />
);
export default App;

23
components/table/demo/narrow.tsx
View File

@ -24,20 +24,21 @@ const columns: TableColumnsType<DataType> = [
},
];
const data: DataType[] = [];
for (let i = 0; i < 200; i += 1) {
data.push({
key: i,
name: 'Sample Name',
age: 30 + (i % 5),
address: `Sample Address ${i}`,
});
}
const dataSource = Array.from({ length: 200 }).map<DataType>((_, key) => ({
key,
name: 'Sample Name',
age: 30 + (key % 5),
address: `Sample Address ${key}`,
}));
const App: React.FC = () => (
<div style={{ width: 300 }}>
<Table columns={columns} dataSource={data} size="small" pagination={{ defaultCurrent: 13 }} />
<Table<DataType>
columns={columns}
dataSource={dataSource}
size="small"
pagination={{ defaultCurrent: 13 }}
/>
</div>
);

141
components/table/demo/nest-table-border-debug.tsx
View File

@ -25,76 +25,75 @@ const items = [
{ key: '2', label: 'Action 2' },
];
const expandedColumns: TableProps<ExpandedDataType>['columns'] = [
{ title: 'Date', dataIndex: 'date', key: 'date' },
{ title: 'Name', dataIndex: 'name', key: 'name' },
{
title: 'Status',
key: 'state',
render: () => (
<span>
<Badge status="success" />
Finished
</span>
),
},
{ title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{
title: 'Action',
dataIndex: 'operation',
key: 'operation',
render: () => (
<Space size="middle">
<a>Pause</a>
<a>Stop</a>
<Dropdown menu={{ items }}>
<a>
More <DownOutlined />
</a>
</Dropdown>
</Space>
),
},
];
const expandedDataSource = Array.from({ length: 3 }).map<ExpandedDataType>((_, i) => ({
key: i,
date: '2014-12-24 23:12:00',
name: 'This is production name',
upgradeNum: 'Upgraded: 56',
}));
const createExpandedRowRender = (bordered: boolean) => () => (
<Table<ExpandedDataType>
columns={expandedColumns}
dataSource={expandedDataSource}
pagination={false}
bordered={bordered}
/>
);
const columns: TableColumnsType<DataType> = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Platform', dataIndex: 'platform', key: 'platform' },
{ title: 'Version', dataIndex: 'version', key: 'version' },
{ title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{ title: 'Creator', dataIndex: 'creator', key: 'creator' },
{ title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
{ title: 'Action', key: 'operation', render: () => <a>Publish</a> },
];
const dataSource = Array.from({ length: 3 }).map<DataType>((_, i) => ({
key: i,
name: 'Screem',
platform: 'iOS',
version: '10.3.4.5654',
upgradeNum: 500,
creator: 'Jack',
createdAt: '2014-12-24 23:12:00',
}));
const App: React.FC = () => {
const createExpandedRowRender = (bordered: boolean) => () => {
const columns: TableProps['columns'] = [
{ title: 'Date', dataIndex: 'date', key: 'date' },
{ title: 'Name', dataIndex: 'name', key: 'name' },
{
title: 'Status',
key: 'state',
render: () => (
<span>
<Badge status="success" />
Finished
</span>
),
},
{ title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{
title: 'Action',
dataIndex: 'operation',
key: 'operation',
render: () => (
<Space size="middle">
<a>Pause</a>
<a>Stop</a>
<Dropdown menu={{ items }}>
<a>
More <DownOutlined />
</a>
</Dropdown>
</Space>
),
},
];
const data: ExpandedDataType[] = [];
for (let i = 0; i < 3; ++i) {
data.push({
key: i,
date: '2014-12-24 23:12:00',
name: 'This is production name',
upgradeNum: 'Upgraded: 56',
});
}
return <Table columns={columns} dataSource={data} pagination={false} bordered={bordered} />;
};
const columns: TableColumnsType<DataType> = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Platform', dataIndex: 'platform', key: 'platform' },
{ title: 'Version', dataIndex: 'version', key: 'version' },
{ title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{ title: 'Creator', dataIndex: 'creator', key: 'creator' },
{ title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
{ title: 'Action', key: 'operation', render: () => <a>Publish</a> },
];
const data: DataType[] = [];
for (let i = 0; i < 3; ++i) {
data.push({
key: i,
name: 'Screem',
platform: 'iOS',
version: '10.3.4.5654',
upgradeNum: 500,
creator: 'Jack',
createdAt: '2014-12-24 23:12:00',
});
}
const [rootTableBordered, setRootTableBordered] = useState(true);
const [childTableBordered, setChildTableBordered] = useState(true);
return (
@ -107,12 +106,12 @@ const App: React.FC = () => {
<Switch checked={childTableBordered} onChange={(v) => setChildTableBordered(v)} />
</Form.Item>
</Form>
<Table
<Table<DataType>
title={() => 'cool'}
footer={() => 'cool'}
columns={columns}
expandable={{ expandedRowRender: createExpandedRowRender(childTableBordered) }}
dataSource={data}
dataSource={dataSource}
bordered={rootTableBordered}
/>
</>

173
components/table/demo/nested-table.tsx
View File

@ -3,6 +3,13 @@ import { DownOutlined } from '@ant-design/icons';
import type { TableColumnsType } from 'antd';
import { Badge, Dropdown, Space, Table } from 'antd';
interface ExpandedDataType {
key: React.Key;
date: string;
name: string;
upgradeNum: string;
}
interface DataType {
key: React.Key;
name: string;
@ -13,102 +20,92 @@ interface DataType {
createdAt: string;
}
interface ExpandedDataType {
key: React.Key;
date: string;
name: string;
upgradeNum: string;
}
const items = [
{ key: '1', label: 'Action 1' },
{ key: '2', label: 'Action 2' },
];
const App: React.FC = () => {
const expandedRowRender = () => {
const columns: TableColumnsType<ExpandedDataType> = [
{ title: 'Date', dataIndex: 'date', key: 'date' },
{ title: 'Name', dataIndex: 'name', key: 'name' },
{
title: 'Status',
key: 'state',
render: () => <Badge status="success" text="Finished" />,
},
{ title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{
title: 'Action',
key: 'operation',
render: () => (
<Space size="middle">
<a>Pause</a>
<a>Stop</a>
<Dropdown menu={{ items }}>
<a>
More <DownOutlined />
</a>
</Dropdown>
</Space>
),
},
];
const expandDataSource = Array.from({ length: 3 }).map<ExpandedDataType>((_, i) => ({
key: i.toString(),
date: '2014-12-24 23:12:00',
name: 'This is production name',
upgradeNum: 'Upgraded: 56',
}));
const data = [];
for (let i = 0; i < 3; ++i) {
data.push({
key: i.toString(),
date: '2014-12-24 23:12:00',
name: 'This is production name',
upgradeNum: 'Upgraded: 56',
});
}
return <Table columns={columns} dataSource={data} pagination={false} />;
};
const dataSource = Array.from({ length: 3 }).map<DataType>((_, i) => ({
key: i.toString(),
name: 'Screen',
platform: 'iOS',
version: '10.3.4.5654',
upgradeNum: 500,
creator: 'Jack',
createdAt: '2014-12-24 23:12:00',
}));
const columns: TableColumnsType<DataType> = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Platform', dataIndex: 'platform', key: 'platform' },
{ title: 'Version', dataIndex: 'version', key: 'version' },
{ title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{ title: 'Creator', dataIndex: 'creator', key: 'creator' },
{ title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
{ title: 'Action', key: 'operation', render: () => <a>Publish</a> },
];
const expandColumns: TableColumnsType<ExpandedDataType> = [
{ title: 'Date', dataIndex: 'date', key: 'date' },
{ title: 'Name', dataIndex: 'name', key: 'name' },
{
title: 'Status',
key: 'state',
render: () => <Badge status="success" text="Finished" />,
},
{ title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{
title: 'Action',
key: 'operation',
render: () => (
<Space size="middle">
<a>Pause</a>
<a>Stop</a>
<Dropdown menu={{ items }}>
<a>
More <DownOutlined />
</a>
</Dropdown>
</Space>
),
},
];
const data: DataType[] = [];
for (let i = 0; i < 3; ++i) {
data.push({
key: i.toString(),
name: 'Screen',
platform: 'iOS',
version: '10.3.4.5654',
upgradeNum: 500,
creator: 'Jack',
createdAt: '2014-12-24 23:12:00',
});
}
const columns: TableColumnsType<DataType> = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Platform', dataIndex: 'platform', key: 'platform' },
{ title: 'Version', dataIndex: 'version', key: 'version' },
{ title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{ title: 'Creator', dataIndex: 'creator', key: 'creator' },
{ title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
{ title: 'Action', key: 'operation', render: () => <a>Publish</a> },
];
return (
<>
<Table
columns={columns}
expandable={{ expandedRowRender, defaultExpandedRowKeys: ['0'] }}
dataSource={data}
/>
<Table
columns={columns}
expandable={{ expandedRowRender, defaultExpandedRowKeys: ['0'] }}
dataSource={data}
size="middle"
/>
<Table
columns={columns}
expandable={{ expandedRowRender, defaultExpandedRowKeys: ['0'] }}
dataSource={data}
size="small"
/>
</>
);
};
const expandedRowRender = () => (
<Table<ExpandedDataType>
columns={expandColumns}
dataSource={expandDataSource}
pagination={false}
/>
);
const App: React.FC = () => (
<>
<Table<DataType>
columns={columns}
expandable={{ expandedRowRender, defaultExpandedRowKeys: ['0'] }}
dataSource={dataSource}
/>
<Table<DataType>
columns={columns}
expandable={{ expandedRowRender, defaultExpandedRowKeys: ['0'] }}
dataSource={dataSource}
size="middle"
/>
<Table<DataType>
columns={columns}
expandable={{ expandedRowRender, defaultExpandedRowKeys: ['0'] }}
dataSource={dataSource}
size="small"
/>
</>
);
export default App;

2
components/table/demo/order-column.tsx
View File

@ -50,7 +50,7 @@ const data: DataType[] = [
];
const App: React.FC = () => (
<Table
<Table<DataType>
columns={columns}
rowSelection={{}}
expandable={{

15
components/table/demo/pagination.tsx
View File

@ -4,7 +4,9 @@ import type { TableProps } from 'antd';
type ColumnsType<T extends object> = TableProps<T>['columns'];
type TablePagination<T extends object> = NonNullable<Exclude<TableProps<T>['pagination'], boolean>>;
type TablePaginationPosition = NonNullable<TablePagination<any>['position']>[number];
type TablePaginationPosition<T extends object> = NonNullable<
TablePagination<T>['position']
>[number];
interface DataType {
key: string;
@ -102,9 +104,8 @@ const data: DataType[] = [
];
const App: React.FC = () => {
const [top, setTop] = useState<TablePaginationPosition>('topLeft');
const [bottom, setBottom] = useState<TablePaginationPosition>('bottomRight');
const [top, setTop] = useState<TablePaginationPosition<DataType>>('topLeft');
const [bottom, setBottom] = useState<TablePaginationPosition<DataType>>('bottomRight');
return (
<div>
<div>
@ -125,7 +126,11 @@ const App: React.FC = () => {
setBottom(e.target.value);
}}
/>
<Table columns={columns} pagination={{ position: [top, bottom] }} dataSource={data} />
<Table<DataType>
columns={columns}
pagination={{ position: [top, bottom] }}
dataSource={data}
/>
</div>
);
};

2
components/table/demo/reset-filter.tsx
View File

@ -114,7 +114,7 @@ const App: React.FC = () => {
<Button onClick={clearFilters}>Clear filters</Button>
<Button onClick={clearAll}>Clear filters and sorters</Button>
</Space>
<Table columns={columns} dataSource={data} onChange={handleChange} />
<Table<DataType> columns={columns} dataSource={data} onChange={handleChange} />
</>
);
};

76
components/table/demo/resizable-column.tsx
View File

@ -12,12 +12,12 @@ interface DataType {
note: string;
}
const ResizableTitle = (
props: React.HTMLAttributes<any> & {
onResize: (e: React.SyntheticEvent<Element>, data: ResizeCallbackData) => void;
width: number;
},
) => {
interface TitlePropsType {
width: number;
onResize: (e: React.SyntheticEvent<Element>, data: ResizeCallbackData) => void;
}
const ResizableTitle: React.FC<Readonly<React.HTMLAttributes<any> & TitlePropsType>> = (props) => {
const { onResize, width, ...restProps } = props;
if (!width) {
@ -28,14 +28,7 @@ const ResizableTitle = (
<Resizable
width={width}
height={0}
handle={
<span
className="react-resizable-handle"
onClick={(e) => {
e.stopPropagation();
}}
/>
}
handle={<span className="react-resizable-handle" onClick={(e) => e.stopPropagation()} />}
onResize={onResize}
draggableOpts={{ enableUserSelectHack: false }}
>
@ -44,6 +37,30 @@ const ResizableTitle = (
);
};
const data: DataType[] = [
{
key: 0,
date: '2018-02-11',
amount: 120,
type: 'income',
note: 'transfer',
},
{
key: 1,
date: '2018-03-11',
amount: 243,
type: 'income',
note: 'transfer',
},
{
key: 2,
date: '2018-04-11',
amount: 98,
type: 'income',
note: 'transfer',
},
];
const App: React.FC = () => {
const [columns, setColumns] = useState<TableColumnsType<DataType>>([
{
@ -73,29 +90,6 @@ const App: React.FC = () => {
render: () => <a>Delete</a>,
},
]);
const data: DataType[] = [
{
key: 0,
date: '2018-02-11',
amount: 120,
type: 'income',
note: 'transfer',
},
{
key: 1,
date: '2018-03-11',
amount: 243,
type: 'income',
note: 'transfer',
},
{
key: 2,
date: '2018-04-11',
amount: 98,
type: 'income',
note: 'transfer',
},
];
const handleResize =
(index: number) =>
@ -117,13 +111,9 @@ const App: React.FC = () => {
}));
return (
<Table
<Table<DataType>
bordered
components={{
header: {
cell: ResizableTitle,
},
}}
components={{ header: { cell: ResizableTitle } }}
columns={mergedColumns}
dataSource={data}
/>

2
components/table/demo/responsive.tsx
View File

@ -39,6 +39,6 @@ const data: DataType[] = [
},
];
const App: React.FC = () => <Table columns={columns} dataSource={data} />;
const App: React.FC = () => <Table<DataType> columns={columns} dataSource={data} />;
export default App;

2
components/table/demo/row-selection-and-operation.tsx
View File

@ -57,7 +57,7 @@ const App: React.FC = () => {
</Button>
{hasSelected ? `Selected ${selectedRowKeys.length} items` : null}
</Flex>
<Table rowSelection={rowSelection} columns={columns} dataSource={dataSource} />
<Table<DataType> rowSelection={rowSelection} columns={columns} dataSource={dataSource} />
</Flex>
);
};

36
components/table/demo/row-selection-custom-debug.tsx
View File

@ -16,26 +16,24 @@ const columns: TableColumnsType<DataType> = [
},
];
const data: DataType[] = [];
for (let i = 0; i < 46; i++) {
data.push({
key: i,
name: i % 2 === 0 ? `Edward King ${i}` : 'Another Row',
});
}
const dataSource = Array.from({ length: 46 }).map<DataType>((_, i) => ({
key: i,
name: i % 2 === 0 ? `Edward King ${i}` : 'Another Row',
}));
const App: React.FC = () => {
const rowSelection: TableRowSelection<DataType> = {
renderCell: (checked, _record, index, node) => ({
props: { rowSpan: index % 2 === 0 ? 2 : 0 },
children: (
<>
{String(checked)}: {node}
</>
),
}),
};
return <Table rowSelection={rowSelection} columns={columns} dataSource={data} />;
const rowSelection: TableRowSelection<DataType> = {
renderCell: (checked, _record, index, node) => ({
props: { rowSpan: index % 2 === 0 ? 2 : 0 },
children: (
<>
{String(checked)}: {node}
</>
),
}),
};
const App: React.FC = () => (
<Table<DataType> rowSelection={rowSelection} columns={columns} dataSource={dataSource} />
);
export default App;

17
components/table/demo/row-selection-custom.tsx
View File

@ -26,15 +26,12 @@ const columns: TableColumnsType<DataType> = [
},
];
const data: DataType[] = [];
for (let i = 0; i < 46; i++) {
data.push({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
});
}
const dataSource = Array.from({ length: 46 }).map<DataType>((_, i) => ({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
}));
const App: React.FC = () => {
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
@ -82,7 +79,7 @@ const App: React.FC = () => {
],
};
return <Table rowSelection={rowSelection} columns={columns} dataSource={data} />;
return <Table<DataType> rowSelection={rowSelection} columns={columns} dataSource={dataSource} />;
};
export default App;

34
components/table/demo/row-selection-debug.tsx
View File

@ -4,10 +4,9 @@ import type { TableColumnsType, TableProps } from 'antd';
type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];
const RenderTimes = () => {
const RenderTimes: React.FC = () => {
const timesRef = React.useRef(0);
timesRef.current += 1;
return <span>{timesRef.current}</span>;
};
@ -18,7 +17,7 @@ interface DataType {
address: string;
}
const shouldCellUpdate = (record: any, prevRecord: any) => record !== prevRecord;
const shouldCellUpdate = (record: DataType, prevRecord: DataType) => record !== prevRecord;
const columns: TableColumnsType<DataType> = [
{
@ -44,23 +43,17 @@ const columns: TableColumnsType<DataType> = [
},
];
function genData(count: number) {
const data: DataType[] = [];
for (let i = 0; i < count; i++) {
data.push({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
});
}
return data;
function genData(length: number) {
return Array.from({ length }).map<DataType>((_, i) => ({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
}));
}
const App: React.FC = () => {
const [data, setData] = useState(genData(50));
const [data, setData] = useState<DataType[]>(genData(50));
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
@ -81,7 +74,12 @@ const App: React.FC = () => {
setData(genData(cnt || 0));
}}
/>
<Table rowSelection={rowSelection} columns={columns} dataSource={data} pagination={false} />
<Table<DataType>
rowSelection={rowSelection}
columns={columns}
dataSource={data}
pagination={false}
/>
</>
);
};

20
components/table/demo/row-selection.tsx
View File

@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { Divider, Radio, Table } from 'antd';
import type { TableColumnsType } from 'antd';
import type { TableColumnsType, TableProps } from 'antd';
interface DataType {
key: React.Key;
@ -53,7 +53,7 @@ const data: DataType[] = [
];
// rowSelection object indicates the need for row selection
const rowSelection = {
const rowSelection: TableProps<DataType>['rowSelection'] = {
onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
@ -68,23 +68,13 @@ const App: React.FC = () => {
return (
<div>
<Radio.Group
onChange={({ target: { value } }) => {
setSelectionType(value);
}}
value={selectionType}
>
<Radio.Group onChange={(e) => setSelectionType(e.target.value)} value={selectionType}>
<Radio value="checkbox">Checkbox</Radio>
<Radio value="radio">radio</Radio>
</Radio.Group>
<Divider />
<Table
rowSelection={{
type: selectionType,
...rowSelection,
}}
<Table<DataType>
rowSelection={{ type: selectionType, ...rowSelection }}
columns={columns}
dataSource={data}
/>

2
components/table/demo/selections-debug.tsx
View File

@ -46,7 +46,7 @@ const data: DataType[] = [
];
const App: React.FC = () => (
<Table
<Table<DataType>
bordered
rowSelection={{ type: 'checkbox', selections: true }}
columns={columns}

4
components/table/demo/size.tsx
View File

@ -48,9 +48,9 @@ const data: DataType[] = [
const App: React.FC = () => (
<>
<Divider>Middle size table</Divider>
<Table columns={columns} dataSource={data} size="middle" />
<Table<DataType> columns={columns} dataSource={data} size="middle" />
<Divider>Small size table</Divider>
<Table columns={columns} dataSource={data} size="small" />
<Table<DataType> columns={columns} dataSource={data} size="small" />
</>
);

20
components/table/demo/sticky.tsx
View File

@ -76,23 +76,19 @@ const columns: TableColumnsType<DataType> = [
},
];
const data: DataType[] = [];
for (let i = 0; i < 100; i++) {
data.push({
key: i,
name: `Edward ${i}`,
age: 32,
address: `London Park no. ${i}`,
});
}
const dataSource = Array.from({ length: 100 }).map<DataType>((_, i) => ({
key: i,
name: `Edward ${i}`,
age: 32,
address: `London Park no. ${i}`,
}));
const App: React.FC = () => {
const [fixedTop, setFixedTop] = useState(false);
return (
<Table
<Table<DataType>
columns={columns}
dataSource={data}
dataSource={dataSource}
scroll={{ x: 1500 }}
summary={() => (
<Table.Summary fixed={fixedTop ? 'top' : 'bottom'}>

145
components/table/demo/summary.tsx
View File

@ -1,6 +1,24 @@
import React from 'react';
import { Table, Typography } from 'antd';
import { Flex, Table, Typography } from 'antd';
import type { TableColumnsType } from 'antd';
import { createStyles } from 'antd-style';
const useStyle = createStyles(({ css, token }) => {
const { antCls } = token;
return {
customTable: css`
${antCls}-table {
${antCls}-table-container {
${antCls}-table-body,
${antCls}-table-content {
scrollbar-width: thin;
scrollbar-color: unset;
}
}
}
`,
};
});
const { Text } = Typography;
@ -32,7 +50,7 @@ const columns: TableColumnsType<DataType> = [
},
];
const data: DataType[] = [
const dataSource: DataType[] = [
{
key: '1',
name: 'John Brown',
@ -72,71 +90,68 @@ const fixedColumns: TableColumnsType<FixedDataType> = [
},
];
const fixedData: FixedDataType[] = [];
for (let i = 0; i < 20; i += 1) {
fixedData.push({
key: i,
name: ['Light', 'Bamboo', 'Little'][i % 3],
description: 'Everything that has a beginning, has an end.',
});
}
const fixedDataSource = Array.from({ length: 20 }).map<FixedDataType>((_, i) => ({
key: i,
name: ['Light', 'Bamboo', 'Little'][i % 3],
description: 'Everything that has a beginning, has an end.',
}));
const App: React.FC = () => (
<>
<Table
columns={columns}
dataSource={data}
pagination={false}
bordered
summary={(pageData) => {
let totalBorrow = 0;
let totalRepayment = 0;
pageData.forEach(({ borrow, repayment }) => {
totalBorrow += borrow;
totalRepayment += repayment;
});
return (
<>
const App: React.FC = () => {
const { styles } = useStyle();
return (
<Flex vertical gap="small">
<Table<DataType>
bordered
className={styles.customTable}
columns={columns}
dataSource={dataSource}
pagination={false}
summary={(pageData) => {
let totalBorrow = 0;
let totalRepayment = 0;
pageData.forEach(({ borrow, repayment }) => {
totalBorrow += borrow;
totalRepayment += repayment;
});
return (
<>
<Table.Summary.Row>
<Table.Summary.Cell index={0}>Total</Table.Summary.Cell>
<Table.Summary.Cell index={1}>
<Text type="danger">{totalBorrow}</Text>
</Table.Summary.Cell>
<Table.Summary.Cell index={2}>
<Text>{totalRepayment}</Text>
</Table.Summary.Cell>
</Table.Summary.Row>
<Table.Summary.Row>
<Table.Summary.Cell index={0}>Balance</Table.Summary.Cell>
<Table.Summary.Cell index={1} colSpan={2}>
<Text type="danger">{totalBorrow - totalRepayment}</Text>
</Table.Summary.Cell>
</Table.Summary.Row>
</>
);
}}
/>
<Table<FixedDataType>
className={styles.customTable}
columns={fixedColumns}
dataSource={fixedDataSource}
pagination={false}
scroll={{ x: 2000, y: 500 }}
bordered
summary={() => (
<Table.Summary fixed>
<Table.Summary.Row>
<Table.Summary.Cell index={0}>Total</Table.Summary.Cell>
<Table.Summary.Cell index={1}>
<Text type="danger">{totalBorrow}</Text>
</Table.Summary.Cell>
<Table.Summary.Cell index={2}>
<Text>{totalRepayment}</Text>
</Table.Summary.Cell>
<Table.Summary.Cell index={0}>Summary</Table.Summary.Cell>
<Table.Summary.Cell index={1}>This is a summary content</Table.Summary.Cell>
</Table.Summary.Row>
<Table.Summary.Row>
<Table.Summary.Cell index={0}>Balance</Table.Summary.Cell>
<Table.Summary.Cell index={1} colSpan={2}>
<Text type="danger">{totalBorrow - totalRepayment}</Text>
</Table.Summary.Cell>
</Table.Summary.Row>
</>
);
}}
/>
<br />
<Table
columns={fixedColumns}
dataSource={fixedData}
pagination={false}
scroll={{ x: 2000, y: 500 }}
bordered
summary={() => (
<Table.Summary fixed>
<Table.Summary.Row>
<Table.Summary.Cell index={0}>Summary</Table.Summary.Cell>
<Table.Summary.Cell index={1}>This is a summary content</Table.Summary.Cell>
</Table.Summary.Row>
</Table.Summary>
)}
/>
</>
);
</Table.Summary>
)}
/>
</Flex>
);
};
export default App;

2
components/table/demo/tree-data.tsx
View File

@ -118,7 +118,7 @@ const App: React.FC = () => {
<Space align="center" style={{ marginBottom: 16 }}>
CheckStrictly: <Switch checked={checkStrictly} onChange={setCheckStrictly} />
</Space>
<Table
<Table<DataType>
columns={columns}
rowSelection={{ ...rowSelection, checkStrictly }}
dataSource={data}

2
components/table/demo/tree-table-ellipsis.tsx
View File

@ -105,7 +105,7 @@ const App: React.FC = () => {
<Space align="center" style={{ marginBottom: 16 }}>
Fixed first column: <Switch checked={fixed} onChange={setFixed} />
</Space>
<Table
<Table<DataType>
columns={columns}
rowSelection={{ columnWidth: 100 }}
expandable={{ defaultExpandAllRows: true }}

47
components/table/demo/tree-table-preserveSelectedRowKeys.tsx
View File

@ -32,29 +32,26 @@ const columns: TableColumnsType<DataType> = [
},
];
const data: DataType[] = [];
for (let i = 0; i < 15; i++) {
data.push({
key: `key${i}`,
name: `Edward ${i}`,
age: 32,
address: `London Park no. ${i}`,
children: [
{
key: `subKey${i}1`,
name: 'Brown',
age: 16,
address: 'New York No. 3 Lake Park',
},
{
key: `subKey${i}2`,
name: 'Jimmy',
age: 16,
address: 'New York No. 3 Lake Park',
},
],
});
}
const dataSource = Array.from({ length: 15 }).map<DataType>((_, i) => ({
key: `key${i}`,
name: `Edward ${i}`,
age: 32,
address: `London Park no. ${i}`,
children: [
{
key: `subKey${i}1`,
name: 'Brown',
age: 16,
address: 'New York No. 3 Lake Park',
},
{
key: `subKey${i}2`,
name: 'Jimmy',
age: 16,
address: 'New York No. 3 Lake Park',
},
],
}));
// rowSelection objects indicates the need for row selection
const rowSelection: TableRowSelection<DataType> = {
@ -80,10 +77,10 @@ const App: React.FC = () => {
preserveSelectedRowKeys:{' '}
<Switch checked={preserveSelectedRowKeys} onChange={setPreserveSelectedRowKeys} />
</Space>
<Table
<Table<DataType>
columns={columns}
rowSelection={{ ...rowSelection, checkStrictly, preserveSelectedRowKeys }}
dataSource={data}
dataSource={dataSource}
pagination={{ defaultPageSize: 5 }}
/>
</>

44
components/table/demo/virtual-list.tsx
View File

@ -92,8 +92,8 @@ const columns: TableProps<RecordType>['columns'] = [
},
];
const getData = (count: number) => {
const data: RecordType[] = new Array(count).fill(null).map((_, index) => ({
const getData = (length: number) =>
Array.from({ length }).map<RecordType>((_, index) => ({
id: index,
firstName: `First_${index.toString(16)}`,
lastName: `Last_${index.toString(16)}`,
@ -103,10 +103,7 @@ const getData = (count: number) => {
address3: `Sydney No. ${index} Lake Park`,
}));
return data;
};
const App = () => {
const App: React.FC = () => {
const [fixed, setFixed] = React.useState(true);
const [bordered, setBordered] = React.useState(true);
const [expanded, setExpanded] = React.useState(false);
@ -114,7 +111,8 @@ const App = () => {
const [count, setCount] = React.useState(10000);
const tblRef: Parameters<typeof Table>[0]['ref'] = React.useRef(null);
const data = React.useMemo(() => getData(count), [count]);
const data = React.useMemo<RecordType[]>(() => getData(count), [count]);
const mergedColumns = React.useMemo<typeof fixedColumns>(() => {
if (!fixed) {
@ -172,33 +170,20 @@ const App = () => {
value={count}
onChange={(value: number) => setCount(value)}
options={[
{
label: 'None',
value: 0,
},
{
label: 'Less',
value: 4,
},
{
label: 'Lot',
value: 10000,
},
{ label: 'None', value: 0 },
{ label: 'Less', value: 4 },
{ label: 'Lot', value: 10000 },
]}
/>
{data.length >= 999 && (
<Button
onClick={() => {
tblRef.current?.scrollTo({ index: 999 });
}}
>
<Button onClick={() => tblRef.current?.scrollTo({ index: 999 })}>
Scroll To index 999
</Button>
)}
</Space>
<Table
<Table<RecordType>
bordered={bordered}
virtual
columns={mergedColumns}
@ -207,14 +192,7 @@ const App = () => {
dataSource={empty ? [] : data}
pagination={false}
ref={tblRef}
rowSelection={
expanded
? undefined
: {
type: 'radio',
columnWidth: 48,
}
}
rowSelection={expanded ? undefined : { type: 'radio', columnWidth: 48 }}
expandable={expandableProps}
/>
</Space>

2
components/transfer/demo/component-token.tsx
View File

@ -82,7 +82,7 @@ const TableTransfer = ({ leftColumns, rightColumns, ...restProps }: TableTransfe
const mockTags = ['cat', 'dog', 'bird'];
const mockData: RecordType[] = Array.from({ length: 20 }).map((_, i) => ({
const mockData = Array.from({ length: 20 }).map<RecordType>((_, i) => ({
key: i.toString(),
title: `content${i + 1}`,
description: `description of content${i + 1}`,

2
components/transfer/demo/custom-select-all-labels.tsx
View File

@ -8,7 +8,7 @@ interface RecordType {
description: string;
}
const mockData: RecordType[] = Array.from({ length: 10 }).map((_, i) => ({
const mockData = Array.from({ length: 10 }).map<RecordType>((_, i) => ({
key: i.toString(),
title: `content${i + 1}`,
description: `description of content${i + 1}`,

2
components/transfer/demo/oneWay.tsx
View File

@ -9,7 +9,7 @@ interface RecordType {
disabled: boolean;
}
const mockData: RecordType[] = Array.from({ length: 20 }).map((_, i) => ({
const mockData = Array.from({ length: 20 }).map<RecordType>((_, i) => ({
key: i.toString(),
title: `content${i + 1}`,
description: `description of content${i + 1}`,

114
package.json
View File

@ -110,11 +110,11 @@
],
"dependencies": {
"@ant-design/colors": "^7.1.0",
"@ant-design/cssinjs": "^1.21.0",
"@ant-design/cssinjs-utils": "^1.0.3",
"@ant-design/cssinjs": "^1.21.1",
"@ant-design/cssinjs-utils": "^1.1.0",
"@ant-design/icons": "^5.4.0",
"@ant-design/react-slick": "~1.1.2",
"@babel/runtime": "^7.24.8",
"@babel/runtime": "^7.25.6",
"@ctrl/tinycolor": "^3.6.1",
"@rc-component/color-picker": "~2.0.1",
"@rc-component/mutate-observer": "^1.1.0",
@ -123,7 +123,7 @@
"@rc-component/trigger": "^2.2.3",
"classnames": "^2.5.1",
"copy-to-clipboard": "^3.3.3",
"dayjs": "^1.11.11",
"dayjs": "^1.11.13",
"rc-cascader": "~3.28.1",
"rc-checkbox": "~3.3.0",
"rc-collapse": "~3.8.0",
@ -134,7 +134,7 @@
"rc-image": "~7.11.0",
"rc-input": "~1.6.3",
"rc-input-number": "~9.2.0",
"rc-mentions": "~2.16.0",
"rc-mentions": "~2.16.1",
"rc-menu": "~9.15.1",
"rc-motion": "^2.9.2",
"rc-notification": "~5.6.0",
@ -148,7 +148,7 @@
"rc-slider": "~11.1.5",
"rc-steps": "~6.0.1",
"rc-switch": "~4.1.0",
"rc-table": "~7.47.3",
"rc-table": "~7.47.5",
"rc-tabs": "~15.2.0",
"rc-textarea": "~1.8.1",
"rc-tooltip": "~6.2.0",
@ -164,29 +164,29 @@
"@ant-design/happy-work-theme": "^1.0.0",
"@ant-design/tools": "^18.0.2",
"@antv/g6": "^4.8.24",
"@babel/eslint-plugin": "^7.24.7",
"@biomejs/biome": "^1.8.3",
"@codecov/webpack-plugin": "^0.0.1-beta.10",
"@codesandbox/sandpack-react": "^2.18.0",
"@babel/eslint-plugin": "^7.25.1",
"@biomejs/biome": "^1.9.1",
"@codecov/webpack-plugin": "^1.0.1",
"@codesandbox/sandpack-react": "^2.19.8",
"@dnd-kit/core": "^6.1.0",
"@dnd-kit/modifiers": "^7.0.0",
"@dnd-kit/sortable": "^8.0.0",
"@dnd-kit/utilities": "^3.2.2",
"@emotion/css": "^11.11.2",
"@emotion/react": "^11.11.4",
"@emotion/css": "^11.13.0",
"@emotion/react": "^11.13.3",
"@emotion/server": "^11.11.0",
"@ianvs/prettier-plugin-sort-imports": "^4.3.1",
"@inquirer/prompts": "^5.1.2",
"@inquirer/prompts": "^5.5.0",
"@madccc/duplicate-package-checker-webpack-plugin": "^1.0.0",
"@microflash/rehype-figure": "^2.1.0",
"@microflash/rehype-figure": "^2.1.1",
"@npmcli/run-script": "^8.1.0",
"@octokit/rest": "^21.0.0",
"@octokit/rest": "^21.0.2",
"@qixian.cs/github-contributors-list": "^2.0.2",
"@size-limit/file": "^11.1.4",
"@size-limit/file": "^11.1.5",
"@stackblitz/sdk": "^1.11.0",
"@testing-library/dom": "^10.3.2",
"@testing-library/jest-dom": "^6.4.6",
"@testing-library/react": "^16.0.0",
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^6.5.0",
"@testing-library/react": "^16.0.1",
"@testing-library/user-event": "^14.5.2",
"@types/adm-zip": "^0.5.5",
"@types/ali-oss": "^6.16.11",
@ -195,22 +195,22 @@
"@types/gtag.js": "^0.0.20",
"@types/http-server": "^0.12.4",
"@types/isomorphic-fetch": "^0.0.39",
"@types/jest": "^29.5.12",
"@types/jest": "^29.5.13",
"@types/jest-axe": "^3.5.9",
"@types/jest-environment-puppeteer": "^5.0.6",
"@types/jest-image-snapshot": "^6.4.0",
"@types/jquery": "^3.5.30",
"@types/jsdom": "^21.1.7",
"@types/lodash": "^4.17.6",
"@types/lodash": "^4.17.7",
"@types/minimist": "^1.2.5",
"@types/node": "^22.0.0",
"@types/node": "^22.5.5",
"@types/nprogress": "^0.2.3",
"@types/pixelmatch": "^5.2.6",
"@types/pngjs": "^6.0.5",
"@types/prismjs": "^1.26.4",
"@types/progress": "^2.0.7",
"@types/qs": "^6.9.15",
"@types/react": "^18.3.3",
"@types/qs": "^6.9.16",
"@types/react": "^18.3.5",
"@types/react-copy-to-clipboard": "^5.0.7",
"@types/react-dom": "^18.3.0",
"@types/react-highlight-words": "^0.20.0",
@ -220,14 +220,14 @@
"@types/tar": "^6.1.13",
"@types/throttle-debounce": "^5.0.2",
"@types/warning": "^3.0.3",
"@typescript-eslint/eslint-plugin": "^8.0.0",
"@typescript-eslint/parser": "^8.0.0",
"adm-zip": "^0.5.14",
"ali-oss": "^6.20.0",
"antd-img-crop": "^4.22.0",
"antd-style": "^3.6.2",
"@typescript-eslint/eslint-plugin": "^8.5.0",
"@typescript-eslint/parser": "^8.5.0",
"adm-zip": "^0.5.16",
"ali-oss": "^6.21.0",
"antd-img-crop": "^4.23.0",
"antd-style": "^3.6.3",
"antd-token-previewer": "^2.0.8",
"axios": "^1.7.2",
"axios": "^1.7.7",
"chalk": "^4.1.2",
"cheerio": "^1.0.0",
"circular-dependency-plugin": "^5.2.2",
@ -236,19 +236,19 @@
"cross-fetch": "^4.0.0",
"dekko": "^0.2.1",
"dotenv": "^16.4.5",
"dumi": "~2.4.5",
"dumi-plugin-color-chunk": "^1.1.1",
"dumi": "~2.4.10",
"dumi-plugin-color-chunk": "^1.1.2",
"eslint": "^8.57.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^9.1.0",
"eslint-import-resolver-typescript": "^3.6.1",
"eslint-plugin-compat": "^6.0.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jest": "^28.6.0",
"eslint-plugin-jsx-a11y": "^6.8.0",
"eslint-import-resolver-typescript": "^3.6.3",
"eslint-plugin-compat": "^6.0.1",
"eslint-plugin-import": "^2.30.0",
"eslint-plugin-jest": "^28.8.3",
"eslint-plugin-jsx-a11y": "^6.10.0",
"eslint-plugin-lodash": "^7.4.0",
"eslint-plugin-markdown": "^5.1.0",
"eslint-plugin-react": "^7.34.4",
"eslint-plugin-react": "^7.36.1",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-unicorn": "^55.0.0",
"fast-glob": "^3.3.2",
@ -258,7 +258,7 @@
"glob": "^11.0.0",
"html2sketch": "^1.0.2",
"http-server": "^14.1.1",
"husky": "^9.1.2",
"husky": "^9.1.6",
"identity-obj-proxy": "^3.0.0",
"immer": "^10.1.1",
"is-ci": "^3.0.1",
@ -269,12 +269,12 @@
"jest-environment-jsdom": "^29.7.0",
"jest-environment-node": "^29.7.0",
"jest-image-snapshot": "^6.4.0",
"jest-puppeteer": "^10.0.1",
"jest-puppeteer": "^10.1.1",
"jquery": "^3.7.1",
"jsdom": "^25.0.0",
"jsonml-to-react-element": "^1.1.11",
"jsonml.js": "^0.1.0",
"lint-staged": "^15.2.7",
"lint-staged": "^15.2.10",
"lodash": "^4.17.21",
"lunar-typescript": "^1.7.5",
"lz-string": "^1.5.0",
@ -284,7 +284,7 @@
"node-notifier": "^10.0.1",
"nprogress": "^0.2.0",
"open": "^10.1.0",
"ora": "^8.0.1",
"ora": "^8.1.0",
"p-all": "^5.0.0",
"pixelmatch": "^6.0.0",
"pngjs": "^7.0.0",
@ -292,8 +292,8 @@
"prettier-plugin-jsdoc": "^1.3.0",
"pretty-format": "^29.7.0",
"prismjs": "^1.29.0",
"puppeteer": "^23.0.0",
"qs": "^6.12.3",
"puppeteer": "^23.3.0",
"qs": "^6.13.0",
"rc-footer": "^0.6.8",
"rc-tween-one": "^3.0.6",
"rc-virtual-list": "^3.14.5",
@ -305,9 +305,9 @@
"react-fast-marquee": "^1.6.5",
"react-highlight-words": "^0.20.0",
"react-infinite-scroll-component": "^6.1.0",
"react-intersection-observer": "^9.13.0",
"react-intersection-observer": "^9.13.1",
"react-resizable": "^3.0.5",
"react-router-dom": "^6.24.1",
"react-router-dom": "^6.26.2",
"react-sticky-box": "^2.0.5",
"regenerator-runtime": "^0.14.1",
"rehype-stringify": "^10.0.0",
@ -320,21 +320,21 @@
"remark-rehype": "^11.1.0",
"rimraf": "^6.0.1",
"runes2": "^1.1.4",
"semver": "^7.6.2",
"sharp": "^0.33.4",
"simple-git": "^3.25.0",
"size-limit": "^11.1.4",
"semver": "^7.6.3",
"sharp": "^0.33.5",
"simple-git": "^3.26.0",
"size-limit": "^11.1.5",
"spinnies": "^0.5.1",
"sylvanas": "^0.6.1",
"tar": "^7.4.0",
"tar-fs": "^3.0.6",
"terser": "^5.31.2",
"terser": "^5.32.0",
"tsx": "4.11.2",
"typedoc": "^0.26.4",
"typescript": "~5.5.3",
"vanilla-jsoneditor": "^0.23.7",
"typedoc": "^0.26.7",
"typescript": "~5.6.2",
"vanilla-jsoneditor": "^0.23.8",
"vanilla-tilt": "^1.8.1",
"webpack": "^5.93.0",
"webpack": "^5.94.0",
"webpack-bundle-analyzer": "^4.10.2",
"xhr-mock": "^2.5.1"
},
@ -353,7 +353,7 @@
},
{
"path": "./dist/antd-with-locales.min.js",
"limit": "510 KiB",
"limit": "600 KiB",
"gzip": true
}
],