Merge branch 'master' into feature-merge-master

This commit is contained in:
MadCcc 2022-12-18 14:28:58 +08:00
commit bd15aaedd6
128 changed files with 2711 additions and 1381 deletions

View File

@ -7,7 +7,6 @@ import useSiteToken from '../../../hooks/useSiteToken';
import { GroupMask } from './Group';
import * as utils from '../../../theme/utils';
import SiteContext from './SiteContext';
import topicImage from './images/topic.png';
const locales = {
cn: {
@ -69,7 +68,11 @@ export default function Banner({ children }: BannerProps) {
<>
{/* Banner Placeholder Motion */}
{isMobile ? (
<img src={topicImage} alt="" style={{ width: '100%' }} />
<img
src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JmlaR5oQn3MAAAAAAAAAAAAADrJ8AQ/original"
style={{ width: '100%' }}
alt=""
/>
) : (
<div
style={{

Binary file not shown.

Before

Width:  |  Height:  |  Size: 196 KiB

View File

@ -1,7 +1,10 @@
import React from 'react';
import { FloatButton } from 'antd';
import { FormattedMessage } from 'dumi';
import { DarkTheme, Light, CompactTheme } from 'antd-token-previewer/es/icons';
import { FormattedMessage, Link, useLocation } from 'dumi';
import { DarkTheme, CompactTheme } from 'antd-token-previewer/es/icons';
import { BgColorsOutlined } from '@ant-design/icons';
import useSiteToken from '../../../hooks/useSiteToken';
import { getLocalizedPathname, isZhCN } from '../../utils';
import ThemeIcon from './ThemeIcon';
export type ThemeName = 'light' | 'dark' | 'compact';
@ -11,41 +14,46 @@ export type ThemeSwitchProps = {
onChange: (value: ThemeName[]) => void;
};
const ThemeSwitch: React.FC<ThemeSwitchProps> = ({ value, onChange }) => (
<FloatButton.Group trigger="click" icon={<ThemeIcon />}>
<FloatButton
icon={<Light />}
type={!value.includes('dark') ? 'primary' : 'default'}
onClick={() => {
if (value.includes('dark')) {
onChange(value.filter((theme) => theme !== 'dark'));
}
}}
tooltip={<FormattedMessage id="app.theme.switch.default" />}
/>
<FloatButton
icon={<DarkTheme />}
type={value.includes('dark') ? 'primary' : 'default'}
onClick={() => {
if (!value.includes('dark')) {
onChange([...value, 'dark']);
}
}}
tooltip={<FormattedMessage id="app.theme.switch.dark" />}
/>
<FloatButton
icon={<CompactTheme />}
type={value.includes('compact') ? 'primary' : 'default'}
onClick={() => {
if (value.includes('compact')) {
onChange(value.filter((theme) => theme !== 'compact'));
} else {
onChange([...value, 'compact']);
}
}}
tooltip={<FormattedMessage id="app.theme.switch.compact" />}
/>
</FloatButton.Group>
);
const ThemeSwitch: React.FC<ThemeSwitchProps> = ({ value, onChange }) => {
const { token } = useSiteToken();
const { pathname, search } = useLocation();
return (
<FloatButton.Group trigger="click" icon={<ThemeIcon />}>
<Link
to={getLocalizedPathname('/theme-editor', isZhCN(pathname), search)}
style={{ display: 'block', marginBottom: token.margin }}
>
<FloatButton
icon={<BgColorsOutlined />}
tooltip={<FormattedMessage id="app.footer.theme" />}
/>
</Link>
<FloatButton
icon={<DarkTheme />}
type={value.includes('dark') ? 'primary' : 'default'}
onClick={() => {
if (value.includes('dark')) {
onChange(value.filter((theme) => theme !== 'dark'));
} else {
onChange([...value, 'dark']);
}
}}
tooltip={<FormattedMessage id="app.theme.switch.dark" />}
/>
<FloatButton
icon={<CompactTheme />}
type={value.includes('compact') ? 'primary' : 'default'}
onClick={() => {
if (value.includes('compact')) {
onChange(value.filter((theme) => theme !== 'compact'));
} else {
onChange([...value, 'compact']);
}
}}
tooltip={<FormattedMessage id="app.theme.switch.compact" />}
/>
</FloatButton.Group>
);
};
export default ThemeSwitch;

View File

@ -129,7 +129,7 @@ export function getLocalizedPathname(
},
) {
const pathname = path.startsWith('/') ? path : `/${path}`;
let fullPath;
let fullPath: string;
if (!zhCN) {
// to enUS
fullPath = /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');

View File

@ -39,10 +39,11 @@ jobs:
- Write with a **developer-oriented perspective** and **narrative method**, without describing the details of the repair
- **Describing the problem and the impact on the developer**
- **describing the user-first site problem**, not your solution
- Refer: https://4x.ant.design/changelog#4.9.0
- Refer: https://ant.design/changelog#501
- 🚨 请填写 PR 中的 changelog
- 请用**面向开发者的角度**和**叙述方式撰写**,不描述修复细节
- **描述问题和对开发者的影响**
- **描述用户第一现场的问题**,而非你的解决方式
- 参考https://4x.ant.design/changelog-cn#4.9.0
- 参考https://ant.design/changelog-cn#501
skip-title-start: 'docs, chore, test, ci'

View File

@ -15,6 +15,16 @@ timeline: true
---
## 5.0.7
`2022-12-13`
- 🐞 Fix Slider's Tooltip missing animation. [#39463](https://github.com/ant-design/ant-design/pull/39463) [@YinDongFang](https://github.com/YinDongFang)
- 🐞 Fix Table unexpected horizontal scroll bar when empty and bordered. [#39455](https://github.com/ant-design/ant-design/pull/39455) [@zjfresh](https://github.com/zjfresh)
- 🐞 Fix Popover arrow background color with customized `color`. [#39517](https://github.com/ant-design/ant-design/pull/39517)
- 🐞 Fix Modal hooks not pass ConfigProvider config correctly. [#39513](https://github.com/ant-design/ant-design/pull/39513)
- 🐞 Fix Radio align issue with custom size. [#39476](https://github.com/ant-design/ant-design/pull/39476)
## 5.0.6
`2022-12-12`

View File

@ -15,6 +15,16 @@ timeline: true
---
## 5.0.7
`2022-12-13`
- 🐞 修复 Slider 组件 Tooltip 动画丢失问题。[#39463](https://github.com/ant-design/ant-design/pull/39463) [@YinDongFang](https://github.com/YinDongFang)
- 🐞 修复 Table 组件有边框且为空时出现横向滚动条的问题。[#39455](https://github.com/ant-design/ant-design/pull/39455) [@zjfresh](https://github.com/zjfresh)
- 🐞 修复 Popover 组件箭头背景色不随自定义颜色改变的问题。[#39517](https://github.com/ant-design/ant-design/pull/39517)
- 🐞 修复 Modal hooks 没有完全传递 ConfigProvider 配置的问题。[#39513](https://github.com/ant-design/ant-design/pull/39513)
- 🐞 修复 Radio 组件尺寸修改后不对齐的问题。[#39476](https://github.com/ant-design/ant-design/pull/39476)
## 5.0.6
`2022-12-12`

View File

@ -65,7 +65,7 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
);
};
const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
const onClick = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
const { actionFn } = props;
if (clickedRef.current) {
return;
@ -75,7 +75,7 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
onInternalClose();
return;
}
let returnValueOfOnOk;
let returnValueOfOnOk: PromiseLike<any>;
if (props.emitEvent) {
returnValueOfOnOk = actionFn(e);
if (props.quitOnNullishReturnValue && !isThenable(returnValueOfOnOk)) {

View File

@ -1,9 +1,12 @@
import type { ElementOf } from './type';
import { tuple } from './type';
export const PresetStatusColorTypes = [
'success',
'processing',
'error',
'default',
'warning',
] as const;
export const PresetStatusColorTypes = tuple('success', 'processing', 'error', 'default', 'warning');
// eslint-disable-next-line import/prefer-default-export
export const PresetColorTypes = tuple(
export const PresetColorTypes = [
'pink',
'red',
'yellow',
@ -17,7 +20,8 @@ export const PresetColorTypes = tuple(
'volcano',
'gold',
'lime',
);
] as const;
export type PresetColorType = ElementOf<typeof PresetColorTypes>;
export type PresetStatusColorType = ElementOf<typeof PresetStatusColorTypes>;
export type PresetColorType = typeof PresetColorTypes[number];
export type PresetStatusColorType = typeof PresetStatusColorTypes[number];

View File

@ -1,6 +1,5 @@
import type { CSSMotionProps, MotionEndEventHandler, MotionEventHandler } from 'rc-motion';
import type { MotionEvent } from 'rc-motion/lib/interface';
import { tuple } from './type';
// ================== Collapse Motion ==================
const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });
@ -26,7 +25,8 @@ const initCollapseMotion = (rootCls: string = 'ant'): CSSMotionProps => ({
motionDeadline: 500,
});
const SelectPlacements = tuple('bottomLeft', 'bottomRight', 'topLeft', 'topRight');
const SelectPlacements = ['bottomLeft', 'bottomRight', 'topLeft', 'topRight'] as const;
export type SelectCommonPlacement = typeof SelectPlacements[number];
const getTransitionDirection = (placement: SelectCommonPlacement | undefined) => {

View File

@ -1,8 +1,8 @@
import classNames from 'classnames';
import type { ValidateStatus } from '../form/FormItem';
import { tuple } from './type';
const InputStatuses = tuple('warning', 'error', '');
const InputStatuses = ['warning', 'error', ''] as const;
export type InputStatus = typeof InputStatuses[number];
export function getStatusClassNames(

View File

@ -1,13 +1,2 @@
// https://stackoverflow.com/questions/46176165/ways-to-get-string-literal-type-of-array-values-without-enum-overhead
export const tuple = <T extends string[]>(...args: T) => args;
export const tupleNum = <T extends number[]>(...args: T) => args;
/**
* https://stackoverflow.com/a/59187769 Extract the type of an element of an array/tuple without
* performing indexing
*/
export type ElementOf<T> = T extends (infer E)[] ? E : T extends readonly (infer F)[] ? F : never;
/** https://github.com/Microsoft/TypeScript/issues/29729 */
export type LiteralUnion<T extends U, U> = T | (U & {});

View File

@ -41,7 +41,7 @@ For displaying anchor hyperlinks on page and jumping between them.
| getContainer | Scrolling container | () => HTMLElement | () => window | |
| getCurrentAnchor | Customize the anchor highlight | (activeLink: string) => string | - | |
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 | |
| showInkInFixed | Whether show ink-balls when `affix={false}` | boolean | false | |
| showInkInFixed | Whether show ink-square when `affix={false}` | boolean | false | |
| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number | - | |
| onChange | Listening for anchor link change | (currentActiveLink: string) => void | | |
| onClick | Set the handler to handle `click` event | (e: MouseEvent, link: object) => void | - | |

View File

@ -42,7 +42,7 @@ group:
| getContainer | 指定滚动的容器 | () => HTMLElement | () => window | |
| getCurrentAnchor | 自定义高亮的锚点 | (activeLink: string) => string | - | |
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | |
| showInkInFixed | `affix={false}` 时是否显示小圆点 | boolean | false | |
| showInkInFixed | `affix={false}` 时是否显示小方块 | boolean | false | |
| targetOffset | 锚点滚动偏移量,默认与 offsetTop 相同,[例子](#components-anchor-demo-targetOffset) | number | - | |
| onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | - | |
| onClick | `click` 事件的 handler | (e: MouseEvent, link: object) => void | - | |

View File

@ -2,5 +2,5 @@ import { PresetColorTypes } from '../_util/colors';
// eslint-disable-next-line import/prefer-default-export
export function isPresetColor(color?: string): boolean {
return (PresetColorTypes as any[]).includes(color);
return PresetColorTypes.includes(color as any);
}

View File

@ -39,13 +39,13 @@ demo:
### Breadcrumb.Item
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ------------- | ------------------------ | ---------------------------------- | ------ | ------ |
| className | 自定义类名 | string | - | |
| dropdownProps | 弹出下拉菜单的自定义配置 | [Dropdown](/components/dropdown) | - | |
| href | 链接的目的地 | string | - | |
| menu | 菜单配置项 | [MenuProps](/components/menu/#API) | - | 4.24.0 |
| onClick | 单击事件 | (e:MouseEvent) => void | - | |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| className | 自定义类名 | string | - | |
| dropdownProps | 弹出下拉菜单的自定义配置 | [Dropdown](/components/dropdown-cn) | - | |
| href | 链接的目的地 | string | - | |
| menu | 菜单配置项 | [MenuProps](/components/menu-cn/#API) | - | 4.24.0 |
| onClick | 单击事件 | (e:MouseEvent) => void | - | |
### Breadcrumb.Separator

View File

@ -1084,6 +1084,40 @@ exports[`renders ./components/button/demo/disabled.tsx extend context correctly
</div>
</div>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
<div
class="ant-space-item"
style="margin-right:8px"
>
<a
class="ant-btn ant-btn-primary"
href="https://ant.design/index-cn"
>
<span>
Href Primary
</span>
</a>
</div>
<div
class="ant-space-item"
>
<a
class="ant-btn ant-btn-primary ant-btn-disabled"
href="https://ant.design/index-cn"
>
<span>
Href Primary(disabled)
</span>
</a>
</div>
</div>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"

View File

@ -988,6 +988,40 @@ exports[`renders ./components/button/demo/disabled.tsx correctly 1`] = `
</div>
</div>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
<div
class="ant-space-item"
style="margin-right:8px"
>
<a
class="ant-btn ant-btn-primary"
href="https://ant.design/index-cn"
>
<span>
Href Primary
</span>
</a>
</div>
<div
class="ant-space-item"
>
<a
class="ant-btn ant-btn-primary ant-btn-disabled"
href="https://ant.design/index-cn"
>
<span>
Href Primary(disabled)
</span>
</a>
</div>
</div>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"

View File

@ -2,14 +2,12 @@
import classNames from 'classnames';
import omit from 'rc-util/lib/omit';
import * as React from 'react';
import { ConfigContext } from '../config-provider';
import DisabledContext from '../config-provider/DisabledContext';
import type { SizeType } from '../config-provider/SizeContext';
import SizeContext from '../config-provider/SizeContext';
import { useCompactItemContext } from '../space/Compact';
import { cloneElement, isFragment } from '../_util/reactNode';
import { tuple } from '../_util/type';
import warning from '../_util/warning';
import Wave from '../_util/wave';
import Group, { GroupSizeContext } from './button-group';
@ -78,11 +76,13 @@ function spaceChildren(children: React.ReactNode, needInserted: boolean) {
);
}
const ButtonTypes = tuple('default', 'primary', 'ghost', 'dashed', 'link', 'text');
const ButtonTypes = ['default', 'primary', 'ghost', 'dashed', 'link', 'text'] as const;
export type ButtonType = typeof ButtonTypes[number];
const ButtonShapes = tuple('default', 'circle', 'round');
const ButtonShapes = ['default', 'circle', 'round'] as const;
export type ButtonShape = typeof ButtonShapes[number];
const ButtonHTMLTypes = tuple('submit', 'button', 'reset');
const ButtonHTMLTypes = ['submit', 'button', 'reset'] as const;
export type ButtonHTMLType = typeof ButtonHTMLTypes[number];
export type LegacyButtonType = ButtonType | 'danger';
@ -119,13 +119,13 @@ export interface BaseButtonProps {
export type AnchorButtonProps = {
href: string;
target?: string;
onClick?: React.MouseEventHandler<HTMLElement>;
onClick?: React.MouseEventHandler<HTMLAnchorElement>;
} & BaseButtonProps &
Omit<React.AnchorHTMLAttributes<any>, 'type' | 'onClick'>;
export type NativeButtonProps = {
htmlType?: ButtonHTMLType;
onClick?: React.MouseEventHandler<HTMLElement>;
onClick?: React.MouseEventHandler<HTMLButtonElement>;
} & BaseButtonProps &
Omit<React.ButtonHTMLAttributes<any>, 'type' | 'onClick'>;
@ -141,7 +141,10 @@ type CompoundedComponent = React.ForwardRefExoticComponent<
type Loading = number | boolean;
const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (props, ref) => {
const InternalButton: React.ForwardRefRenderFunction<
HTMLButtonElement | HTMLAnchorElement,
ButtonProps
> = (props, ref) => {
const {
loading = false,
prefixCls: customizePrefixCls,
@ -175,7 +178,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
const groupSize = React.useContext(GroupSizeContext);
const [innerLoading, setLoading] = React.useState<Loading>(!!loading);
const [hasTwoCNChar, setHasTwoCNChar] = React.useState(false);
const buttonRef = (ref as any) || React.createRef<HTMLElement>();
const buttonRef = (ref as any) || React.createRef<HTMLAnchorElement | HTMLButtonElement>();
const isNeedInserted = () =>
React.Children.count(children) === 1 && !icon && !isUnBorderedButtonType(type);
@ -254,6 +257,8 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
const linkButtonRestProps = omit(rest as AnchorButtonProps & { navigate: any }, ['navigate']);
const hrefAndDisabled = linkButtonRestProps.href !== undefined && mergedDisabled;
const classes = classNames(
prefixCls,
hashId,
@ -268,7 +273,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
[`${prefixCls}-block`]: block,
[`${prefixCls}-dangerous`]: !!danger,
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-disabled`]: linkButtonRestProps.href !== undefined && mergedDisabled,
[`${prefixCls}-disabled`]: hrefAndDisabled,
},
compactItemClassnames,
className,
@ -316,7 +321,10 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
return wrapSSR(buttonNode);
};
const Button = React.forwardRef<unknown, ButtonProps>(InternalButton) as CompoundedComponent;
const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
InternalButton,
) as CompoundedComponent;
if (process.env.NODE_ENV !== 'production') {
Button.displayName = 'Button';
}

View File

@ -31,6 +31,14 @@ const App: React.FC = () => (
Link(disabled)
</Button>
</Space>
<Space>
<Button type="primary" href='https://ant.design/index-cn'>
Href Primary
</Button>
<Button type="primary" href='https://ant.design/index-cn' disabled>
Href Primary(disabled)
</Button>
</Space>
<Space>
<Button danger>Danger Default</Button>
<Button danger disabled>

View File

@ -64,7 +64,7 @@ Different button styles can be generated by setting Button properties. The recom
| size | Set the size of button | `large` \| `middle` \| `small` | `middle` | |
| target | Same as target attribute of a, works when href is specified | string | - | |
| type | Can be set to `primary` `ghost` `dashed` `link` `text` `default` | string | `default` | |
| onClick | Set the handler to handle `click` event | (event) => void | - | |
| onClick | Set the handler to handle `click` event | (event: MouseEvent) => void | - | |
It accepts all props which native buttons support.

View File

@ -69,7 +69,7 @@ group:
| size | 设置按钮大小 | `large` \| `middle` \| `small` | `middle` | |
| target | 相当于 a 链接的 target 属性href 存在时生效 | string | - | |
| type | 设置按钮类型 | `primary` \| `ghost` \| `dashed` \| `link` \| `text` \| `default` | `default` | |
| onClick | 点击按钮时的回调 | (event) => void | - | |
| onClick | 点击按钮时的回调 | (event: MouseEvent) => void | - | |
支持原生 button 的其他所有属性。
@ -77,7 +77,7 @@ group:
### 如何移除两个汉字之间的空格?
根据 Ant Design 设计规范要求,我们会在按钮内(文本按钮和链接按钮除外)只有两个汉字时自动添加空格,如果你不需要这个特性,可以设置 [ConfigProvider](/components/config-provider/#API) 的 `autoInsertSpaceInButton``false`
根据 Ant Design 设计规范要求,我们会在按钮内(文本按钮和链接按钮除外)只有两个汉字时自动添加空格,如果你不需要这个特性,可以设置 [ConfigProvider](/components/config-provider-cn#API) 的 `autoInsertSpaceInButton``false`
<img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0; width: 100px" alt="移除两个汉字之间的空格" />

View File

@ -117,6 +117,14 @@ const genRoundButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
});
// =============================== Type ===============================
const genDisabledStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
cursor: 'not-allowed',
borderColor: token.colorBorder,
color: token.colorTextDisabled,
backgroundColor: token.colorBgContainerDisabled,
boxShadow: 'none',
});
const genGhostButtonStyle = (
btnCls: string,
textColor: string | false,
@ -153,11 +161,7 @@ const genGhostButtonStyle = (
const genSolidDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
'&:disabled': {
cursor: 'not-allowed',
borderColor: token.colorBorder,
color: token.colorTextDisabled,
backgroundColor: token.colorBgContainerDisabled,
boxShadow: 'none',
...genDisabledStyle(token),
},
});
@ -297,7 +301,6 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
// Type: Dashed
const genDashedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
...genDefaultButtonStyle(token),
borderStyle: 'dashed',
});
@ -364,6 +367,14 @@ const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
},
});
// Href and Disabled
const genDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
...genDisabledStyle(token),
[`&${token.componentCls}:hover`]: {
...genDisabledStyle(token),
},
});
const genTypeButtonStyle: GenerateStyle<ButtonToken> = (token) => {
const { componentCls } = token;
@ -373,6 +384,7 @@ const genTypeButtonStyle: GenerateStyle<ButtonToken> = (token) => {
[`${componentCls}-dashed`]: genDashedButtonStyle(token),
[`${componentCls}-link`]: genLinkButtonStyle(token),
[`${componentCls}-text`]: genTextButtonStyle(token),
[`${componentCls}-disabled`]: genDisabledButtonStyle(token),
};
};

View File

@ -3277,26 +3277,6 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
style="opacity:0"
>
<div>
<div
id="undefined_list"
role="listbox"
style="height:0;width:0;overflow:hidden"
>
<div
aria-selected="false"
id="undefined_list_0"
role="option"
>
2006
</div>
<div
aria-selected="false"
id="undefined_list_1"
role="option"
>
2007
</div>
</div>
<div
class="rc-virtual-list"
style="position:relative"
@ -3308,11 +3288,15 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div>
<div
class="rc-virtual-list-holder-inner"
id="undefined_list"
role="listbox"
style="display:flex;flex-direction:column"
>
<div
aria-selected="false"
class="ant-select-item ant-select-item-option year-item ant-select-item-option-active"
id="undefined_list_0"
role="option"
title="2006"
>
<div
@ -3330,6 +3314,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="false"
class="ant-select-item ant-select-item-option year-item"
id="undefined_list_1"
role="option"
title="2007"
>
<div
@ -3347,6 +3333,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="false"
class="ant-select-item ant-select-item-option year-item"
id="undefined_list_2"
role="option"
title="2008"
>
<div
@ -3364,6 +3352,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="false"
class="ant-select-item ant-select-item-option year-item"
id="undefined_list_3"
role="option"
title="2009"
>
<div
@ -3381,6 +3371,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="false"
class="ant-select-item ant-select-item-option year-item"
id="undefined_list_4"
role="option"
title="2010"
>
<div
@ -3398,6 +3390,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="false"
class="ant-select-item ant-select-item-option year-item"
id="undefined_list_5"
role="option"
title="2011"
>
<div
@ -3415,6 +3409,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="false"
class="ant-select-item ant-select-item-option year-item"
id="undefined_list_6"
role="option"
title="2012"
>
<div
@ -3432,6 +3428,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="false"
class="ant-select-item ant-select-item-option year-item"
id="undefined_list_7"
role="option"
title="2013"
>
<div
@ -3449,6 +3447,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="false"
class="ant-select-item ant-select-item-option year-item"
id="undefined_list_8"
role="option"
title="2014"
>
<div
@ -3466,6 +3466,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="false"
class="ant-select-item ant-select-item-option year-item"
id="undefined_list_9"
role="option"
title="2015"
>
<div
@ -3483,6 +3485,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="true"
class="ant-select-item ant-select-item-option year-item ant-select-item-option-selected"
id="undefined_list_10"
role="option"
title="2016"
>
<div
@ -3500,6 +3504,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="false"
class="ant-select-item ant-select-item-option year-item"
id="undefined_list_11"
role="option"
title="2017"
>
<div
@ -3517,6 +3523,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="false"
class="ant-select-item ant-select-item-option year-item"
id="undefined_list_12"
role="option"
title="2018"
>
<div
@ -3534,6 +3542,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="false"
class="ant-select-item ant-select-item-option year-item"
id="undefined_list_13"
role="option"
title="2019"
>
<div
@ -3551,6 +3561,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="false"
class="ant-select-item ant-select-item-option year-item"
id="undefined_list_14"
role="option"
title="2020"
>
<div
@ -3568,6 +3580,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="false"
class="ant-select-item ant-select-item-option year-item"
id="undefined_list_15"
role="option"
title="2021"
>
<div
@ -3585,6 +3599,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="false"
class="ant-select-item ant-select-item-option year-item"
id="undefined_list_16"
role="option"
title="2022"
>
<div
@ -3602,6 +3618,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="false"
class="ant-select-item ant-select-item-option year-item"
id="undefined_list_17"
role="option"
title="2023"
>
<div
@ -3619,6 +3637,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="false"
class="ant-select-item ant-select-item-option year-item"
id="undefined_list_18"
role="option"
title="2024"
>
<div
@ -3636,6 +3656,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="false"
class="ant-select-item ant-select-item-option year-item"
id="undefined_list_19"
role="option"
title="2025"
>
<div
@ -3727,28 +3749,6 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
style="opacity:0"
>
<div>
<div
id="undefined_list"
role="listbox"
style="height:0;width:0;overflow:hidden"
>
<div
aria-label="Jan"
aria-selected="false"
id="undefined_list_0"
role="option"
>
0
</div>
<div
aria-label="Feb"
aria-selected="false"
id="undefined_list_1"
role="option"
>
1
</div>
</div>
<div
class="rc-virtual-list"
style="position:relative"
@ -3760,11 +3760,15 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div>
<div
class="rc-virtual-list-holder-inner"
id="undefined_list"
role="listbox"
style="display:flex;flex-direction:column"
>
<div
aria-selected="false"
class="ant-select-item ant-select-item-option month-item ant-select-item-option-active"
id="undefined_list_0"
role="option"
title="Jan"
>
<div
@ -3782,6 +3786,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="false"
class="ant-select-item ant-select-item-option month-item"
id="undefined_list_1"
role="option"
title="Feb"
>
<div
@ -3799,6 +3805,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="false"
class="ant-select-item ant-select-item-option month-item"
id="undefined_list_2"
role="option"
title="Mar"
>
<div
@ -3816,6 +3824,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="false"
class="ant-select-item ant-select-item-option month-item"
id="undefined_list_3"
role="option"
title="Apr"
>
<div
@ -3833,6 +3843,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="false"
class="ant-select-item ant-select-item-option month-item"
id="undefined_list_4"
role="option"
title="May"
>
<div
@ -3850,6 +3862,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="false"
class="ant-select-item ant-select-item-option month-item"
id="undefined_list_5"
role="option"
title="Jun"
>
<div
@ -3867,6 +3881,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="false"
class="ant-select-item ant-select-item-option month-item"
id="undefined_list_6"
role="option"
title="Jul"
>
<div
@ -3884,6 +3900,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="false"
class="ant-select-item ant-select-item-option month-item"
id="undefined_list_7"
role="option"
title="Aug"
>
<div
@ -3901,6 +3919,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="false"
class="ant-select-item ant-select-item-option month-item"
id="undefined_list_8"
role="option"
title="Sep"
>
<div
@ -3918,6 +3938,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="false"
class="ant-select-item ant-select-item-option month-item"
id="undefined_list_9"
role="option"
title="Oct"
>
<div
@ -3935,6 +3957,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="true"
class="ant-select-item ant-select-item-option month-item ant-select-item-option-selected"
id="undefined_list_10"
role="option"
title="Nov"
>
<div
@ -3952,6 +3976,8 @@ exports[`renders ./components/calendar/demo/customize-header.tsx extend context
<div
aria-selected="false"
class="ant-select-item ant-select-item-option month-item"
id="undefined_list_11"
role="option"
title="Dec"
>
<div

View File

@ -65,7 +65,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*nF6_To7pDSAAAAAAAA
### 如何给日期类组件配置国际化?
参考 [如何给日期类组件配置国际化](/components/date-picker/#%E5%9B%BD%E9%99%85%E5%8C%96%E9%85%8D%E7%BD%AE)。
参考 [如何给日期类组件配置国际化](/components/date-picker-cn#%E5%9B%BD%E9%99%85%E5%8C%96%E9%85%8D%E7%BD%AE)。
### 为什么时间类组件的国际化 locale 设置不生效?

View File

@ -49,7 +49,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VXtCTp93KPAAAAAAAA
| size | card 的尺寸 | `default` \| `small` | `default` | |
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - | |
| tabList | 页签标题列表 | Array&lt;{key: string, tab: ReactNode}> | - | |
| tabProps | [Tabs](/components/tabs/#Tabs) | - | - | |
| tabProps | [Tabs](/components/tabs-cn#Tabs) | - | - | |
| title | 卡片标题 | ReactNode | - | |
| type | 卡片类型,可设置为 `inner` 或 不设置 | string | - | |
| onTabChange | 页签切换的回调 | (key) => void | - | |

View File

@ -24931,25 +24931,6 @@ exports[`ConfigProvider components Select configProvider virtual and dropdownMat
style="opacity: 0; min-width: 0;"
>
<div>
<div
id="rc_select_TEST_OR_SSR_list"
role="listbox"
style="height: 0px; width: 0px; overflow: hidden;"
>
<div
aria-selected="false"
id="rc_select_TEST_OR_SSR_list_0"
role="presentation"
/>
<div
aria-label="Light"
aria-selected="false"
id="rc_select_TEST_OR_SSR_list_1"
role="option"
>
Bamboo
</div>
</div>
<div
class="rc-virtual-list"
style="position: relative;"
@ -24961,6 +24942,8 @@ exports[`ConfigProvider components Select configProvider virtual and dropdownMat
<div>
<div
class="rc-virtual-list-holder-inner"
id="rc_select_TEST_OR_SSR_list"
role="listbox"
style="display: flex; flex-direction: column;"
>
<div
@ -24972,6 +24955,8 @@ exports[`ConfigProvider components Select configProvider virtual and dropdownMat
<div
aria-selected="false"
class="ant-select-item ant-select-item-option ant-select-item-option-grouped ant-select-item-option-active"
id="rc_select_TEST_OR_SSR_list_1"
role="option"
title="Light"
>
<div
@ -26627,6 +26612,7 @@ exports[`ConfigProvider components Table configProvider 1`] = `
<th
aria-label="this column's title is Name,this column is sortable"
class="config-table-cell config-table-column-has-sorters"
scope="col"
tabindex="0"
>
<div
@ -26932,6 +26918,7 @@ exports[`ConfigProvider components Table configProvider componentDisabled 1`] =
<th
aria-label="this column's title is Name,this column is sortable"
class="config-table-cell config-table-column-has-sorters"
scope="col"
tabindex="0"
>
<div
@ -27239,6 +27226,7 @@ exports[`ConfigProvider components Table configProvider componentSize large 1`]
<th
aria-label="this column's title is Name,this column is sortable"
class="config-table-cell config-table-column-has-sorters"
scope="col"
tabindex="0"
>
<div
@ -27544,6 +27532,7 @@ exports[`ConfigProvider components Table configProvider componentSize middle 1`]
<th
aria-label="this column's title is Name,this column is sortable"
class="config-table-cell config-table-column-has-sorters"
scope="col"
tabindex="0"
>
<div
@ -27849,6 +27838,7 @@ exports[`ConfigProvider components Table configProvider virtual and dropdownMatc
<th
aria-label="this column's title is Name,this column is sortable"
class="ant-table-cell ant-table-column-has-sorters"
scope="col"
tabindex="0"
>
<div
@ -28154,6 +28144,7 @@ exports[`ConfigProvider components Table normal 1`] = `
<th
aria-label="this column's title is Name,this column is sortable"
class="ant-table-cell ant-table-column-has-sorters"
scope="col"
tabindex="0"
>
<div
@ -28459,6 +28450,7 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
<th
aria-label="this column's title is Name,this column is sortable"
class="prefix-Table-cell prefix-Table-column-has-sorters"
scope="col"
tabindex="0"
>
<div

View File

@ -108,3 +108,9 @@ When you config `getPopupContainer` to parentNode globally, Modal will throw err
#### Why can't ConfigProvider props (like `prefixCls` and `theme`) affect ReactNode inside `message.info`, `notification.open`, `Modal.confirm`?
antd will dynamic create React instance by `ReactDOM.render` when call message methods. Whose context is different with origin code located context. We recommend `useMessage`, `useNotification` and `useModal` which , the methods came from `message/notification/Modal` has been deprecated in 5.x.
#### Locale is not working with Vite in production mode?
Related issue: [#39045](https://github.com/ant-design/ant-design/issues/39045)
In production mode of Vite, default exports from cjs file should be used like this: `enUS.default`. So you can directly import locale from `es/` directory like `import enUS from 'antd/es/locale/en_US'` to make dev and production have the same behavior.

View File

@ -181,8 +181,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
const mergedTheme = useTheme(theme, parentContext.theme);
const config = {
...parentContext,
const baseConfig = {
csp,
autoInsertSpaceInButton,
locale: locale || legacyLocale,
@ -195,6 +194,16 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
theme: mergedTheme,
};
const config = {
...parentContext,
};
Object.keys(baseConfig).forEach((key: keyof typeof baseConfig) => {
if (baseConfig[key] !== undefined) {
(config as any)[key] = baseConfig[key];
}
});
// Pass the props used by `useContext` directly with child component.
// These props should merged into `config`.
PASSED_PROPS.forEach((propName) => {

View File

@ -53,15 +53,15 @@ export default () => (
| csp | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - | |
| direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`,当值小于选择框宽度时会被忽略。`false` 时会关闭虚拟滚动 | boolean \| number | - | 4.3.0 |
| form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form/#validateMessages), requiredMark?: boolean \| `optional`, colon?: boolean} | - | requiredMark: 4.8.0; colon: 4.18.0 |
| form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form-cn#validateMessages), requiredMark?: boolean \| `optional`, colon?: boolean} | - | requiredMark: 4.8.0; colon: 4.18.0 |
| getPopupContainer | 弹出框Select, Tooltip, Menu 等等)渲染父节点,默认渲染到 body 上。 | function(triggerNode) | () => document.body | |
| getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 4.2.0 |
| iconPrefixCls | 设置图标统一样式前缀 | string | `anticon` | 4.11.0 |
| input | 设置 Input 组件的通用属性 | { autoComplete?: string } | - | 4.2.0 |
| locale | 语言包配置,语言包可到 [antd/locale](http://unpkg.com/antd/locale/) 目录下寻找 | object | - | |
| prefixCls | 设置统一样式前缀 | string | `ant` | |
| renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty/) | function(componentName: string): ReactNode | - | |
| space | 设置 Space 的 `size`,参考 [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 |
| renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty-cn) | function(componentName: string): ReactNode | - | |
| space | 设置 Space 的 `size`,参考 [Space](/components/space-cn) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 |
| theme | 设置主题,参考 [定制主题](/docs/react/customize-theme-cn) | - | - | 5.0.0 |
| virtual | 设置 `false` 时关闭虚拟滚动 | boolean | - | 4.3.0 |
@ -109,3 +109,9 @@ ConfigProvider.config({
#### 为什么 message.info、notification.open 或 Modal.confirm 等方法内的 ReactNode 无法继承 ConfigProvider 的属性?比如 `prefixCls``theme`
静态方法是使用 ReactDOM.render 重新渲染一个 React 根节点上,和主应用的 React 节点是脱离的。我们建议使用 useMessage、useNotification 和 useModal 来使用相关方法。原先的静态方法在 5.0 中已被废弃。
#### Vite 生产模式打包后国际化 locale 设置不生效?
相关 issue[#39045](https://github.com/ant-design/ant-design/issues/39045)
由于 Vite 生产模式下打包与开发模式不同cjs 格式的文件会多一层,需要 `zhCN.default` 来获取。推荐 Vite 用户直接从 `antd/es/locale` 目录下引入 esm 格式的 locale 文件。

View File

@ -142,7 +142,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
compactItemClassnames,
className,
)}
locale={locale!.lang}
locale={locale.lang}
prefixCls={prefixCls}
getPopupContainer={customGetPopupContainer || getPopupContainer}
generateConfig={generateConfig}

View File

@ -14,7 +14,6 @@ import type {
import type { SizeType } from '../../config-provider/SizeContext';
import type { TimePickerLocale } from '../../time-picker';
import type { InputStatus } from '../../_util/statusUtils';
import { tuple } from '../../_util/type';
import PickerButton from '../PickerButton';
import generateRangePicker from './generateRangePicker';
import generateSinglePicker from './generateSinglePicker';
@ -70,7 +69,7 @@ export function getTimeProps<DateType, DisabledTime>(
showTime: showTimeObj,
};
}
const DataPickerPlacements = tuple('bottomLeft', 'bottomRight', 'topLeft', 'topRight');
const DataPickerPlacements = ['bottomLeft', 'bottomRight', 'topLeft', 'topRight'] as const;
type DataPickerPlacement = typeof DataPickerPlacements[number];
type InjectDefaultProps<Props> = Omit<

View File

@ -125,7 +125,7 @@ import locale from 'antd/locale/zh_CN';
| format | 设置日期格式,为数组时支持多格式匹配,展示以第一个为准。配置参考 [dayjs](https://day.js.org/),支持[自定义格式](#components-date-picker-demo-format) | string \| (value: dayjs) => string \| (string \| (value: dayjs) => string)\[] | `YYYY-MM-DD` | |
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |
| showNow | 当设定了 `showTime` 的时候,面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
| showTime | 增加时间选择功能 | Object \| boolean | [TimePicker Options](/components/time-picker/#API) | |
| showTime | 增加时间选择功能 | Object \| boolean | [TimePicker Options](/components/time-picker-cn#API) | |
| showTime.defaultValue | 设置用户选择日期时默认的时分秒,[例子](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() | |
| showToday | 是否展示“今天”按钮 | boolean | true | |
| value | 日期 | [dayjs](https://day.js.org/) | - | |
@ -194,7 +194,7 @@ import locale from 'antd/locale/zh_CN';
| presets | 预设时间范围快捷选择 | { label: React.ReactNode, value: [dayjs](https://day.js.org/)\[] }[] | - | |
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
| separator | 设置分隔符 | React.ReactNode | `<SwapRightOutlined />` | |
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) | |
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker-cn#API) | |
| showTime.defaultValue | 设置用户选择日期时默认的时分秒,[例子](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] | |
| value | 日期 | [dayjs](https://day.js.org/)\[] | - | |
| onCalendarChange | 待选日期发生变化的回调。`info` 参数自 4.4.0 添加 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - | |

View File

@ -1468,16 +1468,19 @@ exports[`renders ./components/descriptions/demo/text.tsx extend context correctl
<tr>
<th
class="ant-table-cell"
scope="col"
>
姓名
</th>
<th
class="ant-table-cell"
scope="col"
>
年龄
</th>
<th
class="ant-table-cell"
scope="col"
>
住址
</th>

View File

@ -1468,16 +1468,19 @@ exports[`renders ./components/descriptions/demo/text.tsx correctly 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
姓名
</th>
<th
class="ant-table-cell"
scope="col"
>
年龄
</th>
<th
class="ant-table-cell"
scope="col"
>
住址
</th>

View File

@ -6,7 +6,6 @@ import * as React from 'react';
import { ConfigContext } from '../config-provider';
import { NoFormStyle } from '../form/context';
import { getTransitionName } from '../_util/motion';
import { tuple } from '../_util/type';
import warning from '../_util/warning';
import DrawerPanel from './DrawerPanel';
import type { DrawerPanelProps } from './DrawerPanel';
@ -15,7 +14,7 @@ import type { DrawerPanelProps } from './DrawerPanel';
import useStyle from './style';
import { NoCompactStyle } from '../space/Compact';
const SizeTypes = tuple('default', 'large');
const SizeTypes = ['default', 'large'] as const;
type sizeType = typeof SizeTypes[number];
export interface PushState {

View File

@ -20,7 +20,7 @@ export interface DropdownButtonProps extends ButtonGroupProps, DropdownProps {
danger?: boolean;
disabled?: boolean;
loading?: ButtonProps['loading'];
onClick?: React.MouseEventHandler<HTMLButtonElement>;
onClick?: React.MouseEventHandler<HTMLElement>;
icon?: React.ReactNode;
href?: string;
children?: React.ReactNode;

View File

@ -11,13 +11,12 @@ import { OverrideProvider } from '../menu/OverrideContext';
import genPurePanel from '../_util/PurePanel';
import getPlacements from '../_util/placements';
import { cloneElement } from '../_util/reactNode';
import { tuple } from '../_util/type';
import warning from '../_util/warning';
import { NoCompactStyle } from '../space/Compact';
import DropdownButton from './dropdown-button';
import useStyle from './style';
const Placements = tuple(
const Placements = [
'topLeft',
'topCenter',
'topRight',
@ -26,7 +25,7 @@ const Placements = tuple(
'bottomRight',
'top',
'bottom',
);
] as const;
type Placement = typeof Placements[number];

View File

@ -49,7 +49,7 @@ demo:
| destroyPopupOnHide | 关闭后是否销毁 Dropdown | boolean | false | |
| dropdownRender | 自定义下拉框内容 | (menus: ReactNode) => ReactNode | - | 4.24.0 |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
| menu | 菜单配置项 | [MenuProps](/components/menu/#API) | - | 4.24.0 |
| menu | 菜单配置项 | [MenuProps](/components/menu-cn#API) | - | 4.24.0 |
| overlayClassName | 下拉根元素的类名称 | string | - | |
| overlayStyle | 下拉根元素的样式 | CSSProperties | - | |
| placement | 菜单弹出位置:`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` | |
@ -67,6 +67,6 @@ demo:
| loading | 设置按钮载入状态 | boolean \| { delay: number } | false | |
| danger | 设置危险按钮 | boolean | - | 4.23.0 |
| icon | 右侧的 icon | ReactNode | - | |
| size | 按钮大小,和 [Button](/components/button/#API) 一致 | string | `default` | |
| type | 按钮类型,和 [Button](/components/button/#API) 一致 | string | `default` | |
| onClick | 点击左侧按钮的回调,和 [Button](/components/button/#API) 一致 | (event) => void | - | |
| size | 按钮大小,和 [Button](/components/button-cn#API) 一致 | string | `default` | |
| type | 按钮类型,和 [Button](/components/button-cn#API) 一致 | string | `default` | |
| onClick | 点击左侧按钮的回调,和 [Button](/components/button-cn#API) 一致 | (event) => void | - | |

View File

@ -1039,11 +1039,13 @@ exports[`renders ./components/empty/demo/config-provider.tsx extend context corr
<tr>
<th
class="ant-table-cell"
scope="col"
>
Name
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>

View File

@ -588,11 +588,13 @@ exports[`renders ./components/empty/demo/config-provider.tsx correctly 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
Name
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>

View File

@ -691,68 +691,134 @@ Array [
`;
exports[`renders ./components/float-button/demo/group-menu.tsx extend context correctly 1`] = `
<div
class="ant-float-btn-group ant-float-btn-group-circle"
>
<button
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
type="button"
Array [
<div
class="ant-float-btn-group ant-float-btn-group-circle"
style="right:24px"
>
<div
class="ant-float-btn-body"
<button
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
type="button"
>
<div
class="ant-float-btn-content"
class="ant-float-btn-body"
>
<div
class="ant-float-btn-icon"
>
<span
aria-label="customer-service"
class="anticon anticon-customer-service"
role="img"
>
<svg
aria-hidden="true"
data-icon="customer-service"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z"
/>
</svg>
</span>
</div>
</div>
</div>
<div>
<div
class="ant-tooltip"
style="opacity:0"
>
<div
class="ant-tooltip-content"
class="ant-float-btn-content"
>
<div
class="ant-tooltip-arrow"
class="ant-float-btn-icon"
>
<span
class="ant-tooltip-arrow-content"
/>
aria-label="customer-service"
class="anticon anticon-customer-service"
role="img"
>
<svg
aria-hidden="true"
data-icon="customer-service"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z"
/>
</svg>
</span>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
</div>
</button>
</div>
<div>
<div
class="ant-tooltip"
style="opacity:0"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
</div>
</button>
</div>,
<div
class="ant-float-btn-group ant-float-btn-group-circle"
style="right:94px"
>
<button
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
type="button"
>
<div
class="ant-float-btn-body"
>
<div
class="ant-float-btn-content"
>
<div
class="ant-float-btn-icon"
>
<span
aria-label="customer-service"
class="anticon anticon-customer-service"
role="img"
>
<svg
aria-hidden="true"
data-icon="customer-service"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z"
/>
</svg>
</span>
</div>
</div>
</div>
<div>
<div
class="ant-tooltip"
style="opacity:0"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
</div>
</button>
</div>,
]
`;
exports[`renders ./components/float-button/demo/render-panel.tsx extend context correctly 1`] = `
@ -1370,52 +1436,68 @@ exports[`renders ./components/float-button/demo/render-panel.tsx extend context
exports[`renders ./components/float-button/demo/shape.tsx extend context correctly 1`] = `
Array [
<div
class="ant-radio-group ant-radio-group-outline"
style="margin:20px"
>
<label
class="ant-radio-wrapper ant-radio-wrapper-checked"
>
<span
class="ant-radio ant-radio-checked"
>
<input
checked=""
class="ant-radio-input"
type="radio"
value="circle"
/>
<span
class="ant-radio-inner"
/>
</span>
<span>
圆形
</span>
</label>
<label
class="ant-radio-wrapper"
>
<span
class="ant-radio"
>
<input
class="ant-radio-input"
type="radio"
value="square"
/>
<span
class="ant-radio-inner"
/>
</span>
<span>
方形
</span>
</label>
</div>,
<button
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
style="right:94px"
type="button"
>
<div
class="ant-float-btn-body"
>
<div
class="ant-float-btn-content"
>
<div
class="ant-float-btn-icon"
>
<span
aria-label="customer-service"
class="anticon anticon-customer-service"
role="img"
>
<svg
aria-hidden="true"
data-icon="customer-service"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z"
/>
</svg>
</span>
</div>
</div>
</div>
<div>
<div
class="ant-tooltip"
style="opacity:0"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
</div>
</button>,
<button
class="ant-float-btn ant-float-btn-primary ant-float-btn-square"
style="right:24px"
type="button"
>
<div

View File

@ -449,46 +449,90 @@ Array [
`;
exports[`renders ./components/float-button/demo/group-menu.tsx correctly 1`] = `
<div
class="ant-float-btn-group ant-float-btn-group-circle"
>
<button
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
type="button"
Array [
<div
class="ant-float-btn-group ant-float-btn-group-circle"
style="right:24px"
>
<div
class="ant-float-btn-body"
<button
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
type="button"
>
<div
class="ant-float-btn-content"
class="ant-float-btn-body"
>
<div
class="ant-float-btn-icon"
class="ant-float-btn-content"
>
<span
aria-label="customer-service"
class="anticon anticon-customer-service"
role="img"
<div
class="ant-float-btn-icon"
>
<svg
aria-hidden="true"
data-icon="customer-service"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<span
aria-label="customer-service"
class="anticon anticon-customer-service"
role="img"
>
<path
d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z"
/>
</svg>
</span>
<svg
aria-hidden="true"
data-icon="customer-service"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z"
/>
</svg>
</span>
</div>
</div>
</div>
</div>
</button>
</div>
</button>
</div>,
<div
class="ant-float-btn-group ant-float-btn-group-circle"
style="right:94px"
>
<button
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
type="button"
>
<div
class="ant-float-btn-body"
>
<div
class="ant-float-btn-content"
>
<div
class="ant-float-btn-icon"
>
<span
aria-label="customer-service"
class="anticon anticon-customer-service"
role="img"
>
<svg
aria-hidden="true"
data-icon="customer-service"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z"
/>
</svg>
</span>
</div>
</div>
</div>
</button>
</div>,
]
`;
exports[`renders ./components/float-button/demo/render-panel.tsx correctly 1`] = `
@ -886,52 +930,46 @@ exports[`renders ./components/float-button/demo/render-panel.tsx correctly 1`] =
exports[`renders ./components/float-button/demo/shape.tsx correctly 1`] = `
Array [
<div
class="ant-radio-group ant-radio-group-outline"
style="margin:20px"
>
<label
class="ant-radio-wrapper ant-radio-wrapper-checked"
>
<span
class="ant-radio ant-radio-checked"
>
<input
checked=""
class="ant-radio-input"
type="radio"
value="circle"
/>
<span
class="ant-radio-inner"
/>
</span>
<span>
圆形
</span>
</label>
<label
class="ant-radio-wrapper"
>
<span
class="ant-radio"
>
<input
class="ant-radio-input"
type="radio"
value="square"
/>
<span
class="ant-radio-inner"
/>
</span>
<span>
方形
</span>
</label>
</div>,
<button
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
style="right:94px"
type="button"
>
<div
class="ant-float-btn-body"
>
<div
class="ant-float-btn-content"
>
<div
class="ant-float-btn-icon"
>
<span
aria-label="customer-service"
class="anticon anticon-customer-service"
role="img"
>
<svg
aria-hidden="true"
data-icon="customer-service"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z"
/>
</svg>
</span>
</div>
</div>
</div>
</button>,
<button
class="ant-float-btn ant-float-btn-primary ant-float-btn-square"
style="right:24px"
type="button"
>
<div

View File

@ -1,6 +1,6 @@
## zh-CN
设置 `trigger` 属性即可开启菜单模式。提供 `hover``click` 两种触发方式
设置 `trigger` 属性即可开启菜单模式。提供 `hover``click` 两种触发方式
## en-US

View File

@ -3,10 +3,26 @@ import { FloatButton } from 'antd';
import { CustomerServiceOutlined, CommentOutlined } from '@ant-design/icons';
const App: React.FC = () => (
<FloatButton.Group icon={<CustomerServiceOutlined />} type="primary" trigger="click">
<FloatButton />
<FloatButton icon={<CommentOutlined />} />
</FloatButton.Group>
<>
<FloatButton.Group
trigger="click"
type="primary"
style={{ right: 24 }}
icon={<CustomerServiceOutlined />}
>
<FloatButton />
<FloatButton icon={<CommentOutlined />} />
</FloatButton.Group>
<FloatButton.Group
trigger="hover"
type="primary"
style={{ right: 94 }}
icon={<CustomerServiceOutlined />}
>
<FloatButton />
<FloatButton icon={<CommentOutlined />} />
</FloatButton.Group>
</>
);
export default App;

View File

@ -1,6 +1,6 @@
## zh-CN
你可以通过 `shape` 设置不同的形状
通过 `shape` 设置不同的形状
## en-US

View File

@ -1,22 +1,22 @@
import React, { useState } from 'react';
import { FloatButton, Radio } from 'antd';
import type { RadioChangeEvent, FloatButtonProps } from 'antd';
import React from 'react';
import { FloatButton } from 'antd';
import { CustomerServiceOutlined } from '@ant-design/icons';
const App: React.FC = () => {
const [shape, setShape] = useState<FloatButtonProps['shape']>('circle');
const onChange = (e: RadioChangeEvent) => {
setShape(e.target.value);
};
return (
<>
<Radio.Group onChange={onChange} value={shape} style={{ margin: 20 }}>
<Radio value="circle"></Radio>
<Radio value="square"></Radio>
</Radio.Group>
<FloatButton icon={<CustomerServiceOutlined />} type="primary" shape={shape} />
</>
);
};
const App: React.FC = () => (
<>
<FloatButton
shape="circle"
type="primary"
style={{ right: 94 }}
icon={<CustomerServiceOutlined />}
/>
<FloatButton
shape="square"
type="primary"
style={{ right: 24 }}
icon={<CustomerServiceOutlined />}
/>
</>
);
export default App;

View File

@ -1,6 +1,6 @@
## zh-CN
设置 tooltip 属性,即可开启气泡卡片
设置 tooltip 属性,即可开启气泡卡片
## en-US

View File

@ -1,6 +1,6 @@
## zh-CN
通过 `type` 改变悬浮按钮的类型
通过 `type` 改变悬浮按钮的类型
## en-US

View File

@ -9,7 +9,6 @@ import * as React from 'react';
import useFormItemStatus from '../hooks/useFormItemStatus';
import { ConfigContext } from '../../config-provider';
import { cloneElement, isValidElement } from '../../_util/reactNode';
import { tuple } from '../../_util/type';
import warning from '../../_util/warning';
import { FormContext, NoStyleItemContext } from '../context';
import type { FormItemInputProps } from '../FormItemInput';
@ -28,7 +27,7 @@ interface FieldError {
warnings: string[];
}
const ValidateStatuses = tuple('success', 'warning', 'error', 'validating', '');
const ValidateStatuses = ['success', 'warning', 'error', 'validating', ''] as const;
export type ValidateStatus = typeof ValidateStatuses[number];
type RenderChildren<Values = any> = (form: FormInstance<Values>) => React.ReactNode;

View File

@ -6580,6 +6580,133 @@ exports[`renders ./components/form/demo/form-in-modal.tsx extend context correct
</div>
`;
exports[`renders ./components/form/demo/form-item-path.tsx extend context correctly 1`] = `
<form
class="ant-form ant-form-vertical"
id="form_item_path"
>
<div
class="ant-form-item"
>
<div
class="ant-row ant-form-item-row"
>
<div
class="ant-col ant-form-item-label"
>
<label
class=""
for="form_item_path_user_name_firstName"
title="First Name"
>
First Name
</label>
</div>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<input
class="ant-input"
id="form_item_path_user_name_firstName"
type="text"
value=""
/>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-form-item"
>
<div
class="ant-row ant-form-item-row"
>
<div
class="ant-col ant-form-item-label"
>
<label
class=""
for="form_item_path_user_name_lastName"
title="Last Name"
>
Last Name
</label>
</div>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<input
class="ant-input"
id="form_item_path_user_name_lastName"
type="text"
value=""
/>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-form-item"
>
<div
class="ant-row ant-form-item-row"
>
<div
class="ant-col ant-form-item-label"
>
<label
class=""
for="form_item_path_user_age"
title="Age"
>
Age
</label>
</div>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<input
class="ant-input"
id="form_item_path_user_age"
type="text"
value=""
/>
</div>
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-primary"
type="submit"
>
<span>
Submit
</span>
</button>
</form>
`;
exports[`renders ./components/form/demo/global-state.tsx extend context correctly 1`] = `
Array [
<form

View File

@ -3971,6 +3971,133 @@ exports[`renders ./components/form/demo/form-in-modal.tsx correctly 1`] = `
</div>
`;
exports[`renders ./components/form/demo/form-item-path.tsx correctly 1`] = `
<form
class="ant-form ant-form-vertical"
id="form_item_path"
>
<div
class="ant-form-item"
>
<div
class="ant-row ant-form-item-row"
>
<div
class="ant-col ant-form-item-label"
>
<label
class=""
for="form_item_path_user_name_firstName"
title="First Name"
>
First Name
</label>
</div>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<input
class="ant-input"
id="form_item_path_user_name_firstName"
type="text"
value=""
/>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-form-item"
>
<div
class="ant-row ant-form-item-row"
>
<div
class="ant-col ant-form-item-label"
>
<label
class=""
for="form_item_path_user_name_lastName"
title="Last Name"
>
Last Name
</label>
</div>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<input
class="ant-input"
id="form_item_path_user_name_lastName"
type="text"
value=""
/>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-form-item"
>
<div
class="ant-row ant-form-item-row"
>
<div
class="ant-col ant-form-item-label"
>
<label
class=""
for="form_item_path_user_age"
title="Age"
>
Age
</label>
</div>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<input
class="ant-input"
id="form_item_path_user_age"
type="text"
value=""
/>
</div>
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-primary"
type="submit"
>
<span>
Submit
</span>
</button>
</form>
`;
exports[`renders ./components/form/demo/global-state.tsx correctly 1`] = `
Array [
<form

View File

@ -0,0 +1,7 @@
## zh-CN
在某些场景,你希望统一设置一些字段的前缀。你可以通过 HOC 实现该效果。
## en-US
In some scenarios, you may want to set a prefix for some fields consistently. You can achieve this effect with HOC.

View File

@ -0,0 +1,59 @@
import React from 'react';
import { Form, Input, Button } from 'antd';
import type { FormItemProps } from 'antd';
const MyFormItemContext = React.createContext<(string | number)[]>([]);
interface MyFormItemGroupProps {
prefix: string | number | (string | number)[];
children: React.ReactNode;
}
function toArr(str: string | number | (string | number)[]): (string | number)[] {
return Array.isArray(str) ? str : [str];
}
const MyFormItemGroup = ({ prefix, children }: MyFormItemGroupProps) => {
const prefixPath = React.useContext(MyFormItemContext);
const concatPath = React.useMemo(() => [...prefixPath, ...toArr(prefix)], [prefixPath, prefix]);
return <MyFormItemContext.Provider value={concatPath}>{children}</MyFormItemContext.Provider>;
};
const MyFormItem = ({ name, ...props }: FormItemProps) => {
const prefixPath = React.useContext(MyFormItemContext);
const concatName = name !== undefined ? [...prefixPath, ...toArr(name)] : undefined;
return <Form.Item name={concatName} {...props} />;
};
const App: React.FC = () => {
const onFinish = (value: object) => {
console.log(value);
};
return (
<Form name="form_item_path" layout="vertical" onFinish={onFinish}>
<MyFormItemGroup prefix={['user']}>
<MyFormItemGroup prefix={['name']}>
<MyFormItem name="firstName" label="First Name">
<Input />
</MyFormItem>
<MyFormItem name="lastName" label="Last Name">
<Input />
</MyFormItem>
</MyFormItemGroup>
<MyFormItem name="age" label="Age">
<Input />
</MyFormItem>
</MyFormItemGroup>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form>
);
};
export default App;

View File

@ -25,6 +25,7 @@ High performance Form component with data scope management. Including data colle
<code src="./demo/layout-can-wrap.tsx">label can wrap</code>
<code src="./demo/warning-only.tsx">No block rule</code>
<code src="./demo/useWatch.tsx">Watch Hooks</code>
<code src="./demo/form-item-path.tsx">Path Prefix</code>
<code src="./demo/dynamic-form-item.tsx">Dynamic Form Item</code>
<code src="./demo/dynamic-form-items.tsx">Dynamic Form nest Items</code>
<code src="./demo/dynamic-form-items-no-style.tsx" debug>Dynamic Form nest pure Items</code>

View File

@ -26,6 +26,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-lcdS5Qm1bsAAAAAAA
<code src="./demo/layout-can-wrap.tsx">表单标签可换行</code>
<code src="./demo/warning-only.tsx">非阻塞校验</code>
<code src="./demo/useWatch.tsx">字段监听 Hooks</code>
<code src="./demo/form-item-path.tsx">字段路径前缀</code>
<code src="./demo/dynamic-form-item.tsx">动态增减表单项</code>
<code src="./demo/dynamic-form-items.tsx">动态增减嵌套字段</code>
<code src="./demo/dynamic-form-items-no-style.tsx" debug>动态增减嵌套纯字段</code>
@ -65,7 +66,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-lcdS5Qm1bsAAAAAAA
| initialValues | 表单默认值,只有初始化以及重置时生效 | object | - | |
| labelAlign | label 标签的文本对齐方式 | `left` \| `right` | `right` | |
| labelWrap | label 标签的文本换行方式 | boolean | false | 4.18.0 |
| labelCol | label 标签布局,同 `<Col>` 组件,设置 `span` `offset` 值,如 `{span: 3, offset: 12}``sm: {span: 3, offset: 12}` | [object](/components/grid/#Col) | - | |
| labelCol | label 标签布局,同 `<Col>` 组件,设置 `span` `offset` 值,如 `{span: 3, offset: 12}``sm: {span: 3, offset: 12}` | [object](/components/grid-cn#Col) | - | |
| layout | 表单布局 | `horizontal` \| `vertical` \| `inline` | `horizontal` | |
| name | 表单名称,会作为表单字段 `id` 前缀使用 | string | - | |
| preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 |
@ -74,7 +75,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-lcdS5Qm1bsAAAAAAA
| size | 设置字段组件的尺寸(仅限 antd 组件) | `small` \| `middle` \| `large` | - | |
| validateMessages | 验证提示模板,说明[见下](#validateMessages) | [ValidateMessages](https://github.com/react-component/field-form/blob/master/src/utils/messages.ts) | - | |
| validateTrigger | 统一设置字段触发验证的时机 | string \| string\[] | `onChange` | 4.3.0 |
| wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 labelCol | [object](/components/grid/#Col) | - | |
| wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 labelCol | [object](/components/grid-cn#Col) | - | |
| onFieldsChange | 字段更新时触发回调事件 | function(changedFields, allFields) | - | |
| onFinish | 提交表单且数据验证成功后回调事件 | function(values) | - | |
| onFinishFailed | 提交表单且数据验证失败后回调事件 | function({ values, errorFields, outOfDate }) | - | |
@ -93,7 +94,7 @@ const validateMessages = {
<Form validateMessages={validateMessages} />;
```
此外,[ConfigProvider](/components/config-provider/) 也提供了全局化配置方案,允许统一配置错误提示模板:
此外,[ConfigProvider](/components/config-provider-cn) 也提供了全局化配置方案,允许统一配置错误提示模板:
```jsx
const validateMessages = {
@ -124,7 +125,7 @@ const validateMessages = {
| initialValue | 设置子元素默认值,如果与 Form 的 `initialValues` 冲突则以 Form 为准 | string | - | 4.2.0 |
| label | `label` 标签的文本 | ReactNode | - | |
| labelAlign | 标签文本对齐方式 | `left` \| `right` | `right` | |
| labelCol | `label` 标签布局,同 `<Col>` 组件,设置 `span` `offset` 值,如 `{span: 3, offset: 12}``sm: {span: 3, offset: 12}`。你可以通过 Form 的 `labelCol` 进行统一设置,不会作用于嵌套 Item。当和 Form 同时设置时,以 Item 为准 | [object](/components/grid/#Col) | - | |
| labelCol | `label` 标签布局,同 `<Col>` 组件,设置 `span` `offset` 值,如 `{span: 3, offset: 12}``sm: {span: 3, offset: 12}`。你可以通过 Form 的 `labelCol` 进行统一设置,不会作用于嵌套 Item。当和 Form 同时设置时,以 Item 为准 | [object](/components/grid-cn#Col) | - | |
| messageVariables | 默认验证字段的信息 | Record&lt;string, string> | - | 4.7.0 |
| name | 字段名,支持数组 | [NamePath](#NamePath) | - | |
| normalize | 组件获取值后进行转换,再放入 Form 中。不支持异步 | (value, prevValue, prevValues) => any | - | |
@ -133,13 +134,13 @@ const validateMessages = {
| required | 必填样式设置。如不设置,则会根据校验规则自动生成 | boolean | false | |
| rules | 校验规则,设置字段的校验逻辑。点击[此处](#components-form-demo-basic)查看示例 | [Rule](#Rule)\[] | - | |
| shouldUpdate | 自定义字段更新逻辑,说明[见下](#shouldUpdate) | boolean \| (prevValue, curValue) => boolean | false | |
| tooltip | 配置提示信息 | ReactNode \| [TooltipProps & { icon: ReactNode }](/components/tooltip#API) | - | 4.7.0 |
| tooltip | 配置提示信息 | ReactNode \| [TooltipProps & { icon: ReactNode }](/components/tooltip-cn#API) | - | 4.7.0 |
| trigger | 设置收集字段值变更的时机。点击[此处](#components-form-demo-customized-form-controls)查看示例 | string | `onChange` | |
| validateFirst | 当某一规则校验不通过时,是否停止剩下的规则的校验。设置 `parallel` 时会并行校验 | boolean \| `parallel` | false | `parallel`: 4.5.0 |
| validateStatus | 校验状态,如不设置,则会根据校验规则自动生成,可选:'success' 'warning' 'error' 'validating' | string | - | |
| validateTrigger | 设置字段校验的时机 | string \| string\[] | `onChange` | |
| valuePropName | 子节点的值的属性,如 Switch 的是 'checked'。该属性为 `getValueProps` 的封装,自定义 `getValueProps` 后会失效 | string | `value` | |
| wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 `labelCol`。你可以通过 Form 的 `wrapperCol` 进行统一设置,不会作用于嵌套 Item。当和 Form 同时设置时,以 Item 为准 | [object](/components/grid/#Col) | - | |
| wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 `labelCol`。你可以通过 Form 的 `wrapperCol` 进行统一设置,不会作用于嵌套 Item。当和 Form 同时设置时,以 Item 为准 | [object](/components/grid-cn#Col) | - | |
被设置了 `name` 属性的 `Form.Item` 包装的控件,表单控件会自动添加 `value`(或 `valuePropName` 指定的其他属性) `onChange`(或 `trigger` 指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:

View File

@ -4,12 +4,18 @@ import { ConfigContext } from '../config-provider';
import useFlexGapSupport from '../_util/hooks/useFlexGapSupport';
import type { Breakpoint, ScreenMap } from '../_util/responsiveObserve';
import ResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve';
import { tuple } from '../_util/type';
import RowContext from './RowContext';
import { useRowStyle } from './style';
const RowAligns = tuple('top', 'middle', 'bottom', 'stretch');
const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between', 'space-evenly');
const RowAligns = ['top', 'middle', 'bottom', 'stretch'] as const;
const RowJustify = [
'start',
'end',
'center',
'space-around',
'space-between',
'space-evenly',
] as const;
type Responsive = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
type ResponsiveLike<T> = {

View File

@ -9,7 +9,7 @@ export type { AutoCompleteProps } from './auto-complete';
export { default as Avatar } from './avatar';
export type { AvatarProps } from './avatar';
export { default as FloatButton } from './float-button';
export type { FloatButtonProps } from './float-button/interface';
export type { FloatButtonProps, FloatButtonGroupProps } from './float-button/interface';
export { default as BackTop } from './back-top';
export type { BackTopProps } from './back-top';
export { default as Badge } from './badge';

View File

@ -8,10 +8,9 @@ import { FormItemInputContext } from '../form/context';
import { cloneElement } from '../_util/reactNode';
import type { InputStatus } from '../_util/statusUtils';
import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
import { tuple } from '../_util/type';
import type { InputProps } from './Input';
const ClearableInputType = tuple('text', 'input');
const ClearableInputType = ['text', 'input'] as const;
function hasAddon(props: InputProps | ClearableInputProps) {
return !!(props.addonBefore || props.addonAfter);

View File

@ -100,7 +100,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*4i58ToAcxaYAAAAAAA
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| breakpoint | 触发响应式布局的[断点](/components/grid/#Col) | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` | - |
| breakpoint | 触发响应式布局的[断点](/components/grid-cn#Col) | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` | - |
| className | 容器 className | string | - |
| collapsed | 当前收起状态 | boolean | - |
| collapsedWidth | 收缩宽度,设置为 0 会出现特殊 trigger | number | 80 |
@ -112,7 +112,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*4i58ToAcxaYAAAAAAA
| trigger | 自定义 trigger设置为 null 时隐藏 trigger | ReactNode | - |
| width | 宽度 | number \| string | 200 |
| zeroWidthTriggerStyle | 指定当 `collapsedWidth` 为 0 时出现的特殊 trigger 的样式 | object | - |
| onBreakpoint | 触发响应式布局[断点](/components/grid/#API)时的回调 | (broken) => {} | - |
| onBreakpoint | 触发响应式布局[断点](/components/grid-cn#API)时的回调 | (broken) => {} | - |
| onCollapse | 展开-收起时的回调函数,有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - |
#### breakpoint width

View File

@ -396,28 +396,6 @@ exports[`List.pagination should change page size work 2`] = `
style="min-width: 0; opacity: 0;"
>
<div>
<div
id="rc_select_TEST_OR_SSR_list"
role="listbox"
style="height: 0px; width: 0px; overflow: hidden;"
>
<div
aria-label="10 / page"
aria-selected="false"
id="rc_select_TEST_OR_SSR_list_0"
role="option"
>
10
</div>
<div
aria-label="20 / page"
aria-selected="false"
id="rc_select_TEST_OR_SSR_list_1"
role="option"
>
20
</div>
</div>
<div
class="rc-virtual-list"
style="position: relative;"
@ -429,11 +407,15 @@ exports[`List.pagination should change page size work 2`] = `
<div>
<div
class="rc-virtual-list-holder-inner"
id="rc_select_TEST_OR_SSR_list"
role="listbox"
style="display: flex; flex-direction: column;"
>
<div
aria-selected="false"
class="ant-select-item ant-select-item-option ant-select-item-option-active"
id="rc_select_TEST_OR_SSR_list_0"
role="option"
title="10 / page"
>
<div
@ -451,6 +433,8 @@ exports[`List.pagination should change page size work 2`] = `
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="rc_select_TEST_OR_SSR_list_1"
role="option"
title="20 / page"
>
<div
@ -468,6 +452,8 @@ exports[`List.pagination should change page size work 2`] = `
<div
aria-selected="true"
class="ant-select-item ant-select-item-option ant-select-item-option-selected"
id="rc_select_TEST_OR_SSR_list_2"
role="option"
title="50 / page"
>
<div
@ -485,6 +471,8 @@ exports[`List.pagination should change page size work 2`] = `
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="rc_select_TEST_OR_SSR_list_3"
role="option"
title="100 / page"
>
<div

View File

@ -39,7 +39,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EYuhSpw1iSwAAAAAAA
| grid | 列表栅格配置 | [object](#List-grid-props) | - | |
| header | 列表头部 | ReactNode | - | |
| itemLayout | 设置 `List.Item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | string | - | |
| loading | 当卡片内容还在加载中时,可以用 `loading` 展示一个占位 | boolean \| [object](/components/spin/#API) ([更多](https://github.com/ant-design/ant-design/issues/8659)) | false | |
| loading | 当卡片内容还在加载中时,可以用 `loading` 展示一个占位 | boolean \| [object](/components/spin-cn#API) ([更多](https://github.com/ant-design/ant-design/issues/8659)) | false | |
| loadMore | 加载更多 | ReactNode | - | |
| locale | 默认文案设置,目前包括空数据文案 | object | {emptyText: `暂无数据`} | |
| pagination | 对应的 `pagination` 配置, 设置 false 不显示 | boolean \| object | false | |
@ -56,7 +56,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EYuhSpw1iSwAAAAAAA
| -------- | ------------------ | --------------------------- | -------- |
| position | 指定分页显示的位置 | `top` \| `bottom` \| `both` | `bottom` |
更多配置项,请查看 [`Pagination`](/components/pagination/)。
更多配置项,请查看 [`Pagination`](/components/pagination-cn)。
### List grid props

View File

@ -6774,6 +6774,7 @@ exports[`Locale Provider should display the text as ar 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -6812,6 +6813,7 @@ exports[`Locale Provider should display the text as ar 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -11881,6 +11883,7 @@ exports[`Locale Provider should display the text as az 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -11919,6 +11922,7 @@ exports[`Locale Provider should display the text as az 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -16988,6 +16992,7 @@ exports[`Locale Provider should display the text as bg 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -17026,6 +17031,7 @@ exports[`Locale Provider should display the text as bg 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -22095,6 +22101,7 @@ exports[`Locale Provider should display the text as bn-bd 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -22133,6 +22140,7 @@ exports[`Locale Provider should display the text as bn-bd 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -27202,6 +27210,7 @@ exports[`Locale Provider should display the text as by 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -27240,6 +27249,7 @@ exports[`Locale Provider should display the text as by 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -32309,6 +32319,7 @@ exports[`Locale Provider should display the text as ca 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -32347,6 +32358,7 @@ exports[`Locale Provider should display the text as ca 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -37416,6 +37428,7 @@ exports[`Locale Provider should display the text as cs 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -37454,6 +37467,7 @@ exports[`Locale Provider should display the text as cs 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -42523,6 +42537,7 @@ exports[`Locale Provider should display the text as da 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -42561,6 +42576,7 @@ exports[`Locale Provider should display the text as da 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -47630,6 +47646,7 @@ exports[`Locale Provider should display the text as de 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -47668,6 +47685,7 @@ exports[`Locale Provider should display the text as de 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -52737,6 +52755,7 @@ exports[`Locale Provider should display the text as el 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -52775,6 +52794,7 @@ exports[`Locale Provider should display the text as el 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -57844,6 +57864,7 @@ exports[`Locale Provider should display the text as en 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -57882,6 +57903,7 @@ exports[`Locale Provider should display the text as en 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -62951,6 +62973,7 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -62989,6 +63012,7 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -68058,6 +68082,7 @@ exports[`Locale Provider should display the text as es 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -68096,6 +68121,7 @@ exports[`Locale Provider should display the text as es 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -73165,6 +73191,7 @@ exports[`Locale Provider should display the text as et 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -73203,6 +73230,7 @@ exports[`Locale Provider should display the text as et 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -83379,6 +83407,7 @@ exports[`Locale Provider should display the text as fa 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -83417,6 +83446,7 @@ exports[`Locale Provider should display the text as fa 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -88486,6 +88516,7 @@ exports[`Locale Provider should display the text as fi 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -88524,6 +88555,7 @@ exports[`Locale Provider should display the text as fi 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -93593,6 +93625,7 @@ exports[`Locale Provider should display the text as fr 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -93631,6 +93664,7 @@ exports[`Locale Provider should display the text as fr 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -98700,6 +98734,7 @@ exports[`Locale Provider should display the text as fr 2`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -98738,6 +98773,7 @@ exports[`Locale Provider should display the text as fr 2`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -103807,6 +103843,7 @@ exports[`Locale Provider should display the text as fr 3`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -103845,6 +103882,7 @@ exports[`Locale Provider should display the text as fr 3`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -108914,6 +108952,7 @@ exports[`Locale Provider should display the text as ga 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -108952,6 +108991,7 @@ exports[`Locale Provider should display the text as ga 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -114021,6 +114061,7 @@ exports[`Locale Provider should display the text as gl 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -114059,6 +114100,7 @@ exports[`Locale Provider should display the text as gl 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -119128,6 +119170,7 @@ exports[`Locale Provider should display the text as he 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -119166,6 +119209,7 @@ exports[`Locale Provider should display the text as he 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -124235,6 +124279,7 @@ exports[`Locale Provider should display the text as hi 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -124273,6 +124318,7 @@ exports[`Locale Provider should display the text as hi 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -129342,6 +129388,7 @@ exports[`Locale Provider should display the text as hr 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -129380,6 +129427,7 @@ exports[`Locale Provider should display the text as hr 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -134449,6 +134497,7 @@ exports[`Locale Provider should display the text as hu 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -134487,6 +134536,7 @@ exports[`Locale Provider should display the text as hu 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -139556,6 +139606,7 @@ exports[`Locale Provider should display the text as hy-am 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -139594,6 +139645,7 @@ exports[`Locale Provider should display the text as hy-am 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -144663,6 +144715,7 @@ exports[`Locale Provider should display the text as id 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -144701,6 +144754,7 @@ exports[`Locale Provider should display the text as id 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -149770,6 +149824,7 @@ exports[`Locale Provider should display the text as is 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -149808,6 +149863,7 @@ exports[`Locale Provider should display the text as is 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -154877,6 +154933,7 @@ exports[`Locale Provider should display the text as it 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -154915,6 +154972,7 @@ exports[`Locale Provider should display the text as it 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -159984,6 +160042,7 @@ exports[`Locale Provider should display the text as ja 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -160022,6 +160081,7 @@ exports[`Locale Provider should display the text as ja 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -165091,6 +165151,7 @@ exports[`Locale Provider should display the text as ka 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -165129,6 +165190,7 @@ exports[`Locale Provider should display the text as ka 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -170198,6 +170260,7 @@ exports[`Locale Provider should display the text as kk 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -170236,6 +170299,7 @@ exports[`Locale Provider should display the text as kk 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -175303,6 +175367,7 @@ exports[`Locale Provider should display the text as km 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -175341,6 +175406,7 @@ exports[`Locale Provider should display the text as km 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -180410,6 +180476,7 @@ exports[`Locale Provider should display the text as kn 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -180448,6 +180515,7 @@ exports[`Locale Provider should display the text as kn 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -185517,6 +185585,7 @@ exports[`Locale Provider should display the text as ko 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -185555,6 +185624,7 @@ exports[`Locale Provider should display the text as ko 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -190624,6 +190694,7 @@ exports[`Locale Provider should display the text as ku 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -190662,6 +190733,7 @@ exports[`Locale Provider should display the text as ku 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -195731,6 +195803,7 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -195769,6 +195842,7 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -200838,6 +200912,7 @@ exports[`Locale Provider should display the text as lt 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -200876,6 +200951,7 @@ exports[`Locale Provider should display the text as lt 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -205945,6 +206021,7 @@ exports[`Locale Provider should display the text as lv 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -205983,6 +206060,7 @@ exports[`Locale Provider should display the text as lv 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -211052,6 +211130,7 @@ exports[`Locale Provider should display the text as mk 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -211090,6 +211169,7 @@ exports[`Locale Provider should display the text as mk 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -216159,6 +216239,7 @@ exports[`Locale Provider should display the text as ml 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -216197,6 +216278,7 @@ exports[`Locale Provider should display the text as ml 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -221266,6 +221348,7 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -221304,6 +221387,7 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -226373,6 +226457,7 @@ exports[`Locale Provider should display the text as ms-my 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -226411,6 +226496,7 @@ exports[`Locale Provider should display the text as ms-my 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -231480,6 +231566,7 @@ exports[`Locale Provider should display the text as nb 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -231518,6 +231605,7 @@ exports[`Locale Provider should display the text as nb 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -236587,6 +236675,7 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -236625,6 +236714,7 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -241694,6 +241784,7 @@ exports[`Locale Provider should display the text as nl 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -241732,6 +241823,7 @@ exports[`Locale Provider should display the text as nl 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -246801,6 +246893,7 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -246839,6 +246932,7 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -251908,6 +252002,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -251946,6 +252041,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -257015,6 +257111,7 @@ exports[`Locale Provider should display the text as pt 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -257053,6 +257150,7 @@ exports[`Locale Provider should display the text as pt 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -262122,6 +262220,7 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -262160,6 +262259,7 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -267229,6 +267329,7 @@ exports[`Locale Provider should display the text as ro 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -267267,6 +267368,7 @@ exports[`Locale Provider should display the text as ro 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -272336,6 +272438,7 @@ exports[`Locale Provider should display the text as ru 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -272374,6 +272477,7 @@ exports[`Locale Provider should display the text as ru 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -277443,6 +277547,7 @@ exports[`Locale Provider should display the text as si 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -277481,6 +277586,7 @@ exports[`Locale Provider should display the text as si 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -282550,6 +282656,7 @@ exports[`Locale Provider should display the text as sk 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -282588,6 +282695,7 @@ exports[`Locale Provider should display the text as sk 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -287657,6 +287765,7 @@ exports[`Locale Provider should display the text as sl 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -287695,6 +287804,7 @@ exports[`Locale Provider should display the text as sl 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -292764,6 +292874,7 @@ exports[`Locale Provider should display the text as sr 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -292802,6 +292913,7 @@ exports[`Locale Provider should display the text as sr 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -297871,6 +297983,7 @@ exports[`Locale Provider should display the text as sv 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -297909,6 +298022,7 @@ exports[`Locale Provider should display the text as sv 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -302978,6 +303092,7 @@ exports[`Locale Provider should display the text as ta 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -303016,6 +303131,7 @@ exports[`Locale Provider should display the text as ta 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -308085,6 +308201,7 @@ exports[`Locale Provider should display the text as th 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -308123,6 +308240,7 @@ exports[`Locale Provider should display the text as th 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -313192,6 +313310,7 @@ exports[`Locale Provider should display the text as tk 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -313230,6 +313349,7 @@ exports[`Locale Provider should display the text as tk 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -318299,6 +318419,7 @@ exports[`Locale Provider should display the text as tr 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -318337,6 +318458,7 @@ exports[`Locale Provider should display the text as tr 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -323406,6 +323528,7 @@ exports[`Locale Provider should display the text as uk 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -323444,6 +323567,7 @@ exports[`Locale Provider should display the text as uk 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -328513,6 +328637,7 @@ exports[`Locale Provider should display the text as ur 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -328551,6 +328676,7 @@ exports[`Locale Provider should display the text as ur 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -333620,6 +333746,7 @@ exports[`Locale Provider should display the text as vi 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -333658,6 +333785,7 @@ exports[`Locale Provider should display the text as vi 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -338727,6 +338855,7 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -338765,6 +338894,7 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -343834,6 +343964,7 @@ exports[`Locale Provider should display the text as zh-hk 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -343872,6 +344003,7 @@ exports[`Locale Provider should display the text as zh-hk 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
@ -348941,6 +349073,7 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -348979,6 +349112,7 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>

View File

@ -134,4 +134,4 @@ return (
### 静态方法如何设置 prefixCls
你可以通过 [`ConfigProvider.config`](</components/config-provider/#ConfigProvider.config()-4.13.0+>) 进行设置。
你可以通过 [`ConfigProvider.config`](</components/config-provider-cn#ConfigProvider.config()-4.13.0+>) 进行设置。

View File

@ -45,9 +45,9 @@ export interface ModalProps {
/** 是否显示右上角的关闭按钮 */
closable?: boolean;
/** 点击确定回调 */
onOk?: (e: React.MouseEvent<HTMLElement>) => void;
onOk?: (e: React.MouseEvent<HTMLButtonElement>) => void;
/** 点击模态框右上角叉、取消按钮、Props.maskClosable 值为 true 时的遮罩层或键盘按下 Esc 时的回调 */
onCancel?: (e: React.MouseEvent<HTMLElement>) => void;
onCancel?: (e: React.MouseEvent<HTMLButtonElement>) => void;
afterClose?: () => void;
/** 垂直居中 */
centered?: boolean;
@ -202,11 +202,7 @@ const Modal: React.FC<ModalProps> = (props) => {
<Dialog
width={width}
{...restProps}
getContainer={
getContainer === undefined
? (getContextPopupContainer as getContainerFunc)
: getContainer
}
getContainer={getContainer === undefined ? getContextPopupContainer : getContainer}
prefixCls={prefixCls}
rootClassName={hashId}
wrapClassName={wrapClassNameExtended}

View File

@ -38,8 +38,8 @@ export function renderFooter(
| 'okButtonProps'
| 'cancelButtonProps'
> & {
onOk?: React.MouseEventHandler;
onCancel?: React.MouseEventHandler;
onOk?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
onCancel?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
},
) {
const {

View File

@ -299,4 +299,22 @@ describe('Modal.hook', () => {
jest.useRealTimers();
});
it('not block origin ConfigProvider config', () => {
const Demo = () => {
const [modal, contextHolder] = Modal.useModal();
React.useEffect(() => {
modal.confirm({
content: <Button className="bamboo"></Button>,
});
}, []);
return <ConfigProvider autoInsertSpaceInButton={false}>{contextHolder}</ConfigProvider>;
};
render(<Demo />);
expect(document.body.querySelector('.bamboo')?.textContent).toEqual('好的');
});
});

View File

@ -43,7 +43,7 @@ demo:
| --- | --- | --- | --- | --- |
| afterClose | Modal 完全关闭后的回调 | function | - | |
| bodyStyle | Modal body 样式 | CSSProperties | | |
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button/#API) | - | |
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button-cn#API) | - | |
| cancelText | 取消按钮文字 | ReactNode | `取消` | |
| centered | 垂直居中展示 Modal | boolean | false | |
| closable | 是否显示右上角的关闭按钮 | boolean | true | |
@ -59,7 +59,7 @@ demo:
| maskClosable | 点击蒙层是否允许关闭 | boolean | true | |
| maskStyle | 遮罩样式 | CSSProperties | | |
| modalRender | 自定义渲染对话框 | (node: ReactNode) => ReactNode | - | 4.7.0 |
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - | |
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button-cn#API) | - | |
| okText | 确认按钮文字 | ReactNode | `确定` | |
| okType | 确认按钮类型 | string | `primary` | |
| style | 可用于设置浮层的样式,调整浮层位置等 | CSSProperties | - | |
@ -94,7 +94,7 @@ demo:
| afterClose | Modal 完全关闭后的回调 | function | - | 4.9.0 |
| autoFocusButton | 指定自动获得焦点的按钮 | null \| `ok` \| `cancel` | `ok` | |
| bodyStyle | Modal body 样式 | CSSProperties | | 4.8.0 |
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button/#API) | - | |
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button-cn#API) | - | |
| cancelText | 设置 Modal.confirm 取消按钮文字 | string | `取消` | |
| centered | 垂直居中展示 Modal | boolean | false | |
| className | 容器类名 | string | - | |
@ -108,7 +108,7 @@ demo:
| mask | 是否展示遮罩 | boolean | true | |
| maskClosable | 点击蒙层是否允许关闭 | boolean | false | |
| maskStyle | 遮罩样式 | object | {} | |
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - | |
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button-cn#API) | - | |
| okText | 确认按钮文字 | string | `确定` | |
| okType | 确认按钮类型 | string | `primary` | |
| style | 可用于设置浮层的样式,调整浮层位置等 | CSSProperties | - | |
@ -201,4 +201,4 @@ return (
### 静态方法如何设置 prefixCls
你可以通过 [`ConfigProvider.config`](</components/config-provider/#ConfigProvider.config()-4.13.0+>) 进行设置。
你可以通过 [`ConfigProvider.config`](</components/config-provider-cn#ConfigProvider.config()-4.13.0+>) 进行设置。

View File

@ -117,4 +117,4 @@ return (
### 静态方法如何设置 prefixCls
你可以通过 [`ConfigProvider.config`](</components/config-provider/#ConfigProvider.config()-4.13.0+>) 进行设置。
你可以通过 [`ConfigProvider.config`](</components/config-provider-cn#ConfigProvider.config()-4.13.0+>) 进行设置。

View File

@ -221,28 +221,6 @@ exports[`renders ./components/pagination/demo/all.tsx extend context correctly 1
style="opacity:0"
>
<div>
<div
id="undefined_list"
role="listbox"
style="height:0;width:0;overflow:hidden"
>
<div
aria-label="10 / page"
aria-selected="true"
id="undefined_list_0"
role="option"
>
10
</div>
<div
aria-label="20 / page"
aria-selected="false"
id="undefined_list_1"
role="option"
>
20
</div>
</div>
<div
class="rc-virtual-list"
style="position:relative"
@ -254,11 +232,15 @@ exports[`renders ./components/pagination/demo/all.tsx extend context correctly 1
<div>
<div
class="rc-virtual-list-holder-inner"
id="undefined_list"
role="listbox"
style="display:flex;flex-direction:column"
>
<div
aria-selected="true"
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
id="undefined_list_0"
role="option"
title="10 / page"
>
<div
@ -276,6 +258,8 @@ exports[`renders ./components/pagination/demo/all.tsx extend context correctly 1
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_1"
role="option"
title="20 / page"
>
<div
@ -293,6 +277,8 @@ exports[`renders ./components/pagination/demo/all.tsx extend context correctly 1
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_2"
role="option"
title="50 / page"
>
<div
@ -310,6 +296,8 @@ exports[`renders ./components/pagination/demo/all.tsx extend context correctly 1
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_3"
role="option"
title="100 / page"
>
<div
@ -716,28 +704,6 @@ Array [
style="opacity:0"
>
<div>
<div
id="undefined_list"
role="listbox"
style="height:0;width:0;overflow:hidden"
>
<div
aria-label="10 / page"
aria-selected="true"
id="undefined_list_0"
role="option"
>
10
</div>
<div
aria-label="20 / page"
aria-selected="false"
id="undefined_list_1"
role="option"
>
20
</div>
</div>
<div
class="rc-virtual-list"
style="position:relative"
@ -749,11 +715,15 @@ Array [
<div>
<div
class="rc-virtual-list-holder-inner"
id="undefined_list"
role="listbox"
style="display:flex;flex-direction:column"
>
<div
aria-selected="true"
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
id="undefined_list_0"
role="option"
title="10 / page"
>
<div
@ -771,6 +741,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_1"
role="option"
title="20 / page"
>
<div
@ -788,6 +760,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_2"
role="option"
title="50 / page"
>
<div
@ -805,6 +779,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_3"
role="option"
title="100 / page"
>
<div
@ -1072,28 +1048,6 @@ Array [
style="opacity:0"
>
<div>
<div
id="undefined_list"
role="listbox"
style="height:0;width:0;overflow:hidden"
>
<div
aria-label="10 / page"
aria-selected="true"
id="undefined_list_0"
role="option"
>
10
</div>
<div
aria-label="20 / page"
aria-selected="false"
id="undefined_list_1"
role="option"
>
20
</div>
</div>
<div
class="rc-virtual-list"
style="position:relative"
@ -1105,11 +1059,15 @@ Array [
<div>
<div
class="rc-virtual-list-holder-inner"
id="undefined_list"
role="listbox"
style="display:flex;flex-direction:column"
>
<div
aria-selected="true"
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
id="undefined_list_0"
role="option"
title="10 / page"
>
<div
@ -1127,6 +1085,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_1"
role="option"
title="20 / page"
>
<div
@ -1144,6 +1104,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_2"
role="option"
title="50 / page"
>
<div
@ -1161,6 +1123,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_3"
role="option"
title="100 / page"
>
<div
@ -1513,28 +1477,6 @@ exports[`renders ./components/pagination/demo/itemRender.tsx extend context corr
style="opacity:0"
>
<div>
<div
id="undefined_list"
role="listbox"
style="height:0;width:0;overflow:hidden"
>
<div
aria-label="10 / page"
aria-selected="true"
id="undefined_list_0"
role="option"
>
10
</div>
<div
aria-label="20 / page"
aria-selected="false"
id="undefined_list_1"
role="option"
>
20
</div>
</div>
<div
class="rc-virtual-list"
style="position:relative"
@ -1546,11 +1488,15 @@ exports[`renders ./components/pagination/demo/itemRender.tsx extend context corr
<div>
<div
class="rc-virtual-list-holder-inner"
id="undefined_list"
role="listbox"
style="display:flex;flex-direction:column"
>
<div
aria-selected="true"
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
id="undefined_list_0"
role="option"
title="10 / page"
>
<div
@ -1568,6 +1514,8 @@ exports[`renders ./components/pagination/demo/itemRender.tsx extend context corr
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_1"
role="option"
title="20 / page"
>
<div
@ -1585,6 +1533,8 @@ exports[`renders ./components/pagination/demo/itemRender.tsx extend context corr
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_2"
role="option"
title="50 / page"
>
<div
@ -1602,6 +1552,8 @@ exports[`renders ./components/pagination/demo/itemRender.tsx extend context corr
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_3"
role="option"
title="100 / page"
>
<div
@ -1871,28 +1823,6 @@ Array [
style="opacity:0"
>
<div>
<div
id="undefined_list"
role="listbox"
style="height:0;width:0;overflow:hidden"
>
<div
aria-label="10 / page"
aria-selected="true"
id="undefined_list_0"
role="option"
>
10
</div>
<div
aria-label="20 / page"
aria-selected="false"
id="undefined_list_1"
role="option"
>
20
</div>
</div>
<div
class="rc-virtual-list"
style="position:relative"
@ -1904,11 +1834,15 @@ Array [
<div>
<div
class="rc-virtual-list-holder-inner"
id="undefined_list"
role="listbox"
style="display:flex;flex-direction:column"
>
<div
aria-selected="true"
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
id="undefined_list_0"
role="option"
title="10 / page"
>
<div
@ -1926,6 +1860,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_1"
role="option"
title="20 / page"
>
<div
@ -1943,6 +1879,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_2"
role="option"
title="50 / page"
>
<div
@ -1960,6 +1898,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_3"
role="option"
title="100 / page"
>
<div
@ -2238,28 +2178,6 @@ Array [
style="opacity:0"
>
<div>
<div
id="undefined_list"
role="listbox"
style="height:0;width:0;overflow:hidden"
>
<div
aria-label="10 / page"
aria-selected="true"
id="undefined_list_0"
role="option"
>
10
</div>
<div
aria-label="20 / page"
aria-selected="false"
id="undefined_list_1"
role="option"
>
20
</div>
</div>
<div
class="rc-virtual-list"
style="position:relative"
@ -2271,11 +2189,15 @@ Array [
<div>
<div
class="rc-virtual-list-holder-inner"
id="undefined_list"
role="listbox"
style="display:flex;flex-direction:column"
>
<div
aria-selected="true"
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
id="undefined_list_0"
role="option"
title="10 / page"
>
<div
@ -2293,6 +2215,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_1"
role="option"
title="20 / page"
>
<div
@ -2310,6 +2234,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_2"
role="option"
title="50 / page"
>
<div
@ -2327,6 +2253,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_3"
role="option"
title="100 / page"
>
<div
@ -2683,28 +2611,6 @@ Array [
style="opacity:0"
>
<div>
<div
id="undefined_list"
role="listbox"
style="height:0;width:0;overflow:hidden"
>
<div
aria-label="10 / page"
aria-selected="true"
id="undefined_list_0"
role="option"
>
10
</div>
<div
aria-label="20 / page"
aria-selected="false"
id="undefined_list_1"
role="option"
>
20
</div>
</div>
<div
class="rc-virtual-list"
style="position:relative"
@ -2716,11 +2622,15 @@ Array [
<div>
<div
class="rc-virtual-list-holder-inner"
id="undefined_list"
role="listbox"
style="display:flex;flex-direction:column"
>
<div
aria-selected="true"
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
id="undefined_list_0"
role="option"
title="10 / page"
>
<div
@ -2738,6 +2648,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_1"
role="option"
title="20 / page"
>
<div
@ -2755,6 +2667,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_2"
role="option"
title="50 / page"
>
<div
@ -2772,6 +2686,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_3"
role="option"
title="100 / page"
>
<div
@ -3133,28 +3049,6 @@ Array [
style="opacity:0"
>
<div>
<div
id="undefined_list"
role="listbox"
style="height:0;width:0;overflow:hidden"
>
<div
aria-label="10 / page"
aria-selected="true"
id="undefined_list_0"
role="option"
>
10
</div>
<div
aria-label="20 / page"
aria-selected="false"
id="undefined_list_1"
role="option"
>
20
</div>
</div>
<div
class="rc-virtual-list"
style="position:relative"
@ -3166,11 +3060,15 @@ Array [
<div>
<div
class="rc-virtual-list-holder-inner"
id="undefined_list"
role="listbox"
style="display:flex;flex-direction:column"
>
<div
aria-selected="true"
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
id="undefined_list_0"
role="option"
title="10 / page"
>
<div
@ -3188,6 +3086,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_1"
role="option"
title="20 / page"
>
<div
@ -3205,6 +3105,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_2"
role="option"
title="50 / page"
>
<div
@ -3222,6 +3124,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_3"
role="option"
title="100 / page"
>
<div
@ -3552,28 +3456,6 @@ exports[`renders ./components/pagination/demo/more.tsx extend context correctly
style="opacity:0"
>
<div>
<div
id="undefined_list"
role="listbox"
style="height:0;width:0;overflow:hidden"
>
<div
aria-label="10 / page"
aria-selected="true"
id="undefined_list_0"
role="option"
>
10
</div>
<div
aria-label="20 / page"
aria-selected="false"
id="undefined_list_1"
role="option"
>
20
</div>
</div>
<div
class="rc-virtual-list"
style="position:relative"
@ -3585,11 +3467,15 @@ exports[`renders ./components/pagination/demo/more.tsx extend context correctly
<div>
<div
class="rc-virtual-list-holder-inner"
id="undefined_list"
role="listbox"
style="display:flex;flex-direction:column"
>
<div
aria-selected="true"
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
id="undefined_list_0"
role="option"
title="10 / page"
>
<div
@ -3607,6 +3493,8 @@ exports[`renders ./components/pagination/demo/more.tsx extend context correctly
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_1"
role="option"
title="20 / page"
>
<div
@ -3624,6 +3512,8 @@ exports[`renders ./components/pagination/demo/more.tsx extend context correctly
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_2"
role="option"
title="50 / page"
>
<div
@ -3641,6 +3531,8 @@ exports[`renders ./components/pagination/demo/more.tsx extend context correctly
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_3"
role="option"
title="100 / page"
>
<div
@ -4041,28 +3933,6 @@ Array [
style="opacity:0"
>
<div>
<div
id="undefined_list"
role="listbox"
style="height:0;width:0;overflow:hidden"
>
<div
aria-label="10 / page"
aria-selected="false"
id="undefined_list_0"
role="option"
>
10
</div>
<div
aria-label="20 / page"
aria-selected="true"
id="undefined_list_1"
role="option"
>
20
</div>
</div>
<div
class="rc-virtual-list"
style="position:relative"
@ -4074,11 +3944,15 @@ Array [
<div>
<div
class="rc-virtual-list-holder-inner"
id="undefined_list"
role="listbox"
style="display:flex;flex-direction:column"
>
<div
aria-selected="false"
class="ant-select-item ant-select-item-option ant-select-item-option-active"
id="undefined_list_0"
role="option"
title="10 / page"
>
<div
@ -4096,6 +3970,8 @@ Array [
<div
aria-selected="true"
class="ant-select-item ant-select-item-option ant-select-item-option-selected"
id="undefined_list_1"
role="option"
title="20 / page"
>
<div
@ -4113,6 +3989,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_2"
role="option"
title="50 / page"
>
<div
@ -4130,6 +4008,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_3"
role="option"
title="100 / page"
>
<div
@ -4352,28 +4232,6 @@ Array [
style="opacity:0"
>
<div>
<div
id="undefined_list"
role="listbox"
style="height:0;width:0;overflow:hidden"
>
<div
aria-label="10 / page"
aria-selected="false"
id="undefined_list_0"
role="option"
>
10
</div>
<div
aria-label="20 / page"
aria-selected="true"
id="undefined_list_1"
role="option"
>
20
</div>
</div>
<div
class="rc-virtual-list"
style="position:relative"
@ -4385,11 +4243,15 @@ Array [
<div>
<div
class="rc-virtual-list-holder-inner"
id="undefined_list"
role="listbox"
style="display:flex;flex-direction:column"
>
<div
aria-selected="false"
class="ant-select-item ant-select-item-option ant-select-item-option-active"
id="undefined_list_0"
role="option"
title="10 / page"
>
<div
@ -4407,6 +4269,8 @@ Array [
<div
aria-selected="true"
class="ant-select-item ant-select-item-option ant-select-item-option-selected"
id="undefined_list_1"
role="option"
title="20 / page"
>
<div
@ -4424,6 +4288,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_2"
role="option"
title="50 / page"
>
<div
@ -4441,6 +4307,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_3"
role="option"
title="100 / page"
>
<div
@ -4711,28 +4579,6 @@ Array [
style="opacity:0"
>
<div>
<div
id="undefined_list"
role="listbox"
style="height:0;width:0;overflow:hidden"
>
<div
aria-label="10 / page"
aria-selected="true"
id="undefined_list_0"
role="option"
>
10
</div>
<div
aria-label="20 / page"
aria-selected="false"
id="undefined_list_1"
role="option"
>
20
</div>
</div>
<div
class="rc-virtual-list"
style="position:relative"
@ -4744,11 +4590,15 @@ Array [
<div>
<div
class="rc-virtual-list-holder-inner"
id="undefined_list"
role="listbox"
style="display:flex;flex-direction:column"
>
<div
aria-selected="true"
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
id="undefined_list_0"
role="option"
title="10 / page"
>
<div
@ -4766,6 +4616,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_1"
role="option"
title="20 / page"
>
<div
@ -4783,6 +4635,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_2"
role="option"
title="50 / page"
>
<div
@ -4800,6 +4654,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_3"
role="option"
title="100 / page"
>
<div
@ -5067,28 +4923,6 @@ Array [
style="opacity:0"
>
<div>
<div
id="undefined_list"
role="listbox"
style="height:0;width:0;overflow:hidden"
>
<div
aria-label="10 / page"
aria-selected="true"
id="undefined_list_0"
role="option"
>
10
</div>
<div
aria-label="20 / page"
aria-selected="false"
id="undefined_list_1"
role="option"
>
20
</div>
</div>
<div
class="rc-virtual-list"
style="position:relative"
@ -5100,11 +4934,15 @@ Array [
<div>
<div
class="rc-virtual-list-holder-inner"
id="undefined_list"
role="listbox"
style="display:flex;flex-direction:column"
>
<div
aria-selected="true"
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
id="undefined_list_0"
role="option"
title="10 / page"
>
<div
@ -5122,6 +4960,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_1"
role="option"
title="20 / page"
>
<div
@ -5139,6 +4979,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_2"
role="option"
title="50 / page"
>
<div
@ -5156,6 +4998,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_3"
role="option"
title="100 / page"
>
<div

View File

@ -33,8 +33,8 @@ export interface OverlayProps
> {
prefixCls: string;
close?: Function;
onConfirm?: React.MouseEventHandler<HTMLButtonElement>;
onCancel?: React.MouseEventHandler<HTMLButtonElement>;
onConfirm?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
onCancel?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
}
export const Overlay: React.FC<OverlayProps> = (props) => {

View File

@ -33,11 +33,11 @@ demo:
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button/#API) | - | |
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button-cn#API) | - | |
| cancelText | 取消按钮文字 | string | `取消` | |
| disabled | 阻止点击 Popconfirm 子元素时弹出确认框 | boolean | false | |
| icon | 自定义弹出气泡 Icon 图标 | ReactNode | &lt;ExclamationCircle /> | |
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - | |
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button-cn#API) | - | |
| okText | 确认按钮文字 | string | `确定` | |
| okType | 确认按钮类型 | string | `primary` | |
| showCancel | 是否显示取消按钮 | boolean | true | 4.18.0 |
@ -46,7 +46,7 @@ demo:
| onCancel | 点击取消的回调 | function(e) | - | |
| onConfirm | 点击确认的回调 | function(e) | - | |
更多属性请参考 [Tooltip](/components/tooltip/#API)。
更多属性请参考 [Tooltip](/components/tooltip-cn/#API)。
## 注意

View File

@ -35,7 +35,7 @@ demo:
| content | 卡片内容 | ReactNode \| () => ReactNode | - | |
| title | 卡片标题 | ReactNode \| () => ReactNode | - | |
更多属性请参考 [Tooltip](/components/tooltip/#API)。
更多属性请参考 [Tooltip](/components/tooltip-cn/#API)。
## 注意

View File

@ -28,6 +28,7 @@ const genBaseStyle: GenerateStyle<PopoverToken> = (token) => {
borderRadiusLG: borderRadius,
zIndexPopup,
marginXS,
colorBgElevated,
} = token;
return [
@ -47,6 +48,7 @@ const genBaseStyle: GenerateStyle<PopoverToken> = (token) => {
textAlign: 'start',
cursor: 'auto',
userSelect: 'text',
'--antd-arrow-background-color': colorBgElevated,
'&-rtl': {
direction: 'rtl',
@ -82,7 +84,7 @@ const genBaseStyle: GenerateStyle<PopoverToken> = (token) => {
},
// Arrow Style
getArrowStyle(token, { colorBg: token.colorBgElevated }),
getArrowStyle(token, { colorBg: 'var(--antd-arrow-background-color)' }),
// Pure Render
{
@ -106,15 +108,12 @@ const genColorStyle: GenerateStyle<PopoverToken> = (token) => {
const lightColor = token[`${colorKey}-6`];
return {
[`&${componentCls}-${colorKey}`]: {
'--antd-arrow-background-color': lightColor,
[`${componentCls}-inner`]: {
backgroundColor: lightColor,
},
[`${componentCls}-arrow`]: {
background: 'transparent',
'&:before': {
backgroundColor: lightColor,
},
},
},
};

View File

@ -7,7 +7,6 @@ import omit from 'rc-util/lib/omit';
import * as React from 'react';
import type { ConfigConsumerProps } from '../config-provider';
import { ConfigContext } from '../config-provider';
import { tuple } from '../_util/type';
import warning from '../_util/warning';
import Circle from './Circle';
import Line from './Line';
@ -15,9 +14,9 @@ import Steps from './Steps';
import { getSuccessPercent, validProgress } from './utils';
import useStyle from './style';
const ProgressTypes = tuple('line', 'circle', 'dashboard');
const ProgressTypes = ['line', 'circle', 'dashboard'] as const;
export type ProgressType = typeof ProgressTypes[number];
const ProgressStatuses = tuple('normal', 'exception', 'active', 'success');
const ProgressStatuses = ['normal', 'exception', 'active', 'success'] as const;
export type ProgressSize = 'default' | 'small';
export type StringGradients = { [percentage: string]: string };
type FromToGradients = { from: string; to: string };

View File

@ -118,7 +118,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
// syntactic sugar to add `icon` for Segmented Item
'&-icon + *': {
marginInlineEnd: token.marginSM / 2,
marginInlineStart: token.marginSM / 2,
},
'&-input': {

View File

@ -4277,28 +4277,6 @@ Array [
style="opacity:0"
>
<div>
<div
id="undefined_list"
role="listbox"
style="height:0;width:0;overflow:hidden"
>
<div
aria-label="HangZhou #310000"
aria-selected="true"
id="undefined_list_0"
role="option"
>
HangZhou
</div>
<div
aria-label="NingBo #315000"
aria-selected="false"
id="undefined_list_1"
role="option"
>
NingBo
</div>
</div>
<div
class="rc-virtual-list"
style="position:relative"
@ -4310,11 +4288,15 @@ Array [
<div>
<div
class="rc-virtual-list-holder-inner"
id="undefined_list"
role="listbox"
style="display:flex;flex-direction:column"
>
<div
aria-selected="true"
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
id="undefined_list_0"
role="option"
title="HangZhou #310000"
>
<div
@ -4332,6 +4314,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_1"
role="option"
title="NingBo #315000"
>
<div
@ -4349,6 +4333,8 @@ Array [
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
id="undefined_list_2"
role="option"
title="WenZhou #325000"
>
<div

View File

@ -14,7 +14,7 @@ const App: React.FC = () => {
setName(event.target.value);
};
const addItem = (e: React.MouseEvent<HTMLAnchorElement>) => {
const addItem = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
e.preventDefault();
setItems([...items, name || `New item ${index++}`]);
setName('');

View File

@ -177,3 +177,5 @@ Note: `listItemHeight` and `listHeight` are internal props. Please only modify w
### Why a11y test report missing `aria-` props?
Select only create a11y auxiliary node when operating on. Please open Select and retry. For `aria-label` & `aria-labelledby` miss warning, please add related prop to Select with your own requirement.
Default virtual scrolling will create a mock element to simulate an accessible binding. If a screen reader needs to fully access the entire list, you can set `virtual={false}` to disable virtual scrolling and the accessibility option will be bound to the actual element.

View File

@ -178,3 +178,5 @@ Select 当失去焦点时会关闭下拉框,如果你可以通过阻止默认
### 为何无障碍测试会报缺失 `aria-` 属性?
Select 无障碍辅助元素仅在弹窗展开时创建,因而当你在进行无障碍检测时请先打开下拉后再进行测试。对于 `aria-label``aria-labelledby` 属性缺失警告,请自行为 Select 组件添加相应无障碍属性。
Select 虚拟滚动会模拟无障碍绑定元素。如果需要读屏器完整获取全部列表,你可以设置 `virtual={false}` 关闭虚拟滚动,无障碍选项将会绑定到真实元素上。

View File

@ -60,7 +60,7 @@ demo:
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| open | 值为 true 时Tooltip 将会始终显示;否则始终不显示,哪怕在拖拽及移入时 | boolean | - | 4.23.0 |
| placement | 设置 Tooltip 展示位置。参考 [Tooltip](/components/tooltip/) | string | - | 4.23.0 |
| placement | 设置 Tooltip 展示位置。参考 [Tooltip](/components/tooltip-cn) | string | - | 4.23.0 |
| getPopupContainer | Tooltip 渲染父节点,默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body | 4.23.0 |
| formatter | Slider 会把当前值传给 `formatter`,并在 Tooltip 中显示 `formatter` 的返回值,若为 null则隐藏 Tooltip | value => ReactNode \| null | IDENTITY | 4.23.0 |

View File

@ -1,12 +1,12 @@
import React from 'react';
import { render } from '@testing-library/react';
import debounce from 'lodash/debounce';
import { debounce } from 'throttle-debounce';
import Spin from '..';
import { waitFakeTimer } from '../../../tests/utils';
jest.mock('lodash/debounce');
jest.mock('throttle-debounce');
(debounce as jest.Mock).mockImplementation((...args: any[]) =>
jest.requireActual('lodash/debounce')(...args),
jest.requireActual('throttle-debounce').debounce(...args),
);
describe('delay spinning', () => {

View File

@ -1,15 +1,13 @@
import classNames from 'classnames';
import debounce from 'lodash/debounce';
import { debounce } from 'throttle-debounce';
import omit from 'rc-util/lib/omit';
import * as React from 'react';
import type { ConfigConsumerProps } from '../config-provider';
import { ConfigConsumer, ConfigContext } from '../config-provider';
import { cloneElement, isValidElement } from '../_util/reactNode';
import { tuple } from '../_util/type';
import useStyle from './style/index';
const SpinSizes = tuple('small', 'default', 'large');
const SpinSizes = ['small', 'default', 'large'] as const;
export type SpinSize = typeof SpinSizes[number];
export type SpinIndicator = React.ReactElement<HTMLElement>;
@ -77,7 +75,7 @@ const Spin: React.FC<SpinClassProps> = (props) => {
const {
spinPrefixCls: prefixCls,
spinning: customSpinning = true,
delay,
delay = 0,
className,
size = 'default',
tip,
@ -93,9 +91,9 @@ const Spin: React.FC<SpinClassProps> = (props) => {
);
React.useEffect(() => {
const updateSpinning = debounce<() => void>(() => {
const updateSpinning = debounce(delay, () => {
setSpinning(customSpinning);
}, delay);
});
updateSpinning();
return () => {
updateSpinning?.cancel?.();

View File

@ -206,7 +206,7 @@ export const initZoomMotion = (
motionCls,
inKeyframes,
outKeyframes,
motionName === 'zoom-big-fast' ? token.motionDurationMid : token.motionDurationMid,
motionName === 'zoom-big-fast' ? token.motionDurationFast : token.motionDurationMid,
),
{
[`

View File

@ -104,9 +104,11 @@ describe('Table.expand', () => {
/>,
);
// header has td element (a11y): https://github.com/react-component/table/pull/859
const tdNodeList = container.querySelectorAll('td');
expect(tdNodeList[0].textContent).toEqual('bamboo');
expect(tdNodeList[1].querySelector('.ant-table-row-expand-icon')).toBeTruthy();
expect(tdNodeList[2].textContent).toEqual('bamboo');
expect(tdNodeList[3].querySelector('.ant-table-row-expand-icon')).toBeTruthy();
});
it('work with selection', () => {
@ -122,9 +124,9 @@ describe('Table.expand', () => {
/>,
);
const tdNodeList = container.querySelectorAll('td');
expect(tdNodeList[0].querySelector('.ant-checkbox-input')).toBeTruthy();
expect(tdNodeList[1].textContent).toEqual('bamboo');
expect(tdNodeList[2].querySelector('.ant-table-row-expand-icon')).toBeTruthy();
expect(tdNodeList[2].querySelector('.ant-checkbox-input')).toBeTruthy();
expect(tdNodeList[3].textContent).toEqual('bamboo');
expect(tdNodeList[4].querySelector('.ant-table-row-expand-icon')).toBeTruthy();
});
});
});

View File

@ -29,6 +29,7 @@ exports[`Table.expand click to expand 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
Name
</th>

View File

@ -117,6 +117,7 @@ exports[`Table.filter renders custom filter icon as ReactNode 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -221,6 +222,7 @@ exports[`Table.filter renders custom filter icon as string correctly 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -331,6 +333,7 @@ exports[`Table.filter renders custom filter icon with right Tooltip title 1`] =
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"
@ -461,6 +464,7 @@ exports[`Table.filter renders filter correctly 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
<div
class="ant-table-filter-column"

View File

@ -29,6 +29,7 @@ exports[`Table.pagination Accepts pagination as true 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
Name
</th>
@ -195,6 +196,7 @@ exports[`Table.pagination renders pagination correctly 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
Name
</th>
@ -352,6 +354,7 @@ exports[`Table.pagination renders pagination topLeft and bottomRight 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
Name
</th>
@ -516,7 +519,7 @@ exports[`Table.pagination should not crash when trigger onChange in render 1`] =
class="ant-table-thead"
>
<tr>
<th
<td
class="ant-table-cell"
/>
</tr>

View File

@ -35,12 +35,13 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
class="ant-table-thead"
>
<tr>
<th
<td
class="ant-table-cell ant-table-row-expand-icon-cell ant-table-cell-fix-left"
style="position: sticky; left: 0px;"
/>
<th
class="ant-table-cell ant-table-selection-column ant-table-cell-fix-left ant-table-cell-fix-left-last"
scope="col"
style="position: sticky; left: 0px;"
>
<div
@ -67,6 +68,7 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
</th>
<th
class="ant-table-cell"
scope="col"
>
Name
</th>
@ -396,6 +398,7 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
<tr>
<th
class="ant-table-cell ant-table-selection-column ant-table-cell-fix-left ant-table-cell-fix-left-last"
scope="col"
style="position: sticky; left: 0px;"
>
<div
@ -422,6 +425,7 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Name
</th>
@ -699,6 +703,7 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
<tr>
<th
class="ant-table-cell ant-table-selection-column ant-table-cell-fix-left"
scope="col"
style="position: sticky; left: 0px;"
>
<div
@ -725,6 +730,7 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
</th>
<th
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last ant-table-cell-fix-left-all"
scope="col"
style="position: sticky; left: 0px;"
>
Name
@ -1061,6 +1067,7 @@ exports[`Table.rowSelection should support getPopupContainer 1`] = `
<tr>
<th
class="ant-table-cell ant-table-selection-column"
scope="col"
>
<div
class="ant-table-selection"
@ -1170,6 +1177,7 @@ exports[`Table.rowSelection should support getPopupContainer 1`] = `
</th>
<th
class="ant-table-cell"
scope="col"
>
Name
</th>
@ -1420,6 +1428,7 @@ exports[`Table.rowSelection should support getPopupContainer from ConfigProvider
<tr>
<th
class="ant-table-cell ant-table-selection-column"
scope="col"
>
<div
class="ant-table-selection"
@ -1529,6 +1538,7 @@ exports[`Table.rowSelection should support getPopupContainer from ConfigProvider
</th>
<th
class="ant-table-cell"
scope="col"
>
Name
</th>
@ -1779,6 +1789,7 @@ exports[`Table.rowSelection use column as selection column when key is \`selecti
<tr>
<th
class="ant-table-cell ant-table-selection-column"
scope="col"
>
<div
class="ant-table-selection"
@ -1804,6 +1815,7 @@ exports[`Table.rowSelection use column as selection column when key is \`selecti
</th>
<th
class="ant-table-cell"
scope="col"
>
Name
</th>

View File

@ -8,6 +8,7 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
<th
aria-label="this column's title is Name,this column is sortable"
class="ant-table-cell ant-table-column-has-sorters"
scope="col"
tabindex="0"
>
<div
@ -100,6 +101,7 @@ exports[`Table.sorter should support defaultOrder in Column 1`] = `
<th
aria-sort="ascending"
class="ant-table-cell ant-table-column-sort ant-table-column-has-sorters"
scope="col"
tabindex="0"
>
<div

View File

@ -30,12 +30,14 @@ exports[`Table renders JSX correctly 1`] = `
<th
class="ant-table-cell"
colspan="2"
scope="colgroup"
>
Name
</th>
<th
class="ant-table-cell"
rowspan="2"
scope="col"
>
Age
</th>
@ -43,11 +45,13 @@ exports[`Table renders JSX correctly 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
First Name
</th>
<th
class="ant-table-cell"
scope="col"
>
Last Name
</th>
@ -133,7 +137,7 @@ exports[`Table rtl render component should be rendered correctly in RTL directio
class="ant-table-thead"
>
<tr>
<th
<td
class="ant-table-cell"
/>
</tr>
@ -235,6 +239,7 @@ exports[`Table should render title 1`] = `
<th
aria-label="this column is sortable"
class="ant-table-cell ant-table-column-has-sorters"
scope="col"
tabindex="0"
>
<div
@ -303,6 +308,7 @@ exports[`Table should render title 1`] = `
<th
aria-label="this column is sortable"
class="ant-table-cell ant-table-column-has-sorters"
scope="col"
tabindex="0"
>
<div
@ -366,6 +372,7 @@ exports[`Table should render title 1`] = `
<th
aria-label="this column is sortable"
class="ant-table-cell ant-table-column-has-sorters"
scope="col"
tabindex="0"
>
<div
@ -434,6 +441,7 @@ exports[`Table should render title 1`] = `
<th
aria-label="this column's title is color,this column is sortable"
class="ant-table-cell ant-table-column-has-sorters"
scope="col"
tabindex="0"
>
<div
@ -495,6 +503,7 @@ exports[`Table should render title 1`] = `
<th
aria-label="this column's title is sex,this column is sortable"
class="ant-table-cell ant-table-column-has-sorters"
scope="col"
tabindex="0"
>
<div
@ -626,6 +635,7 @@ exports[`Table should render title 1`] = `
exports[`Table title should support ReactNode 1`] = `
<th
class="ant-table-cell"
scope="col"
>
<div>
<strong>

File diff suppressed because it is too large Load Diff

View File

@ -29,41 +29,49 @@ exports[`Table renders empty table 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
Column 1
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 2
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 3
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 4
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 5
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 6
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 7
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 8
</th>
@ -165,41 +173,49 @@ exports[`Table renders empty table with custom emptyText 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
Column 1
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 2
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 3
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 4
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 5
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 6
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 7
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 8
</th>
@ -276,58 +292,69 @@ exports[`Table renders empty table with fixed columns should work 1`] = `
<tr>
<th
class="ant-table-cell ant-table-cell-fix-left"
scope="col"
style="position: sticky; left: 0px;"
>
Full Name
</th>
<th
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
scope="col"
style="position: sticky; left: 0px;"
>
Age
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 1
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 2
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 3
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 4
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 5
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 6
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 7
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 8
</th>
<th
class="ant-table-cell ant-table-cell-fix-right ant-table-cell-fix-right-first"
scope="col"
style="position: sticky; right: 0px;"
>
Action
@ -553,41 +580,49 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
<tr>
<th
class="ant-table-cell"
scope="col"
>
Column 1
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 2
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 3
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 4
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 5
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 6
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 7
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 8
</th>

View File

@ -53,7 +53,7 @@ const getRandomuserParams = (params: TableParams) => ({
});
const App: React.FC = () => {
const [data, setData] = useState();
const [data, setData] = useState<DataType[]>();
const [loading, setLoading] = useState(false);
const [tableParams, setTableParams] = useState<TableParams>({
pagination: {
@ -95,6 +95,11 @@ const App: React.FC = () => {
filters,
...sorter,
});
// `dataSource` is useless since `pageSize` changed
if (pagination.pageSize !== tableParams.pagination?.pageSize) {
setData([]);
}
};
return (

View File

@ -1,6 +1,6 @@
import FilterFilled from '@ant-design/icons/FilterFilled';
import classNames from 'classnames';
import isEqual from 'lodash/isEqual';
import shallowEqual from 'shallowequal';
import type { FieldDataNode } from 'rc-tree';
import * as React from 'react';
import type { MenuProps } from '../../../menu';
@ -232,7 +232,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
return null;
}
if (isEqual(mergedKeys, filterState?.filteredKeys)) {
if (shallowEqual(mergedKeys, filterState?.filteredKeys)) {
return null;
}
@ -339,7 +339,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
} else if (column.filterDropdown) {
dropdownContent = column.filterDropdown;
} else {
const selectedKeys = (getFilteredKeysSync() || []) as any;
const selectedKeys = getFilteredKeysSync() || [];
const getFilterComponent = () => {
if ((column.filters || []).length === 0) {
return (
@ -425,7 +425,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
className={dropdownMenuClass}
onSelect={onSelectKeys}
onDeselect={onSelectKeys}
selectedKeys={selectedKeys}
selectedKeys={selectedKeys as string[]}
getPopupContainer={getPopupContainer}
openKeys={openKeys}
onOpenChange={onOpenChange}
@ -444,7 +444,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
const getResetDisabled = () => {
if (filterResetToDefaultFilteredValue) {
return isEqual(
return shallowEqual(
(defaultFilteredValue || []).map((key) => String(key)),
selectedKeys,
);

View File

@ -57,7 +57,7 @@ const columns = [
## 相关推荐
- [Kitchen Sketch 插件 💎](https://kitchen.alipay.com/):设计师神器,两步自动生成 Ant Design 表格组件。
- [ProTable](https://procomponents.ant.design/components/table) 高级表格:在 `antd` Table 之上扩展了更多便捷易用的功能,内置搜索、筛选、刷新等常用表格行为,并为多种类型数据展示提供了内置格式化。
- [ProTable](https://procomponents.ant.design/components/table-cn) 高级表格:在 `antd` Table 之上扩展了更多便捷易用的功能,内置搜索、筛选、刷新等常用表格行为,并为多种类型数据展示提供了内置格式化。
- [S2](https://s2.antv.vision/zh) 多维交叉分析表格:[AntV S2 和 Antd Table 有什么区别?](https://zhuanlan.zhihu.com/p/494995642)
## 代码演示
@ -116,15 +116,15 @@ const columns = [
| expandable | 配置展开属性 | [expandable](#expandable) | - | |
| footer | 表格尾部 | function(currentPageData) | - | |
| getPopupContainer | 设置表格内各类浮层的渲染节点,如筛选菜单 | (triggerNode) => HTMLElement | () => TableHtmlElement | |
| loading | 页面是否加载中 | boolean \| [Spin Props](/components/spin/#API) | false | |
| loading | 页面是否加载中 | boolean \| [Spin Props](/components/spin-cn#API) | false | |
| locale | 默认文案设置,目前包括排序、过滤、空数据文案 | object | [默认值](https://github.com/ant-design/ant-design/blob/6dae4a7e18ad1ba193aedd5ab6867e1d823e2aa4/components/locale/zh_CN.tsx#L20-L37) | |
| pagination | 分页器,参考[配置项](#pagination)或 [pagination](/components/pagination/) 文档,设为 false 时不展示和进行分页 | object \| `false` | - | |
| pagination | 分页器,参考[配置项](#pagination)或 [pagination](/components/pagination-cn) 文档,设为 false 时不展示和进行分页 | object \| `false` | - | |
| rowClassName | 表格行的类名 | function(record, index): string | - | |
| rowKey | 表格行 key 的取值,可以是字符串或一个函数 | string \| function(record): string | `key` | |
| rowSelection | 表格行是否可选择,[配置项](#rowSelection) | object | - | |
| scroll | 表格是否可滚动,也可以指定滚动区域的宽、高,[配置项](#scroll) | object | - | |
| showHeader | 是否显示表头 | boolean | true | |
| showSorterTooltip | 表头是否显示下一次排序的 tooltip 提示。当参数类型为对象时,将被设置为 Tooltip 的属性 | boolean \| [Tooltip props](/components/tooltip/) | true | |
| showSorterTooltip | 表头是否显示下一次排序的 tooltip 提示。当参数类型为对象时,将被设置为 Tooltip 的属性 | boolean \| [Tooltip props](/components/tooltip-cn) | true | |
| size | 表格大小 | `large` \| `middle` \| `small` | `large` | |
| sortDirections | 支持的排序方式,取值为 `ascend` `descend` | Array | \[`ascend`, `descend`] | |
| sticky | 设置粘性头部和滚动条 | boolean \| `{offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement}` | - | 4.6.0 (getContainer: 4.7.0) |
@ -187,7 +187,7 @@ const columns = [
| render | 生成复杂数据的渲染函数,参数分别为当前行的值,当前行数据,行索引 | function(text, record, index) {} | - | |
| responsive | 响应式 breakpoint 配置列表。未设置则始终可见。 | [Breakpoint](https://github.com/ant-design/ant-design/blob/015109b42b85c63146371b4e32b883cf97b088e8/components/_util/responsiveObserve.ts#L1)\[] | - | 4.2.0 |
| shouldCellUpdate | 自定义单元格渲染时机 | (record, prevRecord) => boolean | - | 4.3.0 |
| showSorterTooltip | 表头显示下一次排序的 tooltip 提示, 覆盖 table 中 `showSorterTooltip` | boolean \| [Tooltip props](/components/tooltip/#API) | true | |
| showSorterTooltip | 表头显示下一次排序的 tooltip 提示, 覆盖 table 中 `showSorterTooltip` | boolean \| [Tooltip props](/components/tooltip-cn/#API) | true | |
| sortDirections | 支持的排序方式,覆盖 `Table``sortDirections` 取值为 `ascend` `descend` | Array | \[`ascend`, `descend`] | |
| sorter | 排序函数,本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction),需要服务端排序可设为 true | function \| boolean | - | |
| sortOrder | 排序的受控属性,外界可用此控制列的排序,可设置为 `ascend` `descend` `null` | `ascend` \| `descend` \| null | - | |
@ -212,7 +212,7 @@ const columns = [
| --- | --- | --- | --- |
| position | 指定分页显示的位置, 取值为`topLeft` \| `topCenter` \| `topRight` \|`bottomLeft` \| `bottomCenter` \| `bottomRight` | Array | \[`bottomRight`] |
更多配置项,请查看 [`Pagination`](/components/pagination/)。
更多配置项,请查看 [`Pagination`](/components/pagination-cn)。
### expandable

View File

@ -9,9 +9,7 @@ import type { CheckboxProps } from '../checkbox';
import type { PaginationProps } from '../pagination';
import type { TooltipProps } from '../tooltip';
import type { Breakpoint } from '../_util/responsiveObserve';
import { tuple } from '../_util/type';
import type { INTERNAL_SELECTION_ITEM } from './hooks/useSelection';
// import { TableAction } from './Table';
export { GetRowKey, ExpandableConfig };
@ -45,7 +43,7 @@ export interface TableLocale {
export type SortOrder = 'descend' | 'ascend' | null;
const TableActions = tuple('paginate', 'sort', 'filter');
const TableActions = ['paginate', 'sort', 'filter'] as const;
export type TableAction = typeof TableActions[number];
export type CompareFn<T> = (a: T, b: T, sortOrder?: SortOrder) => number;

View File

@ -77,7 +77,7 @@ const genBorderedStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
},
// ========================== Expandable ==========================
'> table > tbody > tr > td': {
'> tbody > tr > td': {
[`> ${componentCls}-expanded-row-fixed`]: {
margin: `-${token.tablePaddingVertical}px -${
token.tablePaddingHorizontal + token.lineWidth

View File

@ -134,7 +134,10 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
// ============================ Header ============================
[`${componentCls}-thead`]: {
'> tr > th': {
[`
> tr > th,
> tr > td
`]: {
position: 'relative',
color: tableHeaderTextColor,
fontWeight: fontWeightStrong,

Some files were not shown because too many files have changed in this diff Show More