mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

chore: merge feature

Browse Source
This commit is contained in:
afc163 2022-03-31 09:57:33 +08:00
commit a73629fb85
140 changed files with 4838 additions and 3507 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
components/_util/statusUtils.tsx
View File

@ -1,8 +1,3 @@
import React from 'react';
import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
import classNames from 'classnames';
import { ValidateStatus } from '../form/FormItem';
import { tuple } from './type';
@ -10,22 +5,6 @@ import { tuple } from './type';
const InputStatuses = tuple('warning', 'error', '');
export type InputStatus = typeof InputStatuses[number];
const iconMap = {
success: CheckCircleFilled,
warning: ExclamationCircleFilled,
error: CloseCircleFilled,
validating: LoadingOutlined,
};
export const getFeedbackIcon = (prefixCls: string, status?: ValidateStatus) => {
const IconNode = status && iconMap[status];
return IconNode ? (
<span className={`${prefixCls}-feedback-icon`}>
<IconNode />
</span>
) : null;
};
export function getStatusClassNames(
prefixCls: string,
status?: ValidateStatus,

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

@ -543,7 +543,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-show-search"
>
<div
class="ant-select-selector"
@ -610,7 +610,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -938,7 +938,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
>
<div
class="ant-select-selector"

6
components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
View File

@ -195,7 +195,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-show-search"
>
<div
class="ant-select-selector"
@ -248,7 +248,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -442,7 +442,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
>
<div
class="ant-select-selector"

19
components/breadcrumb/Breadcrumb.tsx
View File

@ -97,13 +97,12 @@ const Breadcrumb: BreadcrumbInterface = ({
let overlay;
if (route.children && route.children.length) {
overlay = (
<Menu>
{route.children.map(child => (
<Menu.Item key={child.path || child.breadcrumbName}>
{itemRender(child, params, routes, addChildPath(paths, child.path, params))}
</Menu.Item>
))}
</Menu>
<Menu
items={route.children.map(child => ({
key: child.path || child.breadcrumbName,
label: itemRender(child, params, routes, addChildPath(paths, child.path, params)),
}))}
/>
);
}
@ -143,9 +142,9 @@ const Breadcrumb: BreadcrumbInterface = ({
);
return (
<div className={breadcrumbClassName} style={style} {...restProps}>
{crumbs}
</div>
<nav className={breadcrumbClassName} style={style} {...restProps}>
<ol>{crumbs}</ol>
</nav>
);
};

6
components/breadcrumb/BreadcrumbItem.tsx
View File

@ -30,7 +30,7 @@ const BreadcrumbItem: BreadcrumbItemInterface = ({
const renderBreadcrumbNode = (breadcrumbItem: React.ReactNode) => {
if (overlay) {
return (
<DropDown overlay={overlay} placement="bottom" {...dropdownProps}>
<DropDown overlay={overlay} placement="bottomCenter" {...dropdownProps}>
<span className={`${prefixCls}-overlay-link`}>
{breadcrumbItem}
<DownOutlined />
@ -60,10 +60,10 @@ const BreadcrumbItem: BreadcrumbItemInterface = ({
link = renderBreadcrumbNode(link);
if (children) {
return (
<span>
<li>
{link}
{separator && <span className={`${prefixCls}-separator`}>{separator}</span>}
</span>
</li>
);
}
return null;

2
components/breadcrumb/__tests__/Breadcrumb.test.js
View File

@ -3,10 +3,12 @@ import { mount, render } from 'enzyme';
import Breadcrumb from '../index';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import accessibilityTest from '../../../tests/shared/accessibilityTest';
describe('Breadcrumb', () => {
mountTest(Breadcrumb);
rtlTest(Breadcrumb);
accessibilityTest(Breadcrumb);
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});

544
components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap
View File

@ -1,307 +1,325 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Breadcrumb filter React.Fragment 1`] = `
<div
<nav
class="ant-breadcrumb"
>
<span>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Location
</span>
</li>
<span
class="ant-breadcrumb-link"
class="ant-breadcrumb-separator"
>
Location
:
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
:
</span>
<span>
<a
class="ant-breadcrumb-link"
href=""
<li>
<a
class="ant-breadcrumb-link"
href=""
>
Application Center
</a>
</li>
<span
class="ant-breadcrumb-separator"
>
Application Center
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</div>
/
</span>
</ol>
</nav>
`;
exports[`Breadcrumb rtl render component should be rendered correctly in RTL direction 1`] = `
<div
<nav
class="ant-breadcrumb ant-breadcrumb-rtl"
/>
>
<ol />
</nav>
`;
exports[`Breadcrumb should accept undefined routes 1`] = `
<div
<nav
class="ant-breadcrumb"
/>
>
<ol />
</nav>
`;
exports[`Breadcrumb should allow Breadcrumb.Item is null or undefined 1`] = `
<div
<nav
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
`;
exports[`Breadcrumb should not display Breadcrumb Item when its children is falsy 1`] = `
<div
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
xxx
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
yyy
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
`;
exports[`Breadcrumb should render a menu 1`] = `
<div
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index"
>
home
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
first
</a>
</span>
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first/second"
>
second
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<span />
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
`;
exports[`Breadcrumb should support Breadcrumb.Item default separator 1`] = `
<div
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
Location
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span>
<span
class="ant-breadcrumb-link"
>
Mock Node
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;
exports[`Breadcrumb should not display Breadcrumb Item when its children is falsy 1`] = `
<nav
class="ant-breadcrumb"
>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
xxx
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
yyy
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;
exports[`Breadcrumb should render a menu 1`] = `
<nav
class="ant-breadcrumb"
>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index"
>
home
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
first
</a>
</span>
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first/second"
>
second
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<span />
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;
exports[`Breadcrumb should support Breadcrumb.Item default separator 1`] = `
<nav
class="ant-breadcrumb"
>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Location
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<span>
<li>
<span
class="ant-breadcrumb-link"
>
Mock Node
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
Application Center
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<li>
<span
class="ant-breadcrumb-link"
>
Application Center
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;
exports[`Breadcrumb should support React.Fragment and falsy children 1`] = `
<div
<nav
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
yyy
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
yyy
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
yyy
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
0
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
yyy
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
yyy
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
yyy
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
0
</ol>
</nav>
`;
exports[`Breadcrumb should support custom attribute 1`] = `
<div
<nav
class="ant-breadcrumb"
data-custom="custom"
>
<span>
<span
class="ant-breadcrumb-link"
data-custom="custom-item"
>
xxx
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
yyy
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
data-custom="custom-item"
>
xxx
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
yyy
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;

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

File diff suppressed because it is too large Load Diff

602
components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1,343 +1,353 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/breadcrumb/demo/basic.md correctly 1`] = `
<div
<nav
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href=""
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Application Center
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href=""
Home
</span>
<span
class="ant-breadcrumb-separator"
>
Application List
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
An Application
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
`;
exports[`renders ./components/breadcrumb/demo/overlay.md correctly 1`] = `
<div
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
Ant Design
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href=""
>
Component
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<a
href=""
>
General
Application Center
</a>
</span>
<span
aria-label="down"
class="anticon anticon-down"
role="img"
class="ant-breadcrumb-separator"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
/
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
Button
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<a
href=""
>
Application List
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
An Application
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;
exports[`renders ./components/breadcrumb/demo/overlay.md correctly 1`] = `
<nav
class="ant-breadcrumb"
>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Ant Design
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<a
href=""
>
Component
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
>
<span
class="ant-breadcrumb-link"
>
<a
href=""
>
General
</a>
</span>
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
Button
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;
exports[`renders ./components/breadcrumb/demo/separator.md correctly 1`] = `
<div
<nav
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
&gt;
</span>
</span>
<span>
<a
class="ant-breadcrumb-link"
href=""
>
Application Center
</a>
<span
class="ant-breadcrumb-separator"
>
&gt;
</span>
</span>
<span>
<a
class="ant-breadcrumb-link"
href=""
>
Application List
</a>
<span
class="ant-breadcrumb-separator"
>
&gt;
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
An Application
</span>
<span
class="ant-breadcrumb-separator"
>
&gt;
</span>
</span>
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
&gt;
</span>
</li>
<li>
<a
class="ant-breadcrumb-link"
href=""
>
Application Center
</a>
<span
class="ant-breadcrumb-separator"
>
&gt;
</span>
</li>
<li>
<a
class="ant-breadcrumb-link"
href=""
>
Application List
</a>
<span
class="ant-breadcrumb-separator"
>
&gt;
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
An Application
</span>
<span
class="ant-breadcrumb-separator"
>
&gt;
</span>
</li>
</ol>
</nav>
`;
exports[`renders ./components/breadcrumb/demo/separator-component.md correctly 1`] = `
<div
<nav
class="ant-breadcrumb"
>
<span>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Location
</span>
</li>
<span
class="ant-breadcrumb-link"
class="ant-breadcrumb-separator"
>
Location
:
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
:
</span>
<span>
<a
class="ant-breadcrumb-link"
href=""
>
Application Center
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
<span>
<a
class="ant-breadcrumb-link"
href=""
>
Application List
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
<span>
<li>
<a
class="ant-breadcrumb-link"
href=""
>
Application Center
</a>
</li>
<span
class="ant-breadcrumb-link"
class="ant-breadcrumb-separator"
>
An Application
/
</span>
</span>
</div>
<li>
<a
class="ant-breadcrumb-link"
href=""
>
Application List
</a>
</li>
<span
class="ant-breadcrumb-separator"
>
/
</span>
<li>
<span
class="ant-breadcrumb-link"
>
An Application
</span>
</li>
</ol>
</nav>
`;
exports[`renders ./components/breadcrumb/demo/withIcon.md correctly 1`] = `
<div
<nav
class="ant-breadcrumb"
>
<span>
<a
class="ant-breadcrumb-link"
href=""
>
<span
aria-label="home"
class="anticon anticon-home"
role="img"
<ol>
<li>
<a
class="ant-breadcrumb-link"
href=""
>
<svg
aria-hidden="true"
data-icon="home"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<span
aria-label="home"
class="anticon anticon-home"
role="img"
>
<path
d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 00-44.4 0L77.5 505a63.9 63.9 0 00-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0018.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"
/>
</svg>
</span>
</a>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<a
class="ant-breadcrumb-link"
href=""
>
<svg
aria-hidden="true"
data-icon="home"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 00-44.4 0L77.5 505a63.9 63.9 0 00-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0018.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"
/>
</svg>
</span>
</a>
<span
aria-label="user"
class="anticon anticon-user"
role="img"
class="ant-breadcrumb-separator"
>
<svg
aria-hidden="true"
data-icon="user"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
/
</span>
</li>
<li>
<a
class="ant-breadcrumb-link"
href=""
>
<span
aria-label="user"
class="anticon anticon-user"
role="img"
>
<path
d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
/>
</svg>
<svg
aria-hidden="true"
data-icon="user"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
/>
</svg>
</span>
<span>
Application List
</span>
</a>
<span
class="ant-breadcrumb-separator"
>
/
</span>
<span>
Application List
</li>
<li>
<span
class="ant-breadcrumb-link"
>
Application
</span>
</a>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
Application
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;

166
components/breadcrumb/__tests__/__snapshots__/router.test.js.snap
View File

@ -74,91 +74,93 @@ exports[`react router react router 3 1`] = `
]
}
>
<div
<nav
className="ant-breadcrumb"
>
<BreadcrumbItem
key="Home"
separator="/"
>
<span>
<span
className="ant-breadcrumb-link"
>
<a
href="#/"
<ol>
<BreadcrumbItem
key="Home"
separator="/"
>
<li>
<span
className="ant-breadcrumb-link"
>
Home
</a>
</span>
<span
className="ant-breadcrumb-separator"
>
/
</span>
</span>
</BreadcrumbItem>
<BreadcrumbItem
key="apps"
separator="/"
>
<span>
<span
className="ant-breadcrumb-link"
>
<a
href="#/apps"
>
Application List
</a>
</span>
<span
className="ant-breadcrumb-separator"
>
/
</span>
</span>
</BreadcrumbItem>
<BreadcrumbItem
key="1"
separator="/"
>
<span>
<span
className="ant-breadcrumb-link"
>
<a
href="#/apps/1"
>
Application1
</a>
</span>
<span
className="ant-breadcrumb-separator"
>
/
</span>
</span>
</BreadcrumbItem>
<BreadcrumbItem
key="detail"
separator="/"
>
<span>
<span
className="ant-breadcrumb-link"
>
<span>
Detail
<a
href="#/"
>
Home
</a>
</span>
</span>
<span
className="ant-breadcrumb-separator"
>
/
</span>
</span>
</BreadcrumbItem>
</div>
<span
className="ant-breadcrumb-separator"
>
/
</span>
</li>
</BreadcrumbItem>
<BreadcrumbItem
key="apps"
separator="/"
>
<li>
<span
className="ant-breadcrumb-link"
>
<a
href="#/apps"
>
Application List
</a>
</span>
<span
className="ant-breadcrumb-separator"
>
/
</span>
</li>
</BreadcrumbItem>
<BreadcrumbItem
key="1"
separator="/"
>
<li>
<span
className="ant-breadcrumb-link"
>
<a
href="#/apps/1"
>
Application1
</a>
</span>
<span
className="ant-breadcrumb-separator"
>
/
</span>
</li>
</BreadcrumbItem>
<BreadcrumbItem
key="detail"
separator="/"
>
<li>
<span
className="ant-breadcrumb-link"
>
<span>
Detail
</span>
</span>
<span
className="ant-breadcrumb-separator"
>
/
</span>
</li>
</BreadcrumbItem>
</ol>
</nav>
</Breadcrumb>
`;

42
components/breadcrumb/demo/overlay.md
View File

@ -17,23 +17,31 @@ Breadcrumbs support drop down menu.
import { Breadcrumb, Menu } from 'antd';
const menu = (
<Menu>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
General
</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
Layout
</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
Navigation
</a>
</Menu.Item>
</Menu>
<Menu
items={[
{
label: (
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
General
</a>
),
},
{
label: (
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
Layout
</a>
),
},
{
label: (
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
Navigation
</a>
),
},
]}
/>
);
ReactDOM.render(

9
components/breadcrumb/style/index.less
View File

@ -13,6 +13,11 @@
font-size: @breadcrumb-icon-font-size;
}
ol {
display: flex;
flex-wrap: wrap;
}
a {
color: @breadcrumb-link-color;
transition: color 0.3s;
@ -22,7 +27,7 @@
}
}
& > span:last-child {
li:last-child {
color: @breadcrumb-last-item-color;
a {
@ -30,7 +35,7 @@
}
}
& > span:last-child &-separator {
li:last-child &-separator {
display: none;
}

30
components/button/demo/multiple.md
View File

@ -13,19 +13,31 @@ title:
If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into [Dropdown.Button](/components/dropdown/#components-dropdown-demo-dropdown-button).
```jsx
import { Button, Menu, Dropdown } from 'antd';
```tsx
import { Button, Menu, Dropdown, MenuProps } from 'antd';
function handleMenuClick(e) {
const onMenuClick: MenuProps['onClick'] = e => {
console.log('click', e);
}
};
const menu = (
<Menu onClick={handleMenuClick}>
<Menu.Item key="1">1st item</Menu.Item>
<Menu.Item key="2">2nd item</Menu.Item>
<Menu.Item key="3">3rd item</Menu.Item>
</Menu>
<Menu
onClick={onMenuClick}
items={[
{
key: '1',
label: '1st item',
},
{
key: '2',
label: '2nd item',
},
{
key: '3',
label: '3rd item',
},
]}
/>
);
ReactDOM.render(

17
components/calendar/Header.tsx
View File

@ -1,6 +1,8 @@
import * as React from 'react';
import { GenerateConfig } from 'rc-picker/lib/generate';
import { Locale } from 'rc-picker/lib/interface';
import { useContext, useMemo } from 'react';
import { FormItemInputContext } from '../form/context';
import Select from '../select';
import { Group, Button } from '../radio';
import { CalendarMode } from './generateCalendar';
@ -152,6 +154,15 @@ function CalendarHeader<DateType>(props: CalendarHeaderProps<DateType>) {
const { prefixCls, fullscreen, mode, onChange, onModeChange } = props;
const divRef = React.useRef<HTMLDivElement>(null);
const formItemInputContext = useContext(FormItemInputContext);
const mergedFormItemInputContext = useMemo(
() => ({
...formItemInputContext,
isFormItemInput: false,
}),
[formItemInputContext],
);
const sharedProps = {
...props,
onChange,
@ -161,8 +172,10 @@ function CalendarHeader<DateType>(props: CalendarHeaderProps<DateType>) {
return (
<div className={`${prefixCls}-header`} ref={divRef}>
<YearSelect {...sharedProps} />
{mode === 'month' && <MonthSelect {...sharedProps} />}
<FormItemInputContext.Provider value={mergedFormItemInputContext}>
<YearSelect {...sharedProps} />
{mode === 'month' && <MonthSelect {...sharedProps} />}
</FormItemInputContext.Provider>
<ModeSwitch {...sharedProps} onModeChange={onModeChange} />
</div>
);

2
components/calendar/style/index.tsx
View File

@ -2,7 +2,7 @@ import '../../style/index.less';
import './index.less';
// style dependencies
// deps-lint-skip: date-picker
// deps-lint-skip: date-picker, form
import '../../select/style';
import '../../radio/style';
import '../../date-picker/style';

308
components/cascader/__tests__/__snapshots__/index.test.js.snap
View File

@ -864,6 +864,314 @@ exports[`Cascader can be selected in RTL direction 3`] = `
</div>
`;
exports[`Cascader legacy props should support showCheckedStrategy child 1`] = `
<div
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-open"
>
<div
class="ant-select-selector"
>
<div
class="ant-select-selection-overflow"
>
<div
class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
style="opacity: 1;"
>
<div
class="ant-select-selection-search"
style="width: 0px;"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
<span
aria-hidden="true"
class="ant-select-selection-search-mirror"
>
 
</span>
</div>
</div>
</div>
<span
class="ant-select-selection-placeholder"
/>
</div>
<div>
<div
class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
style="opacity: 0; pointer-events: none; min-width: auto;"
>
<div>
<div
class="ant-cascader-menus"
>
<ul
class="ant-cascader-menu"
role="menu"
>
<li
aria-checked="false"
class="ant-cascader-menu-item ant-cascader-menu-item-expand"
data-path-key="zhejiang"
role="menuitemcheckbox"
title="Zhejiang"
>
<span
class="ant-cascader-checkbox"
>
<span
class="ant-cascader-checkbox-inner"
/>
</span>
<div
class="ant-cascader-menu-item-content"
>
Zhejiang
</div>
<div
class="ant-cascader-menu-item-expand-icon"
>
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</div>
</li>
<li
aria-checked="false"
class="ant-cascader-menu-item ant-cascader-menu-item-expand"
data-path-key="jiangsu"
role="menuitemcheckbox"
title="Jiangsu"
>
<span
class="ant-cascader-checkbox"
>
<span
class="ant-cascader-checkbox-inner"
/>
</span>
<div
class="ant-cascader-menu-item-content"
>
Jiangsu
</div>
<div
class="ant-cascader-menu-item-expand-icon"
>
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
`;
exports[`Cascader legacy props should support showCheckedStrategy parent 1`] = `
<div
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-open"
>
<div
class="ant-select-selector"
>
<div
class="ant-select-selection-overflow"
>
<div
class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
style="opacity: 1;"
>
<div
class="ant-select-selection-search"
style="width: 0px;"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
<span
aria-hidden="true"
class="ant-select-selection-search-mirror"
>
 
</span>
</div>
</div>
</div>
<span
class="ant-select-selection-placeholder"
/>
</div>
<div>
<div
class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
style="opacity: 0; pointer-events: none; min-width: auto;"
>
<div>
<div
class="ant-cascader-menus"
>
<ul
class="ant-cascader-menu"
role="menu"
>
<li
aria-checked="false"
class="ant-cascader-menu-item ant-cascader-menu-item-expand"
data-path-key="zhejiang"
role="menuitemcheckbox"
title="Zhejiang"
>
<span
class="ant-cascader-checkbox"
>
<span
class="ant-cascader-checkbox-inner"
/>
</span>
<div
class="ant-cascader-menu-item-content"
>
Zhejiang
</div>
<div
class="ant-cascader-menu-item-expand-icon"
>
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</div>
</li>
<li
aria-checked="false"
class="ant-cascader-menu-item ant-cascader-menu-item-expand"
data-path-key="jiangsu"
role="menuitemcheckbox"
title="Jiangsu"
>
<span
class="ant-cascader-checkbox"
>
<span
class="ant-cascader-checkbox-inner"
/>
</span>
<div
class="ant-cascader-menu-item-content"
>
Jiangsu
</div>
<div
class="ant-cascader-menu-item-expand-icon"
>
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
`;
exports[`Cascader popup correctly with defaultValue 1`] = `
<div
class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"

131
components/cascader/__tests__/index.test.js
View File

@ -8,6 +8,8 @@ import focusTest from '../../../tests/shared/focusTest';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
const { SHOW_CHILD, SHOW_PARENT } = Cascader;
function toggleOpen(wrapper) {
wrapper.find('.ant-select-selector').simulate('mousedown');
}
@ -525,5 +527,134 @@ describe('Cascader', () => {
errorSpy.mockRestore();
});
it('should support showCheckedStrategy child', () => {
const multipleOptions = [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
{
value: 'donghu',
label: 'East Lake',
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
},
],
},
],
},
];
let selectedValue;
const onChange = function onChange(value) {
selectedValue = value;
};
const wrapper = mount(
<Cascader
options={multipleOptions}
onChange={onChange}
multiple
showCheckedStrategy={SHOW_CHILD}
/>,
);
toggleOpen(wrapper);
expect(wrapper.render()).toMatchSnapshot();
clickOption(wrapper, 0, 0);
clickOption(wrapper, 1, 0);
clickOption(wrapper, 2, 0);
clickOption(wrapper, 2, 1);
expect(selectedValue[0].join(',')).toBe('zhejiang,hangzhou,xihu');
expect(selectedValue[1].join(',')).toBe('zhejiang,hangzhou,donghu');
expect(selectedValue.join(',')).toBe('zhejiang,hangzhou,xihu,zhejiang,hangzhou,donghu');
});
it('should support showCheckedStrategy parent', () => {
const multipleOptions = [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
{
value: 'donghu',
label: 'East Lake',
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
},
],
},
],
},
];
let selectedValue;
const onChange = function onChange(value) {
selectedValue = value;
};
const wrapper = mount(
<Cascader
options={multipleOptions}
onChange={onChange}
multiple
showCheckedStrategy={SHOW_PARENT}
/>,
);
toggleOpen(wrapper);
expect(wrapper.render()).toMatchSnapshot();
clickOption(wrapper, 0, 0);
clickOption(wrapper, 1, 0);
clickOption(wrapper, 2, 0);
clickOption(wrapper, 2, 1);
expect(selectedValue.length).toBe(1);
expect(selectedValue.join(',')).toBe('zhejiang');
});
});
});

90
components/cascader/demo/showCheckedStrategy.md Normal file
View File

@ -0,0 +1,90 @@
---
order: 5.1
version: 4.20.0
title:
zh-CN: 自定义回填方式
en-US: ShowCheckedStrategy
---
## zh-CN
通过设置 `ShowCheckedStrategy` 选择回填方式。
## en-US
The way show selected item in box using `ShowCheckedStrategy`.
```jsx
import { Cascader } from 'antd';
const { SHOW_CHILD } = Cascader;
const options = [
{
label: 'Light',
value: 'light',
children: new Array(20)
.fill(null)
.map((_, index) => ({ label: `Number ${index}`, value: index })),
},
{
label: 'Bamboo',
value: 'bamboo',
children: [
{
label: 'Little',
value: 'little',
children: [
{
label: 'Toy Fish',
value: 'fish',
},
{
label: 'Toy Cards',
value: 'cards',
},
{
label: 'Toy Bird',
value: 'bird',
},
],
},
],
},
];
const App = () => {
const onChange = value => {
console.log(value);
};
return (
<>
<Cascader
style={{ width: '100%' }}
options={options}
onChange={onChange}
multiple
maxTagCount="responsive"
showCheckedStrategy={SHOW_CHILD}
defaultValue={[
['bamboo', 'little', 'fish'],
['bamboo', 'little', 'cards'],
['bamboo', 'little', 'bird'],
]}
/>
<br />
<br />
<Cascader
style={{ width: '100%' }}
options={options}
onChange={onChange}
multiple
maxTagCount="responsive"
defaultValue={['bamboo']}
/>
</>
);
};
ReactDOM.render(<App />, mountNode);
```

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

@ -54,7 +54,8 @@ Cascade selection box.
| onChange | Callback when finishing cascader select | (value, selectedOptions) => void | - | |
| onDropdownVisibleChange | Callback when popup shown or hidden | (value) => void | - | 4.17.0 |
| multiple | Support multiple or not | boolean | - | 4.17.0 |
| removeIcon | The custom remove icon | ReactNode | - | |
| showCheckedStrategy | The way show selected item in box. ** `SHOW_CHILD`: ** just show child treeNode. **`Cascader.SHOW_PARENT`:** just show parent treeNode (when all child treeNode under the parent treeNode are checked) | `Cascader.SHOW_PARENT` \| `Cascader.SHOW_CHILD` | `Cascader.SHOW_PARENT` | 4.20.0 |
| removeIcon | The custom remove icon | ReactNode | - | |
| searchValue | Set search value，Need work with `showSearch` | string | - | 4.17.0 |
| onSearch | The callback function triggered when input changed | (search: string) => void | - | 4.17.0 |
| dropdownMenuColumnStyle | The style of the drop-down menu column | CSSProperties | - | |

22
components/cascader/index.tsx
View File

@ -20,7 +20,7 @@ import type { SizeType } from '../config-provider/SizeContext';
import SizeContext from '../config-provider/SizeContext';
import getIcons from '../select/utils/iconUtil';
import { getTransitionName, getTransitionDirection, SelectCommonPlacement } from '../_util/motion';
import { FormItemStatusContext } from '../form/context';
import { FormItemInputContext } from '../form/context';
import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
// Align the design since we use `rc-select` in root. This help:
@ -34,6 +34,8 @@ export type FieldNamesType = FieldNames;
export type FilledFieldNamesType = Required<FieldNamesType>;
const { SHOW_CHILD, SHOW_PARENT } = RcCascader;
function highlightKeyword(str: string, lowerKeyword: string, prefixCls: string | undefined) {
const cells = str
.toLowerCase()
@ -145,8 +147,13 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
const mergedDirection = direction || rootDirection;
const isRtl = mergedDirection === 'rtl';
// =================== Status =====================
const { status: contextStatus, hasFeedback } = useContext(FormItemStatusContext);
// =================== Form =====================
const {
status: contextStatus,
hasFeedback,
isFormItemInput,
feedbackIcon,
} = useContext(FormItemInputContext);
const mergedStatus = getMergedStatus(contextStatus, customStatus);
// =================== Warning =====================
@ -227,8 +234,8 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
const mergedShowArrow = showArrow !== undefined ? showArrow : props.loading || !multiple;
const { suffixIcon, removeIcon, clearIcon } = getIcons({
...props,
status: mergedStatus,
hasFeedback,
feedbackIcon,
showArrow: mergedShowArrow,
multiple,
prefixCls,
@ -255,6 +262,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
[`${prefixCls}-sm`]: mergedSize === 'small',
[`${prefixCls}-rtl`]: isRtl,
[`${prefixCls}-borderless`]: !bordered,
[`${prefixCls}-in-form-item`]: isFormItemInput,
},
getStatusClassNames(prefixCls, mergedStatus, hasFeedback),
className,
@ -284,12 +292,16 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
showArrow={hasFeedback || showArrow}
/>
);
}) as (<OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(
}) as unknown as (<OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(
props: React.PropsWithChildren<CascaderProps<OptionType>> & { ref?: React.Ref<CascaderRef> },
) => React.ReactElement) & {
displayName: string;
SHOW_PARENT: typeof SHOW_PARENT;
SHOW_CHILD: typeof SHOW_CHILD;
};
Cascader.displayName = 'Cascader';
Cascader.SHOW_PARENT = SHOW_PARENT;
Cascader.SHOW_CHILD = SHOW_CHILD;
export default Cascader;

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

@ -55,6 +55,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
| onChange | 选择完成后的回调 | (value, selectedOptions) => void | - | |
| onDropdownVisibleChange | 显示/隐藏浮层的回调 | (value) => void | - | 4.17.0 |
| multiple | 支持多选节点 | boolean | - | 4.17.0 |
| showCheckedStrategy | 定义选中项回填的方式。`Cascader.SHOW_CHILD`: 只显示选中的子节点。`Cascader.SHOW_PARENT`: 只显示父节点（当父节点下所有子节点都选中时）。 | `Cascader.SHOW_PARENT` \| `Cascader.SHOW_CHILD` | `Cascader.SHOW_PARENT` | 4.20.0 |
| removeIcon | 自定义的多选框清除图标 | ReactNode | - | |
| searchValue | 设置搜索的值，需要与 `showSearch` 配合使用 | string | - | 4.17.0 |
| onSearch | 监听搜索，返回输入的值 | (search: string) => void | - | 4.17.0 |

4
components/checkbox/Checkbox.tsx
View File

@ -1,6 +1,8 @@
import * as React from 'react';
import classNames from 'classnames';
import RcCheckbox from 'rc-checkbox';
import { useContext } from 'react';
import { FormItemInputContext } from '../form/context';
import { GroupContext } from './Group';
import { ConfigContext } from '../config-provider';
import devWarning from '../_util/devWarning';
@ -59,6 +61,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo
) => {
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const checkboxGroup = React.useContext(GroupContext);
const { isFormItemInput } = useContext(FormItemInputContext);
const prevValue = React.useRef(restProps.value);
@ -104,6 +107,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-wrapper-checked`]: checkboxProps.checked,
[`${prefixCls}-wrapper-disabled`]: checkboxProps.disabled,
[`${prefixCls}-wrapper-in-form-item`]: isFormItemInput,
},
className,
);

1
components/checkbox/style/index.tsx
View File

@ -1,2 +1,3 @@
import '../../style/index.less';
import './index.less';
// deps-lint-skip: form

7
components/checkbox/style/mixin.less
View File

@ -169,6 +169,13 @@
& + & {
margin-left: 8px;
}
&&-in-form-item {
input[type='checkbox'] {
width: 14px;
height: 14px;
}
}
}
.@{checkbox-prefix-cls} + span {

336
components/config-provider/__tests__/__snapshots__/components.test.js.snap
View File

@ -985,189 +985,201 @@ exports[`ConfigProvider components Badge prefixCls 1`] = `
`;
exports[`ConfigProvider components Breadcrumb configProvider 1`] = `
<div
<nav
class="config-breadcrumb"
>
<span>
<span
class="config-breadcrumb-link"
>
Bamboo
</span>
<span
class="config-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="config-breadcrumb-link"
>
Light
</span>
<span
class="config-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="config-breadcrumb-link"
>
Bamboo
</span>
<span
class="config-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="config-breadcrumb-link"
>
Light
</span>
<span
class="config-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;
exports[`ConfigProvider components Breadcrumb configProvider componentSize large 1`] = `
<div
<nav
class="config-breadcrumb"
>
<span>
<span
class="config-breadcrumb-link"
>
Bamboo
</span>
<span
class="config-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="config-breadcrumb-link"
>
Light
</span>
<span
class="config-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="config-breadcrumb-link"
>
Bamboo
</span>
<span
class="config-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="config-breadcrumb-link"
>
Light
</span>
<span
class="config-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;
exports[`ConfigProvider components Breadcrumb configProvider componentSize middle 1`] = `
<div
<nav
class="config-breadcrumb"
>
<span>
<span
class="config-breadcrumb-link"
>
Bamboo
</span>
<span
class="config-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="config-breadcrumb-link"
>
Light
</span>
<span
class="config-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="config-breadcrumb-link"
>
Bamboo
</span>
<span
class="config-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="config-breadcrumb-link"
>
Light
</span>
<span
class="config-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;
exports[`ConfigProvider components Breadcrumb configProvider virtual and dropdownMatchSelectWidth 1`] = `
<div
<nav
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
Bamboo
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
Light
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Bamboo
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
Light
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;
exports[`ConfigProvider components Breadcrumb normal 1`] = `
<div
<nav
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
Bamboo
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
Light
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Bamboo
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
Light
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;
exports[`ConfigProvider components Breadcrumb prefixCls 1`] = `
<div
<nav
class="prefix-Breadcrumb"
>
<span>
<span
class="prefix-Breadcrumb-link"
>
Bamboo
</span>
<span
class="prefix-Breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="prefix-Breadcrumb-link"
>
Light
</span>
<span
class="prefix-Breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="prefix-Breadcrumb-link"
>
Bamboo
</span>
<span
class="prefix-Breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="prefix-Breadcrumb-link"
>
Light
</span>
<span
class="prefix-Breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;
exports[`ConfigProvider components Button configProvider 1`] = `
@ -22216,6 +22228,8 @@ exports[`ConfigProvider components Slider prefixCls 1`] = `
exports[`ConfigProvider components Spin configProvider 1`] = `
<div
aria-busy="true"
aria-live="polite"
class="config-spin config-spin-spinning"
>
<span
@ -22239,6 +22253,8 @@ exports[`ConfigProvider components Spin configProvider 1`] = `
exports[`ConfigProvider components Spin configProvider componentSize large 1`] = `
<div
aria-busy="true"
aria-live="polite"
class="config-spin config-spin-spinning"
>
<span
@ -22262,6 +22278,8 @@ exports[`ConfigProvider components Spin configProvider componentSize large 1`] =
exports[`ConfigProvider components Spin configProvider componentSize middle 1`] = `
<div
aria-busy="true"
aria-live="polite"
class="config-spin config-spin-spinning"
>
<span
@ -22285,6 +22303,8 @@ exports[`ConfigProvider components Spin configProvider componentSize middle 1`]
exports[`ConfigProvider components Spin configProvider virtual and dropdownMatchSelectWidth 1`] = `
<div
aria-busy="true"
aria-live="polite"
class="ant-spin ant-spin-spinning"
>
<span
@ -22308,6 +22328,8 @@ exports[`ConfigProvider components Spin configProvider virtual and dropdownMatch
exports[`ConfigProvider components Spin normal 1`] = `
<div
aria-busy="true"
aria-live="polite"
class="ant-spin ant-spin-spinning"
>
<span
@ -22331,6 +22353,8 @@ exports[`ConfigProvider components Spin normal 1`] = `
exports[`ConfigProvider components Spin prefixCls 1`] = `
<div
aria-busy="true"
aria-live="polite"
class="prefix-Spin prefix-Spin-spinning"
>
<span

97
components/config-provider/demo/theme.md
View File

@ -61,6 +61,35 @@ import {
const SplitSpace = props => <Space split={<Divider type="vertical" />} size={4} {...props} />;
const menuItems = [
{
key: 'mail',
icon: <MailOutlined />,
label: 'Mail',
},
{
key: 'SubMenu',
icon: <SettingOutlined />,
label: 'Submenu',
children: [
{
type: 'group',
label: 'Item 1',
children: [
{
key: 'setting:1',
label: 'Option 1',
},
{
key: 'setting:2',
label: 'Option 2',
},
],
},
],
},
];
const inputProps = {
style: { width: 128 },
};
@ -281,10 +310,17 @@ const FormSizeDemo = () => {
{/* Dropdown */}
<Dropdown
overlay={
<Menu>
<Menu.Item>1st menu item</Menu.Item>
<Menu.Item danger>a danger item</Menu.Item>
</Menu>
<Menu
items={[
{
label: '1st menu item',
},
{
label: 'a danger item',
danger: true,
},
]}
/>
}
>
<a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
@ -299,60 +335,25 @@ const FormSizeDemo = () => {
{/* Menu - horizontal */}
<Row gutter={16}>
<Col span={12}>
<Menu mode="horizontal" defaultSelectedKeys={['mail']}>
<Menu.Item key="mail" icon={<MailOutlined />}>
Mail
</Menu.Item>
<Menu.SubMenu key="SubMenu" icon={<SettingOutlined />} title="Submenu">
<Menu.ItemGroup title="Item 1">
<Menu.Item key="setting:1">Option 1</Menu.Item>
<Menu.Item key="setting:2">Option 2</Menu.Item>
</Menu.ItemGroup>
</Menu.SubMenu>
</Menu>
<Menu mode="horizontal" defaultSelectedKeys={['mail']} items={menuItems} />
</Col>
<Col span={12}>
<Menu mode="horizontal" theme="dark" defaultSelectedKeys={['mail']}>
<Menu.Item key="mail" icon={<MailOutlined />}>
Mail
</Menu.Item>
<Menu.SubMenu key="SubMenu" icon={<SettingOutlined />} title="Submenu">
<Menu.ItemGroup title="Item 1">
<Menu.Item key="setting:1">Option 1</Menu.Item>
<Menu.Item key="setting:2">Option 2</Menu.Item>
</Menu.ItemGroup>
</Menu.SubMenu>
</Menu>
<Menu
mode="horizontal"
theme="dark"
defaultSelectedKeys={['mail']}
items={menuItems}
/>
</Col>
</Row>
{/* Menu - vertical */}
<Row gutter={16}>
<Col span={12}>
<Menu mode="inline" defaultSelectedKeys={['mail']}>
<Menu.Item key="mail" icon={<MailOutlined />}>
Mail
</Menu.Item>
<Menu.SubMenu key="SubMenu" icon={<SettingOutlined />} title="Submenu">
<Menu.ItemGroup title="Item 1">
<Menu.Item key="setting:1">Option 1</Menu.Item>
<Menu.Item key="setting:2">Option 2</Menu.Item>
</Menu.ItemGroup>
</Menu.SubMenu>
</Menu>
<Menu mode="inline" defaultSelectedKeys={['mail']} items={menuItems} />
</Col>
<Col span={12}>
<Menu mode="vertical" theme="dark" defaultSelectedKeys={['mail']}>
<Menu.Item key="mail" icon={<MailOutlined />}>
Mail
</Menu.Item>
<Menu.SubMenu key="SubMenu" icon={<SettingOutlined />} title="Submenu">
<Menu.ItemGroup title="Item 1">
<Menu.Item key="setting:1">Option 1</Menu.Item>
<Menu.Item key="setting:2">Option 2</Menu.Item>
</Menu.ItemGroup>
</Menu.SubMenu>
</Menu>
<Menu mode="vertical" theme="dark" defaultSelectedKeys={['mail']} items={menuItems} />
</Col>
</Row>

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

@ -6,7 +6,6 @@ import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
import SwapRightOutlined from '@ant-design/icons/SwapRightOutlined';
import { RangePicker as RCRangePicker } from 'rc-picker';
import { GenerateConfig } from 'rc-picker/lib/generate/index';
import { PickerMode } from 'rc-picker/lib/interface';
import enUS from '../locale/en_US';
import { ConfigContext, ConfigConsumerProps } from '../../config-provider';
import SizeContext from '../../config-provider/SizeContext';
@ -14,8 +13,8 @@ import LocaleReceiver from '../../locale-provider/LocaleReceiver';
import { getRangePlaceholder, transPlacement2DropdownAlign } from '../util';
import { RangePickerProps, PickerLocale, getTimeProps, Components } from '.';
import { PickerComponentClass } from './interface';
import { FormItemStatusContext } from '../../form/context';
import { getFeedbackIcon, getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
import { FormItemInputContext } from '../../form/context';
import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
export default function generateRangePicker<DateType>(
generateConfig: GenerateConfig<DateType>,
@ -39,23 +38,6 @@ export default function generateRangePicker<DateType>(
}
};
renderFeedback = (prefixCls: string) => (
<FormItemStatusContext.Consumer>
{({ hasFeedback, status: contextStatus }) => {
const { status: customStatus } = this.props;
const status = getMergedStatus(contextStatus, customStatus);
return hasFeedback && getFeedbackIcon(prefixCls, status);
}}
</FormItemStatusContext.Consumer>
);
renderSuffix = (prefixCls: string, mergedPicker?: PickerMode) => (
<>
{mergedPicker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
{this.renderFeedback(prefixCls)}
</>
);
renderPicker = (contextLocale: PickerLocale) => {
const locale = { ...contextLocale, ...this.props.locale };
const { getPrefixCls, direction, getPopupContainer } = this.context;
@ -88,48 +70,57 @@ export default function generateRangePicker<DateType>(
const mergedSize = customizeSize || size;
return (
<FormItemStatusContext.Consumer>
{({ hasFeedback, status: contextStatus }) => (
<RCRangePicker<DateType>
separator={
<span aria-label="to" className={`${prefixCls}-separator`}>
<SwapRightOutlined />
</span>
}
ref={this.pickerRef}
dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
placeholder={getRangePlaceholder(picker, locale, placeholder)}
suffixIcon={this.renderSuffix(prefixCls, picker)}
clearIcon={<CloseCircleFilled />}
prevIcon={<span className={`${prefixCls}-prev-icon`} />}
nextIcon={<span className={`${prefixCls}-next-icon`} />}
superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
allowClear
transitionName={`${rootPrefixCls}-slide-up`}
{...restProps}
{...additionalOverrideProps}
className={classNames(
{
[`${prefixCls}-${mergedSize}`]: mergedSize,
[`${prefixCls}-borderless`]: !bordered,
},
getStatusClassNames(
prefixCls,
getMergedStatus(contextStatus, customStatus),
hasFeedback,
),
className,
)}
locale={locale!.lang}
prefixCls={prefixCls}
getPopupContainer={customGetPopupContainer || getPopupContainer}
generateConfig={generateConfig}
components={Components}
direction={direction}
/>
)}
</FormItemStatusContext.Consumer>
<FormItemInputContext.Consumer>
{({ hasFeedback, status: contextStatus, feedbackIcon }) => {
const suffixNode = (
<>
{picker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
{hasFeedback && feedbackIcon}
</>
);
return (
<RCRangePicker<DateType>
separator={
<span aria-label="to" className={`${prefixCls}-separator`}>
<SwapRightOutlined />
</span>
}
ref={this.pickerRef}
dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
placeholder={getRangePlaceholder(picker, locale, placeholder)}
suffixIcon={suffixNode}
clearIcon={<CloseCircleFilled />}
prevIcon={<span className={`${prefixCls}-prev-icon`} />}
nextIcon={<span className={`${prefixCls}-next-icon`} />}
superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
allowClear
transitionName={`${rootPrefixCls}-slide-up`}
{...restProps}
{...additionalOverrideProps}
className={classNames(
{
[`${prefixCls}-${mergedSize}`]: mergedSize,
[`${prefixCls}-borderless`]: !bordered,
},
getStatusClassNames(
prefixCls,
getMergedStatus(contextStatus, customStatus),
hasFeedback,
),
className,
)}
locale={locale!.lang}
prefixCls={prefixCls}
getPopupContainer={customGetPopupContainer || getPopupContainer}
generateConfig={generateConfig}
components={Components}
direction={direction}
/>
);
}}
</FormItemInputContext.Consumer>
);
}}
</SizeContext.Consumer>

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

@ -21,13 +21,8 @@ import {
Components,
} from '.';
import { PickerComponentClass } from './interface';
import { FormItemStatusContext } from '../../form/context';
import {
getFeedbackIcon,
getMergedStatus,
getStatusClassNames,
InputStatus,
} from '../../_util/statusUtils';
import { FormItemInputContext } from '../../form/context';
import { getMergedStatus, getStatusClassNames, InputStatus } from '../../_util/statusUtils';
export default function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
type DatePickerProps = PickerProps<DateType> & {
@ -68,23 +63,6 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
}
};
renderFeedback = (prefixCls: string) => (
<FormItemStatusContext.Consumer>
{({ hasFeedback, status: contextStatus }) => {
const { status: customStatus } = this.props;
const status = getMergedStatus(contextStatus, customStatus);
return hasFeedback && getFeedbackIcon(prefixCls, status);
}}
</FormItemStatusContext.Consumer>
);
renderSuffix = (prefixCls: string, mergedPicker?: PickerMode) => (
<>
{mergedPicker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
{this.renderFeedback(prefixCls)}
</>
);
renderPicker = (contextLocale: PickerLocale) => {
const locale = { ...contextLocale, ...this.props.locale };
const { getPrefixCls, direction, getPopupContainer } = this.context;
@ -127,44 +105,53 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
const mergedSize = customizeSize || size;
return (
<FormItemStatusContext.Consumer>
{({ hasFeedback, status: contextStatus }) => (
<RCPicker<DateType>
ref={this.pickerRef}
placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
suffixIcon={this.renderSuffix(prefixCls, mergedPicker)}
dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
clearIcon={<CloseCircleFilled />}
prevIcon={<span className={`${prefixCls}-prev-icon`} />}
nextIcon={<span className={`${prefixCls}-next-icon`} />}
superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
allowClear
transitionName={`${rootPrefixCls}-slide-up`}
{...additionalProps}
{...restProps}
{...additionalOverrideProps}
locale={locale!.lang}
className={classNames(
{
[`${prefixCls}-${mergedSize}`]: mergedSize,
[`${prefixCls}-borderless`]: !bordered,
},
getStatusClassNames(
prefixCls,
getMergedStatus(contextStatus, customStatus),
hasFeedback,
),
className,
)}
prefixCls={prefixCls}
getPopupContainer={customizeGetPopupContainer || getPopupContainer}
generateConfig={generateConfig}
components={Components}
direction={direction}
/>
)}
</FormItemStatusContext.Consumer>
<FormItemInputContext.Consumer>
{({ hasFeedback, status: contextStatus, feedbackIcon }) => {
const suffixNode = (
<>
{mergedPicker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
{hasFeedback && feedbackIcon}
</>
);
return (
<RCPicker<DateType>
ref={this.pickerRef}
placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
suffixIcon={suffixNode}
dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
clearIcon={<CloseCircleFilled />}
prevIcon={<span className={`${prefixCls}-prev-icon`} />}
nextIcon={<span className={`${prefixCls}-next-icon`} />}
superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
allowClear
transitionName={`${rootPrefixCls}-slide-up`}
{...additionalProps}
{...restProps}
{...additionalOverrideProps}
locale={locale!.lang}
className={classNames(
{
[`${prefixCls}-${mergedSize}`]: mergedSize,
[`${prefixCls}-borderless`]: !bordered,
},
getStatusClassNames(
prefixCls,
getMergedStatus(contextStatus, customStatus),
hasFeedback,
),
className,
)}
prefixCls={prefixCls}
getPopupContainer={customizeGetPopupContainer || getPopupContainer}
generateConfig={generateConfig}
components={Components}
direction={direction}
/>
);
}}
</FormItemInputContext.Consumer>
);
}}
</SizeContext.Consumer>

18
components/date-picker/style/status.less
View File

@ -21,10 +21,6 @@
.active(@text-color, @hoverBorderColor, @outlineColor);
}
}
.@{picker-prefix-cls}-feedback-icon {
color: @text-color;
}
}
.@{picker-prefix-cls} {
@ -35,18 +31,4 @@
&-status-warning {
.picker-status-color(@warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline);
}
&-status-validating {
.@{picker-prefix-cls}-feedback-icon {
display: inline-block;
color: @primary-color;
}
}
&-status-success {
.@{picker-prefix-cls}-feedback-icon {
color: @success-color;
animation-name: diffZoomIn1 !important;
}
}
}

42
components/dropdown/demo/arrow-center.md
View File

@ -17,23 +17,31 @@ By specifying `arrow` prop with `{ pointAtCenter: true }`, the arrow will point
import { Menu, Dropdown, Button } from 'antd';
const menu = (
<Menu>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
1st menu item
</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
2nd menu item
</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
3rd menu item
</a>
</Menu.Item>
</Menu>
<Menu
items={[
{
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
1st menu item
</a>
),
},
{
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
2nd menu item
</a>
),
},
{
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
3rd menu item
</a>
),
},
]}
/>
);
ReactDOM.render(

42
components/dropdown/demo/arrow.md
View File

@ -17,23 +17,31 @@ You could display an arrow.
import { Menu, Dropdown, Button } from 'antd';
const menu = (
<Menu>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
1st menu item
</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
2nd menu item
</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
3rd menu item
</a>
</Menu.Item>
</Menu>
<Menu
items={[
{
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
1st menu item
</a>
),
},
{
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
2nd menu item
</a>
),
},
{
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
3rd menu item
</a>
),
},
]}
/>
);
ReactDOM.render(

50
components/dropdown/demo/basic.md
View File

@ -18,24 +18,38 @@ import { Menu, Dropdown } from 'antd';
import { DownOutlined } from '@ant-design/icons';
const menu = (
<Menu>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
1st menu item
</a>
</Menu.Item>
<Menu.Item icon={<DownOutlined />} disabled>
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
2nd menu item (disabled)
</a>
</Menu.Item>
<Menu.Item disabled>
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
3rd menu item (disabled)
</a>
</Menu.Item>
<Menu.Item danger>a danger item</Menu.Item>
</Menu>
<Menu
items={[
{
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
1st menu item
</a>
),
},
{
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
2nd menu item (disabled)
</a>
),
icon: <DownOutlined />,
disabled: true,
},
{
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
3rd menu item (disabled)
</a>
),
disabled: true,
},
{
danger: true,
label: 'a danger item',
},
]}
/>
);
ReactDOM.render(

21
components/dropdown/demo/context-menu.md
View File

@ -17,11 +17,22 @@ The default trigger mode is `hover`, you can change it to `contextMenu`.
import { Menu, Dropdown } from 'antd';
const menu = (
<Menu>
<Menu.Item key="1">1st menu item</Menu.Item>
<Menu.Item key="2">2nd menu item</Menu.Item>
<Menu.Item key="3">3rd menu item</Menu.Item>
</Menu>
<Menu
items={[
{
label: '1st menu item',
key: '1',
},
{
label: '2nd menu item',
key: '2',
},
{
label: '3rd menu item',
key: '3',
},
]}
/>
);
ReactDOM.render(

31
components/dropdown/demo/dropdown-button.md
View File

@ -28,17 +28,26 @@ function handleMenuClick(e) {
}
const menu = (
<Menu onClick={handleMenuClick}>
<Menu.Item key="1" icon={<UserOutlined />}>
1st menu item
</Menu.Item>
<Menu.Item key="2" icon={<UserOutlined />}>
2nd menu item
</Menu.Item>
<Menu.Item key="3" icon={<UserOutlined />}>
3rd menu item
</Menu.Item>
</Menu>
<Menu
onClick={handleMenuClick}
items={[
{
label: '1st menu item',
key: '1',
icon: <UserOutlined />,
},
{
label: '2nd menu item',
key: '2',
icon: <UserOutlined />,
},
{
label: '3rd menu item',
key: '3',
icon: <UserOutlined />,
},
]}
/>
);
ReactDOM.render(

22
components/dropdown/demo/event.md
View File

@ -22,11 +22,23 @@ const onClick = ({ key }) => {
};
const menu = (
<Menu onClick={onClick}>
<Menu.Item key="1">1st menu item</Menu.Item>
<Menu.Item key="2">2nd menu item</Menu.Item>
<Menu.Item key="3">3rd menu item</Menu.Item>
</Menu>
<Menu
onClick={onClick}
items={[
{
label: '1st menu item',
key: '1',
},
{
label: '2nd menu item',
key: '2',
},
{
label: '3rd menu item',
key: '3',
},
]}
/>
);
ReactDOM.render(

44
components/dropdown/demo/item.md
View File

@ -18,22 +18,34 @@ import { Menu, Dropdown } from 'antd';
import { DownOutlined } from '@ant-design/icons';
const menu = (
<Menu>
<Menu.Item key="0">
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
1st menu item
</a>
</Menu.Item>
<Menu.Item key="1">
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
2nd menu item
</a>
</Menu.Item>
<Menu.Divider />
<Menu.Item key="3" disabled>
3rd menu item（disabled）
</Menu.Item>
</Menu>
<Menu
items={[
{
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
1st menu item
</a>
),
key: '0',
},
{
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
2nd menu item
</a>
),
key: '1',
},
{
type: 'divider',
},
{
label: '3rd menu item（disabled）',
key: '3',
disabled: true,
},
]}
/>
);
ReactDOM.render(

11
components/dropdown/demo/loading.md
View File

@ -18,9 +18,14 @@ import { Menu, Dropdown, Space } from 'antd';
import { DownOutlined } from '@ant-design/icons';
const menu = (
<Menu>
<Menu.Item key="1">Submit and continue</Menu.Item>
</Menu>
<Menu
items={[
{
label: 'Submit and continue',
key: '1',
},
]}
/>
);
class App extends React.Component {
state = {

82
components/dropdown/demo/menu-full.md
View File

@ -18,44 +18,56 @@ This demo was created for debugging Menu styles inside Dropdown.
[#19150](https://github.com/ant-design/ant-design/pull/19150)
```jsx
import { Menu, Dropdown } from 'antd';
```tsx
import { Menu, Dropdown, MenuProps } from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined, DownOutlined } from '@ant-design/icons';
const { SubMenu } = Menu;
type MenuItem = Required<MenuProps>['items'][number];
const menu = (
<Menu selectedKeys={['1']} openKeys={['sub1']}>
<Menu.ItemGroup key="group" title="Item Group">
<Menu.Item key="01">Option 0</Menu.Item>
<Menu.Item key="02">Option 0</Menu.Item>
</Menu.ItemGroup>
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
<Menu.ItemGroup key="g1" title="Item 1">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup key="g2" title="Item 2">
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</Menu>
);
function getItem(
label: React.ReactNode,
key: React.Key,
icon?: React.ReactNode,
children?: MenuItem[],
type?: 'group',
): MenuItem {
return {
key,
icon,
children,
label,
type,
} as MenuItem;
}
const items: MenuItem[] = [
getItem(
'Item Group',
'group',
null,
[getItem('Option 0', '01'), getItem('Option 0', '02')],
'group',
),
getItem('Navigation One', 'sub1', <MailOutlined />, [
getItem('Item 1', 'g1', null, [getItem('Option 1', '1'), getItem('Option 2', '2')], 'group'),
getItem('Item 2', 'g2', null, [getItem('Option 3', '3'), getItem('Option 4', '4')], 'group'),
]),
getItem('Navigation Two', 'sub2', <AppstoreOutlined />, [
getItem('Option 5', '5'),
getItem('Option 6', '6'),
getItem('Submenu', 'sub3', null, [getItem('Option 7', '7'), getItem('Option 8', '8')]),
]),
getItem('Navigation Three', 'sub4', <SettingOutlined />, [
getItem('Option 9', '9'),
getItem('Option 10', '10'),
getItem('Option 11', '11'),
getItem('Option 12', '12'),
]),
// Not crash
null as any,
];
const menu = <Menu selectedKeys={['1']} openKeys={['sub1']} items={items} />;
ReactDOM.render(
<Dropdown overlay={menu}>

22
components/dropdown/demo/overlay-visible.md
View File

@ -34,11 +34,23 @@ class OverlayVisible extends React.Component {
render() {
const menu = (
<Menu onClick={this.handleMenuClick}>
<Menu.Item key="1">Clicking me will not close the menu.</Menu.Item>
<Menu.Item key="2">Clicking me will not close the menu also.</Menu.Item>
<Menu.Item key="3">Clicking me will close the menu.</Menu.Item>
</Menu>
<Menu
onClick={this.handleMenuClick}
items={[
{
label: 'Clicking me will not close the menu.',
key: '1',
},
{
label: 'Clicking me will not close the menu also.',
key: '2',
},
{
label: 'Clicking me will close the menu.',
key: '3',
},
]}
/>
);
return (
<Dropdown

42
components/dropdown/demo/placement.md
View File

@ -17,23 +17,31 @@ Support 6 placements.
import { Menu, Dropdown, Button, Space } from 'antd';
const menu = (
<Menu>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
1st menu item
</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
2nd menu item
</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
3rd menu item
</a>
</Menu.Item>
</Menu>
<Menu
items={[
{
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
1st menu item
</a>
),
},
{
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
2nd menu item
</a>
),
},
{
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
3rd menu item
</a>
),
},
]}
/>
);
ReactDOM.render(

53
components/dropdown/demo/sub-menu.md
View File

@ -20,20 +20,45 @@ import { DownOutlined } from '@ant-design/icons';
const { SubMenu } = Menu;
const menu = (
<Menu>
<Menu.ItemGroup title="Group title">
<Menu.Item>1st menu item</Menu.Item>
<Menu.Item>2nd menu item</Menu.Item>
</Menu.ItemGroup>
<SubMenu title="sub menu">
<Menu.Item>3rd menu item</Menu.Item>
<Menu.Item>4th menu item</Menu.Item>
</SubMenu>
<SubMenu title="disabled sub menu" disabled>
<Menu.Item>5d menu item</Menu.Item>
<Menu.Item>6th menu item</Menu.Item>
</SubMenu>
</Menu>
<Menu
items={[
{
type: 'group',
label: 'Group title',
children: [
{
label: '1st menu item',
},
{
label: '2nd menu item',
},
],
},
{
label: 'sub menu',
children: [
{
label: '3rd menu item',
},
{
label: '4th menu item',
},
],
},
{
label: 'disabled sub menu',
disabled: true,
children: [
{
label: '5d menu item',
},
{
label: '6th menu item',
},
],
},
]}
/>
);
ReactDOM.render(

31
components/dropdown/demo/trigger.md
View File

@ -13,21 +13,30 @@ title:
The default trigger mode is `hover`, you can change it to `click`.
```jsx
```tsx
import { Menu, Dropdown } from 'antd';
import { DownOutlined } from '@ant-design/icons';
const menu = (
<Menu>
<Menu.Item key="0">
<a href="https://www.antgroup.com">1st menu item</a>
</Menu.Item>
<Menu.Item key="1">
<a href="https://www.aliyun.com">2nd menu item</a>
</Menu.Item>
<Menu.Divider />
<Menu.Item key="3">3rd menu item</Menu.Item>
</Menu>
<Menu
items={[
{
label: <a href="https://www.antgroup.com">1st menu item</a>,
key: '0',
},
{
label: <a href="https://www.aliyun.com">2nd menu item</a>,
key: '1',
},
{
type: 'divider',
},
{
label: '3rd menu item',
key: '3',
},
]}
/>
);
ReactDOM.render(

3
components/dropdown/style/index.less
View File

@ -221,7 +221,8 @@
background-color: @dropdown-selected-bg;
}
&:hover {
&:hover,
&&-active {
background-color: @item-hover-bg;
}

45
components/form/FormItem.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react';
import { useContext, useMemo } from 'react';
import { ReactNode, useContext, useMemo } from 'react';
import classNames from 'classnames';
import { Field, FormInstance, FieldContext, ListContext } from 'rc-field-form';
import { FieldProps } from 'rc-field-form/lib/Field';
@ -7,6 +7,10 @@ import { Meta, NamePath } from 'rc-field-form/lib/interface';
import { supportRef } from 'rc-util/lib/ref';
import useState from 'rc-util/lib/hooks/useState';
import omit from 'rc-util/lib/omit';
import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
import Row from '../grid/row';
import { ConfigContext } from '../config-provider';
import { tuple } from '../_util/type';
@ -15,7 +19,7 @@ import FormItemLabel, { FormItemLabelProps, LabelTooltipType } from './FormItemL
import FormItemInput, { FormItemInputProps } from './FormItemInput';
import {
FormContext,
FormItemStatusContext,
FormItemInputContext,
NoStyleItemContext,
FormItemStatusContextProps,
} from './context';
@ -88,6 +92,13 @@ function genEmptyMeta(): Meta {
};
}
const iconMap = {
success: CheckCircleFilled,
warning: ExclamationCircleFilled,
error: CloseCircleFilled,
validating: LoadingOutlined,
};
function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElement {
const {
name,
@ -219,13 +230,29 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
mergedValidateStatus = 'success';
}
const formItemStatusContext = useMemo<FormItemStatusContextProps>(
() => ({
const formItemStatusContext = useMemo<FormItemStatusContextProps>(() => {
let feedbackIcon: ReactNode;
if (hasFeedback) {
const IconNode = mergedValidateStatus && iconMap[mergedValidateStatus];
feedbackIcon = IconNode ? (
<span
className={classNames(
`${prefixCls}-item-feedback-icon`,
`${prefixCls}-item-feedback-icon-${mergedValidateStatus}`,
)}
>
<IconNode />
</span>
) : null;
}
return {
status: mergedValidateStatus,
hasFeedback,
}),
[mergedValidateStatus, hasFeedback],
);
feedbackIcon,
isFormItemInput: true,
};
}, [mergedValidateStatus, hasFeedback]);
// ======================== Render ========================
function renderLayout(
@ -300,9 +327,9 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
help={help}
>
<NoStyleItemContext.Provider value={onSubItemMetaChange}>
<FormItemStatusContext.Provider value={formItemStatusContext}>
<FormItemInputContext.Provider value={formItemStatusContext}>
{baseChildren}
</FormItemStatusContext.Provider>
</FormItemInputContext.Provider>
</NoStyleItemContext.Provider>
</FormItemInput>
</Row>

204
components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -77,7 +77,7 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -329,7 +329,7 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -691,7 +691,7 @@ exports[`renders ./components/form/demo/basic.md extend context correctly 1`] =
class="ant-form-item-control-input-content"
>
<label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
>
<span
class="ant-checkbox ant-checkbox-checked"
@ -934,7 +934,7 @@ exports[`renders ./components/form/demo/control-hooks.md extend context correctl
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1200,7 +1200,7 @@ exports[`renders ./components/form/demo/control-ref.md extend context correctly
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1440,7 +1440,7 @@ exports[`renders ./components/form/demo/customized-form-controls.md extend conte
value="0"
/>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
style="width:80px;margin:0 8px"
>
<div
@ -2451,7 +2451,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-complex.md extend con
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -2859,7 +2859,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md extend context correctly
class="ant-form-item-control-input-content"
>
<label
class="ant-checkbox-wrapper"
class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
>
<span
class="ant-checkbox"
@ -3412,7 +3412,7 @@ exports[`renders ./components/form/demo/layout.md extend context correctly 1`] =
id="layout"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
>
<span
class="ant-radio-button ant-radio-button-checked"
@ -3432,7 +3432,7 @@ exports[`renders ./components/form/demo/layout.md extend context correctly 1`] =
</span>
</label>
<label
class="ant-radio-button-wrapper"
class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
>
<span
class="ant-radio-button"
@ -3451,7 +3451,7 @@ exports[`renders ./components/form/demo/layout.md extend context correctly 1`] =
</span>
</label>
<label
class="ant-radio-button-wrapper"
class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
>
<span
class="ant-radio-button"
@ -3774,7 +3774,7 @@ exports[`renders ./components/form/demo/nest-messages.md extend context correctl
class="ant-form-item-control-input-content"
>
<div
class="ant-input-number"
class="ant-input-number ant-input-number-in-form-item"
>
<div
class="ant-input-number-handler-wrap"
@ -4060,7 +4060,7 @@ exports[`renders ./components/form/demo/normal-login.md extend context correctly
class="ant-form-item-control-input-content"
>
<label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
>
<span
class="ant-checkbox ant-checkbox-checked"
@ -4472,7 +4472,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -4870,7 +4870,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
class="ant-input-number-wrapper ant-input-number-group"
>
<div
class="ant-input-number"
class="ant-input-number ant-input-number-in-form-item"
>
<div
class="ant-input-number-handler-wrap"
@ -5117,7 +5117,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
>
<div
class="ant-select-selector"
@ -5188,7 +5188,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
class="ant-form-item-control-input-content"
>
<div
class="ant-input-textarea ant-input-textarea-show-count"
class="ant-input-textarea ant-input-textarea-show-count ant-input-textarea-in-form-item"
data-count="0 / 100"
>
<textarea
@ -5224,7 +5224,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -5458,7 +5458,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
class="ant-form-item-control-input-content"
>
<label
class="ant-checkbox-wrapper"
class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
>
<span
class="ant-checkbox"
@ -5550,7 +5550,7 @@ exports[`renders ./components/form/demo/required-mark.md extend context correctl
id="requiredMarkValue"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
>
<span
class="ant-radio-button ant-radio-button-checked"
@ -5570,7 +5570,7 @@ exports[`renders ./components/form/demo/required-mark.md extend context correctl
</span>
</label>
<label
class="ant-radio-button-wrapper"
class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
>
<span
class="ant-radio-button"
@ -5589,7 +5589,7 @@ exports[`renders ./components/form/demo/required-mark.md extend context correctl
</span>
</label>
<label
class="ant-radio-button-wrapper"
class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
>
<span
class="ant-radio-button"
@ -5835,7 +5835,7 @@ exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
id="size"
>
<label
class="ant-radio-button-wrapper"
class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
>
<span
class="ant-radio-button"
@ -5854,7 +5854,7 @@ exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
</span>
</label>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
>
<span
class="ant-radio-button ant-radio-button-checked"
@ -5874,7 +5874,7 @@ exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
</span>
</label>
<label
class="ant-radio-button-wrapper"
class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
>
<span
class="ant-radio-button"
@ -5951,7 +5951,7 @@ exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -6090,7 +6090,7 @@ exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -6268,7 +6268,7 @@ exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -7022,7 +7022,7 @@ exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-input-number"
class="ant-input-number ant-input-number-in-form-item"
>
<div
class="ant-input-number-handler-wrap"
@ -14780,7 +14780,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-has-feedback ant-select-single ant-select-show-arrow"
class="ant-select ant-select-in-form-item ant-select-has-feedback ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -14948,7 +14948,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-multiple ant-select-show-search"
class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
>
<div
class="ant-select-selector"
@ -15104,7 +15104,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
class="ant-form-item-control-input-content"
>
<div
class="ant-input-number"
class="ant-input-number ant-input-number-in-form-item"
>
<div
class="ant-input-number-handler-wrap"
@ -15398,7 +15398,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
id="validate_other_radio-group"
>
<label
class="ant-radio-wrapper"
class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
>
<span
class="ant-radio"
@ -15417,7 +15417,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
</span>
</label>
<label
class="ant-radio-wrapper"
class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
>
<span
class="ant-radio"
@ -15436,7 +15436,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
</span>
</label>
<label
class="ant-radio-wrapper"
class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
>
<span
class="ant-radio"
@ -15487,7 +15487,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
id="validate_other_radio-button"
>
<label
class="ant-radio-button-wrapper"
class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
>
<span
class="ant-radio-button"
@ -15506,7 +15506,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
</span>
</label>
<label
class="ant-radio-button-wrapper"
class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
>
<span
class="ant-radio-button"
@ -15525,7 +15525,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
</span>
</label>
<label
class="ant-radio-button-wrapper"
class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
>
<span
class="ant-radio-button"
@ -15582,7 +15582,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
class="ant-col ant-col-8"
>
<label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
style="line-height:32px"
>
<span
@ -15607,7 +15607,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
class="ant-col ant-col-8"
>
<label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled"
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled ant-checkbox-wrapper-in-form-item"
style="line-height:32px"
>
<span
@ -15633,7 +15633,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
class="ant-col ant-col-8"
>
<label
class="ant-checkbox-wrapper"
class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
style="line-height:32px"
>
<span
@ -15657,7 +15657,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
class="ant-col ant-col-8"
>
<label
class="ant-checkbox-wrapper"
class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
style="line-height:32px"
>
<span
@ -15681,7 +15681,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
class="ant-col ant-col-8"
>
<label
class="ant-checkbox-wrapper"
class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
style="line-height:32px"
>
<span
@ -15705,7 +15705,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
class="ant-col ant-col-8"
>
<label
class="ant-checkbox-wrapper"
class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
style="line-height:32px"
>
<span
@ -16081,7 +16081,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
class=""
>
<div
class="ant-upload ant-upload-select ant-upload-select-picture"
class="ant-upload ant-upload-select ant-upload-select-picture ant-upload-in-form-item"
>
<span
class="ant-upload"
@ -16160,7 +16160,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
>
<span>
<div
class="ant-upload ant-upload-drag"
class="ant-upload ant-upload-drag ant-upload-in-form-item"
>
<span
class="ant-upload ant-upload-btn"
@ -16390,7 +16390,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
class="ant-input-suffix"
>
<span
class="ant-input-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-validating"
>
<span
aria-label="loading"
@ -16464,7 +16464,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
class="ant-input-suffix"
>
<span
class="ant-input-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
>
<span
aria-label="check-circle"
@ -16528,7 +16528,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
class="ant-input-suffix"
>
<span
class="ant-input-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
>
<span
aria-label="exclamation-circle"
@ -16592,7 +16592,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
class="ant-input-suffix"
>
<span
class="ant-input-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<span
aria-label="close-circle"
@ -16690,7 +16690,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</svg>
</span>
<span
class="ant-picker-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
>
<span
aria-label="check-circle"
@ -17336,7 +17336,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</svg>
</span>
<span
class="ant-picker-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
>
<span
aria-label="exclamation-circle"
@ -18833,7 +18833,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</svg>
</span>
<span
class="ant-picker-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<span
aria-label="close-circle"
@ -19981,7 +19981,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-select-in-form-item ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -20136,7 +20136,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</svg>
</span>
<span
class="ant-select-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<span
aria-label="close-circle"
@ -20187,7 +20187,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-cascader ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-in-form-item ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -20273,7 +20273,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</svg>
</span>
<span
class="ant-select-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<span
aria-label="close-circle"
@ -20334,7 +20334,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-tree-select ant-select-status-warning ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-in-form-item ant-select-status-warning ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -20466,7 +20466,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</svg>
</span>
<span
class="ant-select-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
>
<span
aria-label="exclamation-circle"
@ -21793,7 +21793,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
style="width:100%"
>
<div
class="ant-input-number ant-input-number-status-success"
class="ant-input-number ant-input-number-in-form-item ant-input-number-status-success"
>
<div
class="ant-input-number-handler-wrap"
@ -21869,7 +21869,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
class="ant-input-number-suffix"
>
<span
class="ant-input-number-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
>
<span
aria-label="check-circle"
@ -21957,7 +21957,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</span>
</span>
<span
class="ant-input-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
>
<span
aria-label="check-circle"
@ -22044,7 +22044,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</svg>
</span>
<span
class="ant-input-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
>
<span
aria-label="exclamation-circle"
@ -22156,7 +22156,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</svg>
</span>
<span
class="ant-input-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<span
aria-label="close-circle"
@ -22218,26 +22218,30 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
/>
</div>
<span
class="ant-mentions-feedback-icon"
class="ant-mentions-suffix"
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
</span>
</span>
</div>
@ -22268,7 +22272,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
class="ant-form-item-control-input-content"
>
<div
class="ant-input-textarea ant-input-textarea-show-count ant-input-textarea-status-error ant-input-textarea-has-feedback"
class="ant-input-textarea ant-input-textarea-show-count ant-input-textarea-in-form-item ant-input-textarea-status-error ant-input-textarea-has-feedback"
data-count="0"
>
<span
@ -22299,26 +22303,30 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</span>
</span>
<span
class="ant-input-feedback-icon"
class="ant-input-textarea-suffix"
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
</span>
</span>
</div>
@ -22453,7 +22461,7 @@ exports[`renders ./components/form/demo/without-form-create.md extend context co
class="ant-form-item-control-input-content"
>
<div
class="ant-input-number"
class="ant-input-number ant-input-number-in-form-item"
>
<div
class="ant-input-number-handler-wrap"

204
components/form/__tests__/__snapshots__/demo.test.js.snap
View File

@ -77,7 +77,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -247,7 +247,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -527,7 +527,7 @@ exports[`renders ./components/form/demo/basic.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
>
<span
class="ant-checkbox ant-checkbox-checked"
@ -770,7 +770,7 @@ exports[`renders ./components/form/demo/control-hooks.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -937,7 +937,7 @@ exports[`renders ./components/form/demo/control-ref.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1078,7 +1078,7 @@ exports[`renders ./components/form/demo/customized-form-controls.md correctly 1`
value="0"
/>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
style="width:80px;margin:0 8px"
>
<div
@ -2007,7 +2007,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-complex.md correctly
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -2333,7 +2333,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<label
class="ant-checkbox-wrapper"
class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
>
<span
class="ant-checkbox"
@ -2886,7 +2886,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
id="layout"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
>
<span
class="ant-radio-button ant-radio-button-checked"
@ -2906,7 +2906,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
</span>
</label>
<label
class="ant-radio-button-wrapper"
class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
>
<span
class="ant-radio-button"
@ -2925,7 +2925,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
</span>
</label>
<label
class="ant-radio-button-wrapper"
class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
>
<span
class="ant-radio-button"
@ -3248,7 +3248,7 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-input-number"
class="ant-input-number ant-input-number-in-form-item"
>
<div
class="ant-input-number-handler-wrap"
@ -3534,7 +3534,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
>
<span
class="ant-checkbox ant-checkbox-checked"
@ -3922,7 +3922,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -4148,7 +4148,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
class="ant-input-number-wrapper ant-input-number-group"
>
<div
class="ant-input-number"
class="ant-input-number ant-input-number-in-form-item"
>
<div
class="ant-input-number-handler-wrap"
@ -4313,7 +4313,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
>
<div
class="ant-select-selector"
@ -4370,7 +4370,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-input-textarea ant-input-textarea-show-count"
class="ant-input-textarea ant-input-textarea-show-count ant-input-textarea-in-form-item"
data-count="0 / 100"
>
<textarea
@ -4406,7 +4406,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -4541,7 +4541,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<label
class="ant-checkbox-wrapper"
class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
>
<span
class="ant-checkbox"
@ -4633,7 +4633,7 @@ exports[`renders ./components/form/demo/required-mark.md correctly 1`] = `
id="requiredMarkValue"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
>
<span
class="ant-radio-button ant-radio-button-checked"
@ -4653,7 +4653,7 @@ exports[`renders ./components/form/demo/required-mark.md correctly 1`] = `
</span>
</label>
<label
class="ant-radio-button-wrapper"
class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
>
<span
class="ant-radio-button"
@ -4672,7 +4672,7 @@ exports[`renders ./components/form/demo/required-mark.md correctly 1`] = `
</span>
</label>
<label
class="ant-radio-button-wrapper"
class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
>
<span
class="ant-radio-button"
@ -4870,7 +4870,7 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
id="size"
>
<label
class="ant-radio-button-wrapper"
class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
>
<span
class="ant-radio-button"
@ -4889,7 +4889,7 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
</span>
</label>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
>
<span
class="ant-radio-button ant-radio-button-checked"
@ -4909,7 +4909,7 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
</span>
</label>
<label
class="ant-radio-button-wrapper"
class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
>
<span
class="ant-radio-button"
@ -4986,7 +4986,7 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -5068,7 +5068,7 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -5149,7 +5149,7 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -5295,7 +5295,7 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-input-number"
class="ant-input-number ant-input-number-in-form-item"
>
<div
class="ant-input-number-handler-wrap"
@ -6028,7 +6028,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-has-feedback ant-select-single ant-select-show-arrow"
class="ant-select ant-select-in-form-item ant-select-has-feedback ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -6114,7 +6114,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-multiple ant-select-show-search"
class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
>
<div
class="ant-select-selector"
@ -6189,7 +6189,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-input-number"
class="ant-input-number ant-input-number-in-form-item"
>
<div
class="ant-input-number-handler-wrap"
@ -6459,7 +6459,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
id="validate_other_radio-group"
>
<label
class="ant-radio-wrapper"
class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
>
<span
class="ant-radio"
@ -6478,7 +6478,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
</span>
</label>
<label
class="ant-radio-wrapper"
class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
>
<span
class="ant-radio"
@ -6497,7 +6497,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
</span>
</label>
<label
class="ant-radio-wrapper"
class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
>
<span
class="ant-radio"
@ -6548,7 +6548,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
id="validate_other_radio-button"
>
<label
class="ant-radio-button-wrapper"
class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
>
<span
class="ant-radio-button"
@ -6567,7 +6567,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
</span>
</label>
<label
class="ant-radio-button-wrapper"
class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
>
<span
class="ant-radio-button"
@ -6586,7 +6586,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
</span>
</label>
<label
class="ant-radio-button-wrapper"
class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
>
<span
class="ant-radio-button"
@ -6643,7 +6643,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class="ant-col ant-col-8"
>
<label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
style="line-height:32px"
>
<span
@ -6668,7 +6668,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class="ant-col ant-col-8"
>
<label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled"
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled ant-checkbox-wrapper-in-form-item"
style="line-height:32px"
>
<span
@ -6694,7 +6694,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class="ant-col ant-col-8"
>
<label
class="ant-checkbox-wrapper"
class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
style="line-height:32px"
>
<span
@ -6718,7 +6718,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class="ant-col ant-col-8"
>
<label
class="ant-checkbox-wrapper"
class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
style="line-height:32px"
>
<span
@ -6742,7 +6742,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class="ant-col ant-col-8"
>
<label
class="ant-checkbox-wrapper"
class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
style="line-height:32px"
>
<span
@ -6766,7 +6766,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class="ant-col ant-col-8"
>
<label
class="ant-checkbox-wrapper"
class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
style="line-height:32px"
>
<span
@ -7142,7 +7142,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class=""
>
<div
class="ant-upload ant-upload-select ant-upload-select-picture"
class="ant-upload ant-upload-select ant-upload-select-picture ant-upload-in-form-item"
>
<span
class="ant-upload"
@ -7221,7 +7221,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
>
<span>
<div
class="ant-upload ant-upload-drag"
class="ant-upload ant-upload-drag ant-upload-in-form-item"
>
<span
class="ant-upload ant-upload-btn"
@ -7451,7 +7451,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-input-suffix"
>
<span
class="ant-input-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-validating"
>
<span
aria-label="loading"
@ -7525,7 +7525,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-input-suffix"
>
<span
class="ant-input-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
>
<span
aria-label="check-circle"
@ -7589,7 +7589,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-input-suffix"
>
<span
class="ant-input-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
>
<span
aria-label="exclamation-circle"
@ -7653,7 +7653,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-input-suffix"
>
<span
class="ant-input-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<span
aria-label="close-circle"
@ -7751,7 +7751,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</svg>
</span>
<span
class="ant-picker-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
>
<span
aria-label="check-circle"
@ -7843,7 +7843,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</svg>
</span>
<span
class="ant-picker-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
>
<span
aria-label="exclamation-circle"
@ -7975,7 +7975,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</svg>
</span>
<span
class="ant-picker-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<span
aria-label="close-circle"
@ -8026,7 +8026,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-select-in-form-item ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -8082,7 +8082,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</svg>
</span>
<span
class="ant-select-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<span
aria-label="close-circle"
@ -8133,7 +8133,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-cascader ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-in-form-item ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -8188,7 +8188,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</svg>
</span>
<span
class="ant-select-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<span
aria-label="close-circle"
@ -8249,7 +8249,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-tree-select ant-select-status-warning ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-in-form-item ant-select-status-warning ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -8304,7 +8304,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</svg>
</span>
<span
class="ant-select-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
>
<span
aria-label="exclamation-circle"
@ -8523,7 +8523,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
style="width:100%"
>
<div
class="ant-input-number ant-input-number-status-success"
class="ant-input-number ant-input-number-in-form-item ant-input-number-status-success"
>
<div
class="ant-input-number-handler-wrap"
@ -8599,7 +8599,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-input-number-suffix"
>
<span
class="ant-input-number-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
>
<span
aria-label="check-circle"
@ -8687,7 +8687,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</span>
</span>
<span
class="ant-input-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
>
<span
aria-label="check-circle"
@ -8774,7 +8774,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</svg>
</span>
<span
class="ant-input-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
>
<span
aria-label="exclamation-circle"
@ -8886,7 +8886,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</svg>
</span>
<span
class="ant-input-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<span
aria-label="close-circle"
@ -8948,26 +8948,30 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
/>
</div>
<span
class="ant-mentions-feedback-icon"
class="ant-mentions-suffix"
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
</span>
</span>
</div>
@ -8998,7 +9002,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-input-textarea ant-input-textarea-show-count ant-input-textarea-status-error ant-input-textarea-has-feedback"
class="ant-input-textarea ant-input-textarea-show-count ant-input-textarea-in-form-item ant-input-textarea-status-error ant-input-textarea-has-feedback"
data-count="0"
>
<span
@ -9029,26 +9033,30 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</span>
</span>
<span
class="ant-input-feedback-icon"
class="ant-input-textarea-suffix"
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
</span>
</span>
</div>
@ -9183,7 +9191,7 @@ exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-input-number"
class="ant-input-number ant-input-number-in-form-item"
>
<div
class="ant-input-number-handler-wrap"

8
components/form/context.tsx
View File

@ -3,7 +3,7 @@ import omit from 'rc-util/lib/omit';
import { Meta } from 'rc-field-form/lib/interface';
import { FormProvider as RcFormProvider } from 'rc-field-form';
import { FormProviderProps as RcFormProviderProps } from 'rc-field-form/lib/FormContext';
import { FC, PropsWithChildren, useMemo } from 'react';
import { FC, PropsWithChildren, ReactNode, useMemo } from 'react';
import { ColProps } from '../grid/col';
import { FormLabelAlign } from './interface';
import { RequiredMark } from './Form';
@ -53,16 +53,18 @@ export const FormItemPrefixContext = React.createContext<FormItemPrefixContextPr
});
export interface FormItemStatusContextProps {
isFormItemInput?: boolean;
status?: ValidateStatus;
hasFeedback?: boolean;
feedbackIcon?: ReactNode;
}
export const FormItemStatusContext = React.createContext<FormItemStatusContextProps>({});
export const FormItemInputContext = React.createContext<FormItemStatusContextProps>({});
export const NoFormStatus: FC<PropsWithChildren<{}>> = ({ children }: PropsWithChildren<{}>) => {
const emptyContext = useMemo(() => ({}), []);
return (
<FormItemStatusContext.Provider value={emptyContext}>{children}</FormItemStatusContext.Provider>
<FormItemInputContext.Provider value={emptyContext}>{children}</FormItemInputContext.Provider>
);
};

58
components/form/style/components.less
View File

@ -6,67 +6,11 @@
// ================================================================
// = Children Component =
// ================================================================
// FIXME: useless, remove in v5
.@{form-item-prefix-cls} {
// input[type=file]
.@{ant-prefix}-upload {
background: transparent;
}
.@{ant-prefix}-upload.@{ant-prefix}-upload-drag {
background: @background-color-light;
}
input[type='radio'],
input[type='checkbox'] {
width: 14px;
height: 14px;
}
// Radios and checkboxes on same line
.@{ant-prefix}-radio-inline,
.@{ant-prefix}-checkbox-inline {
display: inline-block;
margin-left: 8px;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
&:first-child {
margin-left: 0;
}
}
.@{ant-prefix}-checkbox-vertical,
.@{ant-prefix}-radio-vertical {
display: block;
}
.@{ant-prefix}-checkbox-vertical + .@{ant-prefix}-checkbox-vertical,
.@{ant-prefix}-radio-vertical + .@{ant-prefix}-radio-vertical {
margin-left: 0;
}
.@{ant-prefix}-input-number {
+ .@{form-prefix-cls}-text {
margin-left: 8px;
}
&-handler-wrap {
z-index: 2; // https://github.com/ant-design/ant-design/issues/6289
}
}
.@{ant-prefix}-select,
.@{ant-prefix}-cascader-picker {
width: 100%;
}
// Don't impact select inside input group and calendar header select
.@{ant-prefix}-picker-calendar-year-select,
.@{ant-prefix}-picker-calendar-month-select,
.@{ant-prefix}-input-group .@{ant-prefix}-select,
.@{ant-prefix}-input-group .@{ant-prefix}-cascader-picker,
.@{ant-prefix}-input-number-group .@{ant-prefix}-select,
.@{ant-prefix}-input-number-group .@{ant-prefix}-cascader-picker {
width: auto;
}
}

33
components/form/style/index.less
View File

@ -212,17 +212,38 @@
min-height: @form-item-margin-bottom;
}
.@{ant-prefix}-input-textarea-show-count {
&::after {
margin-bottom: -22px;
}
}
&-with-help &-explain {
height: auto;
min-height: @form-item-margin-bottom;
opacity: 1;
}
// ==============================================================
// = Feedback Icon =
// ==============================================================
&-feedback-icon {
font-size: @font-size-base;
text-align: center;
visibility: visible;
animation: zoomIn 0.3s @ease-out-back;
pointer-events: none;
&-success {
color: @success-color;
}
&-error {
color: @error-color;
}
&-warning {
color: @warning-color;
}
&-validating {
color: @primary-color;
}
}
}
// >>>>>>>>>> Motion <<<<<<<<<<

4
components/form/style/mixin.less
View File

@ -10,10 +10,6 @@
.@{ant-prefix}-form-item-split {
color: @text-color;
}
.@{ant-prefix}-calendar-picker-open .@{ant-prefix}-calendar-picker-input {
.active(@border-color, @hoverBorderColor, @outlineColor);
}
}
// Reset form styles

34
components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -243,6 +243,40 @@ Array [
col-4
</div>
</div>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
>
<span
class="ant-divider-inner-text"
>
sub-element align evenly
</span>
</div>,
<div
class="ant-row ant-row-space-evenly"
>
<div
class="ant-col ant-col-4"
>
col-4
</div>
<div
class="ant-col ant-col-4"
>
col-4
</div>
<div
class="ant-col ant-col-4"
>
col-4
</div>
<div
class="ant-col ant-col-4"
>
col-4
</div>
</div>,
]
`;

34
components/grid/__tests__/__snapshots__/demo.test.js.snap
View File

@ -243,6 +243,40 @@ Array [
col-4
</div>
</div>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
>
<span
class="ant-divider-inner-text"
>
sub-element align evenly
</span>
</div>,
<div
class="ant-row ant-row-space-evenly"
>
<div
class="ant-col ant-col-4"
>
col-4
</div>
<div
class="ant-col ant-col-4"
>
col-4
</div>
<div
class="ant-col ant-col-4"
>
col-4
</div>
<div
class="ant-col ant-col-4"
>
col-4
</div>
</div>,
]
`;

12
components/grid/demo/flex.md
View File

@ -9,11 +9,11 @@ title:
布局基础。
子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`，分别定义其在父节点里面的排版方式。
子元素根据不同的值 `start`、`center`、`end`、`space-between`、`space-around` 和 `space-evenly`，分别定义其在父节点里面的排版方式。
## en-US
Child elements depending on the value of the `start`,`center`, `end`,`space-between`, `space-around`, which are defined in its parent node typesetting mode.
Child elements depending on the value of the `start`, `center`, `end`, `space-between`, `space-around` and `space-evenly`, which are defined in its parent node typesetting mode.
```jsx
import { Row, Col, Divider } from 'antd';
@ -59,6 +59,14 @@ ReactDOM.render(
<Col span={4}>col-4</Col>
<Col span={4}>col-4</Col>
</Row>
<Divider orientation="left">sub-element align evenly</Divider>
<Row justify="space-evenly">
<Col span={4}>col-4</Col>
<Col span={4}>col-4</Col>
<Col span={4}>col-4</Col>
<Col span={4}>col-4</Col>
</Row>
</>,
mountNode,
);

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

@ -46,7 +46,7 @@ If the Ant Design grid layout component does not meet your needs, you can use th
| --- | --- | --- | --- | --- |
| align | Vertical alignment | `top` \| `middle` \| `bottom` | `top` | |
| gutter | Spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}. Or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` | number \| object \| array | 0 | |
| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` | `start` | |
| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` | `start` | |
| wrap | Auto wrap line | boolean | true | 4.8.0 |
### Col

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

@ -45,7 +45,7 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
| --- | --- | --- | --- | --- |
| align | 垂直对齐方式 | `top` \| `middle` \| `bottom` | `top` | |
| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 `[水平间距, 垂直间距]` | number \| object \| array | 0 | |
| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` | `start` | |
| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` | `start` | |
| wrap | 是否自动换行 | boolean | true | 4.8.0 |
### Col

2
components/grid/row.tsx
View File

@ -11,7 +11,7 @@ import ResponsiveObserve, {
import useFlexGapSupport from '../_util/hooks/useFlexGapSupport';
const RowAligns = tuple('top', 'middle', 'bottom', 'stretch');
const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between');
const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between', 'space-evenly');
export type Gutter = number | Partial<Record<Breakpoint, number>>;
export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {

5
components/grid/style/index.less
View File

@ -43,6 +43,11 @@
justify-content: space-around;
}
// x轴有间隔地均分
.@{row-prefix-cls}-space-evenly {
justify-content: space-evenly;
}
// 顶部对齐
.@{row-prefix-cls}-top {
align-items: flex-start;

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

@ -25,6 +25,7 @@ Previewable image.
| src | Image path | string | - | 4.6.0 |
| width | Image width | string \| number | - | 4.6.0 |
| onError | Load failed callback | (event: Event) => void | - | 4.12.0 |
| rootClassName | add custom className for image root DOM and preview mode root DOM | string | - | 4.20.0 |
### previewType

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

@ -26,6 +26,7 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg
| src | 图片地址 | string | - | 4.6.0 |
| width | 图像宽度 | string \| number | - | 4.6.0 |
| onError | 加载错误回调 | (event: Event) => void | - | 4.12.0 |
| rootClassName | 为展示图片根 DOM 和预览大图根 DOM 提供自定义 className | string | - | 4.20.0 |
### previewType

21
components/input-number/index.tsx
View File

@ -6,14 +6,9 @@ import * as React from 'react';
import { useContext } from 'react';
import { ConfigContext } from '../config-provider';
import SizeContext, { SizeType } from '../config-provider/SizeContext';
import { FormItemStatusContext, NoFormStatus } from '../form/context';
import { FormItemInputContext, NoFormStatus } from '../form/context';
import { cloneElement } from '../_util/reactNode';
import {
getFeedbackIcon,
getStatusClassNames,
InputStatus,
getMergedStatus,
} from '../_util/statusUtils';
import { getStatusClassNames, InputStatus, getMergedStatus } from '../_util/statusUtils';
type ValueType = string | number;
@ -71,7 +66,12 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
);
}
const { hasFeedback, status: contextStatus } = useContext(FormItemStatusContext);
const {
hasFeedback,
status: contextStatus,
isFormItemInput,
feedbackIcon,
} = useContext(FormItemInputContext);
const mergedStatus = getMergedStatus(contextStatus, customStatus);
const mergeSize = customizeSize || size;
@ -82,6 +82,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-readonly`]: readOnly,
[`${prefixCls}-borderless`]: !bordered,
[`${prefixCls}-in-form-item`]: isFormItemInput,
},
getStatusClassNames(prefixCls, mergedStatus),
className,
@ -136,9 +137,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
props.onBlur?.(event);
},
})}
{hasFeedback && (
<span className={`${prefixCls}-suffix`}>{getFeedbackIcon(prefixCls, mergedStatus)}</span>
)}
{hasFeedback && <span className={`${prefixCls}-suffix`}>{feedbackIcon}</span>}
</div>
);
}

16
components/input-number/style/status.less
View File

@ -18,22 +18,6 @@ each(@input-number-wrapper-cls, {
}
});
.@{input-number-prefix-cls}-affix-wrapper {
&-status-validating {
.@{input-number-prefix-cls}-feedback-icon {
display: inline-block;
color: @primary-color;
}
}
&-status-success {
.@{input-number-prefix-cls}-feedback-icon {
color: @success-color;
animation-name: diffZoomIn1 !important;
}
}
}
.@{input-number-prefix-cls}-group-wrapper {
&-status-error {
.group-status-color(@input-number-prefix-cls, @error-color, @error-color);

6
components/input/ClearableLabeledInput.tsx
View File

@ -3,7 +3,7 @@ import classNames from 'classnames';
import * as React from 'react';
import { DirectionType } from '../config-provider';
import { SizeType } from '../config-provider/SizeContext';
import { FormItemStatusContext, FormItemStatusContextProps } from '../form/context';
import { FormItemInputContext, FormItemStatusContextProps } from '../form/context';
import { cloneElement } from '../_util/reactNode';
import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
import { tuple } from '../_util/type';
@ -118,14 +118,14 @@ class ClearableLabeledInput extends React.Component<ClearableInputProps> {
render() {
return (
<FormItemStatusContext.Consumer>
<FormItemInputContext.Consumer>
{statusContext => {
const { prefixCls, inputType, element } = this.props;
if (inputType === ClearableInputType[0]) {
return this.renderTextAreaWithClearIcon(prefixCls, element, statusContext);
}
}}
</FormItemStatusContext.Consumer>
</FormItemInputContext.Consumer>
);
}
}

16
components/input/Group.tsx
View File

@ -1,7 +1,8 @@
import * as React from 'react';
import { useContext } from 'react';
import { useContext, useMemo } from 'react';
import classNames from 'classnames';
import { ConfigContext } from '../config-provider';
import { FormItemInputContext } from '../form/context';
export interface GroupProps {
className?: string;
@ -31,6 +32,15 @@ const Group: React.FC<GroupProps> = props => {
className,
);
const formItemContext = useContext(FormItemInputContext);
const groupFormItemContext = useMemo(
() => ({
...formItemContext,
isFormItemInput: false,
}),
[formItemContext],
);
return (
<span
className={cls}
@ -40,7 +50,9 @@ const Group: React.FC<GroupProps> = props => {
onFocus={props.onFocus}
onBlur={props.onBlur}
>
{props.children}
<FormItemInputContext.Provider value={groupFormItemContext}>
{props.children}
</FormItemInputContext.Provider>
</span>
);
};

13
components/input/Input.tsx
View File

@ -4,14 +4,9 @@ import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
import classNames from 'classnames';
import { composeRef } from 'rc-util/lib/ref';
import SizeContext, { SizeType } from '../config-provider/SizeContext';
import {
getFeedbackIcon,
getMergedStatus,
getStatusClassNames,
InputStatus,
} from '../_util/statusUtils';
import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
import { ConfigContext } from '../config-provider';
import { FormItemStatusContext, NoFormStatus } from '../form/context';
import { FormItemInputContext, NoFormStatus } from '../form/context';
import { hasPrefixSuffix } from './utils';
import devWarning from '../_util/devWarning';
@ -145,7 +140,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
const mergedSize = customSize || size;
// ===================== Status =====================
const { status: contextStatus, hasFeedback } = useContext(FormItemStatusContext);
const { status: contextStatus, hasFeedback, feedbackIcon } = useContext(FormItemInputContext);
const mergedStatus = getMergedStatus(contextStatus, customStatus);
// ===================== Focus warning =====================
@ -196,7 +191,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
const suffixNode = (hasFeedback || suffix) && (
<>
{suffix}
{hasFeedback && getFeedbackIcon(prefixCls, mergedStatus)}
{hasFeedback && feedbackIcon}
</>
);

19
components/input/TextArea.tsx
View File

@ -6,13 +6,8 @@ import omit from 'rc-util/lib/omit';
import * as React from 'react';
import { ConfigContext } from '../config-provider';
import SizeContext, { SizeType } from '../config-provider/SizeContext';
import { FormItemStatusContext } from '../form/context';
import {
getFeedbackIcon,
getStatusClassNames,
InputStatus,
getMergedStatus,
} from '../_util/statusUtils';
import { FormItemInputContext } from '../form/context';
import { getStatusClassNames, InputStatus, getMergedStatus } from '../_util/statusUtils';
import ClearableLabeledInput from './ClearableLabeledInput';
import { fixControlledValue, InputFocusOptions, resolveOnChange, triggerFocus } from './Input';
@ -79,7 +74,12 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const size = React.useContext(SizeContext);
const { status: contextStatus, hasFeedback } = React.useContext(FormItemStatusContext);
const {
status: contextStatus,
hasFeedback,
isFormItemInput,
feedbackIcon,
} = React.useContext(FormItemInputContext);
const mergedStatus = getMergedStatus(contextStatus, customStatus);
const innerRef = React.useRef<RcTextArea>(null);
@ -234,6 +234,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
{
[`${prefixCls}-textarea-rtl`]: direction === 'rtl',
[`${prefixCls}-textarea-show-count`]: showCount,
[`${prefixCls}-textarea-in-form-item`]: isFormItemInput,
},
getStatusClassNames(`${prefixCls}-textarea`, mergedStatus, hasFeedback),
className,
@ -242,7 +243,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
data-count={dataCount}
>
{textareaNode}
{hasFeedback && getFeedbackIcon(prefixCls, mergedStatus)}
{hasFeedback && <span className={`${prefixCls}-textarea-suffix`}>{feedbackIcon}</span>}
</div>
);
}

17
components/input/style/index.less
View File

@ -61,6 +61,23 @@
content: attr(data-count);
pointer-events: none;
}
&.@{input-prefix-cls}-textarea-in-form-item {
&::after {
margin-bottom: -22px;
}
}
}
&-textarea-suffix {
position: absolute;
top: 0;
right: @input-padding-horizontal-base;
bottom: 0;
z-index: 1;
display: inline-flex;
align-items: center;
margin: auto;
}
}

4
components/input/style/mixin.less
View File

@ -453,10 +453,6 @@
@hoverBorderColor: @primary-color-hover;
@outlineColor: @primary-color-outline;
) {
.@{prefix-cls}-feedback-icon {
color: @text-color;
}
.@{prefix-cls}-prefix {
color: @text-color;
}

40
components/input/style/status.less
View File

@ -18,47 +18,7 @@ each(@input-wrapper-cls, {
}
});
.@{input-prefix-cls}-textarea,
.@{input-prefix-cls}-affix-wrapper {
&-status-validating {
.@{input-prefix-cls}-feedback-icon {
display: inline-block;
color: @primary-color;
}
}
&-status-success {
.@{input-prefix-cls}-feedback-icon {
color: @success-color;
animation-name: diffZoomIn1 !important;
}
}
}
.@{input-prefix-cls}-textarea {
&-status-error {
.@{input-prefix-cls}-feedback-icon {
color: @error-color;
}
}
&-status-warning {
.@{input-prefix-cls}-feedback-icon {
color: @warning-color;
}
}
.@{input-prefix-cls}-feedback-icon {
position: absolute;
top: 0;
right: @input-padding-horizontal-base;
bottom: 0;
z-index: 1;
display: inline-flex;
align-items: center;
margin: auto;
}
&-status-error,
&-status-warning,
&-status-success,

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

@ -658,47 +658,49 @@ exports[`renders ./components/layout/demo/fixed.md extend context correctly 1`]
class="ant-layout-content site-layout"
style="padding:0 50px;margin-top:64px"
>
<div
<nav
class="ant-breadcrumb"
style="margin:16px 0"
>
<span>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<div
class="site-layout-background"
style="padding:24px;min-height:380px"
@ -2497,35 +2499,37 @@ exports[`renders ./components/layout/demo/side.md extend context correctly 1`] =
class="ant-layout-content"
style="margin:0 16px"
>
<div
<nav
class="ant-breadcrumb"
style="margin:16px 0"
>
<span>
<span
class="ant-breadcrumb-link"
>
User
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
Bill
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
User
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
Bill
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<div
class="site-layout-background"
style="padding:24px;min-height:360px"
@ -3458,47 +3462,49 @@ exports[`renders ./components/layout/demo/top.md extend context correctly 1`] =
class="ant-layout-content"
style="padding:0 50px"
>
<div
<nav
class="ant-breadcrumb"
style="margin:16px 0"
>
<span>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<div
class="site-layout-content"
>
@ -3757,47 +3763,49 @@ exports[`renders ./components/layout/demo/top-side.md extend context correctly 1
class="ant-layout-content"
style="padding:0 50px"
>
<div
<nav
class="ant-breadcrumb"
style="margin:16px 0"
>
<span>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<section
class="ant-layout site-layout-background"
style="padding:24px 0"
@ -6053,47 +6061,49 @@ exports[`renders ./components/layout/demo/top-side-2.md extend context correctly
class="ant-layout"
style="padding:0 24px 24px"
>
<div
<nav
class="ant-breadcrumb"
style="margin:16px 0"
>
<span>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<main
class="ant-layout-content site-layout-background"
style="padding:24px;margin:0;min-height:280px"

366
components/layout/__tests__/__snapshots__/demo.test.js.snap
View File

@ -381,47 +381,49 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
class="ant-layout-content site-layout"
style="padding:0 50px;margin-top:64px"
>
<div
<nav
class="ant-breadcrumb"
style="margin:16px 0"
>
<span>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<div
class="site-layout-background"
style="padding:24px;min-height:380px"
@ -1253,35 +1255,37 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
class="ant-layout-content"
style="margin:0 16px"
>
<div
<nav
class="ant-breadcrumb"
style="margin:16px 0"
>
<span>
<span
class="ant-breadcrumb-link"
>
User
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
Bill
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
User
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
Bill
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<div
class="site-layout-background"
style="padding:24px;min-height:360px"
@ -1542,47 +1546,49 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
class="ant-layout-content"
style="padding:0 50px"
>
<div
<nav
class="ant-breadcrumb"
style="margin:16px 0"
>
<span>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<div
class="site-layout-content"
>
@ -1697,47 +1703,49 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
class="ant-layout-content"
style="padding:0 50px"
>
<div
<nav
class="ant-breadcrumb"
style="margin:16px 0"
>
<span>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<section
class="ant-layout site-layout-background"
style="padding:24px 0"
@ -2255,47 +2263,49 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
class="ant-layout"
style="padding:0 24px 24px"
>
<div
<nav
class="ant-breadcrumb"
style="margin:16px 0"
>
<span>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<main
class="ant-layout-content site-layout-background"
style="padding:24px;margin:0;min-height:280px"

81
components/layout/demo/custom-trigger-debug.md
View File

@ -10,8 +10,8 @@ debug: true
修改内容前，请尝试此 Demo 查看样式是否抖动。
```jsx
import { Layout, Menu } from 'antd';
```tsx
import { Layout, Menu, MenuProps } from 'antd';
import {
TeamOutlined,
UserOutlined,
@ -23,7 +23,57 @@ import {
} from '@ant-design/icons';
const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;
const items: MenuProps['items'] = [
{
key: '1',
icon: <PieChartOutlined />,
label: 'Option 1',
},
{
key: '2',
icon: <DesktopOutlined />,
label: 'Option 2',
},
{
key: 'sub1',
icon: <UserOutlined />,
label: 'User',
children: [
{
key: '3',
label: 'Tom',
},
{
key: '4',
label: 'Bill',
},
{
key: '5',
label: 'Alex',
},
],
},
{
key: 'sub2',
icon: <TeamOutlined />,
label: 'Team',
children: [
{
key: '6',
label: 'Team 1',
},
{
key: '7',
label: 'Team 2',
},
],
},
{
key: '9',
icon: <FileOutlined />,
},
];
class SiderDemo extends React.Component {
state = {
@ -41,24 +91,13 @@ class SiderDemo extends React.Component {
<Layout>
<Sider trigger={null} collapsible collapsed={this.state.collapsed}>
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={['3']} defaultOpenKeys={['sub1']}>
<Menu.Item key="1" icon={<PieChartOutlined />}>
Option 1
</Menu.Item>
<Menu.Item key="2" icon={<DesktopOutlined />}>
Option 2
</Menu.Item>
<SubMenu key="sub1" icon={<UserOutlined />} title="User">
<Menu.Item key="3">Tom</Menu.Item>
<Menu.Item key="4">Bill</Menu.Item>
<Menu.Item key="5">Alex</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
<Menu.Item key="6">Team 1</Menu.Item>
<Menu.Item key="8">Team 2</Menu.Item>
</SubMenu>
<Menu.Item key="9" icon={<FileOutlined />} />
</Menu>
<Menu
theme="dark"
mode="inline"
defaultSelectedKeys={['3']}
defaultOpenKeys={['sub1']}
items={items}
/>
</Sider>
<Layout>
<Header className="site-layout-background" style={{ padding: 0 }}>

33
components/layout/demo/custom-trigger.md
View File

@ -41,17 +41,28 @@ class SiderDemo extends React.Component {
<Layout>
<Sider trigger={null} collapsible collapsed={this.state.collapsed}>
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
<Menu.Item key="1" icon={<UserOutlined />}>
nav 1
</Menu.Item>
<Menu.Item key="2" icon={<VideoCameraOutlined />}>
nav 2
</Menu.Item>
<Menu.Item key="3" icon={<UploadOutlined />}>
nav 3
</Menu.Item>
</Menu>
<Menu
theme="dark"
mode="inline"
defaultSelectedKeys={['1']}
items={[
{
key: '1',
icon: <UserOutlined />,
label: 'nav 1',
},
{
key: '2',
icon: <VideoCameraOutlined />,
label: 'nav 2',
},
{
key: '3',
icon: <UploadOutlined />,
label: 'nav 3',
},
]}
/>
</Sider>
<Layout className="site-layout">
<Header className="site-layout-background" style={{ padding: 0 }}>

46
components/layout/demo/fixed-sider.md
View File

@ -14,8 +14,8 @@ title:
When dealing with long content, a fixed sider can provide a better user experience.
```jsx
import { Layout, Menu } from 'antd';
```tsx
import { Layout, Menu, MenuProps } from 'antd';
import {
AppstoreOutlined,
BarChartOutlined,
@ -29,6 +29,21 @@ import {
const { Header, Content, Footer, Sider } = Layout;
const items: MenuProps['items'] = [
UserOutlined,
VideoCameraOutlined,
UploadOutlined,
BarChartOutlined,
CloudOutlined,
AppstoreOutlined,
TeamOutlined,
ShopOutlined,
].map((icon, index) => ({
key: String(index + 1),
icon: React.createElement(icon),
label: `nav ${index + 1}`,
}));
ReactDOM.render(
<Layout hasSider>
<Sider
@ -42,32 +57,7 @@ ReactDOM.render(
}}
>
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
<Menu.Item key="1" icon={<UserOutlined />}>
nav 1
</Menu.Item>
<Menu.Item key="2" icon={<VideoCameraOutlined />}>
nav 2
</Menu.Item>
<Menu.Item key="3" icon={<UploadOutlined />}>
nav 3
</Menu.Item>
<Menu.Item key="4" icon={<BarChartOutlined />}>
nav 4
</Menu.Item>
<Menu.Item key="5" icon={<CloudOutlined />}>
nav 5
</Menu.Item>
<Menu.Item key="6" icon={<AppstoreOutlined />}>
nav 6
</Menu.Item>
<Menu.Item key="7" icon={<TeamOutlined />}>
nav 7
</Menu.Item>
<Menu.Item key="8" icon={<ShopOutlined />}>
nav 8
</Menu.Item>
</Menu>
<Menu theme="dark" mode="inline" defaultSelectedKeys={['4']} items={items} />
</Sider>
<Layout className="site-layout" style={{ marginLeft: 200 }}>
<Header className="site-layout-background" style={{ padding: 0 }} />

16
components/layout/demo/fixed.md
View File

@ -14,7 +14,7 @@ title:
Fixed Header is generally used to fix the top navigation to facilitate page switching.
```jsx
```tsx
import { Layout, Menu, Breadcrumb } from 'antd';
const { Header, Content, Footer } = Layout;
@ -23,11 +23,15 @@ ReactDOM.render(
<Layout>
<Header style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
<div className="logo" />
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
<Menu.Item key="1">nav 1</Menu.Item>
<Menu.Item key="2">nav 2</Menu.Item>
<Menu.Item key="3">nav 3</Menu.Item>
</Menu>
<Menu
theme="dark"
mode="horizontal"
defaultSelectedKeys={['2']}
items={new Array(3).fill(null).map((_, index) => ({
key: String(index + 1),
label: `nav ${index + 1}`,
}))}
/>
</Header>
<Content className="site-layout" style={{ padding: '0 50px', marginTop: 64 }}>
<Breadcrumb style={{ margin: '16px 0' }}>

26
components/layout/demo/responsive.md
View File

@ -36,20 +36,18 @@ ReactDOM.render(
}}
>
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
<Menu.Item key="1" icon={<UserOutlined />}>
nav 1
</Menu.Item>
<Menu.Item key="2" icon={<VideoCameraOutlined />}>
nav 2
</Menu.Item>
<Menu.Item key="3" icon={<UploadOutlined />}>
nav 3
</Menu.Item>
<Menu.Item key="4" icon={<UserOutlined />}>
nav 4
</Menu.Item>
</Menu>
<Menu
theme="dark"
mode="inline"
defaultSelectedKeys={['4']}
items={[UserOutlined, VideoCameraOutlined, UploadOutlined, UserOutlined].map(
(icon, index) => ({
key: String(index + 1),
icon: React.createElement(icon),
label: `nav ${index + 1}`,
}),
)}
/>
</Sider>
<Layout>
<Header className="site-layout-sub-header-background" style={{ padding: 0 }} />

56
components/layout/demo/side.md
View File

@ -22,8 +22,8 @@ Generally, the mainnav is placed on the left side of the page, and the secondary
The level of the aside navigation is scalable. The first, second, and third level navigations could be present more fluently and relevantly, and aside navigation can be fixed, allowing the user to quickly switch and spot the current position, improving the user experience. However, this navigation occupies some horizontal space of the contents.
```jsx
import { Layout, Menu, Breadcrumb } from 'antd';
```tsx
import { Layout, Menu, Breadcrumb, MenuProps } from 'antd';
import {
DesktopOutlined,
PieChartOutlined,
@ -33,14 +33,41 @@ import {
} from '@ant-design/icons';
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;
type MenuItem = Required<MenuProps>['items'][number];
function getItem(
label: React.ReactNode,
key: React.Key,
icon?: React.ReactNode,
children?: MenuItem[],
): MenuItem {
return {
key,
icon,
children,
label,
} as MenuItem;
}
const items: MenuItem[] = [
getItem('Option 1', '1', <PieChartOutlined />),
getItem('Option 2', '2', <DesktopOutlined />),
getItem('User', 'sub1', <UserOutlined />, [
getItem('Tom', '3'),
getItem('Bill', '4'),
getItem('Alex', '5'),
]),
getItem('Team', 'sub2', <TeamOutlined />, [getItem('Team 1', '6'), getItem('Team 2', '8')]),
getItem('Files', '9', <FileOutlined />),
];
class SiderDemo extends React.Component {
state = {
collapsed: false,
};
onCollapse = collapsed => {
onCollapse = (collapsed: boolean) => {
console.log(collapsed);
this.setState({ collapsed });
};
@ -51,26 +78,7 @@ class SiderDemo extends React.Component {
<Layout style={{ minHeight: '100vh' }}>
<Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
<div className="logo" />
<Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
<Menu.Item key="1" icon={<PieChartOutlined />}>
Option 1
</Menu.Item>
<Menu.Item key="2" icon={<DesktopOutlined />}>
Option 2
</Menu.Item>
<SubMenu key="sub1" icon={<UserOutlined />} title="User">
<Menu.Item key="3">Tom</Menu.Item>
<Menu.Item key="4">Bill</Menu.Item>
<Menu.Item key="5">Alex</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
<Menu.Item key="6">Team 1</Menu.Item>
<Menu.Item key="8">Team 2</Menu.Item>
</SubMenu>
<Menu.Item key="9" icon={<FileOutlined />}>
Files
</Menu.Item>
</Menu>
<Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
</Sider>
<Layout className="site-layout">
<Header className="site-layout-background" style={{ padding: 0 }} />

58
components/layout/demo/top-side-2.md
View File

@ -13,22 +13,42 @@ title:
Both the top navigation and the sidebar, commonly used in application site.
```jsx
import { Layout, Menu, Breadcrumb } from 'antd';
```tsx
import { Layout, Menu, Breadcrumb, MenuProps } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
const items1: MenuProps['items'] = ['1', '2', '3'].map(key => ({
key,
label: `nav ${key}`,
}));
const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOutlined].map(
(icon, index) => {
const key = String(index + 1);
return {
key: `sub${key}`,
icon: React.createElement(icon),
label: `subnav ${key}`,
children: new Array(4).fill(null).map((_, j) => {
const subKey = index * 4 + j + 1;
return {
key: subKey,
label: `option${subKey}`,
};
}),
};
},
);
ReactDOM.render(
<Layout>
<Header className="header">
<div className="logo" />
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
<Menu.Item key="1">nav 1</Menu.Item>
<Menu.Item key="2">nav 2</Menu.Item>
<Menu.Item key="3">nav 3</Menu.Item>
</Menu>
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} />
</Header>
<Layout>
<Sider width={200} className="site-layout-background">
@ -37,26 +57,8 @@ ReactDOM.render(
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
style={{ height: '100%', borderRight: 0 }}
>
<SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1">
<Menu.Item key="1">option1</Menu.Item>
<Menu.Item key="2">option2</Menu.Item>
<Menu.Item key="3">option3</Menu.Item>
<Menu.Item key="4">option4</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
<Menu.Item key="5">option5</Menu.Item>
<Menu.Item key="6">option6</Menu.Item>
<Menu.Item key="7">option7</Menu.Item>
<Menu.Item key="8">option8</Menu.Item>
</SubMenu>
<SubMenu key="sub3" icon={<NotificationOutlined />} title="subnav 3">
<Menu.Item key="9">option9</Menu.Item>
<Menu.Item key="10">option10</Menu.Item>
<Menu.Item key="11">option11</Menu.Item>
<Menu.Item key="12">option12</Menu.Item>
</SubMenu>
</Menu>
items={items2}
/>
</Sider>
<Layout style={{ padding: '0 24px 24px' }}>
<Breadcrumb style={{ margin: '16px 0' }}>

58
components/layout/demo/top-side.md
View File

@ -13,22 +13,42 @@ title:
Both the top navigation and the sidebar, commonly used in documentation site.
```jsx
import { Layout, Menu, Breadcrumb } from 'antd';
```tsx
import { Layout, Menu, Breadcrumb, MenuProps } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
const { SubMenu } = Menu;
const { Header, Content, Footer, Sider } = Layout;
const items1: MenuProps['items'] = ['1', '2', '3'].map(key => ({
key,
label: `nav ${key}`,
}));
const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOutlined].map(
(icon, index) => {
const key = String(index + 1);
return {
key: `sub${key}`,
icon: React.createElement(icon),
label: `subnav ${key}`,
children: new Array(4).fill(null).map((_, j) => {
const subKey = index * 4 + j + 1;
return {
key: subKey,
label: `option${subKey}`,
};
}),
};
},
);
ReactDOM.render(
<Layout>
<Header className="header">
<div className="logo" />
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
<Menu.Item key="1">nav 1</Menu.Item>
<Menu.Item key="2">nav 2</Menu.Item>
<Menu.Item key="3">nav 3</Menu.Item>
</Menu>
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} />
</Header>
<Content style={{ padding: '0 50px' }}>
<Breadcrumb style={{ margin: '16px 0' }}>
@ -43,26 +63,8 @@ ReactDOM.render(
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
style={{ height: '100%' }}
>
<SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1">
<Menu.Item key="1">option1</Menu.Item>
<Menu.Item key="2">option2</Menu.Item>
<Menu.Item key="3">option3</Menu.Item>
<Menu.Item key="4">option4</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
<Menu.Item key="5">option5</Menu.Item>
<Menu.Item key="6">option6</Menu.Item>
<Menu.Item key="7">option7</Menu.Item>
<Menu.Item key="8">option8</Menu.Item>
</SubMenu>
<SubMenu key="sub3" icon={<NotificationOutlined />} title="subnav 3">
<Menu.Item key="9">option9</Menu.Item>
<Menu.Item key="10">option10</Menu.Item>
<Menu.Item key="11">option11</Menu.Item>
<Menu.Item key="12">option12</Menu.Item>
</SubMenu>
</Menu>
items={items2}
/>
</Sider>
<Content style={{ padding: '0 24px', minHeight: 280 }}>Content</Content>
</Layout>

14
components/layout/demo/top.md
View File

@ -28,12 +28,18 @@ ReactDOM.render(
<Layout className="layout">
<Header>
<div className="logo" />
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
{new Array(15).fill(null).map((_, index) => {
<Menu
theme="dark"
mode="horizontal"
defaultSelectedKeys={['2']}
items={new Array(15).fill(null).map((_, index) => {
const key = index + 1;
return <Menu.Item key={key}>{`nav ${key}`}</Menu.Item>;
return {
key,
label: `nav ${key}`,
};
})}
</Menu>
/>
</Header>
<Content style={{ padding: '0 50px' }}>
<Breadcrumb style={{ margin: '16px 0' }}>

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

@ -1131,6 +1131,8 @@ exports[`renders ./components/list/demo/loadmore.md extend context correctly 1`]
>
<div>
<div
aria-busy="true"
aria-live="polite"
class="ant-spin ant-spin-spinning"
>
<span

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

@ -1131,6 +1131,8 @@ exports[`renders ./components/list/demo/loadmore.md correctly 1`] = `
>
<div>
<div
aria-busy="true"
aria-live="polite"
class="ant-spin ant-spin-spinning"
>
<span

17
components/mentions/index.tsx
View File

@ -5,13 +5,8 @@ import { MentionsProps as RcMentionsProps } from 'rc-mentions/lib/Mentions';
import { composeRef } from 'rc-util/lib/ref';
import Spin from '../spin';
import { ConfigContext } from '../config-provider';
import { FormItemStatusContext } from '../form/context';
import {
getFeedbackIcon,
getMergedStatus,
getStatusClassNames,
InputStatus,
} from '../_util/statusUtils';
import { FormItemInputContext } from '../form/context';
import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
export const { Option } = RcMentions;
@ -70,7 +65,11 @@ const InternalMentions: React.ForwardRefRenderFunction<unknown, MentionProps> =
const innerRef = React.useRef<HTMLElement>();
const mergedRef = composeRef(ref, innerRef);
const { getPrefixCls, renderEmpty, direction } = React.useContext(ConfigContext);
const { status: contextStatus, hasFeedback } = React.useContext(FormItemStatusContext);
const {
status: contextStatus,
hasFeedback,
feedbackIcon,
} = React.useContext(FormItemInputContext);
const mergedStatus = getMergedStatus(contextStatus, customStatus);
const onFocus: React.FocusEventHandler<HTMLTextAreaElement> = (...args) => {
@ -154,7 +153,7 @@ const InternalMentions: React.ForwardRefRenderFunction<unknown, MentionProps> =
)}
>
{mentions}
{getFeedbackIcon(prefixCls, mergedStatus)}
<span className={`${prefixCls}-suffix`}>{feedbackIcon}</span>
</div>
);
}

11
components/mentions/style/index.less
View File

@ -163,6 +163,17 @@
}
}
}
&-suffix {
position: absolute;
top: 0;
right: @input-padding-horizontal-base;
bottom: 0;
z-index: 1;
display: inline-flex;
align-items: center;
margin: auto;
}
}
@import './rtl';

27
components/mentions/style/status.less
View File

@ -13,31 +13,4 @@
.status-color(@mention-prefix-cls, @warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline);
.status-color-common(@input-prefix-cls, @warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline);
}
&-affix-wrapper {
position: relative;
.@{mention-prefix-cls}-feedback-icon {
position: absolute;
top: 0;
right: @input-padding-horizontal-base;
bottom: 0;
z-index: 1;
display: inline-flex;
align-items: center;
margin: auto;
}
&-status-error {
.@{mention-prefix-cls}-feedback-icon {
color: @error-color;
}
}
&-has-warning {
.@{mention-prefix-cls}-feedback-icon {
color: @warning-color;
}
}
}
}

12
components/menu/__tests__/index.test.js
View File

@ -871,4 +871,16 @@ describe('Menu', () => {
expect(wrapper.find('li.ant-menu-item-divider').length).toBe(2);
expect(wrapper.find('li.ant-menu-item-divider-dashed').length).toBe(1);
});
it('should support ref', async () => {
const ref = React.createRef();
const wrapper = mount(
<Menu ref={ref}>
<SubMenu key="sub1" title="Navigation One">
<Menu.Item key="1">Option 1</Menu.Item>
</SubMenu>
</Menu>,
);
expect(ref.current?.menu?.list).toBe(wrapper.find('ul').first().getDOMNode());
});
});

102
components/menu/demo/horizontal.md
View File

@ -13,51 +13,77 @@ title:
Horizontal top navigation menu.
```jsx
import { Menu } from 'antd';
```tsx
import { Menu, MenuProps } from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
const { SubMenu } = Menu;
const items: MenuProps['items'] = [
{
label: 'Navigation One',
key: 'mail',
icon: <MailOutlined />,
},
{
label: 'Navigation Two',
key: 'app',
icon: <AppstoreOutlined />,
disabled: true,
},
{
label: 'Navigation Three - Submenu',
key: 'SubMenu',
icon: <SettingOutlined />,
children: [
{
type: 'group',
label: 'Item 1',
children: [
{
label: 'Option 1',
key: 'setting:1',
},
{
label: 'Option 2',
key: 'setting:2',
},
],
},
{
type: 'group',
label: 'Item 2',
children: [
{
label: 'Option 3',
key: 'setting:3',
},
{
label: 'Option 4',
key: 'setting:4',
},
],
},
],
},
{
label: (
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">
Navigation Four - Link
</a>
),
key: 'alipay',
},
];
class App extends React.Component {
state = {
current: 'mail',
};
const App = () => {
const [current, setCurrent] = React.useState('mail');
handleClick = e => {
const onClick: MenuProps['onClick'] = e => {
console.log('click ', e);
this.setState({ current: e.key });
setCurrent(e.key);
};
render() {
const { current } = this.state;
return (
<Menu onClick={this.handleClick} selectedKeys={[current]} mode="horizontal">
<Menu.Item key="mail" icon={<MailOutlined />}>
Navigation One
</Menu.Item>
<Menu.Item key="app" disabled icon={<AppstoreOutlined />}>
Navigation Two
</Menu.Item>
<SubMenu key="SubMenu" icon={<SettingOutlined />} title="Navigation Three - Submenu">
<Menu.ItemGroup title="Item 1">
<Menu.Item key="setting:1">Option 1</Menu.Item>
<Menu.Item key="setting:2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup title="Item 2">
<Menu.Item key="setting:3">Option 3</Menu.Item>
<Menu.Item key="setting:4">Option 4</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
<Menu.Item key="alipay">
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">
Navigation Four - Link
</a>
</Menu.Item>
</Menu>
);
}
}
return <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />;
};
ReactDOM.render(<App />, mountNode);
```

115
components/menu/demo/inline-collapsed.md
View File

@ -17,8 +17,8 @@ Inline menu could be collapsed.
Here is [a complete demo](/components/layout/#components-layout-demo-side) with sider layout.
```jsx
import { Menu, Button } from 'antd';
```tsx
import { Menu, Button, MenuProps } from 'antd';
import {
AppstoreOutlined,
MenuUnfoldOutlined,
@ -29,60 +29,67 @@ import {
MailOutlined,
} from '@ant-design/icons';
const { SubMenu } = Menu;
type MenuItem = Required<MenuProps>['items'][number];
class App extends React.Component {
state = {
collapsed: false,
};
toggleCollapsed = () => {
this.setState({
collapsed: !this.state.collapsed,
});
};
render() {
return (
<div style={{ width: 256 }}>
<Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}>
{React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
</Button>
<Menu
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode="inline"
theme="dark"
inlineCollapsed={this.state.collapsed}
>
<Menu.Item key="1" icon={<PieChartOutlined />}>
Option 1
</Menu.Item>
<Menu.Item key="2" icon={<DesktopOutlined />}>
Option 2
</Menu.Item>
<Menu.Item key="3" icon={<ContainerOutlined />}>
Option 3
</Menu.Item>
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</SubMenu>
</Menu>
</div>
);
}
function getItem(
label: React.ReactNode,
key: React.Key,
icon?: React.ReactNode,
children?: MenuItem[],
type?: 'group',
): MenuItem {
return {
key,
icon,
children,
label,
type,
} as MenuItem;
}
const items: MenuItem[] = [
getItem('Option 1', '1', <PieChartOutlined />),
getItem('Option 2', '2', <DesktopOutlined />),
getItem('Option 3', '3', <ContainerOutlined />),
getItem('Navigation One', 'sub1', <MailOutlined />, [
getItem('Option 5', '5'),
getItem('Option 6', '6'),
getItem('Option 7', '7'),
getItem('Option 8', '8'),
]),
getItem('Navigation Two', 'sub2', <AppstoreOutlined />, [
getItem('Option 9', '9'),
getItem('Option 10', '10'),
getItem('Submenu', 'sub3', null, [getItem('Option 11', '11'), getItem('Option 12', '12')]),
]),
];
const App = () => {
const [collapsed, setCollapsed] = React.useState(false);
const toggleCollapsed = () => {
setCollapsed(!collapsed);
};
return (
<div style={{ width: 256 }}>
<Button type="primary" onClick={toggleCollapsed} style={{ marginBottom: 16 }}>
{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
</Button>
<Menu
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode="inline"
theme="dark"
inlineCollapsed={collapsed}
items={items}
/>
</div>
);
};
ReactDOM.render(<App />, mountNode);
```

94
components/menu/demo/inline.md
View File

@ -13,54 +13,64 @@ title:
Vertical menu with inline submenus.
```jsx
import { Menu } from 'antd';
```tsx
import { Menu, MenuProps } from 'antd';
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
const { SubMenu } = Menu;
type MenuItem = Required<MenuProps>['items'][number];
class Sider extends React.Component {
handleClick = e => {
function getItem(
label: React.ReactNode,
key: React.Key,
icon?: React.ReactNode,
children?: MenuItem[],
type?: 'group',
): MenuItem {
return {
key,
icon,
children,
label,
type,
} as MenuItem;
}
const items: MenuProps['items'] = [
getItem('Navigation One', 'sub1', <MailOutlined />, [
getItem('Item 1', 'g1', null, [getItem('Option 1', '1'), getItem('Option 2', '2')], 'group'),
getItem('Item 2', 'g2', null, [getItem('Option 3', '3'), getItem('Option 4', '4')], 'group'),
]),
getItem('Navigation Two', 'sub2', <AppstoreOutlined />, [
getItem('Option 5', '5'),
getItem('Option 6', '6'),
getItem('Submenu', 'sub3', null, [getItem('Option 7', '7'), getItem('Option 8', '8')]),
]),
getItem('Navigation Three', 'sub4', <SettingOutlined />, [
getItem('Option 9', '9'),
getItem('Option 10', '10'),
getItem('Option 11', '11'),
getItem('Option 12', '12'),
]),
];
const Sider = () => {
const onClick: MenuProps['onClick'] = e => {
console.log('click ', e);
};
render() {
return (
<Menu
onClick={this.handleClick}
style={{ width: 256 }}
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode="inline"
>
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
<Menu.ItemGroup key="g1" title="Item 1">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup key="g2" title="Item 2">
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</Menu>
);
}
}
return (
<Menu
onClick={onClick}
style={{ width: 256 }}
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode="inline"
items={items}
/>
);
};
ReactDOM.render(<Sider />, mountNode);
```

75
components/menu/demo/sider-current.md
View File

@ -13,11 +13,47 @@ title:
Click the menu and you will see that all the other menus gets collapsed to keep the entire menu compact.
```jsx
import { Menu } from 'antd';
```tsx
import { Menu, MenuProps } from 'antd';
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
const { SubMenu } = Menu;
type MenuItem = Required<MenuProps>['items'][number];
function getItem(
label: React.ReactNode,
key: React.Key,
icon?: React.ReactNode,
children?: MenuItem[],
type?: 'group',
): MenuItem {
return {
key,
icon,
children,
label,
type,
} as MenuItem;
}
const items: MenuItem[] = [
getItem('Navigation One', 'sub1', <MailOutlined />, [
getItem('Option 1', '1'),
getItem('Option 2', '2'),
getItem('Option 3', '3'),
getItem('Option 4', '4'),
]),
getItem('Navigation Two', 'sub2', <AppstoreOutlined />, [
getItem('Option 5', '5'),
getItem('Option 6', '6'),
getItem('Submenu', 'sub3', null, [getItem('Option 7', '7'), getItem('Option 8', '8')]),
]),
getItem('Navigation Three', 'sub4', <SettingOutlined />, [
getItem('Option 9', '9'),
getItem('Option 10', '10'),
getItem('Option 11', '11'),
getItem('Option 12', '12'),
]),
];
// submenu keys of first level
const rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];
@ -25,9 +61,9 @@ const rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];
const Sider = () => {
const [openKeys, setOpenKeys] = React.useState(['sub1']);
const onOpenChange = keys => {
const onOpenChange: MenuProps['onOpenChange'] = keys => {
const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1);
if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
if (rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
setOpenKeys(keys);
} else {
setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
@ -35,28 +71,13 @@ const Sider = () => {
};
return (
<Menu mode="inline" openKeys={openKeys} onOpenChange={onOpenChange} style={{ width: 256 }}>
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</Menu>
<Menu
mode="inline"
openKeys={openKeys}
onOpenChange={onOpenChange}
style={{ width: 256 }}
items={items}
/>
);
};

155
components/menu/demo/style-debug.md
View File

@ -19,91 +19,92 @@ import * as React from 'react';
import { Menu, MenuProps, Switch } from 'antd';
import { MailOutlined, AppstoreOutlined } from '@ant-design/icons';
const { SubMenu } = Menu;
type MenuItem = Required<MenuProps>['items'][number];
interface DemoState {
theme: 'light' | 'dark';
current: string;
function getItem(
label: React.ReactNode,
key?: React.Key | null,
icon?: React.ReactNode,
children?: MenuItem[],
): MenuItem {
return {
key,
icon,
children,
label,
} as MenuItem;
}
class Demo extends React.Component<{}, DemoState> {
state: DemoState = {
theme: 'dark',
current: '1',
const items: MenuItem[] = [
getItem('Navigation One Long Long Long Long', 'sub1', <MailOutlined />, [
getItem('Option 1', '1'),
getItem('Option 2', '2'),
getItem('Option 3', '3'),
getItem('Option 4', '4'),
]),
getItem('Navigation Two', 'sub2', <AppstoreOutlined />, [
getItem('Option 5', '5'),
getItem('Option 6', '6'),
getItem('Submenu', 'sub3', null, [getItem('Option 7', '7'), getItem('Option 8', '8')]),
]),
getItem('Option 11', '11'),
getItem('Option 12', '12'),
];
const Demo = () => {
const [theme, setTheme] = React.useState<'dark' | 'light'>('dark');
const [current, setCurrent] = React.useState('1');
const changeTheme = (value: boolean) => {
setTheme(value ? 'dark' : 'light');
};
changeTheme = (value: boolean) => {
this.setState({
theme: value ? 'dark' : 'light',
});
};
handleClick: MenuProps['onClick'] = e => {
const onClick: MenuProps['onClick'] = e => {
console.log('click ', e);
this.setState({
current: e.key,
});
setCurrent(e.key);
};
render() {
return (
<>
<Switch
checked={this.state.theme === 'dark'}
onChange={this.changeTheme}
checkedChildren="Dark"
unCheckedChildren="Light"
/>
<br />
<br />
<Menu
theme={this.state.theme}
onClick={this.handleClick}
selectedKeys={[this.state.current]}
mode="inline"
inlineCollapsed
// Test only. Remove in future.
_internalRenderMenuItem={node =>
React.cloneElement(node, {
style: {
...node.props.style,
textDecoration: 'underline',
},
})
}
// Test only. Remove in future.
_internalRenderSubMenuItem={node =>
React.cloneElement(node, {
style: {
...node.props.style,
background: 'rgba(255,255,255,0.3)',
},
})
}
// Test only. Remove in future.
_internalDisableMenuItemTitleTooltip
>
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One Long Long Long Long">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</Menu>
</>
);
}
}
return (
<>
<Switch
checked={theme === 'dark'}
onChange={changeTheme}
checkedChildren="Dark"
unCheckedChildren="Light"
/>
<br />
<br />
<Menu
theme={theme}
onClick={onClick}
selectedKeys={[current]}
mode="inline"
items={items}
inlineCollapsed
// Test only. Remove in future.
_internalRenderMenuItem={node =>
React.cloneElement(node, {
style: {
...node.props.style,
textDecoration: 'underline',
},
})
}
// Test only. Remove in future.
_internalRenderSubMenuItem={node =>
React.cloneElement(node, {
style: {
...node.props.style,
background: 'rgba(255,255,255,0.3)',
},
})
}
// Test only. Remove in future.
_internalDisableMenuItemTitleTooltip
/>
</>
);
};
ReactDOM.render(<Demo />, mountNode);
```

53
components/menu/demo/submenu-theme.md
View File

@ -13,24 +13,52 @@ title:
The Sub-menu will inherit the theme of `Menu`, but you can override this at the `SubMenu` level via the `theme` prop.
```jsx
import { Menu, Switch } from 'antd';
```tsx
import { Menu, Switch, MenuProps } from 'antd';
import { MailOutlined } from '@ant-design/icons';
const { SubMenu } = Menu;
type MenuItem = Required<MenuProps>['items'][number];
function getItem(
label: React.ReactNode,
key?: React.Key | null,
icon?: React.ReactNode,
children?: MenuItem[],
theme?: 'light' | 'dark',
): MenuItem {
return {
key,
icon,
children,
label,
theme,
} as MenuItem;
}
const SubMenuTheme = () => {
const [theme, setTheme] = React.useState('light');
const [theme, setTheme] = React.useState<'light' | 'dark'>('light');
const [current, setCurrent] = React.useState('1');
const changeTheme = value => {
const changeTheme = (value: boolean) => {
setTheme(value ? 'dark' : 'light');
};
const handleClick = e => {
const onClick: MenuProps['onClick'] = e => {
setCurrent(e.key);
};
const items: MenuItem[] = [
getItem(
'Navigation One',
'sub1',
<MailOutlined />,
[getItem('Option 1', '1'), getItem('Option 2', '2'), getItem('Option 3', '3')],
theme,
),
getItem('Option 5', '5'),
getItem('Option 6', '6'),
];
return (
<>
<Switch
@ -42,21 +70,14 @@ const SubMenuTheme = () => {
<br />
<br />
<Menu
onClick={handleClick}
onClick={onClick}
style={{ width: 256 }}
defaultOpenKeys={['sub1']}
selectedKeys={[current]}
mode="vertical"
theme="dark"
>
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One" theme={theme}>
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
<Menu.Item key="3">Option 3</Menu.Item>
</SubMenu>
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
</Menu>
items={items}
/>
</>
);
};

80
components/menu/demo/switch-mode.md
View File

@ -13,8 +13,8 @@ title:
Show the dynamic switching mode (between `inline` and `vertical`).
```jsx
import { Menu, Switch, Divider } from 'antd';
```tsx
import { Menu, Switch, Divider, MenuProps } from 'antd';
import {
MailOutlined,
CalendarOutlined,
@ -23,17 +23,54 @@ import {
LinkOutlined,
} from '@ant-design/icons';
const { SubMenu } = Menu;
type MenuItem = Required<MenuProps>['items'][number];
function getItem(
label: React.ReactNode,
key?: React.Key | null,
icon?: React.ReactNode,
children?: MenuItem[],
): MenuItem {
return {
key,
icon,
children,
label,
} as MenuItem;
}
const items: MenuItem[] = [
getItem('Navigation One', '1', <MailOutlined />),
getItem('Navigation Two', '2', <CalendarOutlined />),
getItem('Navigation Two', 'sub1', <AppstoreOutlined />, [
getItem('Option 3', '3'),
getItem('Option 4', '4'),
getItem('Submenu', 'sub1-2', null, [getItem('Option 5', '5'), getItem('Option 6', '6')]),
]),
getItem('Navigation Three', 'sub2', <SettingOutlined />, [
getItem('Option 7', '7'),
getItem('Option 8', '8'),
getItem('Option 9', '9'),
getItem('Option 10', '10'),
]),
getItem(
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">
Ant Design
</a>,
'link',
<LinkOutlined />,
),
];
const Demo = () => {
const [mode, setMode] = React.useState('inline');
const [theme, setTheme] = React.useState('light');
const [mode, setMode] = React.useState<'inline' | 'vertical'>('inline');
const [theme, setTheme] = React.useState<'dark' | 'light'>('light');
const changeMode = value => {
const changeMode = (value: boolean) => {
setMode(value ? 'vertical' : 'inline');
};
const changeTheme = value => {
const changeTheme = (value: boolean) => {
setTheme(value ? 'dark' : 'light');
};
@ -50,33 +87,8 @@ const Demo = () => {
defaultOpenKeys={['sub1']}
mode={mode}
theme={theme}
>
<Menu.Item key="1" icon={<MailOutlined />}>
Navigation One
</Menu.Item>
<Menu.Item key="2" icon={<CalendarOutlined />}>
Navigation Two
</Menu.Item>
<SubMenu key="sub1" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
<SubMenu key="sub1-2" title="Submenu">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub2" icon={<SettingOutlined />} title="Navigation Three">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
</SubMenu>
<Menu.Item key="link" icon={<LinkOutlined />}>
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">
Ant Design
</a>
</Menu.Item>
</Menu>
items={items}
/>
</>
);
};

140
components/menu/demo/theme.md
View File

@ -13,75 +13,85 @@ title:
There are two built-in themes: `light` and `dark`. The default value is `light`.
```jsx
import { Menu, Switch } from 'antd';
```tsx
import { Menu, Switch, MenuProps } from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
const { SubMenu } = Menu;
type MenuItem = Required<MenuProps>['items'][number];
class Sider extends React.Component {
state = {
theme: 'dark',
current: '1',
};
changeTheme = value => {
this.setState({
theme: value ? 'dark' : 'light',
});
};
handleClick = e => {
console.log('click ', e);
this.setState({
current: e.key,
});
};
render() {
return (
<>
<Switch
checked={this.state.theme === 'dark'}
onChange={this.changeTheme}
checkedChildren="Dark"
unCheckedChildren="Light"
/>
<br />
<br />
<Menu
theme={this.state.theme}
onClick={this.handleClick}
style={{ width: 256 }}
defaultOpenKeys={['sub1']}
selectedKeys={[this.state.current]}
mode="inline"
>
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</Menu>
</>
);
}
function getItem(
label: React.ReactNode,
key?: React.Key | null,
icon?: React.ReactNode,
children?: MenuItem[],
type?: 'group',
): MenuItem {
return {
key,
icon,
children,
label,
type,
} as MenuItem;
}
const items: MenuItem[] = [
getItem('Navigation One', 'sub1', <MailOutlined />, [
getItem('Option 1', '1'),
getItem('Option 2', '2'),
getItem('Option 3', '3'),
getItem('Option 4', '4'),
]),
getItem('Navigation Two', 'sub2', <AppstoreOutlined />, [
getItem('Option 5', '5'),
getItem('Option 6', '6'),
getItem('Submenu', 'sub3', null, [getItem('Option 7', '7'), getItem('Option 8', '8')]),
]),
getItem('Navigation Three', 'sub4', <SettingOutlined />, [
getItem('Option 9', '9'),
getItem('Option 10', '10'),
getItem('Option 11', '11'),
getItem('Option 12', '12'),
]),
];
const Sider = () => {
const [theme, setTheme] = React.useState<'dark' | 'light'>('dark');
const [current, setCurrent] = React.useState('1');
const changeTheme = (value: boolean) => {
setTheme(value ? 'dark' : 'light');
};
const onClick: MenuProps['onClick'] = e => {
console.log('click ', e);
setCurrent(e.key);
};
return (
<>
<Switch
checked={theme === 'dark'}
onChange={changeTheme}
checkedChildren="Dark"
unCheckedChildren="Light"
/>
<br />
<br />
<Menu
theme={theme}
onClick={onClick}
style={{ width: 256 }}
defaultOpenKeys={['sub1']}
selectedKeys={[current]}
mode="inline"
items={items}
/>
</>
);
};
ReactDOM.render(<Sider />, mountNode);
```

73
components/menu/demo/vertical.md
View File

@ -13,43 +13,54 @@ title:
Submenus open as pop-ups.
```jsx
import { Menu } from 'antd';
```tsx
import { Menu, MenuProps } from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
const { SubMenu } = Menu;
type MenuItem = Required<MenuProps>['items'][number];
function handleClick(e) {
console.log('click', e);
function getItem(
label: React.ReactNode,
key?: React.Key | null,
icon?: React.ReactNode,
children?: MenuItem[],
type?: 'group',
): MenuItem {
return {
key,
icon,
children,
label,
type,
} as MenuItem;
}
const items: MenuItem[] = [
getItem('Navigation One', 'sub1', <MailOutlined />, [
getItem('Item 1', null, null, [getItem('Option 1', '1'), getItem('Option 2', '2')], 'group'),
getItem('Item 2', null, null, [getItem('Option 3', '3'), getItem('Option 4', '4')], 'group'),
]),
getItem('Navigation Two', 'sub2', <AppstoreOutlined />, [
getItem('Option 5', '5'),
getItem('Option 6', '6'),
getItem('Submenu', 'sub3', null, [getItem('Option 7', '7'), getItem('Option 8', '8')]),
]),
getItem('Navigation Three', 'sub4', <SettingOutlined />, [
getItem('Option 9', '9'),
getItem('Option 10', '10'),
getItem('Option 11', '11'),
getItem('Option 12', '12'),
]),
];
const onClick: MenuProps['onClick'] = e => {
console.log('click', e);
};
ReactDOM.render(
<Menu onClick={handleClick} style={{ width: 256 }} mode="vertical">
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
<Menu.ItemGroup title="Item 1">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup title="Item 2">
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</Menu>,
<Menu onClick={onClick} style={{ width: 256 }} mode="vertical" items={items} />,
mountNode,
);
```

93
components/menu/hooks/useItems.tsx Normal file
View File

@ -0,0 +1,93 @@
import * as React from 'react';
import { ItemGroup } from 'rc-menu';
import type {
MenuItemType as RcMenuItemType,
MenuDividerType as RcMenuDividerType,
SubMenuType as RcSubMenuType,
MenuItemGroupType as RcMenuItemGroupType,
} from 'rc-menu/lib/interface';
import SubMenu from '../SubMenu';
import MenuDivider from '../MenuDivider';
import MenuItem from '../MenuItem';
interface MenuItemType extends RcMenuItemType {
danger?: boolean;
icon?: React.ReactNode;
title?: string;
}
interface SubMenuType extends Omit<RcSubMenuType, 'children'> {
icon?: React.ReactNode;
theme?: 'dark' | 'light';
children: ItemType[];
}
interface MenuItemGroupType extends Omit<RcMenuItemGroupType, 'children'> {
children?: MenuItemType[];
key?: React.Key;
}
interface MenuDividerType extends RcMenuDividerType {
dashed?: boolean;
key?: React.Key;
}
export type ItemType = MenuItemType | SubMenuType | MenuItemGroupType | MenuDividerType | null;
function convertItemsToNodes(list: ItemType[]) {
return (list || [])
.map((opt, index) => {
if (opt && typeof opt === 'object') {
const { label, children, key, type, ...restProps } = opt as any;
const mergedKey = key ?? `tmp-${index}`;
// MenuItemGroup & SubMenuItem
if (children || type === 'group') {
if (type === 'group') {
// Group
return (
<ItemGroup key={mergedKey} {...restProps} title={label}>
{convertItemsToNodes(children)}
</ItemGroup>
);
}
// Sub Menu
return (
<SubMenu key={mergedKey} {...restProps} title={label}>
{convertItemsToNodes(children)}
</SubMenu>
);
}
// MenuItem & Divider
if (type === 'divider') {
return <MenuDivider key={mergedKey} {...restProps} />;
}
return (
<MenuItem key={mergedKey} {...restProps}>
{label}
</MenuItem>
);
}
return null;
})
.filter(opt => opt);
}
// FIXME: Move logic here in v5
/**
* We simply convert `items` to ReactNode for reuse origin component logic. But we need move all the
* logic from component into this hooks when in v5
*/
export default function useItems(items?: ItemType[]) {
return React.useMemo(() => {
if (!items) {
return items;
}
return convertItemsToNodes(items);
}, [items]);
}

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

@ -22,12 +22,14 @@ More layouts with navigation: [Layout](/components/layout).
## API
```jsx
<Menu>
<Menu.Item>Menu</Menu.Item>
<SubMenu title="SubMenu">
<Menu.Item>SubMenuItem</Menu.Item>
</SubMenu>
</Menu>
const items = [
{ label: 'Menu' },
{
label: 'SubMenu',
children: [{ label: 'SubMenuItem' }],
},
];
<Menu items={items} />;
```
### Menu
@ -40,6 +42,7 @@ More layouts with navigation: [Layout](/components/layout).
| forceSubMenuRender | Render submenu into DOM before it becomes visible | boolean | false | |
| inlineCollapsed | Specifies the collapsed status when menu is inline mode | boolean | - | |
| inlineIndent | Indent (in pixels) of inline menu items on each level | number | 24 | |
| items | Menu item content | [ItemType\[\]](#ItemType) | - | 4.20.0 |
| mode | Type of menu | `vertical` \| `horizontal` \| `inline` | `vertical` | |
| multiple | Allows selection of multiple items | boolean | false | |
| openKeys | Array with the keys of currently opened sub-menus | string\[] | - | |
@ -58,14 +61,19 @@ More layouts with navigation: [Layout](/components/layout).
> More options in [rc-menu](https://github.com/react-component/menu#api)
### Menu.Item
### ItemType
> type ItemType = [MenuItemType](#MenuItemType) | [SubMenuType](#SubMenuType) | [MenuItemGroupType](#MenuItemGroupType) | [MenuDividerType](#MenuDividerType);
#### MenuItemType
| Param | Description | Type | Default value | Version |
| -------- | ------------------------------------ | --------- | ------------- | ------- |
| danger | Display the danger style | boolean | false | 4.3.0 |
| danger | Display the danger style | boolean | false | |
| disabled | Whether menu item is disabled | boolean | false | |
| icon | The icon of the menu item | ReactNode | - | 4.2.0 |
| icon | The icon of the menu item | ReactNode | - | |
| key | Unique ID of the menu item | string | - | |
| label | Menu label | ReactNode | - | |
| title | Set display title for collapsed item | string | - | |
> Note: `icon` is a newly added prop in `4.2.0`. For previous versions, please use the following method to define the icon.
@ -87,34 +95,51 @@ More layouts with navigation: [Layout](/components/layout).
> </Menu.SubMenu>
> ```
### Menu.SubMenu
#### SubMenuType
| Param | Description | Type | Default value | Version |
| --- | --- | --- | --- | --- | --- |
| children | Sub-menus or sub-menu items | Array&lt;MenuItem \| SubMenu> | - | |
| children | Sub-menus or sub-menu items | [ItemType\[\]](#ItemType) | - | |
| disabled | Whether sub-menu is disabled | boolean | false | |
| icon | Icon of sub menu | ReactNode | - | 4.2.0 |
| icon | Icon of sub menu | ReactNode | - | |
| key | Unique ID of the sub-menu | string | - | |
| label | Menu label | ReactNode | - | |
| popupClassName | Sub-menu class name, not working when `mode="inline"` | string | - | |
| popupOffset | Sub-menu offset, not working when `mode="inline"` | \[number, number] | - | |
| title | Title of sub menu | ReactNode | - | |
| theme | Color theme of the SubMenu (inherits from Menu by default) | | `light` \| `dark` | - | 4.19.0 |
| theme | Color theme of the SubMenu (inherits from Menu by default) | | `light` \| `dark` | - | |
| onTitleClick | Callback executed when the sub-menu title is clicked | function({ key, domEvent }) | - | |
### Menu.ItemGroup
#### MenuItemGroupType
Define `type` as `group` to make as group:
```ts
const groupItem = {
type: 'group', // Must have
label: 'My Group',
chidlren: [],
};
```
| Param | Description | Type | Default value | Version |
| -------- | ---------------------- | ----------- | ------------- | ------- |
| children | Sub-menu items | MenuItem\[] | - | |
| title | The title of the group | ReactNode | - | |
| label | The title of the group | ReactNode | - | |
### Menu.Divider
#### MenuDividerType
Divider line in between menu items, only used in vertical popup Menu or Dropdown Menu.
Divider line in between menu items, only used in vertical popup Menu or Dropdown Menu. Need define the `type` as `divider`：
```ts
const dividerItem = {
type: 'divider', // Must have
};
```
| Param | Description | Type | Default value | Version |
| ------ | ---------------------- | ------- | ------------- | ------- |
| dashed | Whether line is dashed | boolean | false | 4.17.0 |
| dashed | Whether line is dashed | boolean | false | |
## FAQ

45
components/menu/index.tsx
View File

@ -1,8 +1,9 @@
import * as React from 'react';
import RcMenu, { ItemGroup, MenuProps as RcMenuProps } from 'rc-menu';
import RcMenu, { ItemGroup, MenuProps as RcMenuProps, MenuRef } from 'rc-menu';
import classNames from 'classnames';
import omit from 'rc-util/lib/omit';
import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined';
import { forwardRef } from 'react';
import SubMenu, { SubMenuProps } from './SubMenu';
import Item, { MenuItemProps } from './MenuItem';
import { ConfigContext } from '../config-provider';
@ -12,6 +13,8 @@ import collapseMotion from '../_util/motion';
import { cloneElement } from '../_util/reactNode';
import MenuContext, { MenuTheme } from './MenuContext';
import MenuDivider from './MenuDivider';
import type { ItemType } from './hooks/useItems';
import useItems from './hooks/useItems';
export { MenuDividerProps } from './MenuDivider';
@ -19,7 +22,7 @@ export { MenuItemGroupProps } from 'rc-menu';
export type MenuMode = 'vertical' | 'vertical-left' | 'vertical-right' | 'horizontal' | 'inline';
export interface MenuProps extends RcMenuProps {
export interface MenuProps extends Omit<RcMenuProps, 'items'> {
theme?: MenuTheme;
inlineIndent?: number;
@ -29,6 +32,8 @@ export interface MenuProps extends RcMenuProps {
* for removing.
*/
_internalDisableMenuItemTitleTooltip?: boolean;
items?: ItemType[];
}
type InternalMenuProps = MenuProps &
@ -36,7 +41,7 @@ type InternalMenuProps = MenuProps &
collapsedWidth?: string | number;
};
function InternalMenu(props: InternalMenuProps) {
const InternalMenu = forwardRef<MenuRef, InternalMenuProps>((props, ref) => {
const { getPrefixCls, getPopupContainer, direction } = React.useContext(ConfigContext);
const rootPrefixCls = getPrefixCls();
@ -49,11 +54,16 @@ function InternalMenu(props: InternalMenuProps) {
_internalDisableMenuItemTitleTooltip,
inlineCollapsed,
siderCollapsed,
items,
children,
...restProps
} = props;
const passedProps = omit(restProps, ['collapsedWidth']);
// ========================= Items ===========================
const mergedChildren = useItems(items) || children;
// ======================== Warning ==========================
devWarning(
!('inlineCollapsed' in props && props.mode !== 'inline'),
@ -67,6 +77,12 @@ function InternalMenu(props: InternalMenuProps) {
'`inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.',
);
devWarning(
!!items && !children,
'Menu',
'`children` will be removed in next major version. Please use `items` instead.',
);
// ======================== Collapsed ========================
// Inline Collapsed
const mergedInlineCollapsed = React.useMemo(() => {
@ -114,10 +130,13 @@ function InternalMenu(props: InternalMenuProps) {
expandIcon={cloneElement(expandIcon, {
className: `${prefixCls}-submenu-expand-icon`,
})}
/>
ref={ref}
>
{mergedChildren}
</RcMenu>
</MenuContext.Provider>
);
}
});
// We should keep this as ref-able
class Menu extends React.Component<MenuProps, {}> {
@ -129,10 +148,24 @@ class Menu extends React.Component<MenuProps, {}> {
static ItemGroup = ItemGroup;
menu: MenuRef | null;
focus = (options?: FocusOptions) => {
this.menu?.focus(options);
};
render() {
return (
<SiderContext.Consumer>
{(context: SiderContextProps) => <InternalMenu {...this.props} {...context} />}
{(context: SiderContextProps) => (
<InternalMenu
ref={node => {
this.menu = node;
}}
{...this.props}
{...context}
/>
)}
</SiderContext.Consumer>
);
}

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

@ -23,12 +23,15 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
## API
```jsx
<Menu>
<Menu.Item>菜单项</Menu.Item>
<SubMenu title="子菜单">
<Menu.Item>子菜单项</Menu.Item>
</SubMenu>
</Menu>
const items = [
{ label: '菜单项' },
{
label: '子菜单',
children: [{ label: '子菜单项' }],
},
];
<Menu items={items} />;
```
### Menu
@ -41,6 +44,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
| forceSubMenuRender | 在子菜单展示之前就渲染进 DOM | boolean | false | |
| inlineCollapsed | inline 时菜单是否收起状态 | boolean | - | |
| inlineIndent | inline 模式的菜单缩进宽度 | number | 24 | |
| items | 菜单内容 | [ItemType\[\]](#ItemType) | - | 4.20.0 |
| mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | `vertical` \| `horizontal` \| `inline` | `vertical` | |
| multiple | 是否允许多选 | boolean | false | |
| openKeys | 当前展开的 SubMenu 菜单项 key 数组 | string\[] | - | |
@ -59,15 +63,20 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
> 更多属性查看 [rc-menu](https://github.com/react-component/menu#api)
### Menu.Item
### ItemType
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | ------------------------ | --------- | ------ | ----- |
| danger | 展示错误状态样式 | boolean | false | 4.3.0 |
| disabled | 是否禁用 | boolean | false | |
| icon | 菜单图标 | ReactNode | - | 4.2.0 |
| key | item 的唯一标志 | string | - | |
| title | 设置收缩时展示的悬浮标题 | string | - | |
> type ItemType = [MenuItemType](#MenuItemType) | [SubMenuType](#SubMenuType) | [MenuItemGroupType](#MenuItemGroupType) | [MenuDividerType](#MenuDividerType);
#### MenuItemType
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | ------------------------ | --------- | ------ | ---- |
| danger | 展示错误状态样式 | boolean | false | |
| disabled | 是否禁用 | boolean | false | |
| icon | 菜单图标 | ReactNode | - | |
| key | item 的唯一标志 | string | - | |
| label | 菜单项标题 | string | - | |
| title | 设置收缩时展示的悬浮标题 | string | - | |
> 注意：`icon` 是 `4.2.0` 新增的属性，之前的版本请使用下面的方式定义图标。
>
@ -88,34 +97,50 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
> </Menu.SubMenu>
> ```
### Menu.SubMenu
#### SubMenuType
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- | --- |
| children | 子菜单的菜单项 | Array&lt;MenuItem \| SubMenu> | - | |
| children | 子菜单的菜单项 | [ItemType\[\]](#ItemType) | - | |
| disabled | 是否禁用 | boolean | false | |
| icon | 菜单图标 | ReactNode | - | 4.2.0 |
| icon | 菜单图标 | ReactNode | - | |
| key | 唯一标志 | string | - | |
| label | 菜单项标题 | ReactNode | - | |
| popupClassName | 子菜单样式，`mode="inline"` 时无效 | string | - | |
| popupOffset | 子菜单偏移量，`mode="inline"` 时无效 | \[number, number] | - | |
| title | 子菜单项值 | ReactNode | - | |
| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | - | |
| theme | 设置子菜单的主题，默认从 Menu 上继承 | | `light` \| `dark` | - | 4.19.0 |
| theme | 设置子菜单的主题，默认从 Menu 上继承 | | `light` \| `dark` | - | |
### Menu.ItemGroup
#### MenuItemGroupType
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | ------------ | ----------- | ------ | ---- |
| children | 分组的菜单项 | MenuItem\[] | - | |
| title | 分组标题 | ReactNode | - | |
定义类型为 `group` 时，会作为分组处理:
### Menu.Divider
```ts
const groupItem = {
type: 'group', // Must have
label: 'My Group',
chidlren: [],
};
```
菜单项分割线，只用在弹出菜单内。
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | ------------ | --------------------------------- | ------ | ---- |
| children | 分组的菜单项 | [MenuItemType\[\]](#MenuItemType) | - | |
| label | 分组标题 | ReactNode | - | |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ------ | -------- | ------- | ------ | ------ |
| dashed | 是否虚线 | boolean | false | 4.17.0 |
#### MenuDividerType
菜单项分割线，只用在弹出菜单内，需要定义类型为 `divider`：
```ts
const dividerItem = {
type: 'divider', // Must have
};
```
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ------ | -------- | ------- | ------ | ---- |
| dashed | 是否虚线 | boolean | false | |
## FAQ

188
components/page-header/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -491,56 +491,58 @@ exports[`renders ./components/page-header/demo/breadcrumb.md extend context corr
<div
class="ant-page-header site-page-header has-breadcrumb ant-page-header-ghost"
>
<div
<nav
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index"
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
First-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
Second-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<span>
Third-level Menu
<a
href="#/index"
>
First-level Menu
</a>
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
Second-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<span>
Third-level Menu
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<div
class="ant-page-header-heading"
>
@ -568,56 +570,58 @@ exports[`renders ./components/page-header/demo/content.md extend context correct
<div
class="ant-page-header site-page-header has-breadcrumb ant-page-header-ghost"
>
<div
<nav
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index"
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
First-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
Second-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<span>
Third-level Menu
<a
href="#/index"
>
First-level Menu
</a>
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
Second-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<span>
Third-level Menu
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<div
class="ant-page-header-heading"
>

188
components/page-header/__tests__/__snapshots__/demo.test.js.snap
View File

@ -491,56 +491,58 @@ exports[`renders ./components/page-header/demo/breadcrumb.md correctly 1`] = `
<div
class="ant-page-header site-page-header has-breadcrumb ant-page-header-ghost"
>
<div
<nav
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index"
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
First-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
Second-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<span>
Third-level Menu
<a
href="#/index"
>
First-level Menu
</a>
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
Second-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<span>
Third-level Menu
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<div
class="ant-page-header-heading"
>
@ -568,56 +570,58 @@ exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
<div
class="ant-page-header site-page-header has-breadcrumb ant-page-header-ghost"
>
<div
<nav
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index"
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
First-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
Second-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<span>
Third-level Menu
<a
href="#/index"
>
First-level Menu
</a>
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
Second-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<span>
Third-level Menu
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<div
class="ant-page-header-heading"
>

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