mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
Merge pull request #47771 from ant-design/master
chore: merge master into feature
This commit is contained in:
lijianan
GitHub
commit
5f1ac6c095
@ -30,10 +30,6 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
}
|
||||
}
|
||||
|
||||
${antCls}-tabs-nav::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
@ -121,6 +117,8 @@ const Articles: React.FC<{ data: Partial<SiteData> }> = ({ data }) => {
|
||||
|
||||
return (
|
||||
<Tabs
|
||||
centered
|
||||
size="large"
|
||||
items={yearList.map((year) => ({
|
||||
key: year,
|
||||
label: `${year}${isZhCN ? ' 年' : ''}`,
|
||||
|
||||
@ -15,13 +15,14 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
height: 100%;
|
||||
color: inherit;
|
||||
list-style: none;
|
||||
border: 1px solid #e6e6e6;
|
||||
border: 1px solid ${token.colorSplit};
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.3s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: ${boxShadowSecondary};
|
||||
color: inherit;
|
||||
}
|
||||
`,
|
||||
image: css`
|
||||
@ -47,13 +48,13 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
`,
|
||||
title: css`
|
||||
margin: 16px 20px 8px;
|
||||
color: #0d1a26;
|
||||
opacity: 0.85;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
`,
|
||||
description: css`
|
||||
margin: 0 20px 20px;
|
||||
color: #697b8c;
|
||||
opacity: 0.65;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
`,
|
||||
|
||||
@ -17,7 +17,7 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 11;
|
||||
z-index: 1001;
|
||||
padding: 0 40px;
|
||||
background: #fff;
|
||||
box-shadow: ${boxShadowSecondary};
|
||||
@ -122,6 +122,8 @@ const AffixTabs: React.FC = () => {
|
||||
<div className={classNames(affixTabs, fixedId && affixTabsFixed)} ref={containerRef}>
|
||||
<Tabs
|
||||
activeKey={fixedId}
|
||||
centered
|
||||
size="large"
|
||||
onChange={scrollToId}
|
||||
items={idsRef.current.map((id) => ({
|
||||
key: id,
|
||||
|
||||
@ -4,6 +4,7 @@ import { ConfigProvider, Layout, Typography } from 'antd';
|
||||
import { createStyles } from 'antd-style';
|
||||
import { FormattedMessage, useRouteMeta } from 'dumi';
|
||||
|
||||
import useDark from '../../../hooks/useDark';
|
||||
import CommonHelmet from '../../common/CommonHelmet';
|
||||
import EditButton from '../../common/EditButton';
|
||||
import Footer from '../../slots/Footer';
|
||||
@ -15,8 +16,13 @@ const resourcePadding = 40;
|
||||
const articleMaxWidth = 1208;
|
||||
const resourcePaddingXS = 24;
|
||||
|
||||
const useStyle = createStyles(({ token, css }) => {
|
||||
const useStyle = () => {
|
||||
const isRootDark = useDark();
|
||||
|
||||
return createStyles((config) => {
|
||||
const { token, css } = config;
|
||||
const { antCls } = token;
|
||||
|
||||
return {
|
||||
resourcePage: css`
|
||||
footer {
|
||||
@ -37,35 +43,6 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
box-sizing: content-box;
|
||||
min-height: 100vh;
|
||||
|
||||
> .markdown {
|
||||
> p {
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 124px;
|
||||
color: #314659;
|
||||
font-weight: lighter;
|
||||
font-size: 30px;
|
||||
line-height: 38px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 88px;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 56px;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #697b8c;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.99px) {
|
||||
& {
|
||||
article {
|
||||
@ -82,7 +59,11 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
banner: css`
|
||||
padding: 0 ${resourcePadding}px;
|
||||
overflow: hidden;
|
||||
background: url('https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*y_r7RogIG1wAAAAAAAAAAABkARQnAQ');
|
||||
${
|
||||
isRootDark
|
||||
? ``
|
||||
: `background: url('https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*y_r7RogIG1wAAAAAAAAAAABkARQnAQ');`
|
||||
}
|
||||
background-size: cover;
|
||||
|
||||
h1 {
|
||||
@ -107,13 +88,15 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
}
|
||||
`,
|
||||
};
|
||||
});
|
||||
})();
|
||||
};
|
||||
|
||||
const ResourceLayout: React.FC<ResourceLayoutProps> = ({ children }) => {
|
||||
const { styles } = useStyle();
|
||||
const meta = useRouteMeta();
|
||||
return (
|
||||
<ConfigProvider theme={{ token: { colorBgLayout: '#fff' } }}>
|
||||
const isRootDark = useDark();
|
||||
|
||||
const node = (
|
||||
<Layout>
|
||||
<CommonHelmet />
|
||||
<div id="resources-page" className={styles.resourcePage}>
|
||||
@ -132,8 +115,13 @@ const ResourceLayout: React.FC<ResourceLayoutProps> = ({ children }) => {
|
||||
<Footer />
|
||||
</div>
|
||||
</Layout>
|
||||
</ConfigProvider>
|
||||
);
|
||||
|
||||
if (!isRootDark) {
|
||||
return <ConfigProvider theme={{ token: { colorBgLayout: '#fff' } }}>{node}</ConfigProvider>;
|
||||
}
|
||||
|
||||
return node;
|
||||
};
|
||||
|
||||
export default ResourceLayout;
|
||||
|
||||
@ -51,5 +51,6 @@
|
||||
"5.12.3": ["https://github.com/ant-design/ant-design/issues/46525"],
|
||||
"5.12.6": ["https://github.com/ant-design/ant-design/issues/46719"],
|
||||
"5.13.0": ["https://github.com/ant-design/ant-design/pull/46962"],
|
||||
"5.14.0": ["https://github.com/ant-design/ant-design/issues/47354"]
|
||||
"5.14.0": ["https://github.com/ant-design/ant-design/issues/47354"],
|
||||
"5.15.0": ["https://github.com/ant-design/ant-design/pull/47504#issuecomment-1980459433"]
|
||||
}
|
||||
|
||||
@ -16,6 +16,46 @@ tag: vVERSION
|
||||
|
||||
---
|
||||
|
||||
## 5.15.1
|
||||
|
||||
`2024-03-06`
|
||||
|
||||
- 🐞 Revert code that removed margin of Tag. [#47736](https://github.com/ant-design/ant-design/pull/47736)
|
||||
- 🇷🇺 Improve DatePicker ru_RU locale. [#47705](https://github.com/ant-design/ant-design/pull/47705)
|
||||
|
||||
## 5.15.0
|
||||
|
||||
`2024-03-02`
|
||||
|
||||
- ConfigProvider
|
||||
- 🆕 ConfigProvider support Input.TextArea `allowClear` `autoComplete` `className` `style` `classNames` `styles` props. [#47589](https://github.com/ant-design/ant-design/pull/47589)
|
||||
- 🆕 ConfigProvider support Input `allowClear` props. [#47602](https://github.com/ant-design/ant-design/pull/47602)
|
||||
- 🆕 ConfigProvider support Menu `expandIcon` props. [#47561](https://github.com/ant-design/ant-design/pull/47561)
|
||||
- 🆕 ConfigProvider support Collapse `expandIcon` props. [#47473](https://github.com/ant-design/ant-design/pull/47473)
|
||||
- 🆕 ConfigProvider support Tabs `removeIcon` props, when set `type="editable-card"`. [#47334](https://github.com/ant-design/ant-design/pull/47334)
|
||||
- 🆕 Prefixes for CSS variables follow the `prefixCls` property of ConfigProvider by default. [#47481](https://github.com/ant-design/ant-design/pull/47481)
|
||||
- 🤖 CardProps `styles` in ConfigProvider is set to optional. [#47601](https://github.com/ant-design/ant-design/pull/47601) [@Yawenina](https://github.com/Yawenina)
|
||||
- 🆕 Select、Checkbox、Radio、DatePicker、TreeSelect、Cascader the `focus` supports passing `options`. [#47664](https://github.com/ant-design/ant-design/pull/47664)
|
||||
- 🆕 Modal support configuring `aria-*` in `closable`. [#47650](https://github.com/ant-design/ant-design/pull/47650)
|
||||
- 🆕 Alert support configuring `aria-*` in `closable`. [#47474](https://github.com/ant-design/ant-design/pull/47474)
|
||||
- 🆕 Tabs support `removeIcon` props, when set `type="editable-card"`. [#47334](https://github.com/ant-design/ant-design/pull/47334)
|
||||
- Drawer
|
||||
- 🆕 Drawer support configuring `aria-*` in `closable`. [#47543](https://github.com/ant-design/ant-design/pull/47543)
|
||||
- 🆕 Drawer support passing `aria-*` attributes to panel nodes. [#47387](https://github.com/ant-design/ant-design/pull/47387)
|
||||
- Table
|
||||
- 🆕 Table adds `filterOnClose` to specify whether to trigger filtering when the filter menu is closed. [#47451](https://github.com/ant-design/ant-design/pull/47451) [@xsjcTony](https://github.com/xsjcTony)
|
||||
- 🆕 Table adds `components.header.table` to customize the header component when scrolling the column. [#47382](https://github.com/ant-design/ant-design/pull/47382)
|
||||
- 🐞 Fix the issue where scroll bars would not be displayed during initial rendering under Table `sticky`. [#47382](https://github.com/ant-design/ant-design/pull/47382)
|
||||
- 🐞 Fix the issue where the `th` element is not used in the column header when Table `column.title` is empty. [#47382](https://github.com/ant-design/ant-design/pull/47382)
|
||||
- 🐞 Fix the issue where `prefixCls` is invalid when Table uses a virtual list. [#47639](https://github.com/ant-design/ant-design/pull/47639)
|
||||
- 💄 Fix abnormal shadow display when Table fixed columns. [#47518](https://github.com/ant-design/ant-design/pull/47518)
|
||||
- 🐞 Fix the issue where when using DirectoryTree in Tree, pressing shift for continuous multi-selection will report an error. [#47567](https://github.com/ant-design/ant-design/pull/47567) [@wkmyws](https://github.com/wkmyws)
|
||||
- 🐞 Fix the issue where `isFieldsTouched(true)` always returns `false` when Form exists in Form.List. [#47629](https://github.com/ant-design/ant-design/pull/47629) [@lemonied](https://github.com/lemonied)
|
||||
- 🐞 Fix the issue of Button being incompatible with v4 `type=''`. [#47612](https://github.com/ant-design/ant-design/pull/47612)
|
||||
- 🛠 Refactor Typography to omit measurement logic to support dynamic row height scenarios. [#47597](https://github.com/ant-design/ant-design/pull/47597)
|
||||
- 💄 Remove redundant margin styles from Tag. [#47504](https://github.com/ant-design/ant-design/pull/47504)
|
||||
- 🤖 MISC: fix an issue that could not be compiled under pnpm configuration `hoist: false`. [#47587](https://github.com/ant-design/ant-design/pull/47587)
|
||||
|
||||
## 5.14.2
|
||||
|
||||
`2024-02-23`
|
||||
|
||||
@ -16,6 +16,46 @@ tag: vVERSION
|
||||
|
||||
---
|
||||
|
||||
## 5.15.1
|
||||
|
||||
`2024-03-06`
|
||||
|
||||
- 🐞 回滚移除 Tag 默认间距的代码。[#47736](https://github.com/ant-design/ant-design/pull/47736)
|
||||
- 🇷🇺 更新 DatePicker 的俄语文案。[#47705](https://github.com/ant-design/ant-design/pull/47705)
|
||||
|
||||
## 5.15.0
|
||||
|
||||
`2024-03-02`
|
||||
|
||||
- ConfigProvider
|
||||
- 🆕 ConfigProvider 支持 Input.TextArea 组件 `allowClear`、`autoComplete`、`className`、`style`、`classNames`、`styles` 属性。[#47589](https://github.com/ant-design/ant-design/pull/47589)
|
||||
- 🆕 ConfigProvider 支持 Input 组件 `allowClear` 属性。[#47602](https://github.com/ant-design/ant-design/pull/47602)
|
||||
- 🆕 ConfigProvider 支持 Menu 组件 `expandIcon` 属性。[#47561](https://github.com/ant-design/ant-design/pull/47561)
|
||||
- 🆕 ConfigProvider 支持 Collapse 组件 `expandIcon` 属性。[#47473](https://github.com/ant-design/ant-design/pull/47473)
|
||||
- 🆕 ConfigProvider 支持 Tabs `removeIcon` 属性, 在设置 `type="editable-card"` 时有效。[#47334](https://github.com/ant-design/ant-design/pull/47334)
|
||||
- 🆕 CSS 变量的前缀默认跟随 ConfigProvider 的 `prefixCls` 属性。[#47481](https://github.com/ant-design/ant-design/pull/47481)
|
||||
- 🤖 ConfigProvider 中 CardProps `styles` 设为可选。[#47601](https://github.com/ant-design/ant-design/pull/47601) [@Yawenina](https://github.com/Yawenina)
|
||||
- 🆕 Select、Checkbox、Radio、DatePicker、TreeSelect、Cascader 支持 `focus` 功能支持传递 `options`。[#47664](https://github.com/ant-design/ant-design/pull/47664)
|
||||
- 🆕 Modal 支持在 `closable` 中配置 `aria-*`。[#47650](https://github.com/ant-design/ant-design/pull/47650)
|
||||
- 🆕 Alert 支持在 `closable` 中配置 `aria-*`。[#47474](https://github.com/ant-design/ant-design/pull/47474)
|
||||
- 🆕 Tabs 组件支持 `removeIcon` 属性，在设置 `type="editable-card"` 时有效。[#47334](https://github.com/ant-design/ant-design/pull/47334)
|
||||
- Drawer
|
||||
- 🆕 Drawer 支持在 `closable` 中配置 `aria-*`。[#47543](https://github.com/ant-design/ant-design/pull/47543)
|
||||
- 🆕 Drawer 支持传递 `aria-*` 属性给 panel 节点。[#47387](https://github.com/ant-design/ant-design/pull/47387)
|
||||
- Table
|
||||
- 🆕 Table 新增 `filterOnClose` 用于指定是否在筛选菜单关闭时触发筛选。[#47451](https://github.com/ant-design/ant-design/pull/47451) [@xsjcTony](https://github.com/xsjcTony)
|
||||
- 🆕 Table 新增 `components.header.table` 以自定义滚动列时的标题组件。[#47382](https://github.com/ant-design/ant-design/pull/47382)
|
||||
- 🐞 修复 Table `sticky` 下，初次渲染不会显示滚动条的问题。[#47382](https://github.com/ant-design/ant-design/pull/47382)
|
||||
- 🐞 修复 Table `column.title` 为空时列头没有使用 `th` 元素的问题。[#47382](https://github.com/ant-design/ant-design/pull/47382)
|
||||
- 🐞 修复 Table 使用虚拟列表时 `prefixCls` 无效的问题。[#47639](https://github.com/ant-design/ant-design/pull/47639)
|
||||
- 💄 修复 Table 固定列时阴影展示异常的问题。[#47518](https://github.com/ant-design/ant-design/pull/47518)
|
||||
- 🐞 修复 Tree 使用 DirectoryTree 时，按住 shift 连续多选报错的问题。[#47567](https://github.com/ant-design/ant-design/pull/47567) [@wkmyws](https://github.com/wkmyws)
|
||||
- 🐞 修复 Form 存在 Form.List 时，`isFieldsTouched(true)` 始终会返回 `false` 的问题。[#47629](https://github.com/ant-design/ant-design/pull/47629) [@lemonied](https://github.com/lemonied)
|
||||
- 🐞 修复 Button 不兼容 v4 `type=''` 的问题。[#47612](https://github.com/ant-design/ant-design/pull/47612)
|
||||
- 🛠 重构 Typography 省略测量逻辑以支持动态行高的场景。[#47597](https://github.com/ant-design/ant-design/pull/47597)
|
||||
- 💄 移除 Tag 组件多余的 margin 样式。[#47504](https://github.com/ant-design/ant-design/pull/47504)
|
||||
- 🤖 杂项：修复不能在 pnpm 配置 `hoist: false` 下编译的问题。[#47587](https://github.com/ant-design/ant-design/pull/47587)
|
||||
|
||||
## 5.14.2
|
||||
|
||||
`2024-02-23`
|
||||
|
||||
@ -1,22 +1,20 @@
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
import { AutoComplete } from 'antd';
|
||||
import type { DefaultOptionType } from 'antd/es/select';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [options, setOptions] = useState<{ value: string; label: string }[]>([]);
|
||||
|
||||
const [options, setOptions] = React.useState<DefaultOptionType[]>([]);
|
||||
const handleSearch = (value: string) => {
|
||||
let res: { value: string; label: string }[] = [];
|
||||
if (!value || value.indexOf('@') >= 0) {
|
||||
res = [];
|
||||
} else {
|
||||
res = ['gmail.com', '163.com', 'qq.com'].map((domain) => ({
|
||||
value: `${value}@${domain}`,
|
||||
label: `${value}@${domain}`,
|
||||
}));
|
||||
setOptions(() => {
|
||||
if (!value || value.includes('@')) {
|
||||
return [];
|
||||
}
|
||||
setOptions(res);
|
||||
return ['gmail.com', '163.com', 'qq.com'].map<DefaultOptionType>((domain) => ({
|
||||
label: `${value}@${domain}`,
|
||||
value: `${value}@${domain}`,
|
||||
}));
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<AutoComplete
|
||||
style={{ width: 200 }}
|
||||
|
||||
@ -55,7 +55,7 @@ const genClearStyle = (
|
||||
size: number,
|
||||
extraStyle?: CSSObject,
|
||||
): CSSObject => {
|
||||
const { componentCls, borderRadiusSM, lineWidth, colorSplit, red6 } = token;
|
||||
const { componentCls, borderRadiusSM, lineWidth, colorSplit, colorBorder, red6 } = token;
|
||||
|
||||
return {
|
||||
[`${componentCls}-clear`]: {
|
||||
@ -65,6 +65,9 @@ const genClearStyle = (
|
||||
border: `${unit(lineWidth)} solid ${colorSplit}`,
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.motionDurationFast}`,
|
||||
|
||||
...extraStyle,
|
||||
'&::after': {
|
||||
content: '""',
|
||||
@ -78,6 +81,10 @@ const genClearStyle = (
|
||||
transform: 'rotate(-45deg)',
|
||||
backgroundColor: red6,
|
||||
},
|
||||
|
||||
'&:hover': {
|
||||
borderColor: colorBorder,
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
@ -16,6 +16,8 @@ const locale: PickerLocale = {
|
||||
rangeYearPlaceholder: ['Начальный год', 'Год окончания'],
|
||||
rangeMonthPlaceholder: ['Начальный месяц', 'Конечный месяц'],
|
||||
rangeWeekPlaceholder: ['Начальная неделя', 'Конечная неделя'],
|
||||
shortWeekDays: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
|
||||
shortMonths: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
|
||||
...CalendarLocale,
|
||||
},
|
||||
timePickerLocale: {
|
||||
|
||||
@ -357,7 +357,7 @@ describe('Descriptions', () => {
|
||||
</Descriptions>,
|
||||
);
|
||||
|
||||
const nestDesc = container.querySelectorAll('.ant-descriptions')?.[1];
|
||||
const nestDesc = container.querySelectorAll('.ant-descriptions')[1];
|
||||
const view = nestDesc.querySelector('.ant-descriptions-view');
|
||||
expect(getComputedStyle(view!).border).toBeFalsy();
|
||||
});
|
||||
|
||||
@ -59,7 +59,6 @@ const genBorderedStyle = (token: DescriptionsToken): CSSObject => {
|
||||
border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
|
||||
'> table': {
|
||||
tableLayout: 'auto',
|
||||
borderCollapse: 'collapse',
|
||||
},
|
||||
[`${componentCls}-row`]: {
|
||||
borderBottom: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
|
||||
@ -140,6 +139,7 @@ const genDescriptionStyles: GenerateStyle<DescriptionsToken> = (token) => {
|
||||
table: {
|
||||
width: '100%',
|
||||
tableLayout: 'fixed',
|
||||
borderCollapse: 'collapse',
|
||||
},
|
||||
},
|
||||
[`${componentCls}-row`]: {
|
||||
@ -155,7 +155,7 @@ const genDescriptionStyles: GenerateStyle<DescriptionsToken> = (token) => {
|
||||
fontWeight: 'normal',
|
||||
fontSize: token.fontSize,
|
||||
lineHeight: token.lineHeight,
|
||||
textAlign: `start`,
|
||||
textAlign: 'start',
|
||||
|
||||
'&::after': {
|
||||
content: '":"',
|
||||
|
||||
@ -1,13 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Button, Checkbox, Form, Input } from 'antd';
|
||||
|
||||
const onFinish = (values: any) => {
|
||||
console.log('Success:', values);
|
||||
};
|
||||
|
||||
const onFinishFailed = (errorInfo: any) => {
|
||||
console.log('Failed:', errorInfo);
|
||||
};
|
||||
import { Button, Checkbox, Form, type FormProps, Input } from 'antd';
|
||||
|
||||
type FieldType = {
|
||||
username?: string;
|
||||
@ -15,6 +7,14 @@ type FieldType = {
|
||||
remember?: string;
|
||||
};
|
||||
|
||||
const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
|
||||
console.log('Success:', values);
|
||||
};
|
||||
|
||||
const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo) => {
|
||||
console.log('Failed:', errorInfo);
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Form
|
||||
name="basic"
|
||||
|
||||
@ -281867,7 +281867,7 @@ exports[`Locale Provider should display the text as ru 1`] = `
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
сент.
|
||||
Сен
|
||||
</button>
|
||||
<button
|
||||
class="ant-picker-year-btn"
|
||||
@ -281905,25 +281905,25 @@ exports[`Locale Provider should display the text as ru 1`] = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
пн
|
||||
Пн
|
||||
</th>
|
||||
<th>
|
||||
вт
|
||||
Вт
|
||||
</th>
|
||||
<th>
|
||||
ср
|
||||
Ср
|
||||
</th>
|
||||
<th>
|
||||
чт
|
||||
Чт
|
||||
</th>
|
||||
<th>
|
||||
пт
|
||||
Пт
|
||||
</th>
|
||||
<th>
|
||||
сб
|
||||
Сб
|
||||
</th>
|
||||
<th>
|
||||
вс
|
||||
Вс
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -284086,7 +284086,7 @@ exports[`Locale Provider should display the text as ru 1`] = `
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
сент.
|
||||
Сен
|
||||
</button>
|
||||
<button
|
||||
class="ant-picker-year-btn"
|
||||
@ -284126,25 +284126,25 @@ exports[`Locale Provider should display the text as ru 1`] = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
пн
|
||||
Пн
|
||||
</th>
|
||||
<th>
|
||||
вт
|
||||
Вт
|
||||
</th>
|
||||
<th>
|
||||
ср
|
||||
Ср
|
||||
</th>
|
||||
<th>
|
||||
чт
|
||||
Чт
|
||||
</th>
|
||||
<th>
|
||||
пт
|
||||
Пт
|
||||
</th>
|
||||
<th>
|
||||
сб
|
||||
Сб
|
||||
</th>
|
||||
<th>
|
||||
вс
|
||||
Вс
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -284624,7 +284624,7 @@ exports[`Locale Provider should display the text as ru 1`] = `
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
окт.
|
||||
Окт
|
||||
</button>
|
||||
<button
|
||||
class="ant-picker-year-btn"
|
||||
@ -284662,25 +284662,25 @@ exports[`Locale Provider should display the text as ru 1`] = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
пн
|
||||
Пн
|
||||
</th>
|
||||
<th>
|
||||
вт
|
||||
Вт
|
||||
</th>
|
||||
<th>
|
||||
ср
|
||||
Ср
|
||||
</th>
|
||||
<th>
|
||||
чт
|
||||
Чт
|
||||
</th>
|
||||
<th>
|
||||
пт
|
||||
Пт
|
||||
</th>
|
||||
<th>
|
||||
сб
|
||||
Сб
|
||||
</th>
|
||||
<th>
|
||||
вс
|
||||
Вс
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -285719,9 +285719,9 @@ exports[`Locale Provider should display the text as ru 1`] = `
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="сент."
|
||||
title="Сен"
|
||||
>
|
||||
сент.
|
||||
Сен
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@ -285811,25 +285811,25 @@ exports[`Locale Provider should display the text as ru 1`] = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
пн
|
||||
Пн
|
||||
</th>
|
||||
<th>
|
||||
вт
|
||||
Вт
|
||||
</th>
|
||||
<th>
|
||||
ср
|
||||
Ср
|
||||
</th>
|
||||
<th>
|
||||
чт
|
||||
Чт
|
||||
</th>
|
||||
<th>
|
||||
пт
|
||||
Пт
|
||||
</th>
|
||||
<th>
|
||||
сб
|
||||
Сб
|
||||
</th>
|
||||
<th>
|
||||
вс
|
||||
Вс
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@ -104,7 +104,7 @@ demo:
|
||||
| cancelText | 设置 Modal.confirm 取消按钮文字 | string | `取消` | |
|
||||
| centered | 垂直居中展示 Modal | boolean | false | |
|
||||
| className | 容器类名 | string | - | |
|
||||
| closable | 是否显示右上角的关闭按钮 | boolean | false | 4.9.0 |
|
||||
| closable | 是否显示右上角的关闭按钮 | boolean | true | 4.9.0 |
|
||||
| closeIcon | 自定义关闭图标 | ReactNode | undefined | 4.9.0 |
|
||||
| content | 内容 | ReactNode | - | |
|
||||
| footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer: null` | (params:[footerRenderParams](/components/modal-cn#footerrenderparams))=> React.ReactNode \| React.ReactNode | - | 5.9.0 |
|
||||
|
||||
@ -1522,7 +1522,7 @@ exports[`renders components/select/demo/custom-tag-render.tsx extend context cor
|
||||
<span>
|
||||
<span
|
||||
class="ant-tag ant-tag-gold"
|
||||
style="margin-right: 3px;"
|
||||
style="margin-inline-end: 4px;"
|
||||
>
|
||||
gold
|
||||
<span
|
||||
@ -1556,7 +1556,7 @@ exports[`renders components/select/demo/custom-tag-render.tsx extend context cor
|
||||
<span>
|
||||
<span
|
||||
class="ant-tag ant-tag-cyan"
|
||||
style="margin-right: 3px;"
|
||||
style="margin-inline-end: 4px;"
|
||||
>
|
||||
cyan
|
||||
<span
|
||||
@ -6880,9 +6880,9 @@ exports[`renders components/select/demo/optgroup.tsx extend context correctly 1`
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Lucy"
|
||||
title="lucy"
|
||||
>
|
||||
Lucy
|
||||
lucy
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
@ -6901,20 +6901,18 @@ exports[`renders components/select/demo/optgroup.tsx extend context correctly 1`
|
||||
role="presentation"
|
||||
/>
|
||||
<div
|
||||
aria-label="Jack"
|
||||
aria-selected="false"
|
||||
id="rc_select_TEST_OR_SSR_list_1"
|
||||
role="option"
|
||||
>
|
||||
jack
|
||||
Jack
|
||||
</div>
|
||||
<div
|
||||
aria-label="Lucy"
|
||||
aria-selected="true"
|
||||
aria-selected="false"
|
||||
id="rc_select_TEST_OR_SSR_list_2"
|
||||
role="option"
|
||||
>
|
||||
lucy
|
||||
Lucy
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -6932,19 +6930,22 @@ exports[`renders components/select/demo/optgroup.tsx extend context correctly 1`
|
||||
>
|
||||
<div
|
||||
class="ant-select-item ant-select-item-group"
|
||||
title="Manager"
|
||||
title="manager"
|
||||
>
|
||||
Manager
|
||||
<span>
|
||||
manager
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option ant-select-item-option-grouped ant-select-item-option-active"
|
||||
title="Jack"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
<span>
|
||||
Jack
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
@ -6954,14 +6955,15 @@ exports[`renders components/select/demo/optgroup.tsx extend context correctly 1`
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="true"
|
||||
class="ant-select-item ant-select-item-option ant-select-item-option-grouped ant-select-item-option-selected"
|
||||
title="Lucy"
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option ant-select-item-option-grouped"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
<span>
|
||||
Lucy
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
@ -6972,19 +6974,40 @@ exports[`renders components/select/demo/optgroup.tsx extend context correctly 1`
|
||||
</div>
|
||||
<div
|
||||
class="ant-select-item ant-select-item-group"
|
||||
title="Engineer"
|
||||
title="engineer"
|
||||
>
|
||||
Engineer
|
||||
<span>
|
||||
engineer
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option ant-select-item-option-grouped"
|
||||
title="yiminghe"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
yiminghe
|
||||
<span>
|
||||
Chloe
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option ant-select-item-option-grouped"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
<span>
|
||||
Lucas
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
|
||||
@ -718,7 +718,7 @@ exports[`renders components/select/demo/custom-tag-render.tsx correctly 1`] = `
|
||||
<span>
|
||||
<span
|
||||
class="ant-tag ant-tag-gold"
|
||||
style="margin-right:3px"
|
||||
style="margin-inline-end:4px"
|
||||
>
|
||||
gold
|
||||
<span
|
||||
@ -752,7 +752,7 @@ exports[`renders components/select/demo/custom-tag-render.tsx correctly 1`] = `
|
||||
<span>
|
||||
<span
|
||||
class="ant-tag ant-tag-cyan"
|
||||
style="margin-right:3px"
|
||||
style="margin-inline-end:4px"
|
||||
>
|
||||
cyan
|
||||
<span
|
||||
@ -2186,9 +2186,9 @@ exports[`renders components/select/demo/optgroup.tsx correctly 1`] = `
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Lucy"
|
||||
title="lucy"
|
||||
>
|
||||
Lucy
|
||||
lucy
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
|
||||
@ -4,7 +4,12 @@ import type { SelectProps } from 'antd';
|
||||
|
||||
type TagRender = SelectProps['tagRender'];
|
||||
|
||||
const options = [{ value: 'gold' }, { value: 'lime' }, { value: 'green' }, { value: 'cyan' }];
|
||||
const options: SelectProps['options'] = [
|
||||
{ value: 'gold' },
|
||||
{ value: 'lime' },
|
||||
{ value: 'green' },
|
||||
{ value: 'cyan' },
|
||||
];
|
||||
|
||||
const tagRender: TagRender = (props) => {
|
||||
const { label, value, closable, onClose } = props;
|
||||
@ -18,7 +23,7 @@ const tagRender: TagRender = (props) => {
|
||||
onMouseDown={onPreventMouseDown}
|
||||
closable={closable}
|
||||
onClose={onClose}
|
||||
style={{ marginRight: 3 }}
|
||||
style={{ marginInlineEnd: 4 }}
|
||||
>
|
||||
{label}
|
||||
</Tag>
|
||||
|
||||
@ -12,15 +12,20 @@ const App: React.FC = () => (
|
||||
onChange={handleChange}
|
||||
options={[
|
||||
{
|
||||
label: 'Manager',
|
||||
label: <span>manager</span>,
|
||||
title: 'manager',
|
||||
options: [
|
||||
{ label: 'Jack', value: 'jack' },
|
||||
{ label: 'Lucy', value: 'lucy' },
|
||||
{ label: <span>Jack</span>, value: 'Jack' },
|
||||
{ label: <span>Lucy</span>, value: 'Lucy' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Engineer',
|
||||
options: [{ label: 'yiminghe', value: 'Yiminghe' }],
|
||||
label: <span>engineer</span>,
|
||||
title: 'engineer',
|
||||
options: [
|
||||
{ label: <span>Chloe</span>, value: 'Chloe' },
|
||||
{ label: <span>Lucas</span>, value: 'Lucas' },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
@ -155,9 +155,11 @@ Common props ref：[Common props](/docs/react/common-props)
|
||||
### OptGroup props
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| -------- | ----------- | ----------------------- | ------- | ------- |
|
||||
| --------- | ---------------------------------- | --------------- | ------- | ------- |
|
||||
| key | Group key | string | - | |
|
||||
| label | Group label | string \| React.Element | - | |
|
||||
| label | Group label | React.ReactNode | - | |
|
||||
| className | The additional class to option | string | - | |
|
||||
| title | `title` attribute of Select Option | string | - | |
|
||||
|
||||
## Design Token
|
||||
|
||||
|
||||
@ -156,9 +156,11 @@ return (
|
||||
### OptGroup props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ----- | ---- | ----------------------- | ------ | ---- |
|
||||
| --------- | ----------------------- | --------------- | ------ | ---- |
|
||||
| key | Key | string | - | |
|
||||
| label | 组名 | string \| React.Element | - | |
|
||||
| label | 组名 | React.ReactNode | - | |
|
||||
| className | Option 器类名 | string | - | |
|
||||
| title | 选项上的原生 title 提示 | string | - | |
|
||||
|
||||
## 主题变量（Design Token）
|
||||
|
||||
|
||||
@ -17451,14 +17451,14 @@ exports[`renders components/table/demo/jsx.tsx extend context correctly 1`] = `
|
||||
class="ant-table-cell"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-blue"
|
||||
class="ant-tag ant-tag-green"
|
||||
>
|
||||
nice
|
||||
NICE
|
||||
</span>
|
||||
<span
|
||||
class="ant-tag ant-tag-blue"
|
||||
class="ant-tag ant-tag-geekblue"
|
||||
>
|
||||
developer
|
||||
DEVELOPER
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
@ -17512,9 +17512,9 @@ exports[`renders components/table/demo/jsx.tsx extend context correctly 1`] = `
|
||||
class="ant-table-cell"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-blue"
|
||||
class="ant-tag ant-tag-volcano"
|
||||
>
|
||||
loser
|
||||
LOSER
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
@ -17568,14 +17568,14 @@ exports[`renders components/table/demo/jsx.tsx extend context correctly 1`] = `
|
||||
class="ant-table-cell"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-blue"
|
||||
class="ant-tag ant-tag-green"
|
||||
>
|
||||
cool
|
||||
COOL
|
||||
</span>
|
||||
<span
|
||||
class="ant-tag ant-tag-blue"
|
||||
class="ant-tag ant-tag-geekblue"
|
||||
>
|
||||
teacher
|
||||
TEACHER
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
|
||||
@ -14018,14 +14018,14 @@ exports[`renders components/table/demo/jsx.tsx correctly 1`] = `
|
||||
class="ant-table-cell"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-blue"
|
||||
class="ant-tag ant-tag-green"
|
||||
>
|
||||
nice
|
||||
NICE
|
||||
</span>
|
||||
<span
|
||||
class="ant-tag ant-tag-blue"
|
||||
class="ant-tag ant-tag-geekblue"
|
||||
>
|
||||
developer
|
||||
DEVELOPER
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
@ -14081,9 +14081,9 @@ exports[`renders components/table/demo/jsx.tsx correctly 1`] = `
|
||||
class="ant-table-cell"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-blue"
|
||||
class="ant-tag ant-tag-volcano"
|
||||
>
|
||||
loser
|
||||
LOSER
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
@ -14139,14 +14139,14 @@ exports[`renders components/table/demo/jsx.tsx correctly 1`] = `
|
||||
class="ant-table-cell"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-blue"
|
||||
class="ant-tag ant-tag-green"
|
||||
>
|
||||
cool
|
||||
COOL
|
||||
</span>
|
||||
<span
|
||||
class="ant-tag ant-tag-blue"
|
||||
class="ant-tag ant-tag-geekblue"
|
||||
>
|
||||
teacher
|
||||
TEACHER
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
|
||||
@ -53,11 +53,17 @@ const App: React.FC = () => (
|
||||
key="tags"
|
||||
render={(tags: string[]) => (
|
||||
<>
|
||||
{tags.map((tag) => (
|
||||
<Tag color="blue" key={tag}>
|
||||
{tag}
|
||||
{tags.map((tag) => {
|
||||
let color = tag.length > 5 ? 'geekblue' : 'green';
|
||||
if (tag === 'loser') {
|
||||
color = 'volcano';
|
||||
}
|
||||
return (
|
||||
<Tag color={color} key={tag}>
|
||||
{tag.toUpperCase()}
|
||||
</Tag>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
|
||||
@ -6,9 +6,6 @@ Array [
|
||||
style="margin-bottom: 16px;"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
>
|
||||
<span
|
||||
style="display: inline-block;"
|
||||
>
|
||||
@ -100,7 +97,6 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<span
|
||||
class="ant-tag"
|
||||
@ -136,14 +132,12 @@ Array [
|
||||
exports[`renders components/tag/demo/animation.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/tag/demo/basic.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
>
|
||||
Array [
|
||||
<span
|
||||
class="ant-tag"
|
||||
>
|
||||
Tag 1
|
||||
</span>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-tag"
|
||||
>
|
||||
@ -152,7 +146,7 @@ exports[`renders components/tag/demo/basic.tsx extend context correctly 1`] = `
|
||||
>
|
||||
Link
|
||||
</a>
|
||||
</span>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-tag"
|
||||
>
|
||||
@ -178,7 +172,7 @@ exports[`renders components/tag/demo/basic.tsx extend context correctly 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-tag"
|
||||
>
|
||||
@ -207,8 +201,8 @@ exports[`renders components/tag/demo/basic.tsx extend context correctly 1`] = `
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</span>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/tag/demo/basic.tsx extend context correctly 2`] = `[]`;
|
||||
@ -216,7 +210,8 @@ exports[`renders components/tag/demo/basic.tsx extend context correctly 2`] = `[
|
||||
exports[`renders components/tag/demo/borderless.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-wrap-wrap"
|
||||
style="gap: 4px 0;"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-borderless"
|
||||
@ -286,7 +281,8 @@ Array [
|
||||
role="separator"
|
||||
/>,
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-wrap-wrap"
|
||||
style="gap: 4px 0;"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-processing ant-tag-borderless"
|
||||
@ -374,7 +370,8 @@ exports[`renders components/tag/demo/borderlessLayout.tsx extend context correct
|
||||
style="background-color: rgb(245, 245, 245); padding: 16px;"
|
||||
>
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-wrap-wrap"
|
||||
style="gap: 4px 0;"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-borderless"
|
||||
@ -444,7 +441,8 @@ exports[`renders components/tag/demo/borderlessLayout.tsx extend context correct
|
||||
role="separator"
|
||||
/>
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-wrap-wrap"
|
||||
style="gap: 4px 0;"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-magenta ant-tag-borderless"
|
||||
@ -509,7 +507,8 @@ exports[`renders components/tag/demo/borderlessLayout.tsx extend context correct
|
||||
|
||||
exports[`renders components/tag/demo/checkable.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-align-center ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-align-center"
|
||||
style="gap: 4px 0;"
|
||||
>
|
||||
<span>
|
||||
Categories:
|
||||
@ -552,7 +551,8 @@ Array [
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-wrap-wrap"
|
||||
style="gap: 4px 0;"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-magenta"
|
||||
@ -621,7 +621,8 @@ Array [
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-wrap-wrap"
|
||||
style="gap: 4px 0;"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-has-color"
|
||||
@ -655,7 +656,8 @@ exports[`renders components/tag/demo/colorful.tsx extend context correctly 2`] =
|
||||
|
||||
exports[`renders components/tag/demo/colorful-inverse.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-wrap-wrap"
|
||||
style="gap: 4px 0;"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-magenta-inverse"
|
||||
@ -719,7 +721,8 @@ exports[`renders components/tag/demo/colorful-inverse.tsx extend context correct
|
||||
|
||||
exports[`renders components/tag/demo/control.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-wrap-wrap"
|
||||
style="gap: 4px 0;"
|
||||
>
|
||||
<span
|
||||
class="ant-tag"
|
||||
@ -824,7 +827,8 @@ exports[`renders components/tag/demo/control.tsx extend context correctly 2`] =
|
||||
|
||||
exports[`renders components/tag/demo/customize.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-wrap-wrap"
|
||||
style="gap: 4px 0;"
|
||||
>
|
||||
<span
|
||||
class="ant-tag"
|
||||
@ -873,7 +877,8 @@ exports[`renders components/tag/demo/customize.tsx extend context correctly 2`]
|
||||
exports[`renders components/tag/demo/draggable.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-wrap-wrap"
|
||||
style="gap: 4px 0;"
|
||||
>
|
||||
<span
|
||||
class="ant-tag"
|
||||
@ -916,7 +921,8 @@ exports[`renders components/tag/demo/draggable.tsx extend context correctly 2`]
|
||||
|
||||
exports[`renders components/tag/demo/icon.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-wrap-wrap"
|
||||
style="gap: 4px 0;"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-has-color"
|
||||
@ -1044,7 +1050,8 @@ Array [
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-wrap-wrap"
|
||||
style="gap: 4px 0;"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-success"
|
||||
@ -1083,7 +1090,8 @@ Array [
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-wrap-wrap"
|
||||
style="gap: 4px 0;"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-success"
|
||||
|
||||
@ -6,9 +6,6 @@ Array [
|
||||
style="margin-bottom:16px"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
>
|
||||
<span
|
||||
style="display:inline-block"
|
||||
>
|
||||
@ -100,7 +97,6 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<span
|
||||
class="ant-tag"
|
||||
@ -134,14 +130,12 @@ Array [
|
||||
`;
|
||||
|
||||
exports[`renders components/tag/demo/basic.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
>
|
||||
Array [
|
||||
<span
|
||||
class="ant-tag"
|
||||
>
|
||||
Tag 1
|
||||
</span>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-tag"
|
||||
>
|
||||
@ -150,7 +144,7 @@ exports[`renders components/tag/demo/basic.tsx correctly 1`] = `
|
||||
>
|
||||
Link
|
||||
</a>
|
||||
</span>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-tag"
|
||||
>
|
||||
@ -176,7 +170,7 @@ exports[`renders components/tag/demo/basic.tsx correctly 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-tag"
|
||||
>
|
||||
@ -205,14 +199,15 @@ exports[`renders components/tag/demo/basic.tsx correctly 1`] = `
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</span>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/tag/demo/borderless.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-wrap-wrap"
|
||||
style="gap:4px 0"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-borderless"
|
||||
@ -282,7 +277,8 @@ Array [
|
||||
role="separator"
|
||||
/>,
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-wrap-wrap"
|
||||
style="gap:4px 0"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-processing ant-tag-borderless"
|
||||
@ -368,7 +364,8 @@ exports[`renders components/tag/demo/borderlessLayout.tsx correctly 1`] = `
|
||||
style="background-color:#f5f5f5;padding:16px"
|
||||
>
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-wrap-wrap"
|
||||
style="gap:4px 0"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-borderless"
|
||||
@ -438,7 +435,8 @@ exports[`renders components/tag/demo/borderlessLayout.tsx correctly 1`] = `
|
||||
role="separator"
|
||||
/>
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-wrap-wrap"
|
||||
style="gap:4px 0"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-magenta ant-tag-borderless"
|
||||
@ -501,7 +499,8 @@ exports[`renders components/tag/demo/borderlessLayout.tsx correctly 1`] = `
|
||||
|
||||
exports[`renders components/tag/demo/checkable.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-align-center ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-align-center"
|
||||
style="gap:4px 0"
|
||||
>
|
||||
<span>
|
||||
Categories:
|
||||
@ -542,7 +541,8 @@ Array [
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-wrap-wrap"
|
||||
style="gap:4px 0"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-magenta"
|
||||
@ -611,7 +611,8 @@ Array [
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-wrap-wrap"
|
||||
style="gap:4px 0"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-has-color"
|
||||
@ -643,7 +644,8 @@ Array [
|
||||
|
||||
exports[`renders components/tag/demo/colorful-inverse.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-wrap-wrap"
|
||||
style="gap:4px 0"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-magenta-inverse"
|
||||
@ -705,7 +707,8 @@ exports[`renders components/tag/demo/colorful-inverse.tsx correctly 1`] = `
|
||||
|
||||
exports[`renders components/tag/demo/control.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-wrap-wrap"
|
||||
style="gap:4px 0"
|
||||
>
|
||||
<span
|
||||
class="ant-tag"
|
||||
@ -808,7 +811,8 @@ exports[`renders components/tag/demo/control.tsx correctly 1`] = `
|
||||
|
||||
exports[`renders components/tag/demo/customize.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-wrap-wrap"
|
||||
style="gap:4px 0"
|
||||
>
|
||||
<span
|
||||
class="ant-tag"
|
||||
@ -854,7 +858,8 @@ exports[`renders components/tag/demo/customize.tsx correctly 1`] = `
|
||||
|
||||
exports[`renders components/tag/demo/draggable.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-wrap-wrap"
|
||||
style="gap:4px 0"
|
||||
>
|
||||
<span
|
||||
class="ant-tag"
|
||||
@ -879,7 +884,8 @@ exports[`renders components/tag/demo/draggable.tsx correctly 1`] = `
|
||||
|
||||
exports[`renders components/tag/demo/icon.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-wrap-wrap"
|
||||
style="gap:4px 0"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-has-color"
|
||||
@ -1005,7 +1011,8 @@ Array [
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-wrap-wrap"
|
||||
style="gap:4px 0"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-success"
|
||||
@ -1044,7 +1051,8 @@ Array [
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-wrap-wrap"
|
||||
style="gap:4px 0"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-success"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import type { InputRef } from 'antd';
|
||||
import { Flex, Input, Tag, theme } from 'antd';
|
||||
import { Input, Tag, theme } from 'antd';
|
||||
import { TweenOneGroup } from 'rc-tween-one';
|
||||
|
||||
const App: React.FC = () => {
|
||||
@ -73,9 +73,7 @@ const App: React.FC = () => {
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Flex gap="small" wrap="wrap">
|
||||
{tagChild}
|
||||
</Flex>
|
||||
</TweenOneGroup>
|
||||
</div>
|
||||
{inputVisible ? (
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { CloseCircleOutlined } from '@ant-design/icons';
|
||||
import { Flex, Tag } from 'antd';
|
||||
import { Tag } from 'antd';
|
||||
|
||||
const preventDefault = (e: React.MouseEvent<HTMLElement>) => {
|
||||
e.preventDefault();
|
||||
@ -8,7 +8,7 @@ const preventDefault = (e: React.MouseEvent<HTMLElement>) => {
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Flex gap="small" wrap="wrap">
|
||||
<>
|
||||
<Tag>Tag 1</Tag>
|
||||
<Tag>
|
||||
<a href="https://github.com/ant-design/ant-design/issues/1862">Link</a>
|
||||
@ -19,7 +19,7 @@ const App: React.FC = () => (
|
||||
<Tag closeIcon={<CloseCircleOutlined />} onClose={console.log}>
|
||||
Tag 2
|
||||
</Tag>
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -3,7 +3,7 @@ import { Divider, Flex, Tag } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Flex gap="small" wrap="wrap">
|
||||
<Flex gap="4px 0" wrap="wrap">
|
||||
<Tag bordered={false}>Tag 1</Tag>
|
||||
<Tag bordered={false}>Tag 2</Tag>
|
||||
<Tag bordered={false} closable>
|
||||
@ -14,7 +14,7 @@ const App: React.FC = () => (
|
||||
</Tag>
|
||||
</Flex>
|
||||
<Divider />
|
||||
<Flex gap="small" wrap="wrap">
|
||||
<Flex gap="4px 0" wrap="wrap">
|
||||
<Tag bordered={false} color="processing">
|
||||
processing
|
||||
</Tag>
|
||||
|
||||
@ -5,7 +5,7 @@ const App: React.FC = () => {
|
||||
const { token } = theme.useToken();
|
||||
return (
|
||||
<div style={{ backgroundColor: token.colorBgLayout, padding: token.padding }}>
|
||||
<Flex gap="small" wrap="wrap">
|
||||
<Flex gap="4px 0" wrap="wrap">
|
||||
<Tag bordered={false}>Tag 1</Tag>
|
||||
<Tag bordered={false}>Tag 2</Tag>
|
||||
<Tag bordered={false} closable>
|
||||
@ -16,7 +16,7 @@ const App: React.FC = () => {
|
||||
</Tag>
|
||||
</Flex>
|
||||
<Divider />
|
||||
<Flex gap="small" wrap="wrap">
|
||||
<Flex gap="4px 0" wrap="wrap">
|
||||
<Tag bordered={false} color="magenta">
|
||||
magenta
|
||||
</Tag>
|
||||
|
||||
@ -14,7 +14,7 @@ const App: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Flex gap="small" wrap="wrap" align="center">
|
||||
<Flex gap="4px 0" wrap="wrap" align="center">
|
||||
<span>Categories:</span>
|
||||
{tagsData.map<React.ReactNode>((tag) => (
|
||||
<Tag.CheckableTag
|
||||
|
||||
@ -2,7 +2,7 @@ import React from 'react';
|
||||
import { Flex, Tag } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Flex gap="small" wrap="wrap">
|
||||
<Flex gap="4px 0" wrap="wrap">
|
||||
<Tag color="magenta-inverse">magenta</Tag>
|
||||
<Tag color="red-inverse">red</Tag>
|
||||
<Tag color="volcano-inverse">volcano</Tag>
|
||||
|
||||
@ -4,7 +4,7 @@ import { Divider, Flex, Tag } from 'antd';
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Divider orientation="left">Presets</Divider>
|
||||
<Flex gap="small" wrap="wrap">
|
||||
<Flex gap="4px 0" wrap="wrap">
|
||||
<Tag color="magenta">magenta</Tag>
|
||||
<Tag color="red">red</Tag>
|
||||
<Tag color="volcano">volcano</Tag>
|
||||
@ -18,7 +18,7 @@ const App: React.FC = () => (
|
||||
<Tag color="purple">purple</Tag>
|
||||
</Flex>
|
||||
<Divider orientation="left">Custom</Divider>
|
||||
<Flex gap="small" wrap="wrap">
|
||||
<Flex gap="4px 0" wrap="wrap">
|
||||
<Tag color="#f50">#f50</Tag>
|
||||
<Tag color="#2db7f5">#2db7f5</Tag>
|
||||
<Tag color="#87d068">#87d068</Tag>
|
||||
|
||||
@ -6,7 +6,7 @@ const App: React.FC = () => (
|
||||
<ConfigProvider
|
||||
theme={{ components: { Tag: { defaultBg: '#f9f0ff', defaultColor: '#4b34d3' } } }}
|
||||
>
|
||||
<Flex gap="small" wrap="wrap">
|
||||
<Flex gap="4px 0" wrap="wrap">
|
||||
<Tag>
|
||||
<a href="https://github.com/ant-design/ant-design/issues/1862">Link</a>
|
||||
</Tag>
|
||||
|
||||
@ -71,7 +71,7 @@ const App: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Flex gap="small" wrap="wrap">
|
||||
<Flex gap="4px 0" wrap="wrap">
|
||||
{tags.map<React.ReactNode>((tag, index) => {
|
||||
if (editInputIndex === index) {
|
||||
return (
|
||||
|
||||
@ -3,7 +3,7 @@ import { CloseCircleOutlined } from '@ant-design/icons';
|
||||
import { Flex, Tag } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Flex gap="small" wrap="wrap">
|
||||
<Flex gap="4px 0" wrap="wrap">
|
||||
<Tag closable closeIcon="关 闭">
|
||||
Tag1
|
||||
</Tag>
|
||||
|
||||
@ -68,7 +68,7 @@ const App: React.FC = () => {
|
||||
return (
|
||||
<DndContext sensors={sensors} onDragEnd={handleDragEnd} collisionDetection={closestCenter}>
|
||||
<SortableContext items={items} strategy={horizontalListSortingStrategy}>
|
||||
<Flex gap="small" wrap="wrap">
|
||||
<Flex gap="4px 0" wrap="wrap">
|
||||
{items.map<React.ReactNode>((item) => (
|
||||
<DraggableTag tag={item} key={item.id} />
|
||||
))}
|
||||
|
||||
@ -8,7 +8,7 @@ import {
|
||||
import { Flex, Tag } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Flex gap="small" wrap="wrap">
|
||||
<Flex gap="4px 0" wrap="wrap">
|
||||
<Tag icon={<TwitterOutlined />} color="#55acee">
|
||||
Twitter
|
||||
</Tag>
|
||||
|
||||
@ -12,7 +12,7 @@ import { Divider, Flex, Tag } from 'antd';
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Divider orientation="left">Without icon</Divider>
|
||||
<Flex gap="small" wrap="wrap">
|
||||
<Flex gap="4px 0" wrap="wrap">
|
||||
<Tag color="success">success</Tag>
|
||||
<Tag color="processing">processing</Tag>
|
||||
<Tag color="error">error</Tag>
|
||||
@ -20,7 +20,7 @@ const App: React.FC = () => (
|
||||
<Tag color="default">default</Tag>
|
||||
</Flex>
|
||||
<Divider orientation="left">With icon</Divider>
|
||||
<Flex gap="small" wrap="wrap">
|
||||
<Flex gap="4px 0" wrap="wrap">
|
||||
<Tag icon={<CheckCircleOutlined />} color="success">
|
||||
success
|
||||
</Tag>
|
||||
|
||||
@ -40,6 +40,8 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
|
||||
...resetComponent(token),
|
||||
display: 'inline-block',
|
||||
height: 'auto',
|
||||
// https://github.com/ant-design/ant-design/pull/47504
|
||||
marginInlineEnd: token.marginXS,
|
||||
paddingInline,
|
||||
fontSize: token.tagFontSize,
|
||||
lineHeight: token.tagLineHeight,
|
||||
|
||||
@ -2197,11 +2197,11 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
aria-label="To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life"
|
||||
aria-label="To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life"
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
|
||||
title="To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare"
|
||||
title="To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare"
|
||||
>
|
||||
To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare
|
||||
To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
@ -1687,11 +1687,11 @@ Array [
|
||||
/>
|
||||
</div>,
|
||||
<div
|
||||
aria-label="To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life"
|
||||
aria-label="To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life"
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
|
||||
title="To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare"
|
||||
title="To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare"
|
||||
>
|
||||
To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life
|
||||
To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life
|
||||
<!-- -->
|
||||
--William Shakespeare
|
||||
</div>,
|
||||
|
||||
@ -7,7 +7,7 @@ const App: React.FC = () => {
|
||||
const [rows, setRows] = useState(1);
|
||||
|
||||
const article =
|
||||
"To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life";
|
||||
"To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life";
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
@ -55,7 +55,7 @@ antd 的 Table 底层使用了 `rc-table` 组件，我们的虚拟滚动功能
|
||||
但是在测试时，我们发现一个奇怪的现象。表格在首次、再次渲染时，会有非常大的卡顿。在进行断点时，它来自于 `useFlattenRecords` hooks。而测试的代码本身并没有使用可展开树的功能，于是我们对其进行了排查。发现在 `useFlattenRecords` 中，存在大量的 GC 操作。而这些操作是由于一段不起眼的代码引起的：
|
||||
|
||||
```tsx
|
||||
// Fake code. Not used in real word
|
||||
// Fake code. Not used in real world
|
||||
function flatten<T extends { children?: T[] }>(data: T[] = []) {
|
||||
let tmpList: T[] = [];
|
||||
|
||||
@ -71,7 +71,7 @@ function flatten<T extends { children?: T[] }>(data: T[] = []) {
|
||||
在遍历过程中，虽然 `children` 为空只会进入一次递归。但是在循环每个 Record 时都会创建一次临时的空数组。但是当 `dataSource` 数据巨大时，它们会不断触发 GC 清理这些临时数组。因而我们通过改造添加逻辑以避免不必要的消耗：
|
||||
|
||||
```tsx
|
||||
// Fake code. Not used in real word
|
||||
// Fake code. Not used in real world
|
||||
function flatten<T extends { children?: T[] }>(data: T[] = [], list: T[] = []) {
|
||||
for (let i = 0; i < data.length; i += 1) {
|
||||
const record = data[i];
|
||||
@ -132,7 +132,7 @@ const Demo = () => {
|
||||
`rc-virtual-list` 提供了 `extraRender` 方法，它会提供当前虚拟滚动中所渲染的行号。我们只需要对这个范围内的 Record 执行一次 `onCell` 获取每个 `cell` 的 `rowSpan` 和 `colSpan` 信息。既可以知道当前行是否存在对外的 `rowSpan` 依赖：
|
||||
|
||||
```tsx
|
||||
// Fake code. Not used in real word
|
||||
// Fake code. Not used in real world
|
||||
const extraRender = ({ start, end }) => {
|
||||
// Start record
|
||||
const startRecord = flattenData[start];
|
||||
|
||||
28
package.json
28
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "5.14.2",
|
||||
"version": "5.15.1",
|
||||
"description": "An enterprise-class UI design language and React components implementation",
|
||||
"keywords": [
|
||||
"ant",
|
||||
@ -135,7 +135,7 @@
|
||||
"rc-dialog": "~9.4.0",
|
||||
"rc-drawer": "~7.1.0",
|
||||
"rc-dropdown": "~4.1.0",
|
||||
"rc-field-form": "~1.42.0",
|
||||
"rc-field-form": "~1.42.1",
|
||||
"rc-image": "~7.6.0",
|
||||
"rc-input": "~1.4.3",
|
||||
"rc-input-number": "~9.0.0",
|
||||
@ -144,12 +144,12 @@
|
||||
"rc-motion": "^2.9.0",
|
||||
"rc-notification": "~5.4.0",
|
||||
"rc-pagination": "~4.0.4",
|
||||
"rc-picker": "~4.2.0",
|
||||
"rc-picker": "~4.2.1",
|
||||
"rc-progress": "~3.5.1",
|
||||
"rc-rate": "~2.12.0",
|
||||
"rc-resize-observer": "^1.4.0",
|
||||
"rc-segmented": "~2.3.0",
|
||||
"rc-select": "~14.12.0",
|
||||
"rc-select": "~14.12.1",
|
||||
"rc-slider": "~10.5.0",
|
||||
"rc-steps": "~6.0.1",
|
||||
"rc-switch": "~4.1.0",
|
||||
@ -160,7 +160,7 @@
|
||||
"rc-tree": "~5.8.5",
|
||||
"rc-tree-select": "~5.18.0",
|
||||
"rc-upload": "~4.5.2",
|
||||
"rc-util": "^5.38.2",
|
||||
"rc-util": "^5.39.1",
|
||||
"scroll-into-view-if-needed": "^3.1.0",
|
||||
"throttle-debounce": "^5.0.0"
|
||||
},
|
||||
@ -201,7 +201,7 @@
|
||||
"@types/jsdom": "^21.1.6",
|
||||
"@types/lodash": "^4.14.202",
|
||||
"@types/minimist": "^1.2.5",
|
||||
"@types/node": "^20.11.24",
|
||||
"@types/node": "^20.11.25",
|
||||
"@types/nprogress": "^0.2.3",
|
||||
"@types/pixelmatch": "^5.2.6",
|
||||
"@types/pngjs": "^6.0.4",
|
||||
@ -210,15 +210,15 @@
|
||||
"@types/qs": "^6.9.12",
|
||||
"@types/react": "18.2.60",
|
||||
"@types/react-copy-to-clipboard": "^5.0.7",
|
||||
"@types/react-dom": "^18.2.19",
|
||||
"@types/react-dom": "^18.2.21",
|
||||
"@types/react-highlight-words": "^0.16.7",
|
||||
"@types/react-resizable": "^3.0.7",
|
||||
"@types/semver": "^7.5.8",
|
||||
"@types/tar": "^6.1.11",
|
||||
"@types/throttle-debounce": "^5.0.2",
|
||||
"@types/warning": "^3.0.3",
|
||||
"@typescript-eslint/eslint-plugin": "^7.1.0",
|
||||
"@typescript-eslint/parser": "^7.1.0",
|
||||
"@typescript-eslint/eslint-plugin": "^7.1.1",
|
||||
"@typescript-eslint/parser": "^7.1.1",
|
||||
"ali-oss": "^6.20.0",
|
||||
"antd-img-crop": "^4.21.0",
|
||||
"antd-style": "^3.6.1",
|
||||
@ -243,7 +243,7 @@
|
||||
"eslint-plugin-jsx-a11y": "^6.8.0",
|
||||
"eslint-plugin-lodash": "^7.4.0",
|
||||
"eslint-plugin-markdown": "^3.0.1",
|
||||
"eslint-plugin-react": "^7.33.2",
|
||||
"eslint-plugin-react": "^7.34.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-unicorn": "^51.0.1",
|
||||
"fast-glob": "^3.3.2",
|
||||
@ -287,8 +287,8 @@
|
||||
"pretty-format": "^29.7.0",
|
||||
"prismjs": "^1.29.0",
|
||||
"progress": "^2.0.3",
|
||||
"puppeteer": "^22.3.0",
|
||||
"qs": "^6.11.2",
|
||||
"puppeteer": "^22.4.0",
|
||||
"qs": "^6.12.0",
|
||||
"rc-footer": "^0.6.8",
|
||||
"rc-tween-one": "^3.0.6",
|
||||
"rc-virtual-list": "^3.11.4",
|
||||
@ -324,9 +324,9 @@
|
||||
"sylvanas": "^0.6.1",
|
||||
"tar": "^6.2.0",
|
||||
"tar-fs": "^3.0.5",
|
||||
"terser": "^5.28.1",
|
||||
"terser": "^5.29.1",
|
||||
"tsx": "^4.7.1",
|
||||
"typedoc": "^0.25.9",
|
||||
"typedoc": "^0.25.11",
|
||||
"typescript": "~5.3.3",
|
||||
"vanilla-jsoneditor": "^0.22.0",
|
||||
"vanilla-tilt": "^1.8.1",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user