test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 12:09:14 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

chore: auto merge branches (#49981)

Browse Source 
chore: merge master into feature
This commit is contained in:
github-actions[bot] 2024-07-19 13:54:38 +00:00 committed by GitHub
commit f2ac3fcc05
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
85 changed files with 374505 additions and 373267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.dumi/theme/common/LiveCode.tsx
View File

@ -13,6 +13,10 @@ const useStyle = createStyles(({ token, css }) => {
.dumi-default-source-code-editor {
.dumi-default-source-code {
background: ${colorBgContainer};
&-scroll-container {
scrollbar-width: thin;
scrollbar-color: unset;
}
}
.dumi-default-source-code > pre,
.dumi-default-source-code-scroll-content > pre,

5
.dumi/theme/common/styles/Markdown.tsx
View File

@ -197,6 +197,7 @@ const GlobalStyle: React.FC = () => {
margin: 0 ${token.marginMD}px;
color: #aaa;
font-size: 30px;
user-select: none;
}
}
@ -282,6 +283,10 @@ const GlobalStyle: React.FC = () => {
}
.markdown .dumi-default-table {
&-content {
scrollbar-width: thin;
scrollbar-color: unset;
}
table {
margin: 0;
overflow-x: auto;

148
.dumi/theme/slots/Content/ColumnCard.tsx
View File

@ -2,6 +2,7 @@ import React from 'react';
import { RightOutlined, YuqueOutlined, ZhihuOutlined } from '@ant-design/icons';
import { Button, Card, Divider } from 'antd';
import { createStyles } from 'antd-style';
import classNames from 'classnames';
import useLocale from '../../../hooks/useLocale';
import JuejinLogo from './JuejinLogo';
@ -42,6 +43,7 @@ const useStyle = createStyles(({ token, css }) => ({
color: #444;
font-size: ${token.fontSizeLG}px;
font-weight: ${token.fontWeightStrong};
user-select: none;
`,
subTitle: css`
display: flex;
@ -54,37 +56,34 @@ const useStyle = createStyles(({ token, css }) => ({
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.logo {
width: 24px;
height: 24px;
font-size: 24px;
&.zhihu-logo {
color: #056de8;
}
&.yuque-logo {
color: #00b96b;
}
&.juejin-logo {
color: #1e80ff;
}
`,
logo: css`
width: 24px;
height: 24px;
font-size: 24px;
&.zhihu-logo {
color: #056de8;
}
.arrowIcon {
color: #8a8f8d;
margin: 0 ${token.marginXS}px;
font-size: ${token.fontSizeSM}px;
&.yuque-logo {
color: #00b96b;
}
.zl-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
color: #646464;
&.juejin-logo {
color: #1e80ff;
}
`,
btn: css`
display: flex;
justify-content: center;
align-items: center;
arrowIcon: css`
color: #8a8f8d;
margin: 0 ${token.marginXS}px;
font-size: ${token.fontSizeSM}px;
`,
zlBtn: css`
padding: 0;
color: #646464;
`,
discussLogo: css`
width: 16px;
height: 16px;
font-size: 16px;
`,
}));
@ -114,7 +113,18 @@ interface Props {
const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
const [locale] = useLocale(locales);
const {
styles: { card, bigTitle, cardBody, left, title, subTitle, btn },
styles: {
card,
bigTitle,
cardBody,
left,
title,
subTitle,
logo,
arrowIcon,
zlBtn,
discussLogo,
},
} = useStyle();
if (!zhihuLink && !yuqueLink && !juejinLink) {
return null;
@ -123,52 +133,54 @@ const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
<Card className={card} bordered={false}>
<h3 className={bigTitle}>{locale.bigTitle}</h3>
{zhihuLink && (
<div className={cardBody}>
<div className={left}>
<img src={ANTD_IMG_URL} alt="antd" />
<div>
<p className={title}>Ant Design</p>
<div className={subTitle}>
<ZhihuOutlined className="logo zhihu-logo" />
<RightOutlined className="arrowIcon" />
<Button
target="_blank"
href="https://www.zhihu.com/column/c_1564262000561106944"
className="zl-btn"
type="link"
>
{locale.zhiHu}
</Button>
<>
<Divider />
<div className={cardBody}>
<div className={left}>
<img draggable={false} src={ANTD_IMG_URL} alt="antd" />
<div>
<p className={title}>Ant Design</p>
<div className={subTitle}>
<ZhihuOutlined className={classNames(logo, 'zhihu-logo')} />
<RightOutlined className={arrowIcon} />
<Button
target="_blank"
href="https://www.zhihu.com/column/c_1564262000561106944"
className={zlBtn}
type="link"
>
{locale.zhiHu}
</Button>
</div>
</div>
</div>
<Button
ghost
type="primary"
icon={<ZhihuOutlined className={discussLogo} />}
target="_blank"
href={zhihuLink}
>
{locale.buttonText}
</Button>
</div>
<Button
type="primary"
className={btn}
icon={<ZhihuOutlined style={{ fontSize: 16 }} />}
ghost
target="_blank"
href={zhihuLink}
>
{locale.buttonText}
</Button>
</div>
</>
)}
{yuqueLink && (
<>
<Divider />
<div className={cardBody}>
<div className={left}>
<img src={ANTD_IMG_URL} alt="antd" />
<img draggable={false} src={ANTD_IMG_URL} alt="antd" />
<div>
<p className={title}>Ant Design</p>
<div className={subTitle}>
<YuqueOutlined className="logo yuque-logo" />
<RightOutlined className="arrowIcon" />
<YuqueOutlined className={classNames(logo, 'yuque-logo')} />
<RightOutlined className={arrowIcon} />
<Button
target="_blank"
href="https://www.yuque.com/ant-design/ant-design"
className="zl-btn"
className={zlBtn}
type="link"
>
{locale.yuQue}
@ -177,10 +189,9 @@ const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
</div>
</div>
<Button
type="primary"
className={btn}
icon={<YuqueOutlined style={{ fontSize: 16 }} />}
ghost
type="primary"
icon={<YuqueOutlined className={discussLogo} />}
target="_blank"
href={yuqueLink}
>
@ -194,16 +205,16 @@ const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
<Divider />
<div className={cardBody}>
<div className={left}>
<img src={ANTD_IMG_URL} alt="antd" />
<img draggable={false} src={ANTD_IMG_URL} alt="antd" />
<div>
<p className={title}>Ant Design</p>
<div className={subTitle}>
<JuejinLogo className="logo juejin-logo" />
<RightOutlined className="arrowIcon" />
<JuejinLogo className={classNames(logo, 'juejin-logo')} />
<RightOutlined className={arrowIcon} />
<Button
target="_blank"
href="https://juejin.cn/column/7247354308258054200"
className="zl-btn"
className={zlBtn}
type="link"
>
{locale.junjin}
@ -212,10 +223,9 @@ const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
</div>
</div>
<Button
type="primary"
className={btn}
icon={<JuejinLogo style={{ fontSize: 16, width: 16, height: 16 }} />}
ghost
type="primary"
icon={<JuejinLogo className={discussLogo} />}
target="_blank"
href={juejinLink}
>

16
CHANGELOG.en-US.md
View File

@ -16,6 +16,22 @@ tag: vVERSION
---
## 5.19.3
`2024-07-19`
- 🐞 Fix Table sorter argument of `onChange` with unexpected value. [#49533](https://github.com/ant-design/ant-design/pull/49533) [@Zyf665](https://github.com/Zyf665)
- 🐞 Fix Pagination `token.itemBg` not working. [#49933](https://github.com/ant-design/ant-design/pull/49933)
- 🐞 Fix List wrong align style of pagination. [#49925](https://github.com/ant-design/ant-design/pull/49925) [@coding-ice](https://github.com/coding-ice)
- 🐞 Fix Image cannot exit preview, when click blank area on both sides of aciton bar. [#49915](https://github.com/ant-design/ant-design/pull/49915) [@wanpan11](https://github.com/wanpan11)
- 🐞 Fix Card border radius cannot works for non-img elements from `cover` property. [#49862](https://github.com/ant-design/ant-design/pull/49862) [@coding-ice](https://github.com/coding-ice)
- 💄 Fix Dropdown menu item wrong wrap style at edge of viewport. [#49899](https://github.com/ant-design/ant-design/pull/49899)
- 💄 Fix Descriptions items may too close with each other. [#49895](https://github.com/ant-design/ant-design/pull/49895) [@crazyair](https://github.com/crazyair)
- ⌨️ Optimize Select be changed repeatedly when hold the enter key in multi-mode. [#49963](https://github.com/ant-design/ant-design/pull/49963) [@crazyair](https://github.com/crazyair)
- 🇪🇬 Add missing translation for the Arabic language(Egypt) (ar_EG). [#49852](https://github.com/ant-design/ant-design/pull/49852) [@ahmedsamirdev](https://github.com/ahmedsamirdev)
- TypeScript
- 🤖 Reuse Tooltips type definitions for ColorPicker. [#49949](https://github.com/ant-design/ant-design/pull/49949) [@Wxh16144](https://github.com/Wxh16144)
## 5.19.2
`2024-07-15`

16
CHANGELOG.zh-CN.md
View File

@ -15,6 +15,22 @@ tag: vVERSION
---
## 5.19.3
`2024-07-19`
- 🐞 修复 Table 的 `onChange` 事件中排序器参数错误的问题。[#49533](https://github.com/ant-design/ant-design/pull/49533) [@Zyf665](https://github.com/Zyf665)
- 🐞 修复 Pagination `token.itemBg` 设置不生效的问题。[#49933](https://github.com/ant-design/ant-design/pull/49933)
- 🐞 修复 List 默认分页位置错误的问题。[#49925](https://github.com/ant-design/ant-design/pull/49925) [@coding-ice](https://github.com/coding-ice)
- 🐞 修复 Image 预览操作栏两侧空白区域被点击时，无法关闭预览的问题。[#49915](https://github.com/ant-design/ant-design/pull/49915) [@wanpan11](https://github.com/wanpan11)
- 🐞 修复 Card 圆角对 `cover` 属性中的非 img 元素不生效的问题。[#49862](https://github.com/ant-design/ant-design/pull/49862) [@coding-ice](https://github.com/coding-ice)
- 💄 修复 Dropdown 菜单内容在视口边缘换行的问题。[#49899](https://github.com/ant-design/ant-design/pull/49899)
- 💄 修复 Descriptions 子项之间可能没有边距的问题。[#49895](https://github.com/ant-design/ant-design/pull/49895) [@crazyair](https://github.com/crazyair)
- ⌨️ 优化 Select 多选模式下长按回车会不断触发变更的问题。[#49963](https://github.com/ant-design/ant-design/pull/49963) [@crazyair](https://github.com/crazyair)
- 🇪🇬 添加阿拉伯文(埃及) (ar_EG) 的翻译。[#49852](https://github.com/ant-design/ant-design/pull/49852) [@ahmedsamirdev](https://github.com/ahmedsamirdev)
- TypeScript
- 🤖 复用 Tooltips 的定义以简化 ColorPicker 的类型声明。[#49949](https://github.com/ant-design/ant-design/pull/49949) [@Wxh16144](https://github.com/Wxh16144)
## 5.19.2
`2024-07-15`

6
README-zh_CN.md
View File

@ -8,7 +8,7 @@
[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
[![][bundlephobia-image]][bundlephobia-url] [![][bundlesize-js-image]][unpkg-js-url] [![FOSSA Status][fossa-image]][fossa-url]
[![][bundlephobia-image]][bundlephobia-url] [![][jsdelivr-image]][jsdelivr-url] [![FOSSA Status][fossa-image]][fossa-url]
[![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![dumi][dumi-image]][dumi-url] [![Issues need help][help-wanted-image]][help-wanted-url]
@ -30,8 +30,8 @@
[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22
[twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design
[twitter-url]: https://twitter.com/AntDesignUI
[bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square
[unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js
[jsdelivr-image]: https://data.jsdelivr.com/v1/package/npm/antd/badge
[jsdelivr-url]: https://www.jsdelivr.com/package/npm/antd
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/antd?style=flat-square
[bundlephobia-url]: https://bundlephobia.com/package/antd
[issues-helper-image]: https://img.shields.io/badge/using-actions--cool-blue?style=flat-square

6
README.md
View File

@ -8,7 +8,7 @@ An enterprise-class UI design language and React UI library.
[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
[![][bundlephobia-image]][bundlephobia-url] [![][bundlesize-js-image]][unpkg-js-url] [![FOSSA Status][fossa-image]][fossa-url]
[![][bundlephobia-image]][bundlephobia-url] [![][jsdelivr-image]][jsdelivr-url] [![FOSSA Status][fossa-image]][fossa-url]
[![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![dumi][dumi-image]][dumi-url] [![Issues need help][help-wanted-image]][help-wanted-url]
@ -30,8 +30,8 @@ An enterprise-class UI design language and React UI library.
[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22
[twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design
[twitter-url]: https://twitter.com/AntDesignUI
[bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square
[unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js
[jsdelivr-image]: https://data.jsdelivr.com/v1/package/npm/antd/badge
[jsdelivr-url]: https://www.jsdelivr.com/package/npm/antd
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/antd?style=flat-square
[bundlephobia-url]: https://bundlephobia.com/package/antd
[issues-helper-image]: https://img.shields.io/badge/using-actions--cool-blue?style=flat-square

32
components/breadcrumb/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -895,3 +895,35 @@ exports[`renders components/breadcrumb/demo/withIcon.tsx extend context correctl
`;
exports[`renders components/breadcrumb/demo/withIcon.tsx extend context correctly 2`] = `[]`;
exports[`renders components/breadcrumb/demo/withParams.tsx extend context correctly 1`] = `
<nav
class="ant-breadcrumb"
>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Users
</span>
</li>
<li
aria-hidden="true"
class="ant-breadcrumb-separator"
>
/
</li>
<li>
<a
class="ant-breadcrumb-link"
href=""
>
1
</a>
</li>
</ol>
</nav>
`;
exports[`renders components/breadcrumb/demo/withParams.tsx extend context correctly 2`] = `[]`;

30
components/breadcrumb/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -553,3 +553,33 @@ exports[`renders components/breadcrumb/demo/withIcon.tsx correctly 1`] = `
</ol>
</nav>
`;
exports[`renders components/breadcrumb/demo/withParams.tsx correctly 1`] = `
<nav
class="ant-breadcrumb"
>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Users
</span>
</li>
<li
aria-hidden="true"
class="ant-breadcrumb-separator"
>
/
</li>
<li>
<a
class="ant-breadcrumb-link"
href=""
>
1
</a>
</li>
</ol>
</nav>
`;

7
components/breadcrumb/demo/withParams.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
带有路由参数的。
## en-US
With route params.

19
components/breadcrumb/demo/withParams.tsx Normal file
View File

@ -0,0 +1,19 @@
import React from 'react';
import { Breadcrumb } from 'antd';
const App: React.FC = () => (
<Breadcrumb
items={[
{
title: 'Users',
},
{
title: ':id',
href: '',
},
]}
params={{ id: 1 }}
/>
);
export default App;

1
components/breadcrumb/index.en-US.md
View File

@ -36,6 +36,7 @@ return <Breadcrumb routes={[{ breadcrumbName: 'sample' }]} />;
<!-- prettier-ignore -->
<code src="./demo/basic.tsx">Basic Usage</code>
<code src="./demo/withIcon.tsx">With an Icon</code>
<code src="./demo/withParams.tsx">With Params</code>
<code src="./demo/separator.tsx">Configuring the Separator</code>
<code src="./demo/overlay.tsx">Bread crumbs with drop down menu</code>
<code src="./demo/separator-component.tsx">Configuring the Separator Independently</code>

1
components/breadcrumb/index.zh-CN.md
View File

@ -37,6 +37,7 @@ return <Breadcrumb routes={[{ breadcrumbName: 'sample' }]} />;
<!-- prettier-ignore -->
<code src="./demo/basic.tsx">基本</code>
<code src="./demo/withIcon.tsx">带有图标的</code>
<code src="./demo/withParams.tsx">带有参数的</code>
<code src="./demo/separator.tsx">分隔符</code>
<code src="./demo/overlay.tsx">带下拉菜单的面包屑</code>
<code src="./demo/separator-component.tsx">独立的分隔符</code>

4
components/card/style/index.ts
View File

@ -273,7 +273,6 @@ const genCardLoadingStyle: GenerateStyle<CardToken> = (token): CSSObject => {
// ============================== Basic ==============================
const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
const {
antCls,
componentCls,
cardShadow,
cardHeadPadding,
@ -317,9 +316,6 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
'> *': {
display: 'block',
width: '100%',
},
[`img, img + ${antCls}-image-mask`]: {
borderRadius: `${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)} 0 0`,
},
},

4
components/carousel/index.tsx
View File

@ -31,6 +31,8 @@ export interface CarouselRef {
innerSlider: any;
}
const dotsClass = 'slick-dots';
interface ArrowType extends React.ButtonHTMLAttributes<HTMLButtonElement> {
currentSlide?: number;
slideCount?: number;
@ -40,8 +42,6 @@ const ArrowButton: React.FC<ArrowType> = ({ currentSlide, slideCount, ...rest })
<button type="button" {...rest} />
);
const dotsClass = 'slick-dots';
const Carousel = React.forwardRef<CarouselRef, CarouselProps>((props, ref) => {
const {
dots = true,

2
components/color-picker/index.en-US.md
View File

@ -53,7 +53,7 @@ Common props ref：[Common props](/docs/react/common-props)
| format | Format of color | `rgb` \| `hex` \| `hsb` | `hex` | |
| open | Whether to show popup | boolean | - | |
| presets | Preset colors | `{ label: ReactNode, colors: Array<string \| Color>, defaultOpen?: boolean }[]` | - | `defaultOpen: 5.11.0` |
| placement | Placement of popup | `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | `bottomLeft` | |
| placement | Placement of popup | The design of the [placement](/components/tooltip/#api) parameter is the same as the `Tooltips` component. | `bottomLeft` | |
| panelRender | Custom Render Panel | `(panel: React.ReactNode, extra: { components: { Picker: FC; Presets: FC } }) => React.ReactNode` | - | 5.7.0 |
| showText | Show color text | boolean \| `(color: Color) => React.ReactNode` | - | 5.7.0 |
| size | Setting the trigger size | `large` \| `middle` \| `small` | `middle` | 5.7.0 |

2
components/color-picker/index.zh-CN.md
View File

@ -54,7 +54,7 @@ group:
| format | 颜色格式 | `rgb` \| `hex` \| `hsb` | `hex` | |
| open | 是否显示弹出窗口 | boolean | - | |
| presets | 预设的颜色 | `{ label: ReactNode, colors: Array<string \| Color>, defaultOpen?: boolean }[]` | - | `defaultOpen: 5.11.0` |
| placement | 弹出窗口的位置 | `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | `bottomLeft` | |
| placement | 弹出窗口的位置 | 同 `Tooltips` 组件的 [placement](/components/tooltip-cn/#api) 参数设计 | `bottomLeft` | |
| panelRender | 自定义渲染面板 | `(panel: React.ReactNode, extra: { components: { Picker: FC; Presets: FC } }) => React.ReactNode` | - | 5.7.0 |
| showText | 显示颜色文本 | boolean \| `(color: Color) => React.ReactNode` | - | 5.7.0 |
| size | 设置触发器大小 | `large` \| `middle` \| `small` | `middle` | 5.7.0 |

10
components/color-picker/interface.ts
View File

@ -3,6 +3,7 @@ import type { ColorPickerProps as RcColorPickerProps } from '@rc-component/color
import type { SizeType } from '../config-provider/SizeContext';
import type { PopoverProps } from '../popover';
import type { TooltipPlacement } from '../tooltip';
import type { AggregationColor } from './color';
export enum ColorFormat {
@ -25,13 +26,8 @@ export interface PresetsItem {
}
export type TriggerType = 'click' | 'hover';
export type TriggerPlacement =
| 'top'
| 'topLeft'
| 'topRight'
| 'bottom'
| 'bottomLeft'
| 'bottomRight';
export type TriggerPlacement = TooltipPlacement; // Alias, to prevent breaking changes.
export interface ColorPickerBaseProps {
color?: AggregationColor;
prefixCls: string;

5
components/date-picker/generatePicker/constant.ts Normal file
View File

@ -0,0 +1,5 @@
export const [WEEK, WEEKPICKER] = ['week', 'WeekPicker'] as const;
export const [MONTH, MONTHPICKER] = ['month', 'MonthPicker'] as const;
export const [YEAR, YEARPICKER] = ['year', 'YearPicker'] as const;
export const [QUARTER, QUARTERPICKER] = ['quarter', 'QuarterPicker'] as const;
export const [TIME, TIMEPICKER] = ['time', 'TimePicker'] as const;

6
components/date-picker/generatePicker/generateRangePicker.tsx
View File

@ -24,6 +24,7 @@ import { useCompactItemContext } from '../../space/Compact';
import enUS from '../locale/en_US';
import useStyle from '../style';
import { getRangePlaceholder, transPlacement2DropdownAlign, useIcons } from '../util';
import { TIME } from './constant';
import type { RangePickerProps } from './interface';
import useComponents from './useComponents';
@ -49,6 +50,7 @@ export default function generateRangePicker<DateType extends AnyObject>(
status: customStatus,
rootClassName,
variant: customVariant,
picker,
...restProps
} = props;
@ -56,7 +58,6 @@ export default function generateRangePicker<DateType extends AnyObject>(
const { getPrefixCls, direction, getPopupContainer, rangePicker } = useContext(ConfigContext);
const prefixCls = getPrefixCls('picker', customizePrefixCls);
const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
const { picker } = props;
const rootPrefixCls = getPrefixCls();
const [variant, enableVariantCls] = useVariant('rangePicker', customVariant, bordered);
@ -92,7 +93,7 @@ export default function generateRangePicker<DateType extends AnyObject>(
const suffixNode = (
<>
{picker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
{picker === TIME ? <ClockCircleOutlined /> : <CalendarOutlined />}
{hasFeedback && feedbackIcon}
</>
);
@ -125,6 +126,7 @@ export default function generateRangePicker<DateType extends AnyObject>(
superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
transitionName={`${rootPrefixCls}-slide-up`}
picker={picker}
{...restProps}
className={classNames(
{

20
components/date-picker/generatePicker/generateSinglePicker.tsx
View File

@ -24,21 +24,27 @@ import { useCompactItemContext } from '../../space/Compact';
import enUS from '../locale/en_US';
import useStyle from '../style';
import { getPlaceholder, transPlacement2DropdownAlign, useIcons } from '../util';
import {
MONTH,
MONTHPICKER,
QUARTER,
QUARTERPICKER,
TIME,
TIMEPICKER,
WEEK,
WEEKPICKER,
YEAR,
YEARPICKER,
} from './constant';
import type { GenericTimePickerProps, PickerProps, PickerPropsWithMultiple } from './interface';
import useComponents from './useComponents';
const [WEEK, WEEKPICKER] = ['week', 'WeekPicker'] as const;
const [MONTH, MONTHPICKER] = ['month', 'MonthPicker'] as const;
const [YEAR, YEARPICKER] = ['year', 'YearPicker'] as const;
const [QUARTER, QUARTERPICKER] = ['quarter', 'QuarterPicker'] as const;
const [TIME, TIMEPICKER] = ['time', 'TimePicker'] as const;
const generatePicker = <DateType extends AnyObject>(generateConfig: GenerateConfig<DateType>) => {
type DatePickerProps = PickerProps<DateType>;
type TimePickerProps = GenericTimePickerProps<DateType>;
const getPicker = <P extends DatePickerProps>(picker?: PickerMode, displayName?: string) => {
const consumerName = displayName === 'TimePicker' ? 'timePicker' : 'datePicker';
const consumerName = displayName === TIMEPICKER ? 'timePicker' : 'datePicker';
const Picker = forwardRef<PickerRef, P>((props, ref) => {
const {
prefixCls: customizePrefixCls,

21
components/date-picker/locale/ar_EG.ts
View File

@ -8,6 +8,27 @@ const locale: PickerLocale = {
lang: {
placeholder: 'اختيار التاريخ',
rangePlaceholder: ['البداية', 'النهاية'],
yearFormat: 'YYYY',
dateFormat: 'D/M/YYYY',
dayFormat: 'D',
dateTimeFormat: 'DD/MM/YYYY HH:mm:ss',
monthFormat: 'MMMM',
monthBeforeYear: true,
shortWeekDays: ['الأحد', 'الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'],
shortMonths: [
'يناير',
'فبراير',
'مارس',
'إبريل',
'مايو',
'يونيو',
'يوليو',
'أغسطس',
'سبتمبر',
'أكتوبر',
'نوفمبر',
'ديسمبر',
],
...CalendarLocale,
},
timePickerLocale: {

331
components/descriptions/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -957,6 +957,337 @@ exports[`renders components/descriptions/demo/jsx.tsx extend context correctly 1
exports[`renders components/descriptions/demo/jsx.tsx extend context correctly 2`] = `[]`;
exports[`renders components/descriptions/demo/padding.tsx extend context correctly 1`] = `
<div
class="ant-flex ant-flex-align-stretch ant-flex-vertical"
style="gap: 8px;"
>
<div
style="width: 600px; border: 1px solid; padding: 20px;"
>
<div
class="ant-descriptions"
>
<div
class="ant-descriptions-header"
>
<div
class="ant-descriptions-title"
>
User Info
</div>
</div>
<div
class="ant-descriptions-view"
>
<table>
<tbody>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="2"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div
style="width: 600px; border: 1px solid; padding: 20px;"
>
<div
class="ant-descriptions"
>
<div
class="ant-descriptions-header"
>
<div
class="ant-descriptions-title"
>
User Info
</div>
</div>
<div
class="ant-descriptions-view"
>
<table>
<tbody>
<tr
class="ant-descriptions-row"
>
<th
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
</div>
</th>
<th
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
</div>
</th>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<th
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
</div>
</th>
<th
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
</div>
</th>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<th
class="ant-descriptions-item"
colspan="2"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
</div>
</th>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="2"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
`;
exports[`renders components/descriptions/demo/padding.tsx extend context correctly 2`] = `[]`;
exports[`renders components/descriptions/demo/responsive.tsx extend context correctly 1`] = `
<div
class="ant-descriptions ant-descriptions-bordered"

329
components/descriptions/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -869,6 +869,335 @@ exports[`renders components/descriptions/demo/jsx.tsx correctly 1`] = `
</div>
`;
exports[`renders components/descriptions/demo/padding.tsx correctly 1`] = `
<div
class="ant-flex ant-flex-align-stretch ant-flex-vertical"
style="gap:8px"
>
<div
style="width:600px;border:1px solid;padding:20px"
>
<div
class="ant-descriptions"
>
<div
class="ant-descriptions-header"
>
<div
class="ant-descriptions-title"
>
User Info
</div>
</div>
<div
class="ant-descriptions-view"
>
<table>
<tbody>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="2"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div
style="width:600px;border:1px solid;padding:20px"
>
<div
class="ant-descriptions"
>
<div
class="ant-descriptions-header"
>
<div
class="ant-descriptions-title"
>
User Info
</div>
</div>
<div
class="ant-descriptions-view"
>
<table>
<tbody>
<tr
class="ant-descriptions-row"
>
<th
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
</div>
</th>
<th
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
</div>
</th>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<th
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
</div>
</th>
<th
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
</div>
</th>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<th
class="ant-descriptions-item"
colspan="2"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
</div>
</th>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="2"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
`;
exports[`renders components/descriptions/demo/responsive.tsx correctly 1`] = `
<div
class="ant-descriptions ant-descriptions-bordered"

1
components/descriptions/demo/component-token.tsx
View File

@ -104,6 +104,7 @@ const App: React.FC = () => {
titleColor: 'red',
titleMarginBottom: 2,
itemPaddingBottom: 8,
itemPaddingEnd: 8,
colonMarginRight: 10,
colonMarginLeft: 20,
contentColor: 'green',

7
components/descriptions/demo/padding.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
间距
## en-US
padding

44
components/descriptions/demo/padding.tsx Normal file
View File

@ -0,0 +1,44 @@
import React from 'react';
import { Descriptions, Flex } from 'antd';
import type { DescriptionsProps } from 'antd';
const items: DescriptionsProps['items'] = [
{
key: '1',
label: 'long',
children: 'loooooooooooooooooooooooooooooooooooooooooooooooong',
},
{
key: '2',
label: 'long',
children: 'loooooooooooooooooooooooooooooooooooooooooooooooong',
},
{
key: '3',
label: 'long',
children: 'loooooooooooooooooooooooooooooooooooooooooooooooong',
},
{
key: '4',
label: 'long',
children: 'loooooooooooooooooooooooooooooooooooooooooooooooong',
},
{
key: '5',
label: 'long',
children: 'loooooooooooooooooooooooooooooooooooooooooooooooong',
},
];
const App: React.FC = () => (
<Flex gap={8} vertical>
<div style={{ width: 600, border: '1px solid', padding: 20 }}>
<Descriptions title="User Info" column={2} items={items} />
</div>
<div style={{ width: 600, border: '1px solid', padding: 20 }}>
<Descriptions layout="vertical" title="User Info" column={2} items={items} />
</div>
</Flex>
);
export default App;

3
components/descriptions/index.en-US.md
View File

@ -63,6 +63,7 @@ const items: DescriptionsProps['items'] = [
<code src="./demo/basic.tsx">Basic</code>
<code src="./demo/border.tsx">border</code>
<code src="./demo/text.tsx" debug>border</code>
<code src="./demo/padding.tsx" debug>padding</code>
<code src="./demo/size.tsx">Custom size</code>
<code src="./demo/responsive.tsx">responsive</code>
<code src="./demo/vertical.tsx">Vertical</code>
@ -80,7 +81,7 @@ Common props ref：[Common props](/docs/react/common-props)
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| bordered | Whether to display the border | boolean | false | |
| colon | Change default props `colon` value of Descriptions.Item | boolean | true | |
| colon | Change default props `colon` value of Descriptions.Item. Indicates whether the colon after the label is displayed | boolean | true | |
| column | The number of `DescriptionItems` in a row,could be a number or a object like `{ xs: 8, sm: 16, md: 24}`,(Only set `bordered={true}` to take effect) | number \| [Record<Breakpoint, number>](https://github.com/ant-design/ant-design/blob/84ca0d23ae52e4f0940f20b0e22eabe743f90dca/components/descriptions/index.tsx#L111C21-L111C56) | 3 | |
| contentStyle | Customize content style | CSSProperties | - | 4.10.0 |
| extra | The action area of the description list, placed at the top-right | ReactNode | - | 4.5.0 |

3
components/descriptions/index.zh-CN.md
View File

@ -64,6 +64,7 @@ const items: DescriptionsProps['items'] = [
<code src="./demo/basic.tsx">基本</code>
<code src="./demo/border.tsx">带边框的</code>
<code src="./demo/text.tsx" debug>复杂文本的情况</code>
<code src="./demo/padding.tsx" debug>间距</code>
<code src="./demo/size.tsx">自定义尺寸</code>
<code src="./demo/responsive.tsx">响应式</code>
<code src="./demo/vertical.tsx">垂直</code>
@ -81,7 +82,7 @@ const items: DescriptionsProps['items'] = [
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| bordered | 是否展示边框 | boolean | false | |
| colon | 配置 `Descriptions.Item` 的 `colon` 的默认值 | boolean | true | |
| colon | 配置 `Descriptions.Item` 的 `colon` 的默认值。表示是否显示 label 后面的冒号 | boolean | true | |
| column | 一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number \| [Record<Breakpoint, number>](https://github.com/ant-design/ant-design/blob/84ca0d23ae52e4f0940f20b0e22eabe743f90dca/components/descriptions/index.tsx#L111C21-L111C56) | 3 | |
| contentStyle | 自定义内容样式 | CSSProperties | - | 4.10.0 |
| extra | 描述列表的操作区域，显示在右上方 | ReactNode | - | 4.5.0 |

14
components/descriptions/style/index.ts
View File

@ -28,6 +28,11 @@ export interface ComponentToken {
* @descEN Bottom padding of item
*/
itemPaddingBottom: number;
/**
* @desc 子项结束间距
* @descEN End padding of item
*/
itemPaddingEnd: number;
/**
* @desc 冒号右间距
* @descEN Right margin of colon
@ -105,6 +110,7 @@ const genDescriptionStyles: GenerateStyle<DescriptionsToken> = (token) => {
componentCls,
extraColor,
itemPaddingBottom,
itemPaddingEnd,
colonMarginRight,
colonMarginLeft,
titleMarginBottom,
@ -146,9 +152,16 @@ const genDescriptionStyles: GenerateStyle<DescriptionsToken> = (token) => {
[`${componentCls}-row`]: {
'> th, > td': {
paddingBottom: itemPaddingBottom,
paddingInlineEnd: itemPaddingEnd,
},
'> th:last-child, > td:last-child': {
paddingInlineEnd: 0,
},
'&:last-child': {
borderBottom: 'none',
'> th, > td': {
paddingBottom: 0,
},
},
},
[`${componentCls}-item-label`]: {
@ -223,6 +236,7 @@ export const prepareComponentToken: GetDefaultToken<'Descriptions'> = (token) =>
titleColor: token.colorText,
titleMarginBottom: token.fontSizeSM * token.lineHeightSM,
itemPaddingBottom: token.padding,
itemPaddingEnd: token.padding,
colonMarginRight: token.marginXS,
colonMarginLeft: token.marginXXS / 2,
contentColor: token.colorText,

1
components/dropdown/style/index.ts
View File

@ -211,6 +211,7 @@ const genBaseStyle: GenerateStyle<DropdownToken> = (token) => {
position: 'relative',
display: 'flex',
alignItems: 'center',
whiteSpace: 'nowrap',
},
[`${menuCls}-item-icon`]: {

2
components/form/index.en-US.md
View File

@ -313,7 +313,7 @@ Provide linkage between forms. If a sub form with `name` prop update, it will au
| setFieldValue | Set fields value(Will directly pass to form store and **reset validation message**. If you do not want to modify passed object, please clone first) | (name: [NamePath](#namepath), value: any) => void | 4.22.0 |
| setFieldsValue | Set fields value(Will directly pass to form store and **reset validation message**. If you do not want to modify passed object, please clone first). Use `setFieldValue` instead if you want to only config single value in Form.List | (values) => void | |
| submit | Submit the form. It's same as click `submit` button | () => void | |
| validateFields | Validate fields. Use `recursive` to validate all the field in the path | (nameList?: [NamePath](#namepath)\[], config?: [ValidateConfig](#validateFields)) => Promise | |
| validateFields | Validate fields. Use `recursive` to validate all the field in the path | (nameList?: [NamePath](#namepath)\[], config?: [ValidateConfig](#validatefields)) => Promise | |
#### validateFields

2
components/form/index.zh-CN.md
View File

@ -312,7 +312,7 @@ Form.List 渲染表单相关操作函数。
| setFieldValue | 设置表单的值（该值将直接传入 form store 中并且**重置错误信息**。如果你不希望传入对象被修改，请克隆后传入） | (name: [NamePath](#namepath), value: any) => void | 4.22.0 |
| setFieldsValue | 设置表单的值（该值将直接传入 form store 中并且**重置错误信息**。如果你不希望传入对象被修改，请克隆后传入）。如果你只想修改 Form.List 中单项值，请通过 `setFieldValue` 进行指定 | (values) => void | |
| submit | 提交表单，与点击 `submit` 按钮效果相同 | () => void | |
| validateFields | 触发表单验证，设置 `recursive` 时会递归校验所有包含的路径 | (nameList?: [NamePath](#namepath)\[], config?: [ValidateConfig](#validateFields)) => Promise | |
| validateFields | 触发表单验证，设置 `recursive` 时会递归校验所有包含的路径 | (nameList?: [NamePath](#namepath)\[], config?: [ValidateConfig](#validatefields)) => Promise | |
#### validateFields

4
components/image/style/index.ts
View File

@ -101,13 +101,13 @@ export const genPreviewOperationsStyle = (token: ImageToken): CSSObject => {
bottom: marginXL,
left: {
_skip_check_: true,
value: 0,
value: '50%',
},
width: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
color: token.previewOperationColor,
transform: 'translateX(-50%)',
},
[`${previewCls}-progress`]: {
marginBottom: margin,

2
components/list/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -3248,7 +3248,7 @@ exports[`renders components/list/demo/vertical.tsx extend context correctly 1`]
class="ant-list-pagination"
>
<ul
class="ant-pagination"
class="ant-pagination ant-pagination-end"
>
<li
aria-disabled="true"

2
components/list/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -3228,7 +3228,7 @@ exports[`renders components/list/demo/vertical.tsx correctly 1`] = `
class="ant-list-pagination"
>
<ul
class="ant-pagination"
class="ant-pagination ant-pagination-end"
>
<li
aria-disabled="true"

10
components/list/__tests__/__snapshots__/pagination.test.tsx.snap
View File

@ -2,7 +2,7 @@
exports[`List.pagination pagination button should be displayed normally, when the paginator total is not defined 1`] = `
<ul
class="ant-pagination"
class="ant-pagination ant-pagination-end"
>
<li
aria-disabled="true"
@ -123,7 +123,7 @@ exports[`List.pagination renders pagination correctly 1`] = `
class="ant-list-pagination"
>
<ul
class="ant-pagination my-page"
class="ant-pagination ant-pagination-end my-page"
>
<li
aria-disabled="true"
@ -218,7 +218,7 @@ exports[`List.pagination renders pagination correctly 1`] = `
exports[`List.pagination should change page size work 1`] = `
<ul
class="ant-pagination"
class="ant-pagination ant-pagination-end"
>
<li
aria-disabled="true"
@ -363,7 +363,7 @@ exports[`List.pagination should change page size work 1`] = `
exports[`List.pagination should change page size work 2`] = `
<ul
class="ant-pagination"
class="ant-pagination ant-pagination-end"
>
<li
aria-disabled="true"
@ -611,7 +611,7 @@ exports[`List.pagination should change page size work 2`] = `
exports[`List.pagination should default work 1`] = `
<ul
class="ant-pagination"
class="ant-pagination ant-pagination-end"
>
<li
aria-disabled="false"

1
components/list/index.tsx
View File

@ -204,6 +204,7 @@ function List<T>({
const paginationContent = pagination && (
<div className={classNames(`${prefixCls}-pagination`)}>
<Pagination
align="end"
{...paginationProps}
onChange={onPaginationChange}
onShowSizeChange={onPaginationShowSizeChange}

746276
components/locale/__tests__/__snapshots__/index.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

2
components/menu/index.en-US.md
View File

@ -69,7 +69,7 @@ Common props ref：[Common props](/docs/react/common-props)
### ItemType
> type ItemType = [MenuItemType](#MenuItemType) | [SubMenuType](#SubMenuType) | [MenuItemGroupType](#MenuItemGroupType) | [MenuDividerType](#MenuDividerType);
> type ItemType = [MenuItemType](#menuitemtype) | [SubMenuType](#submenutype) | [MenuItemGroupType](#menuitemgrouptype) | [MenuDividerType](#menudividertype);
#### MenuItemType

2
components/menu/index.zh-CN.md
View File

@ -70,7 +70,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Vn4XSqJFAxcAAA
### ItemType
> type ItemType = [MenuItemType](#MenuItemType) | [SubMenuType](#SubMenuType) | [MenuItemGroupType](#MenuItemGroupType) | [MenuDividerType](#MenuDividerType);
> type ItemType = [MenuItemType](#menuitemtype) | [SubMenuType](#submenutype) | [MenuItemGroupType](#menuitemgrouptype) | [MenuDividerType](#menudividertype);
#### MenuItemType

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

@ -23,7 +23,7 @@ const App: React.FC = () => (
itemActiveBgDisabled: '#9c1515',
itemInputBg: '#9c1515',
miniOptionsSizeChangerTop: 0,
itemBg: '#333',
itemBg: '#b5f5ec',
},
},
}}

2
components/pagination/style/index.ts
View File

@ -514,7 +514,7 @@ const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = (token
textAlign: 'center',
verticalAlign: 'middle',
listStyle: 'none',
backgroundColor: 'transparent',
backgroundColor: token.itemBg,
border: `${unit(token.lineWidth)} ${token.lineType} transparent`,
borderRadius: token.borderRadius,
outline: 0,

2
components/radio/index.en-US.md
View File

@ -55,7 +55,7 @@ Radio group can wrap a group of `Radio`。
| defaultValue | Default selected value | any | - | |
| disabled | Disable all radio buttons | boolean | false | |
| name | The `name` property of all `input[type="radio"]` children | string | - | |
| options | Set children optional | string\[] \| number\[] \| Array&lt;[CheckboxOptionType](#CheckboxOptionType)> | - | |
| options | Set children optional | string\[] \| number\[] \| Array&lt;[CheckboxOptionType](#checkboxoptiontype)> | - | |
| optionType | Set Radio optionType | `default` \| `button` | `default` | 4.4.0 |
| size | The size of radio button style | `large` \| `middle` \| `small` | - | |
| value | Used for setting the currently selected value | any | - | |

2
components/radio/index.zh-CN.md
View File

@ -58,7 +58,7 @@ demo:
| defaultValue | 默认选中的值 | any | - | | |
| disabled | 禁选所有子单选器 | boolean | false | | |
| name | RadioGroup 下所有 `input[type="radio"]` 的 `name` 属性 | string | - | | |
| options | 以配置形式设置子元素 | string\[] \| number\[] \| Array&lt;[CheckboxOptionType](#CheckboxOptionType)> | - | | |
| options | 以配置形式设置子元素 | string\[] \| number\[] \| Array&lt;[CheckboxOptionType](#checkboxoptiontype)> | - | | |
| optionType | 用于设置 Radio `options` 类型 | `default` \| `button` | `default` | 4.4.0 | |
| size | 大小，只对按钮样式生效 | `large` \| `middle` \| `small` | - | | |
| value | 用于设置当前选中的值 | any | - | | |

247
components/table/__tests__/Sorter.value.test.tsx Normal file
View File

@ -0,0 +1,247 @@
import React, { useState } from 'react';
import Table from '..';
import { render, fireEvent } from '../../../tests/utils';
describe('Sorter.value.test.tsx', () => {
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
afterEach(() => {
errorSpy.mockReset();
});
afterAll(() => {
errorSpy.mockRestore();
});
interface stateType {
columns: Array<{
title: string;
dataIndex: string;
sorter: {
multiple: number;
};
}>;
data: Array<{
key: React.Key;
age?: number;
foo?: string;
name?: string;
}>;
}
const data = {
columns: [
{
title: 'Age',
dataIndex: 'age',
sorter: {
multiple: 2,
},
},
{
title: 'foo',
dataIndex: 'foo',
sorter: {
multiple: 2,
},
},
],
data: [
{
key: '1',
age: 32,
foo: 'foo',
},
{
key: '2',
age: 33,
foo: 'bar',
},
],
};
it('should call onChange with correct sorter value when clicked', () => {
const onChange = jest.fn();
const TableSorter: React.FC = () => {
const [tableData, setTableData] = useState(data.data);
const columns = [
{
title: 'Age',
dataIndex: 'age',
sorter: {
multiple: 2,
},
},
{
title: 'foo',
dataIndex: 'foo',
sorter: {
multiple: 2,
},
},
];
const handleClick = () => {
setTableData([
{
key: '1',
age: 22,
foo: 'foo1',
},
{
key: '2',
age: 23,
foo: 'foo2',
},
{
key: '3',
age: 12,
foo: 'foo3',
},
]);
};
return (
<>
<Table
columns={columns}
dataSource={tableData}
onChange={onChange}
showSorterTooltip={{ target: 'sorter-icon' }}
/>
<button type="button" className="change-column" onClick={handleClick}>
resetData
</button>
</>
);
};
const { container } = render(<TableSorter />);
fireEvent.click(container.querySelector('.ant-table-column-sorters')!);
expect(onChange).toHaveBeenLastCalledWith(
expect.anything(),
expect.anything(),
expect.objectContaining({
order: 'ascend',
field: 'age',
}),
expect.anything(),
);
const columnSorters = container.querySelectorAll('.ant-table-column-sorters');
const fooSorterIcon = columnSorters[1];
fireEvent.click(fooSorterIcon);
expect(onChange).toHaveBeenLastCalledWith(
expect.anything(),
expect.anything(),
expect.arrayContaining([
expect.objectContaining({
order: 'ascend',
field: 'age',
}),
expect.objectContaining({
order: 'ascend',
field: 'foo',
}),
]),
expect.anything(),
);
const changeButton = container.querySelector('.change-column');
fireEvent.click(changeButton!);
const getNameColumn = () => container.querySelector('th');
expect(
getNameColumn()?.querySelector('.ant-table-column-sorter-up')?.className.includes('active'),
).toBeTruthy();
fireEvent.click(container.querySelector('.ant-table-column-sorters')!);
expect(onChange).toHaveBeenLastCalledWith(
expect.anything(),
expect.anything(),
expect.arrayContaining([
expect.objectContaining({
order: 'ascend',
field: 'foo',
}),
expect.objectContaining({
order: 'descend',
field: 'age',
}),
]),
expect.anything(),
);
expect(
getNameColumn()?.querySelector('.ant-table-column-sorter-down')?.className.includes('active'),
).toBeTruthy();
});
it('onChange should be called with the correct sorter value when clicked when the column changes', () => {
const onChange = jest.fn();
const TableSorter: React.FC = () => {
const [tableData, setTableData] = useState<stateType>(data);
const handleClick = () => {
setTableData({
columns: [
{
title: 'name',
dataIndex: 'name',
sorter: {
multiple: 2,
},
},
{
title: 'foo',
dataIndex: 'foo',
sorter: {
multiple: 2,
},
},
],
data: [
{
key: 'sxzz',
name: 'sxzz',
foo: 'foo',
},
{
key: 'innei',
name: 'innei',
foo: 'bar',
},
],
});
};
return (
<>
<Table
columns={tableData.columns}
dataSource={tableData.data}
onChange={onChange}
showSorterTooltip={{ target: 'sorter-icon' }}
/>
<button type="button" className="change-column" onClick={handleClick}>
change11
</button>
</>
);
};
const { container } = render(<TableSorter />);
fireEvent.click(container.querySelector('.ant-table-column-sorters')!);
expect(onChange).toHaveBeenLastCalledWith(
expect.anything(),
expect.anything(),
expect.objectContaining({
order: 'ascend',
field: 'age',
}),
expect.anything(),
);
const changeButton = container.querySelector('.change-column');
fireEvent.click(changeButton!);
const columnSorters = container.querySelectorAll('.ant-table-column-sorters');
const fooSorterIcon = columnSorters[1];
fireEvent.click(fooSorterIcon);
expect(onChange).toHaveBeenLastCalledWith(
expect.anything(),
expect.anything(),
expect.objectContaining({
order: 'ascend',
field: 'foo',
}),
expect.anything(),
);
});
});

6
components/table/hooks/useSorter.tsx
View File

@ -400,7 +400,11 @@ export default function useFilterSorter<RecordType>({
// Return if not controlled
if (!collectedStates.length) {
return sortStates;
const mergedColumnsKeys = mergedColumns.map((item, index) =>
getColumnKey(item, getColumnPos(index)),
);
return sortStates.filter(({ key }) => mergedColumnsKeys.includes(key));
}
const validateStates: SortState<RecordType>[] = [];

1
docs/blog/build-ghost.en-US.md
View File

@ -2,6 +2,7 @@
title: A build ghost
date: 2023-12-20
author: zombieJ
juejin_url: https://juejin.cn/post/7322352551088341019
---
In the maintenance of antd-mobile, We meet an annoying ghost. It rarely appears when building locally, but it almost always appears in the github workflow. After a lot of tossing, We finally found its trace.

1
docs/blog/build-ghost.zh-CN.md
View File

@ -2,6 +2,7 @@
title: 一个构建的幽灵
date: 2023-12-20
author: zombieJ
juejin_url: https://juejin.cn/post/7322352551088341019
---
在 antd-mobile 的维护过程中，遇到了一个恼人的幽灵。它在本地构建时几乎不会出现，但是在 github 的 workflow 中，却几乎每次都会出现。在经过一番折腾后，终于找到了它的踪迹。

2
docs/blog/check-conduct.en-US.md
View File

@ -2,6 +2,8 @@
title: Tree's check conduction
date: 2022-12-14
author: zombieJ
zhihu_url: https://zhuanlan.zhihu.com/p/608106800
yuque_url: https://www.yuque.com/ant-design/ant-design/hiufwnq7iqoded0h
---
In the Tree or similar components (such as TreeSelect, Cascader), needs check function. It's unambiguous most of the time, but when a `disabled` node appears somewhere in the middle, it's worth talking about. This article will introduce the logic of check conduction in antd. It should be noted that in different scenarios, there will be various requirements, and antd has chosen the most commonly used check conduction logic. If you need a different custom style, you can implement it yourself through `checkStrictly`.

2
docs/blog/check-conduct.zh-CN.md
View File

@ -2,6 +2,8 @@
title: Tree 的勾选传导
date: 2022-12-14
author: zombieJ
zhihu_url: https://zhuanlan.zhihu.com/p/608106800
yuque_url: https://www.yuque.com/ant-design/ant-design/hiufwnq7iqoded0h
---
在 Tree 组件以及类似的组件（如 TreeSelect、Cascader），都会需要勾选功能。在大部分情况下它都没有歧义，但是当中间的某个节点出现 `disabled` 节点时，这就值得讨论了。这篇文章会介绍 antd 中，勾选传导的逻辑。需要注意的是，在不同的场景下，会有各种不同的需求，antd 选择了其中最常用的一种勾选传导逻辑。如果你需要不同的定制款，可以通过 `checkStrictly` 来自行实现。

1
docs/blog/color-picker.en-US.md
View File

@ -2,6 +2,7 @@
title: Color Models and Color Picker
date: 2023-09-07
author: Redjue
juejin_url: https://juejin.cn/post/7322296529783226405
---
Hello everyone, I'm [Redjue](https://github.com/Redjue), and I'm honored to have the opportunity to contribute the [ColorPicker](/components/color-picker) component to **Ant Design** this year. It's been a great learning experience and has given me a deeper understanding of the development process of **Ant Design**. In this article, I will share the specific implementation process.

1
docs/blog/color-picker.zh-CN.md
View File

@ -2,6 +2,7 @@
title: 色彩模型与颜色选择器
date: 2023-09-07
author: Redjue
juejin_url: https://juejin.cn/post/7322296529783226405
---
大家好，我是 [Redjue（红果汁）](https://github.com/Redjue)，很荣幸今年有机会向 **Ant Design** 贡献了颜色选择器组件 [ColorPicker](/components/color-picker-cn)，这是一次很棒的学习机会，也让我对 **Ant Design** 的开发流程有了更深入的了解。在这篇文章中，我将分享一下具体的实现过程。

1
docs/blog/config-provider-style.en-US.md
View File

@ -2,6 +2,7 @@
title: Extends Theme
date: 2023-09-03
author: zombieJ
juejin_url: https://juejin.cn/post/7322313142922100746
---
Ant Design v5 provides the Design Token model, which supports custom algorithm to implement theme extension capabilities. For example, the compact theme itself does not carry color style algorithms, so it can be implemented by passing in multiple algorithms to achieve the compact theme under the light theme and the compact theme under the dark theme.

1
docs/blog/config-provider-style.zh-CN.md
View File

@ -2,6 +2,7 @@
title: 主题拓展
date: 2023-09-03
author: zombieJ
juejin_url: https://juejin.cn/post/7322313142922100746
---
Ant Design v5 提供了 Design Token 模型，支持自定义算法实现主题拓展能力。例如 紧凑主题 本身并不携带颜色样式算法，所以可以通过传入多个算法的方式实现 亮色主题下的紧凑主题 以及 暗色主题下的紧凑主题。

3
docs/blog/contributor-development-maintenance-guide.en-US.md
View File

@ -2,6 +2,9 @@
title: Contributor development maintenance guide
date: 2023-03-10
author: kiner-tang
zhihu_url: https://zhuanlan.zhihu.com/p/639266384
yuque_url: https://www.yuque.com/ant-design/ant-design/rixou58ogv8hlev2
juejin_url: https://juejin.cn/post/7322305961196273673
---
Hi, I'm [kiner-tang](https://github.com/kiner-tang) who is a heavy user of Ant Design. As the same reason, I come up to be a contributor for fixing bug and some features. Finally, it's my honer to become a member of Ant Design Collaborator.

5
docs/blog/contributor-development-maintenance-guide.zh-CN.md
View File

@ -2,9 +2,12 @@
title: 贡献者开发维护指南
date: 2023-03-10
author: kiner-tang
zhihu_url: https://zhuanlan.zhihu.com/p/639266384
yuque_url: https://www.yuque.com/ant-design/ant-design/rixou58ogv8hlev2
juejin_url: https://juejin.cn/post/7322305961196273673
---
大家好，我是[kiner-tang(文辉)](https://github.com/kiner-tang)，我个人的工作内容可以说与 Ant Design 密切相关，可以算是 Ant Design 的重度用户了。也正因如此，让我由一个使用者慢慢地向着贡献者 Contributor 迈进，将自己在工作过程中遇到的一些问题和总结出的新特性回馈于社区，并最终很荣幸地成为了 Ant Design 的 Collaborator 中的一员。在从使用者到贡献者，再从贡献者到合作者的旅途中，也遇到了不少的问题，借此机会梳理总结一下，希望能对新加入 Ant Design 社区的贡献者和合作者们有所帮助。
大家好，我是 [kiner-tang(文辉)](https://github.com/kiner-tang)，我个人的工作内容可以说与 Ant Design 密切相关，可以算是 Ant Design 的重度用户了。也正因如此，让我由一个使用者慢慢地向着贡献者 Contributor 迈进，将自己在工作过程中遇到的一些问题和总结出的新特性回馈于社区，并最终很荣幸地成为了 Ant Design 的 Collaborator 中的一员。在从使用者到贡献者，再从贡献者到合作者的旅途中，也遇到了不少的问题，借此机会梳理总结一下，希望能对新加入 Ant Design 社区的贡献者和合作者们有所帮助。
## 普通常见问题

3
docs/blog/css-in-js.en-US.md
View File

@ -2,6 +2,9 @@
title: Component-level CSS-in-JS
date: 2022-11-25
author: MadCcc
zhihu_url: https://zhuanlan.zhihu.com/p/606291980
yuque_url: https://www.yuque.com/ant-design/ant-design/iv21twb9368r0goc
juejin_url: https://juejin.cn/post/7322352551088635931
---
On November 18, 2022, we released Ant Design 5.0. At the same time, Ant Design's unique CSS-in-JS solution was brought into everyone's view. Through this solution, Ant Design achieves higher performance than other CSS-in-JS libraries, but at the cost of sacrificing its flexibility for free use in applications. So we call it a "component-level" CSS-in-JS solution. <a name="W668Z"></a>

3
docs/blog/css-in-js.zh-CN.md
View File

@ -2,6 +2,9 @@
title: 组件级别的 CSS-in-JS
date: 2022-11-25
author: MadCcc
zhihu_url: https://zhuanlan.zhihu.com/p/606291980
yuque_url: https://www.yuque.com/ant-design/ant-design/iv21twb9368r0goc
juejin_url: https://juejin.cn/post/7322352551088635931
---
在 2022 年 11 月 18 日，我们发布了 Ant Design 5.0 的正式版本，同时带入大家视野中的还有 Ant Design 独特的 CSS-in-JS 方案。通过这个方案，Ant Design 获得了相较于其他 CSS-in-JS 库更高的性能，但代价则是牺牲了其在应用中自由使用的灵活性。所以我们把它称为“组件级”的 CSS-in-JS 方案。

3
docs/blog/extract-ssr.en-US.md
View File

@ -2,6 +2,9 @@
title: SSR Static style export
date: 2023-04-25
author: zombieJ
zhihu_url: https://zhuanlan.zhihu.com/p/639266657
yuque_url: https://www.yuque.com/ant-design/ant-design/gyacdbtixle9bbm4
juejin_url: https://juejin.cn/post/7322352551088603163
---
For traditional js + css websites, SSR only needs to deal with the hydrate problem of the first rendering. With the introduction of CSS-in-JS technology, developers need to pay additional attention to how to export styles to HTML to ensure the correctness of the view. We provide a lot of implementation methods, and we just talk about the ideas here. If you need complete documentation or examples, please refer to [Customize Theme](/docs/react/customize-theme-cn).

3
docs/blog/extract-ssr.zh-CN.md
View File

@ -2,6 +2,9 @@
title: SSR 静态样式导出
date: 2023-04-25
author: zombieJ
zhihu_url: https://zhuanlan.zhihu.com/p/639266657
yuque_url: https://www.yuque.com/ant-design/ant-design/gyacdbtixle9bbm4
juejin_url: https://juejin.cn/post/7322352551088603163
---
传统的 js + css 网站，SSR 一般只需要处理好首次渲染的注水问题。而当 CSS-in-JS 技术的引入，开发者则需要额外关注如何将样式导出到 HTML 中，以保证首次渲染的正确性。我们提供了非常多的实现方式，也正好在此聊聊其中的思路。如果你需要完整的文档或者示例欢迎查阅[《定制主题》](/docs/react/customize-theme-cn)。

2
docs/blog/getContainer.en-US.md
View File

@ -2,6 +2,8 @@
title: Some change on getContainer
date: 2022-12-08
author: zombieJ
zhihu_url: https://zhuanlan.zhihu.com/p/606878571
yuque_url: https://www.yuque.com/ant-design/ant-design/eegn0tn5fy94uwk8
---
We often encounter the need for pop-up elements when developing, such as the Select drop-down box, or the Modal component. When it is directly rendered under the current node, it may be clipped by the `overflow: hidden` of the parent node:

2
docs/blog/getContainer.zh-CN.md
View File

@ -2,6 +2,8 @@
title: getContainer 的一些变化
date: 2022-12-08
author: zombieJ
zhihu_url: https://zhuanlan.zhihu.com/p/606878571
yuque_url: https://www.yuque.com/ant-design/ant-design/eegn0tn5fy94uwk8
---
在网页开发中，我们时常会遇到弹出元素的需求，比如 Select 的下拉框、或者是 Modal 组件。直接将其渲染到当前节点下时，可能会被父节点的 `overflow: hidden` 裁剪掉：

1
docs/blog/github-actions-workflow.en-US.md
View File

@ -2,6 +2,7 @@
title: Hi, GitHub Actions
date: 2023-06-06
author: Wxh16144
zhihu_url: https://zhuanlan.zhihu.com/p/639266855
---
Hi, I'm [Wxh16144](https://github.com/Wxh16144). I have discovered some tools that can improve development efficiency and code quality through learning Ant Design's component library and participating in community contributions. I'd like to take this opportunity to share my experience with you. To help better understand Ant Design, and to apply these techniques to your own projects.

1
docs/blog/github-actions-workflow.zh-CN.md
View File

@ -2,6 +2,7 @@
title: 你好，GitHub Actions
date: 2023-06-06
author: Wxh16144
zhihu_url: https://zhuanlan.zhihu.com/p/639266855
---
大家好，我是 [Wxh16144](https://github.com/Wxh16144)，通过学习 Ant Design 的组件库和参与社区贡献，我发现了一些提高开发效率和代码质量的工具。借此机会，希望与大家分享我的经验，帮助大家更好地了解 Ant Design，并将这些技巧应用到自己的项目中。

3
docs/blog/mock-project-build.en-US.md
View File

@ -2,6 +2,9 @@
title: Dependency troubleshooting
date: 2023-04-13
author: zombieJ
zhihu_url: https://zhuanlan.zhihu.com/p/639266509
yuque_url: https://www.yuque.com/ant-design/ant-design/yi1lz5dg3iygwbed
juejin_url: https://juejin.cn/post/7322296529783128101
---
As a large component library, Ant Design has complex internal dependencies. Sometimes there is nothing change in antd, but the update of the internal dependencies may also cause the developer's build failure. For example, my recent mistake with [path case error](https://github.com/ant-design/ant-design/issues/41236) made the build fail under Linux.

3
docs/blog/mock-project-build.zh-CN.md
View File

@ -2,6 +2,9 @@
title: 依赖排查
date: 2023-04-13
author: zombieJ
zhihu_url: https://zhuanlan.zhihu.com/p/639266509
yuque_url: https://www.yuque.com/ant-design/ant-design/yi1lz5dg3iygwbed
juejin_url: https://juejin.cn/post/7322296529783128101
---
Ant Design 作为大型组件库，内部依赖十分复杂。有时候 antd 代码本身没有改动，但是底层依赖更新也可能导致开发者的构建失败。比如最近由于我的失误，一处[路径大小写错误](https://github.com/ant-design/ant-design/issues/41236)使得在 Linux 下会构建失败。

3
docs/blog/modal-hook-order.en-US.md
View File

@ -2,6 +2,9 @@
title: Funny Modal hook BUG
date: 2022-12-21
author: zombieJ
zhihu_url: https://zhuanlan.zhihu.com/p/639265725
yuque_url: https://www.yuque.com/ant-design/ant-design/yq0w59gikugthyqz
juejin_url: https://juejin.cn/post/7322306608103686194
---
Recently we encountered an [issue](https://github.com/ant-design/ant-design/issues/39427), saying that when `contextHolder` of `Modal.useModal` is placed in different positions, `modal.confirm` popup location will be different:

3
docs/blog/modal-hook-order.zh-CN.md
View File

@ -2,6 +2,9 @@
title: Modal hook 的有趣 BUG
date: 2022-12-21
author: zombieJ
zhihu_url: https://zhuanlan.zhihu.com/p/639265725
yuque_url: https://www.yuque.com/ant-design/ant-design/yq0w59gikugthyqz
juejin_url: https://juejin.cn/post/7322306608103686194
---
最近我们遇到了一个 [issue](https://github.com/ant-design/ant-design/issues/39427)，说是 `Modal.useModal` 的 `contextHolder` 在放置不同的位置时，`modal.confirm` 弹出位置会不一样：

3
docs/blog/render-times.en-US.md
View File

@ -2,6 +2,9 @@
title: Unnecessary Rerender
date: 2022-12-31
author: zombieJ
zhihu_url: https://zhuanlan.zhihu.com/p/633328911
yuque_url: https://www.yuque.com/ant-design/ant-design/uz7b7d6wq05e4wvo
juejin_url: https://juejin.cn/post/7322352551088537627
---
For heavy components, some bug fixes or new features can easily destroy the original performance optimization inadvertently over time. Recently, we are refactoring the Table to troubleshoot and restore the performance loss caused by some historical updates. Here, we introduce some common troubleshooting method and frequently meet problems.

3
docs/blog/render-times.zh-CN.md
View File

@ -2,6 +2,9 @@
title: 非必要的渲染
date: 2022-12-31
author: zombieJ
zhihu_url: https://zhuanlan.zhihu.com/p/633328911
yuque_url: https://www.yuque.com/ant-design/ant-design/uz7b7d6wq05e4wvo
juejin_url: https://juejin.cn/post/7322352551088537627
---
对于重型组件而言，随着时间推移，一些 BUG Fix 或者新增 Feature 很容易不经意间将原本的性能优化给破坏掉。而最近，我们在对 Table 进行重构将一些历史更新导致的性能损失进行排查并恢复。在此，我们介绍一些常用的排查技巧以及常见问题。

3
docs/blog/testing-migrate.en-US.md
View File

@ -2,6 +2,9 @@
title: about antd test library migration
date: 2022-12-20
author: li-jia-nan,zombieJ
zhihu_url: https://zhuanlan.zhihu.com/p/639249930
yuque_url: https://www.yuque.com/ant-design/ant-design/bunxvp7nz4y7bbhi
juejin_url: https://juejin.cn/post/7179115861176188983
---
Hello, I am **[@li-jia-nan](https://github.com/li-jia-nan)**. It is also a new Collaborator who joined antd in the past few months. Fortunately, as one of the Collaborators, I developed the **[FloatButton component](/components/float-button)** and **[QRCode component](/components/qrcode)**, as well as some other maintenance work. Let me share the migration of the antd test library son~

3
docs/blog/testing-migrate.zh-CN.md
View File

@ -2,6 +2,9 @@
title: antd 测试库迁移的那些事儿
date: 2022-12-20
author: li-jia-nan,zombieJ
zhihu_url: https://zhuanlan.zhihu.com/p/639249930
yuque_url: https://www.yuque.com/ant-design/ant-design/bunxvp7nz4y7bbhi
juejin_url: https://juejin.cn/post/7179115861176188983
---
大家好，我是 **[@li-jia-nan](https://github.com/li-jia-nan)**。也是前几个月新加入 antd 的 Collaborator，有幸作为 Collaborators 之一，我开发了 **[FloatButton](/components/float-button-cn)** 组件和 **[QRCode](/components/qrcode-cn)** 组件，以及一些其它维护工作，下面分享一下 antd 测试库迁移的那些事儿～

2
docs/blog/to-be-collaborator.en-US.md
View File

@ -2,6 +2,8 @@
title: How to Grow as a Collaborator
date: 2022-12-22
author: heiyu4585
zhihu_url: https://zhuanlan.zhihu.com/p/639265896
yuque_url: https://www.yuque.com/ant-design/ant-design/as5hro5edxcslweh
---
Hello everyone, I am [heiyu](https://github.com/heiyu4585). About Ant Design, I believe everyone is very familiar with it. Before I contributed to Ant Design, I have used Ant Design in many background management system projects at work. The biggest feeling for me is that it is easy to use, beautiful, simple and stable. Now that the v5 version has been released, I strongly recommend everyone to try it. I am also fortunate to have developed the v5 version of the `Tour` component and `App` component, as well as some other maintenance work. Let me share with you the PR process of Ant Design, hoping to provide a reference for who are interested in building together for the community.

2
docs/blog/to-be-collaborator.zh-CN.md
View File

@ -2,6 +2,8 @@
title: 如何成长为 Collaborator
date: 2022-12-22
author: heiyu4585
zhihu_url: https://zhuanlan.zhihu.com/p/639265896
yuque_url: https://www.yuque.com/ant-design/ant-design/as5hro5edxcslweh
---
大家好，我是[黑雨](https://github.com/heiyu4585)。关于 Ant Design，相信大家都非常熟悉，我在很多后台管理系统项目使用过 Ant Design，给我最大的感觉就是好用、好看、简单、稳定。现在 `v5` 版本已经发布，强烈推荐大家试使用，我也有幸开发了 `v5` 版本的 `Tour` 组件和 `App` 组件，以及一些其他维护工作。下面给大家分享一下 Ant Design 的 PR 流程，希望能给有兴趣为社区共建的同学提供一份参考。

3
docs/blog/to-be-what-you-see.en-US.md
View File

@ -2,6 +2,9 @@
title: To be what you see
date: 2023-05-10
author: zombieJ
zhihu_url: https://zhuanlan.zhihu.com/p/639266810
yuque_url: https://www.yuque.com/ant-design/ant-design/vhife82m442inpws
juejin_url: https://juejin.cn/post/7322296529783078949
---
With daily development, have you thought about a problem. When the range limit is different from the actual value, how should we deal with it? Suppose we have a display component that simply displays your value:

3
docs/blog/to-be-what-you-see.zh-CN.md
View File

@ -2,6 +2,9 @@
title: 所见即所得
date: 2023-05-10
author: zombieJ
zhihu_url: https://zhuanlan.zhihu.com/p/639266810
yuque_url: https://www.yuque.com/ant-design/ant-design/vhife82m442inpws
juejin_url: https://juejin.cn/post/7322296529783078949
---
在日常开发过程中，你是否思考过一个问题。那就是范围限定和实际值不同的时候，应该如何去处理？假设我们有一个展示组件，它很简单的将你的值进行展示：

3
docs/blog/tooltip-align.en-US.md
View File

@ -2,6 +2,9 @@
title: Tooltip align update
date: 2023-02-15
author: zombieJ
zhihu_url: https://zhuanlan.zhihu.com/p/633332552
yuque_url: https://www.yuque.com/ant-design/ant-design/lqtquocyv0k3xbg0
juejin_url: https://juejin.cn/post/7322352551088390171
---
In the `5.3.0` version, we will update the underlying dependency `@rc-component/trigger` of the Tooltip component to better implement adaptive alignment logic. Before that, let's talk about some problems encountered in the previous version.

3
docs/blog/tooltip-align.zh-CN.md
View File

@ -2,6 +2,9 @@
title: 新的 Tooltip 对齐方式
date: 2023-02-15
author: zombieJ
zhihu_url: https://zhuanlan.zhihu.com/p/633332552
yuque_url: https://www.yuque.com/ant-design/ant-design/lqtquocyv0k3xbg0
juejin_url: https://juejin.cn/post/7322352551088390171
---
在 `5.3.0` 版本中，我们将会更新 Tooltip 组件的底层依赖 `@rc-component/trigger` 使其更好的实现自适应对齐逻辑。在此之前，我们先聊聊此前版本遇到的一些问题。

1
docs/blog/virtual-table.en-US.md
View File

@ -2,6 +2,7 @@
title: Virtual Table is here!
date: 2023-08-29
author: zombieJ
juejin_url: https://juejin.cn/post/7322305961196126217
---
## Preface

1
docs/blog/virtual-table.zh-CN.md
View File

@ -2,6 +2,7 @@
title: 虚拟表格来了！
date: 2023-08-29
author: zombieJ
juejin_url: https://juejin.cn/post/7322305961196126217
---
## 前言

4
docs/react/introduce.en-US.md
View File

@ -6,9 +6,9 @@ title: Ant Design of React
Following the Ant Design specification, we developed a React UI library `antd` that contains a set of high quality components and demos for building rich, interactive user interfaces.
<div class="pic-plus">
<img width="150" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
<img width="150" draggable="false" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
<span>+</span>
<img width="160" src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg" />
<img width="160" draggable="false" src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg" />
</div>
---

4
docs/react/introduce.zh-CN.md
View File

@ -6,9 +6,9 @@ title: Ant Design of React
`antd` 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
<div class="pic-plus">
<img width="150" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"/>
<img width="150" draggable="false" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"/>
<span>+</span>
<img width="160" src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"/>
<img width="160" draggable="false" src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"/>
</div>
---

23
package.json
View File

@ -1,6 +1,6 @@
{
"name": "antd",
"version": "5.19.2",
"version": "5.19.3",
"description": "An enterprise-class UI design language and React components implementation",
"keywords": [
"ant",
@ -26,12 +26,20 @@
"url": "https://opencollective.com/ant-design"
},
"license": "MIT",
"sideEffects": ["*.css"],
"sideEffects": [
"*.css"
],
"main": "lib/index.js",
"unpkg": "dist/antd.min.js",
"module": "es/index.js",
"typings": "es/index.d.ts",
"files": ["dist", "es", "lib", "locale", "BUG_VERSIONS.json"],
"files": [
"dist",
"es",
"lib",
"locale",
"BUG_VERSIONS.json"
],
"scripts": {
"api-collection": "antd-tools run api-collection",
"authors": "tsx scripts/generate-authors.ts",
@ -97,7 +105,12 @@
"tsc:old": "tsc --noEmit -p tsconfig-old-react.json",
"version": "tsx scripts/generate-version.ts"
},
"browserslist": ["> 0.5%", "last 2 versions", "Firefox ESR", "not dead"],
"browserslist": [
"> 0.5%",
"last 2 versions",
"Firefox ESR",
"not dead"
],
"dependencies": {
"@ant-design/colors": "^7.1.0",
"@ant-design/cssinjs": "^1.21.0",
@ -133,7 +146,7 @@
"rc-rate": "~2.13.0",
"rc-resize-observer": "^1.4.0",
"rc-segmented": "~2.3.0",
"rc-select": "~14.15.0",
"rc-select": "~14.15.1",
"rc-slider": "~11.0.5",
"rc-steps": "~6.0.1",
"rc-switch": "~4.1.0",

1
scripts/generate-component-changelog.ts
View File

@ -77,6 +77,7 @@ const miscKeys = [
'🇵🇱',
'🇲🇳',
'🇳🇵',
'🇪🇬',
];
(() => {