test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 02:59:04 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

chore: feature merge master

Browse Source
This commit is contained in:
二货机器人 2023-01-19 17:21:02 +08:00
commit 56f76c79ec
227 changed files with 21652 additions and 20031 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
.dumi/pages/404/index.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect } from 'react';
import { Result, Button } from 'antd';
import { HomeOutlined } from '@ant-design/icons';
import { Button, Result } from 'antd';
import { Link, useLocation } from 'dumi';
import React, { useEffect } from 'react';
import * as utils from '../../theme/utils';
export interface NotFoundProps {
@ -29,6 +29,15 @@ const NotFoundPage: React.FC<NotFoundProps> = ({ router }) => {
router.replace(utils.getLocalizedPathname(`/${DIRECT_MAP[matchPath]}`, isZhCN).pathname);
}
}
// Report if necessary
const { yuyanMonitor } = window as any;
if (yuyanMonitor) {
yuyanMonitor.log({
code: 11,
msg: `Page not found: ${location.href}; Source: ${document.referrer}`,
});
}
}, []);
return (

1
.dumi/theme/builtins/Previewer/fromDumiProps.tsx
View File

@ -54,7 +54,6 @@ export default function fromDumiProps<P extends object>(
[
(node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'pre',
(node: any, index: any) => {
// @ts-ignore
// ref: https://github.com/benjycui/bisheng/blob/master/packages/bisheng/src/bisheng-plugin-highlight/lib/browser.js#L7
const attr = JsonML.getAttributes(node);
return React.createElement(

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

@ -1,7 +1,6 @@
import type { FC } from 'react';
import React, { useMemo } from 'react';
/* eslint import/no-unresolved: 0 */
// @ts-ignore
import tokenMeta from 'antd/es/version/token-meta.json';
import { getDesignToken } from 'antd-token-previewer';
import { Table } from 'antd';

6
.dumi/theme/common/styles/Demo.tsx
View File

@ -2,7 +2,7 @@ import { css, Global } from '@emotion/react';
import React from 'react';
import useSiteToken from '../../../hooks/useSiteToken';
export default () => {
const GlobalDemoStyles: React.FC = () => {
const { token } = useSiteToken();
const { antCls, iconCls } = token;
@ -24,9 +24,9 @@ export default () => {
display: inline-block;
width: 100%;
margin: 0 0 16px;
background-color: ${token.colorBgContainer};
border: 1px solid ${token.colorSplit};
border-radius: ${token.borderRadius}px;
background-color: ${token.colorBgContainer};
transition: all 0.2s;
.code-box-title {
@ -373,3 +373,5 @@ export default () => {
/>
);
};
export default GlobalDemoStyles;

17
.dumi/theme/layouts/GlobalLayout.tsx
View File

@ -1,11 +1,16 @@
import React, { startTransition, useCallback, useEffect, useMemo } from 'react';
import { createSearchParams, useOutlet, useSearchParams } from 'dumi';
import {
createCache,
legacyNotSelectorLinter,
logicalPropertiesLinter,
StyleProvider,
} from '@ant-design/cssinjs';
import { ConfigProvider, theme as antdTheme } from 'antd';
import { createCache, StyleProvider, logicalPropertiesLinter } from '@ant-design/cssinjs';
import type { DirectionType } from 'antd/es/config-provider';
import ThemeSwitch from '../common/ThemeSwitch';
import type { ThemeName } from '../common/ThemeSwitch';
import { createSearchParams, useOutlet, useSearchParams } from 'dumi';
import React, { startTransition, useCallback, useEffect, useMemo } from 'react';
import useLocation from '../../hooks/useLocation';
import type { ThemeName } from '../common/ThemeSwitch';
import ThemeSwitch from '../common/ThemeSwitch';
import type { SiteContextProps } from '../slots/SiteContext';
import SiteContext from '../slots/SiteContext';
@ -102,7 +107,7 @@ const GlobalLayout: React.FC = () => {
);
return (
<StyleProvider cache={styleCache} linters={[logicalPropertiesLinter]}>
<StyleProvider cache={styleCache} linters={[logicalPropertiesLinter, legacyNotSelectorLinter]}>
<SiteContext.Provider value={siteContextValue}>
<ConfigProvider
theme={{

5
.dumi/theme/slots/Footer/index.tsx
View File

@ -120,6 +120,11 @@ const Footer = () => {
url: 'https://mobile.ant.design',
openExternal: true,
},
{
title: 'Ant Design Mini',
url: 'https://mini.ant.design',
openExternal: true,
},
{
title: 'Ant Design Landing',
description: <FormattedMessage id="app.footer.landing" />,

1
README-ja_JP.md
View File

@ -106,6 +106,7 @@ const App = () => (
- [変更ログ](CHANGELOG.en-US.md)
- [rc-components](http://react-component.github.io/)
- [Mobile UI](http://mobile.ant.design)
- [Mini Program UI](http://mini.ant.design)
- [Ant Design Pro コンポーネント](https://procomponents.ant.design)
- [Ant Design チャート](https://charts.ant.design)
- [Ant Design アイコン](https://github.com/ant-design/ant-design-icons)

1
README-pt_BR.md
View File

@ -107,6 +107,7 @@ Veja [i18n](https://ant.design/docs/react/i18n).
- [Change Log](CHANGELOG.en-US.md)
- [rc-components](http://react-component.github.io/)
- [Mobile UI](http://mobile.ant.design)
- [Mini Program UI](http://mini.ant.design)
- [Ant Design Icones](https://github.com/ant-design/ant-design-icons)
- [Ant Design Cores](https://github.com/ant-design/ant-design-colors)
- [Ant Design Pro Layout](https://github.com/ant-design/ant-design-pro-layout)

1
README-uk_UA.md
View File

@ -106,6 +106,7 @@ const App = () => (
- [Change Log](CHANGELOG.en-US.md)
- [rc-components](http://react-component.github.io/)
- [Mobile UI](http://mobile.ant.design)
- [Mini Program UI](http://mini.ant.design)
- [Ant Design Pro Components](https://procomponents.ant.design)
- [Ant Design Charts](https://charts.ant.design)
- [Ant Design Icons](https://github.com/ant-design/ant-design-icons)

1
README-zh_CN.md
View File

@ -110,6 +110,7 @@ const App = () => (
- [更新日志](CHANGELOG.zh-CN.md)
- [React 底层基础组件](http://react-component.github.io/)
- [移动端组件](http://mobile.ant.design)
- [小程序组件](http://mini.ant.design)
- [页面级组件](https://procomponents.ant.design)
- [Ant Design 图表](https://charts.ant.design)
- [Ant Design 图标](https://github.com/ant-design/ant-design-icons)

1
README.md
View File

@ -104,6 +104,7 @@ Dozens of languages supported in `antd`, see [i18n](https://ant.design/docs/reac
- [Change Log](CHANGELOG.en-US.md)
- [rc-components](http://react-component.github.io/)
- [Mobile UI](http://mobile.ant.design)
- [Mini Program UI](http://mini.ant.design)
- [Ant Design Pro Components](https://procomponents.ant.design)
- [Ant Design Charts](https://charts.ant.design)
- [Ant Design Icons](https://github.com/ant-design/ant-design-icons)

4
components/_util/wave/WaveEffect.tsx
View File

@ -50,8 +50,8 @@ const WaveEffect: React.FC<WaveEffectProps> = (props) => {
// Rect
const { borderLeftWidth, borderTopWidth } = nodeStyle;
setLeft(isStatic ? target.offsetLeft : -parseFloat(borderLeftWidth));
setTop(isStatic ? target.offsetTop : -parseFloat(borderTopWidth));
setLeft(isStatic ? target.offsetLeft : validateNum(-parseFloat(borderLeftWidth)));
setTop(isStatic ? target.offsetTop : validateNum(-parseFloat(borderTopWidth)));
setWidth(target.offsetWidth);
setHeight(target.offsetHeight);

1
components/affix/index.tsx
View File

@ -215,7 +215,6 @@ class Affix extends React.Component<InternalAffixProps, AffixState> {
this.setState(newState as AffixState);
};
// @ts-ignore TS6133
prepareMeasure = () => {
// event param is used before. Keep compatible ts define here.
this.setState({

2
components/anchor/__tests__/Anchor.test.tsx
View File

@ -363,7 +363,6 @@ describe('Anchor Render', () => {
]}
/>,
// https://github.com/testing-library/react-testing-library/releases/tag/v13.0.0
// @ts-ignore
{ legacyRoot: true },
);
@ -492,7 +491,6 @@ describe('Anchor Render', () => {
]}
/>,
// https://github.com/testing-library/react-testing-library/releases/tag/v13.0.0
// @ts-ignore
{ legacyRoot: true },
);

6
components/anchor/demo/basic.md
View File

@ -5,9 +5,3 @@
## en-US
The simplest usage.
<style>
.code-box-demo .ant-affix {
z-index: 11;
}
</style>

2
components/anchor/demo/legacy-anchor.md
View File

@ -1,6 +1,6 @@
## zh-CN
Debug usage
调试使用
## en-US

2
components/auto-complete/index.zh-CN.md
View File

@ -77,6 +77,6 @@ demo:
### 为何受控状态下使用 onSearch 无法输入中文？
请使用 `onChange` 进行受控管理。`onSearch` 触发于搜索输入，与 `onChange` 时机不同。此外，点选选项时也不会触发 `onSearch` 事件。
请使用 `onChange` 进行受控管理。`onSearch` 触发于搜索输入，与 `onChange` 时机不同。此外，点击选项时也不会触发 `onSearch` 事件。
相关 issue：[#18230](https://github.com/ant-design/ant-design/issues/18230) [#17916](https://github.com/ant-design/ant-design/issues/17916)

6
components/back-top/demo/basic.md
View File

@ -11,9 +11,3 @@ The most basic usage.
color: rgba(64, 64, 64, 0.6);
}
```
<style>
[data-theme="dark"] .site-back-top-basic {
color: rgba(255,255,255,.45);
}
</style>

8
components/breadcrumb/BreadcrumbItem.tsx
View File

@ -48,8 +48,14 @@ const BreadcrumbItem: CompoundedComponent = (props) => {
/** If overlay is have Wrap a Dropdown */
const renderBreadcrumbNode = (breadcrumbItem: React.ReactNode) => {
if (menu || overlay) {
const mergeDropDownProps: DropdownProps = {
...dropdownProps,
};
if ('overlay' in props) {
mergeDropDownProps.overlay = overlay;
}
return (
<Dropdown menu={menu} overlay={overlay} placement="bottom" {...dropdownProps}>
<Dropdown menu={menu} placement="bottom" {...mergeDropDownProps}>
<span className={`${prefixCls}-overlay-link`}>
{breadcrumbItem}
<DownOutlined />

24
components/breadcrumb/__tests__/Breadcrumb.test.tsx
View File

@ -46,6 +46,30 @@ describe('Breadcrumb', () => {
);
});
// https://github.com/ant-design/ant-design/issues/40204
it('wrong overlay deprecation warning in Dropdown', () => {
const items = [
{
key: '1',
label: (
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
General
</a>
),
},
];
render(
<Breadcrumb>
<Breadcrumb.Item menu={{ items }}>
<a href="">General</a>
</Breadcrumb.Item>
</Breadcrumb>,
);
expect(errorSpy).not.toHaveBeenCalledWith(
'Warning: [antd: Dropdown] `overlay` is deprecated. Please use `menu` instead.',
);
});
// https://github.com/ant-design/ant-design/issues/5015
it('should allow Breadcrumb.Item is null or undefined', () => {
const { asFragment } = render(

6
components/breadcrumb/demo/react-router.md
View File

@ -24,9 +24,3 @@ Used together with `react-router@6+`.
margin-top: 16px;
}
```
<style>
[data-theme="dark"] .demo-nav {
background: #141414;
}
</style>

2
components/button/buttonHelpers.tsx
View File

@ -8,7 +8,7 @@ export function isString(str: any) {
return typeof str === 'string';
}
export function isUnBorderedButtonType(type: ButtonType | undefined) {
export function isUnBorderedButtonType(type?: ButtonType) {
return type === 'text' || type === 'link';
}

4
components/button/index.en-US.md
View File

@ -82,8 +82,4 @@ Following the Ant Design specification, we will add one space between if Button
padding: 16px;
background: rgb(190, 200, 200);
}
[data-theme="dark"] .site-button-ghost-wrapper {
background: rgba(255, 255, 255, 0.2);
}
</style>

4
components/button/index.zh-CN.md
View File

@ -87,10 +87,6 @@ group:
padding: 16px;
background: rgb(190, 200, 200);
}
[data-theme="dark"] .site-button-ghost-wrapper {
background: rgba(255, 255, 255, 0.2);
}
</style>
## 设计指引

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

@ -46,6 +46,10 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
marginInlineStart: token.marginXS,
},
'> a': {
color: 'currentColor',
},
'&:not(:disabled)': {
...genFocusStyle(token),
},

2
components/card/__tests__/index.test.tsx
View File

@ -61,7 +61,7 @@ describe('Card', () => {
it('should not render when actions is number', () => {
const numberStub = 11;
render(
// @ts-ignore ingnore for the wrong action value
// @ts-ignore ignore for the wrong action value
<Card title="Card title" actions={numberStub}>
<p>Card content</p>
</Card>,

7
components/card/demo/basic.md
View File

@ -5,10 +5,3 @@
## en-US
A basic card containing a title, content and an extra corner content. Supports two sizes: `default` and `small`.
<style>
.code-box-demo p {
margin: 0;
}
#components-card-demo-basic .ant-card { margin-bottom: 30px; }
</style>

6
components/collapse/demo/basic.md
View File

@ -5,9 +5,3 @@
## en-US
By default, any number of panels can be expanded at a time. The first panel is expanded in this example.
<style>
[data-theme="compact"] p, p {
margin: 0;
}
</style>

3
components/collapse/demo/collapsible.md
View File

@ -7,9 +7,6 @@
Specify the trigger area of collapsible by `collapsible`.
<style>
[data-theme="compact"] p, p {
margin: 0;
}
#components-collapse-demo-collapsible .ant-space {
width: 100%;
}

28
components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
View File

@ -17700,18 +17700,22 @@ HTMLCollection [
class="config-menu config-menu-sub config-menu-inline"
data-menu-list="true"
id="rc-menu-uuid-test-bamboo-popup"
role="menu"
>
<li
class="config-menu-item-group"
role="presentation"
>
<div
class="config-menu-item-group-title"
role="presentation"
title="Item 1"
>
Item 1
</div>
<ul
class="config-menu-item-group-list"
role="group"
>
<li
class="config-menu-item config-menu-item-only-child"
@ -17773,18 +17777,22 @@ HTMLCollection [
class="config-menu config-menu-sub config-menu-inline"
data-menu-list="true"
id="rc-menu-uuid-test-bamboo-popup"
role="menu"
>
<li
class="config-menu-item-group"
role="presentation"
>
<div
class="config-menu-item-group-title"
role="presentation"
title="Item 1"
>
Item 1
</div>
<ul
class="config-menu-item-group-list"
role="group"
>
<li
class="config-menu-item config-menu-item-only-child"
@ -17846,18 +17854,22 @@ HTMLCollection [
class="config-menu config-menu-sub config-menu-inline"
data-menu-list="true"
id="rc-menu-uuid-test-bamboo-popup"
role="menu"
>
<li
class="config-menu-item-group"
role="presentation"
>
<div
class="config-menu-item-group-title"
role="presentation"
title="Item 1"
>
Item 1
</div>
<ul
class="config-menu-item-group-list"
role="group"
>
<li
class="config-menu-item config-menu-item-only-child"
@ -17919,18 +17931,22 @@ HTMLCollection [
class="config-menu config-menu-sub config-menu-inline"
data-menu-list="true"
id="rc-menu-uuid-test-bamboo-popup"
role="menu"
>
<li
class="config-menu-item-group"
role="presentation"
>
<div
class="config-menu-item-group-title"
role="presentation"
title="Item 1"
>
Item 1
</div>
<ul
class="config-menu-item-group-list"
role="group"
>
<li
class="config-menu-item config-menu-item-only-child"
@ -17992,18 +18008,22 @@ HTMLCollection [
class="ant-menu ant-menu-sub ant-menu-inline"
data-menu-list="true"
id="rc-menu-uuid-test-bamboo-popup"
role="menu"
>
<li
class="ant-menu-item-group"
role="presentation"
>
<div
class="ant-menu-item-group-title"
role="presentation"
title="Item 1"
>
Item 1
</div>
<ul
class="ant-menu-item-group-list"
role="group"
>
<li
class="ant-menu-item ant-menu-item-only-child"
@ -18065,18 +18085,22 @@ HTMLCollection [
class="ant-menu ant-menu-sub ant-menu-inline"
data-menu-list="true"
id="rc-menu-uuid-test-bamboo-popup"
role="menu"
>
<li
class="ant-menu-item-group"
role="presentation"
>
<div
class="ant-menu-item-group-title"
role="presentation"
title="Item 1"
>
Item 1
</div>
<ul
class="ant-menu-item-group-list"
role="group"
>
<li
class="ant-menu-item ant-menu-item-only-child"
@ -18138,19 +18162,23 @@ HTMLCollection [
class="prefix-Menu prefix-Menu-sub prefix-Menu-inline"
data-menu-list="true"
id="rc-menu-uuid-test-bamboo-popup"
role="menu"
>
<li
class="prefix-Menu-item-group"
prefixcls="prefix-Menu"
role="presentation"
>
<div
class="prefix-Menu-item-group-title"
role="presentation"
title="Item 1"
>
Item 1
</div>
<ul
class="prefix-Menu-item-group-list"
role="group"
>
<li
class="prefix-Menu-item prefix-Menu-item-only-child"

6
components/config-provider/demo/direction.md
View File

@ -35,9 +35,3 @@ Components which support rtl direction are listed here, you can toggle the direc
margin-left: 20px;
}
```
<style>
[data-theme="dark"] .head-example {
background: rgba(255,255,255,.12);
}
</style>

34
components/config-provider/demo/locale.md
View File

@ -5,37 +5,3 @@
## en-US
Components which need localization support are listed here, you can toggle the language in the demo.
```css
.site-config-provider-calendar-wrapper {
width: 319px;
border: 1px solid #d9d9d9;
border-radius: 2px;
}
.locale-components {
padding-top: 16px;
border-top: 1px solid #d9d9d9;
}
.code-box-demo .example {
margin: 16px 0;
}
.code-box-demo .example > * {
margin-right: 8px;
}
.change-locale {
margin-bottom: 16px;
}
```
<style>
[data-theme="dark"] .locale-components {
border-top: 1px solid #303030;
}
[data-theme="dark"] .site-config-provider-calendar-wrapper {
border: 1px solid #303030;
}
</style>

42
components/config-provider/demo/locale.tsx
View File

@ -1,4 +1,3 @@
import React, { useState } from 'react';
import type { RadioChangeEvent } from 'antd';
import {
Button,
@ -10,14 +9,16 @@ import {
Popconfirm,
Radio,
Select,
Space,
Table,
TimePicker,
Transfer,
} from 'antd';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import enUS from 'antd/locale/en_US';
import zhCN from 'antd/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import React, { useState } from 'react';
dayjs.locale('en');
@ -28,12 +29,7 @@ const columns = [
{
title: 'Name',
dataIndex: 'name',
filters: [
{
text: 'filter1',
value: 'filter1',
},
],
filters: [{ text: 'filter1', value: 'filter1' }],
},
{
title: 'Age',
@ -41,7 +37,7 @@ const columns = [
},
];
const Page = () => {
const Page: React.FC = () => {
const [open, setOpen] = useState(false);
const showModal = () => {
@ -67,11 +63,13 @@ const Page = () => {
};
return (
<div className="locale-components">
<div className="example">
<Space
direction="vertical"
size={[0, 16]}
style={{ width: '100%', paddingTop: 16, borderTop: `1px solid #d9d9d9` }}
>
<Pagination defaultCurrent={1} total={50} showSizeChanger />
</div>
<div className="example">
<Space wrap>
<Select showSearch style={{ width: 200 }}>
<Option value="jack">jack</Option>
<Option value="lucy">lucy</Option>
@ -79,8 +77,8 @@ const Page = () => {
<DatePicker />
<TimePicker />
<RangePicker style={{ width: 200 }} />
</div>
<div className="example">
</Space>
<Space wrap>
<Button type="primary" onClick={showModal}>
Show Modal
</Button>
@ -89,20 +87,16 @@ const Page = () => {
<Popconfirm title="Question?">
<a href="#">Click to confirm</a>
</Popconfirm>
</div>
<div className="example">
</Space>
<Transfer dataSource={[]} showSearch targetKeys={[]} />
</div>
<div className="site-config-provider-calendar-wrapper">
<div style={{ width: 320, border: `1px solid #d9d9d9`, borderRadius: 8 }}>
<Calendar fullscreen={false} value={dayjs()} />
</div>
<div className="example">
<Table dataSource={[]} columns={columns} />
</div>
<Modal title="Locale Modal" open={open} onCancel={hideModal}>
<p>Locale Modal</p>
</Modal>
</div>
</Space>
);
};
@ -121,7 +115,7 @@ const App: React.FC = () => {
return (
<div>
<div className="change-locale">
<div style={{ marginBottom: 16 }}>
<span style={{ marginRight: 16 }}>Change locale of components: </span>
<Radio.Group value={locale} onChange={changeLocale}>
<Radio.Button key="en" value={enUS}>

12
components/config-provider/demo/prefixCls.tsx
View File

@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { SmileOutlined } from '@ant-design/icons';
import { Button, ConfigProvider, Select } from 'antd';
import React, { useState } from 'react';
// Ant Design site use `es` module for view
// but do not replace related lib `lib` with `es`
@ -8,19 +8,17 @@ import { Button, ConfigProvider, Select } from 'antd';
// We may need do convert in site also.
const App: React.FC = () => {
const [prefixCls, setPrefixCls] = useState('light');
return (
<div>
<>
<Button style={{ marginBottom: '12px' }} type="primary" onClick={() => setPrefixCls('dark')}>
toggle prefixCls
</Button>
<div>
<br />
<ConfigProvider prefixCls={prefixCls} iconPrefixCls="bamboo">
<SmileOutlined />
<Select />
<Select style={{ width: 120 }} />
</ConfigProvider>
</div>
</div>
</>
);
};

45
components/config-provider/demo/size.tsx
View File

@ -1,4 +1,3 @@
import React, { useState } from 'react';
import {
Button,
Card,
@ -8,10 +7,12 @@ import {
Input,
Radio,
Select,
Space,
Table,
Tabs,
} from 'antd';
import type { SizeType } from 'antd/es/config-provider/SizeContext';
import React, { useState } from 'react';
const { TabPane } = Tabs;
@ -19,7 +20,7 @@ const App: React.FC = () => {
const [componentSize, setComponentSize] = useState<SizeType>('small');
return (
<div>
<>
<Radio.Group
value={componentSize}
onChange={(e) => {
@ -32,10 +33,8 @@ const App: React.FC = () => {
</Radio.Group>
<Divider />
<ConfigProvider componentSize={componentSize}>
<div className="example">
<Space size={[0, 16]} style={{ width: '100%' }} direction="vertical">
<Input />
</div>
<div className="example">
<Tabs defaultActiveKey="1">
<TabPane tab="Tab 1" key="1">
Content of Tab Pane 1
@ -47,26 +46,12 @@ const App: React.FC = () => {
Content of Tab Pane 3
</TabPane>
</Tabs>
</div>
<div className="example">
<Input.Search allowClear />
</div>
<div className="example">
<Input.TextArea allowClear />
</div>
<div className="example">
<Select defaultValue="demo" options={[{ value: 'demo' }]} />
</div>
<div className="example">
<DatePicker />
</div>
<div className="example">
<DatePicker.RangePicker />
</div>
<div className="example">
<Button>Button</Button>
</div>
<div className="example">
<Card title="Card">
<Table
columns={[
@ -74,27 +59,15 @@ const App: React.FC = () => {
{ title: 'Age', dataIndex: 'age' },
]}
dataSource={[
{
key: '1',
name: 'John Brown',
age: 32,
},
{
key: '2',
name: 'Jim Green',
age: 42,
},
{
key: '3',
name: 'Joe Black',
age: 32,
},
{ key: '1', name: 'John Brown', age: 32 },
{ key: '2', name: 'Jim Green', age: 42 },
{ key: '3', name: 'Joe Black', age: 32 },
]}
/>
</Card>
</div>
</Space>
</ConfigProvider>
</div>
</>
);
};

2
components/config-provider/demo/theme.tsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { Button, ConfigProvider, Form, InputNumber } from 'antd';
import React from 'react';
import { SketchPicker } from 'react-color';
type ThemeData = {

12
components/config-provider/index.en-US.md
View File

@ -11,23 +11,25 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NVKORa7BCVwAAAAAAA
This component provides a configuration to all React components underneath itself via the [context API](https://facebook.github.io/react/docs/context.html). In the render tree all components will have access to the provided config.
```jsx
```tsx
import { ConfigProvider } from 'antd';
import React from 'react';
// ...
export default () => (
const Demo: React.FC = () => (
<ConfigProvider direction="rtl">
<App />
</ConfigProvider>
);
export default Demo;
```
### Content Security Policy
Some components use dynamic style to support wave effect. You can config `csp` prop if Content Security Policy (CSP) is enabled:
```jsx
```tsx
<ConfigProvider csp={{ nonce: 'YourNonceCode' }}>
<Button>My Button</Button>
</ConfigProvider>
@ -69,7 +71,7 @@ Some components use dynamic style to support wave effect. You can config `csp` p
Setting `Modal`、`Message`、`Notification` rootPrefixCls.
```jsx
```ts
ConfigProvider.config({
prefixCls: 'ant', // 4.13.0+
iconPrefixCls: 'anticon', // 4.17.0+

12
components/config-provider/index.zh-CN.md
View File

@ -12,23 +12,25 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NVKORa7BCVwAAAAAAA
ConfigProvider 使用 React 的 [context](https://facebook.github.io/react/docs/context.html) 特性，只需在应用外围包裹一次即可全局生效。
```jsx
```tsx
import { ConfigProvider } from 'antd';
import React from 'react';
// ...
export default () => (
const Demo: React.FC = () => (
<ConfigProvider direction="rtl">
<App />
</ConfigProvider>
);
export default Demo;
```
### Content Security Policy
部分组件为了支持波纹效果，使用了动态样式。如果开启了 Content Security Policy (CSP)，你可以通过 `csp` 属性来进行配置：
```jsx
```tsx
<ConfigProvider csp={{ nonce: 'YourNonceCode' }}>
<Button>My Button</Button>
</ConfigProvider>
@ -70,7 +72,7 @@ export default () => (
设置 `Modal`、`Message`、`Notification` rootPrefixCls。
```jsx
```ts
ConfigProvider.config({
prefixCls: 'ant', // 4.13.0+
iconPrefixCls: 'anticon', // 4.17.0+

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

@ -117,7 +117,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
disabled={mergedDisabled}
ref={innerRef}
dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
placeholder={getRangePlaceholder(picker, locale, placeholder)}
placeholder={getRangePlaceholder(locale, picker, placeholder)}
suffixIcon={suffixNode}
clearIcon={<CloseCircleFilled />}
prevIcon={<span className={`${prefixCls}-prev-icon`} />}

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

@ -128,7 +128,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
return (
<RCPicker<DateType>
ref={innerRef}
placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
placeholder={getPlaceholder(locale, mergedPicker, placeholder)}
suffixIcon={suffixNode}
dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
clearIcon={<CloseCircleFilled />}

85
components/date-picker/style/index.ts
View File

@ -29,6 +29,7 @@ export interface ComponentToken {
}
export type PickerPanelToken = {
pickerCellCls: string;
pickerCellInnerCls: string;
pickerTextHeight: number;
pickerPanelCellWidth: number;
@ -71,6 +72,7 @@ const genPikerPadding = (
const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
const {
componentCls,
pickerCellCls,
pickerCellInnerCls,
pickerPanelCellHeight,
motionDurationSlow,
@ -117,8 +119,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
},
// >>> Hover
[`&:hover:not(&-in-view),
&:hover:not(&-selected):not(&-range-start):not(&-range-end):not(&-range-hover-start):not(&-range-hover-end)`]:
[`&:hover:not(${pickerCellCls}-in-view),
&:hover:not(${pickerCellCls}-selected):not(${pickerCellCls}-range-start):not(${pickerCellCls}-range-end):not(${pickerCellCls}-range-hover-start):not(${pickerCellCls}-range-hover-end)`]:
{
[pickerCellInnerCls]: {
background: controlItemBgHover,
@ -126,7 +128,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
},
// >>> Today
[`&-in-view:is(&-today) ${pickerCellInnerCls}`]: {
[`&-in-view${pickerCellCls}-today ${pickerCellInnerCls}`]: {
'&::before': {
position: 'absolute',
top: 0,
@ -141,7 +143,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
},
// >>> In Range
'&-in-view:is(&-in-range)': {
[`&-in-view${pickerCellCls}-in-range`]: {
position: 'relative',
'&::before': {
@ -150,36 +152,36 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
},
// >>> Selected
[`&-in-view:is(&-selected) ${pickerCellInnerCls},
&-in-view:is(&-range-start) ${pickerCellInnerCls},
&-in-view:is(&-range-end) ${pickerCellInnerCls}`]: {
[`&-in-view${pickerCellCls}-selected ${pickerCellInnerCls},
&-in-view${pickerCellCls}-range-start ${pickerCellInnerCls},
&-in-view${pickerCellCls}-range-end ${pickerCellInnerCls}`]: {
color: colorTextLightSolid,
background: colorPrimary,
},
[`&-in-view:is(&-range-start):not(&-range-start-single),
&-in-view:is(&-range-end):not(&-range-end-single)`]: {
[`&-in-view${pickerCellCls}-range-start:not(${pickerCellCls}-range-start-single),
&-in-view${pickerCellCls}-range-end:not(${pickerCellCls}-range-end-single)`]: {
'&::before': {
background: controlItemBgActive,
},
},
'&-in-view:is(&-range-start)::before': {
[`&-in-view${pickerCellCls}-range-start::before`]: {
insetInlineStart: '50%',
},
'&-in-view:is(&-range-end)::before': {
[`&-in-view${pickerCellCls}-range-end::before`]: {
insetInlineEnd: '50%',
},
// >>> Range Hover
[`&-in-view:is(&-range-hover-start):not(&-in-range):not(&-range-start):not(&-range-end),
&-in-view:is(&-range-hover-end):not(&-in-range):not(&-range-start):not(&-range-end),
&-in-view:is(&-range-hover-start):is(&-range-start-single),
&-in-view:is(&-range-hover-start):is(&-range-start):is(&-range-end):is(&-range-end-near-hover),
&-in-view:is(&-range-hover-end):is(&-range-start):is(&-range-end):is(&-range-start-near-hover),
&-in-view:is(&-range-hover-end):is(&-range-end-single),
&-in-view:is(&-range-hover):not(&-in-range)`]: {
[`&-in-view${pickerCellCls}-range-hover-start:not(${pickerCellCls}-in-range):not(${pickerCellCls}-range-start):not(${pickerCellCls}-range-end),
&-in-view${pickerCellCls}-range-hover-end:not(${pickerCellCls}-in-range):not(${pickerCellCls}-range-start):not(${pickerCellCls}-range-end),
&-in-view${pickerCellCls}-range-hover-start${pickerCellCls}-range-start-single,
&-in-view${pickerCellCls}-range-hover-start${pickerCellCls}-range-start${pickerCellCls}-range-end${pickerCellCls}-range-end-near-hover,
&-in-view${pickerCellCls}-range-hover-end${pickerCellCls}-range-start${pickerCellCls}-range-end${pickerCellCls}-range-start-near-hover,
&-in-view${pickerCellCls}-range-hover-end${pickerCellCls}-range-end-single,
&-in-view${pickerCellCls}-range-hover:not(${pickerCellCls}-in-range)`]: {
'&::after': {
position: 'absolute',
top: '50%',
@ -202,22 +204,22 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
},
// Hover with in range
[`&-in-view:is(&-in-range):is(&-range-hover)::before,
&-in-view:is(&-range-start):is(&-range-hover)::before,
&-in-view:is(&-range-end):is(&-range-hover)::before,
&-in-view:is(&-range-start):not(&-range-start-single):is(&-range-hover-start)::before,
&-in-view:is(&-range-end):not(&-range-end-single):is(&-range-hover-end)::before,
[`&-in-view${pickerCellCls}-in-range${pickerCellCls}-range-hover::before,
&-in-view${pickerCellCls}-range-start${pickerCellCls}-range-hover::before,
&-in-view${pickerCellCls}-range-end${pickerCellCls}-range-hover::before,
&-in-view${pickerCellCls}-range-start:not(${pickerCellCls}-range-start-single)${pickerCellCls}-range-hover-start::before,
&-in-view${pickerCellCls}-range-end:not(${pickerCellCls}-range-end-single)${pickerCellCls}-range-hover-end::before,
${componentCls}-panel
> :not(${componentCls}-date-panel)
&-in-view:is(&-in-range):is(&-range-hover-start)::before,
&-in-view${pickerCellCls}-in-range${pickerCellCls}-range-hover-start::before,
${componentCls}-panel
> :not(${componentCls}-date-panel)
&-in-view:is(&-in-range):is(&-range-hover-end)::before`]: {
&-in-view${pickerCellCls}-in-range${pickerCellCls}-range-hover-end::before`]: {
background: pickerBasicCellHoverWithRangeColor,
},
// range start border-radius
[`&-in-view:is(&-range-start):not(&-range-start-single):not(&-range-end) ${pickerCellInnerCls}`]:
[`&-in-view${pickerCellCls}-range-start:not(${pickerCellCls}-range-start-single):not(${pickerCellCls}-range-end) ${pickerCellInnerCls}`]:
{
borderStartStartRadius: borderRadiusSM,
borderEndStartRadius: borderRadiusSM,
@ -226,7 +228,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
},
// range end border-radius
[`&-in-view:is(&-range-end):not(&-range-end-single):not(&-range-start) ${pickerCellInnerCls}`]:
[`&-in-view${pickerCellCls}-range-end:not(${pickerCellCls}-range-end-single):not(${pickerCellCls}-range-start) ${pickerCellInnerCls}`]:
{
borderStartStartRadius: 0,
borderEndStartRadius: 0,
@ -234,16 +236,16 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
borderEndEndRadius: borderRadiusSM,
},
'&-range-hover:is(&-range-end)::after': {
[`&-range-hover${pickerCellCls}-range-end::after`]: {
insetInlineStart: '50%',
},
// Edge start
[`tr > &-in-view:is(&-range-hover):first-child::after,
tr > &-in-view:is(&-range-hover-end):first-child::after,
&-in-view:is(&-start):is(&-range-hover-edge-start):is(&-range-hover-edge-start-near-range)::after,
&-in-view:is(&-range-hover-edge-start):not(&-range-hover-edge-start-near-range)::after,
&-in-view:is(&-range-hover-start)::after`]: {
[`tr > &-in-view${pickerCellCls}-range-hover:first-child::after,
tr > &-in-view${pickerCellCls}-range-hover-end:first-child::after,
&-in-view${pickerCellCls}-start${pickerCellCls}-range-hover-edge-start${pickerCellCls}-range-hover-edge-start-near-range::after,
&-in-view${pickerCellCls}-range-hover-edge-start:not(${pickerCellCls}-range-hover-edge-start-near-range)::after,
&-in-view${pickerCellCls}-range-hover-start::after`]: {
insetInlineStart: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
borderStartStartRadius: lineWidth,
@ -251,11 +253,11 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
},
// Edge end
[`tr > &-in-view:is(&-range-hover):last-child::after,
tr > &-in-view:is(&-range-hover-start):last-child::after,
&-in-view:is(&-end):is(&-range-hover-edge-end):is(&-range-hover-edge-end-near-range)::after,
&-in-view:is(&-range-hover-edge-end):not(&-range-hover-edge-end-near-range)::after,
&-in-view:is(&-range-hover-end)::after`]: {
[`tr > &-in-view${pickerCellCls}-range-hover:last-child::after,
tr > &-in-view${pickerCellCls}-range-hover-start:last-child::after,
&-in-view${pickerCellCls}-end${pickerCellCls}-range-hover-edge-end${pickerCellCls}-range-hover-edge-end-near-range::after,
&-in-view${pickerCellCls}-range-hover-edge-end:not(${pickerCellCls}-range-hover-edge-end-near-range)::after,
&-in-view${pickerCellCls}-range-hover-end::after`]: {
insetInlineEnd: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
borderStartEndRadius: lineWidth,
@ -275,7 +277,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
background: colorBgContainerDisabled,
},
},
[`&-disabled:is(&-today) ${pickerCellInnerCls}::before`]: {
[`&-disabled${pickerCellCls}-today ${pickerCellInnerCls}::before`]: {
borderColor: colorTextDisabled,
},
};
@ -542,7 +544,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
},
// Hover with range start & end
'&-range-hover:is(&-range-start)::after': {
[`&-range-hover${componentCls}-range-start::after`]: {
insetInlineEnd: '50%',
},
@ -602,7 +604,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
color: colorLinkActive,
},
'&:is(&-disabled)': {
[`&${componentCls}-today-btn-disabled`]: {
color: colorTextDisabled,
cursor: 'not-allowed',
},
@ -1395,6 +1397,7 @@ export const initPickerPanelToken = (token: TokenWithCommonCls<GlobalToken>): Pi
const { componentCls, controlHeightLG, controlHeightSM, colorPrimary, paddingXXS } = token;
return {
pickerCellCls: `${componentCls}-cell`,
pickerCellInnerCls: `${componentCls}-cell-inner`,
pickerTextHeight: controlHeightLG,
pickerPanelCellWidth: controlHeightSM * 1.5,

4
components/date-picker/util.ts
View File

@ -4,8 +4,8 @@ import type { SelectCommonPlacement } from '../_util/motion';
import type { PickerLocale } from './generatePicker';
export function getPlaceholder(
picker: PickerMode | undefined,
locale: PickerLocale,
picker?: PickerMode,
customizePlaceholder?: string,
): string {
if (customizePlaceholder !== undefined) {
@ -31,8 +31,8 @@ export function getPlaceholder(
}
export function getRangePlaceholder(
picker: PickerMode | undefined,
locale: PickerLocale,
picker?: PickerMode,
customizePlaceholder?: [string, string],
) {
if (customizePlaceholder !== undefined) {

6
components/descriptions/index.tsx
View File

@ -47,8 +47,8 @@ function getColumn(column: DescriptionsProps['column'], screens: ScreenMap): num
function getFilledItem(
node: React.ReactElement,
span: number | undefined,
rowRestCol: number,
span?: number,
): React.ReactElement {
let clone = node;
@ -79,7 +79,7 @@ function getRows(children: React.ReactNode, column: number) {
// Additional handle last one
if (index === childNodes.length - 1) {
tmpRow.push(getFilledItem(node, span, rowRestCol));
tmpRow.push(getFilledItem(node, rowRestCol, span));
rows.push(tmpRow);
return;
}
@ -88,7 +88,7 @@ function getRows(children: React.ReactNode, column: number) {
rowRestCol -= mergedSpan;
tmpRow.push(node);
} else {
tmpRow.push(getFilledItem(node, mergedSpan, rowRestCol));
tmpRow.push(getFilledItem(node, rowRestCol, mergedSpan));
rows.push(tmpRow);
rowRestCol = column;
tmpRow = [];

6
components/drawer/demo/basic-right.md
View File

@ -5,9 +5,3 @@
## en-US
Basic drawer.
<style>
[data-theme='compact'] .ant-drawer-body p {
margin-bottom: 0;
}
</style>

7
components/drawer/demo/form-in-drawer.md
View File

@ -18,10 +18,3 @@ Use a form in Drawer with a submit button.
border-top: 1px solid #e9e9e9;
}
```
<style>
[data-theme="dark"] .site-form-in-drawer-wrapper {
border-top: 1px solid #303030;
background: #1f1f1f;
}
</style>

7
components/drawer/demo/multi-level-drawer.md
View File

@ -5,10 +5,3 @@
## en-US
Open a new drawer on top of an existing drawer to handle multi branch tasks.
<style>
[data-theme="dark"] .site-multi-level-drawer-footer {
border-top: 1px solid #303030;
background: #1f1f1f;
}
</style>

19
components/drawer/demo/user-profile.md
View File

@ -14,11 +14,6 @@ Use Drawer to quickly preview details of an object, such as those in a list.
line-height: 1.5715;
}
[data-theme='compact'] .site-description-item-profile-wrapper {
font-size: 12px;
line-height: 1.66667;
}
.ant-drawer-body p.site-description-item-profile-p {
display: block;
margin-bottom: 16px;
@ -27,23 +22,9 @@ Use Drawer to quickly preview details of an object, such as those in a list.
line-height: 1.5715;
}
[data-theme='compact'] .ant-drawer-body p.site-description-item-profile-p {
font-size: 14px;
line-height: 1.66667;
}
.site-description-item-profile-p-label {
display: inline-block;
margin-right: 8px;
color: rgba(0, 0, 0, 0.85);
}
```
<style>
[data-theme="dark"] .site-description-item-profile-p {
color: rgba(255,255,255,0.85);
}
[data-theme="dark"] .site-description-item-profile-wrapper {
color: rgba(255,255,255,0.65);
}
</style>

18
components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -6561,15 +6561,18 @@ Array [
>
<li
class="ant-dropdown-menu-item-group"
role="presentation"
>
<div
class="ant-dropdown-menu-item-group-title"
role="presentation"
title="Item Group"
>
Item Group
</div>
<ul
class="ant-dropdown-menu-item-group-list"
role="group"
>
<li
class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
@ -6706,18 +6709,22 @@ Array [
<ul
class="ant-dropdown-menu ant-dropdown-menu-sub ant-dropdown-menu-vertical"
data-menu-list="true"
role="menu"
>
<li
class="ant-dropdown-menu-item-group"
role="presentation"
>
<div
class="ant-dropdown-menu-item-group-title"
role="presentation"
title="Item 1"
>
Item 1
</div>
<ul
class="ant-dropdown-menu-item-group-list"
role="group"
>
<li
class="ant-dropdown-menu-item ant-dropdown-menu-item-selected ant-dropdown-menu-item-only-child"
@ -6789,15 +6796,18 @@ Array [
</li>
<li
class="ant-dropdown-menu-item-group"
role="presentation"
>
<div
class="ant-dropdown-menu-item-group-title"
role="presentation"
title="Item 2"
>
Item 2
</div>
<ul
class="ant-dropdown-menu-item-group-list"
role="group"
>
<li
class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
@ -6938,6 +6948,7 @@ Array [
<ul
class="ant-dropdown-menu ant-dropdown-menu-sub ant-dropdown-menu-vertical"
data-menu-list="true"
role="menu"
>
<li
class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
@ -7053,6 +7064,7 @@ Array [
<ul
class="ant-dropdown-menu ant-dropdown-menu-sub ant-dropdown-menu-vertical"
data-menu-list="true"
role="menu"
>
<li
class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
@ -7195,6 +7207,7 @@ Array [
<ul
class="ant-dropdown-menu ant-dropdown-menu-sub ant-dropdown-menu-vertical"
data-menu-list="true"
role="menu"
>
<li
class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
@ -9757,15 +9770,18 @@ Array [
>
<li
class="ant-dropdown-menu-item-group"
role="presentation"
>
<div
class="ant-dropdown-menu-item-group-title"
role="presentation"
title="Group title"
>
Group title
</div>
<ul
class="ant-dropdown-menu-item-group-list"
role="group"
>
<li
class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
@ -9883,6 +9899,7 @@ Array [
<ul
class="ant-dropdown-menu ant-dropdown-menu-sub ant-dropdown-menu-vertical"
data-menu-list="true"
role="menu"
>
<li
class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
@ -10002,6 +10019,7 @@ Array [
<ul
class="ant-dropdown-menu ant-dropdown-menu-sub ant-dropdown-menu-vertical"
data-menu-list="true"
role="menu"
>
<li
class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"

70
components/empty/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -76,7 +76,7 @@ exports[`renders ./components/empty/demo/basic.tsx extend context correctly 1`]
`;
exports[`renders ./components/empty/demo/config-provider.tsx extend context correctly 1`] = `
<div>
Array [
<button
aria-checked="false"
class="ant-switch"
@ -100,17 +100,27 @@ exports[`renders ./components/empty/demo/config-provider.tsx extend context corr
default
</span>
</span>
</button>
</button>,
<div
class="ant-divider ant-divider-horizontal"
role="separator"
/>
/>,
<div
class="config-provider"
class="ant-space ant-space-vertical"
style="width:100%"
>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<h4>
Select
</h4>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
style="width:200px"
@ -228,9 +238,19 @@ exports[`renders ./components/empty/demo/config-provider.tsx extend context corr
</span>
</span>
</div>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<h4>
TreeSelect
</h4>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
style="width:200px"
@ -346,9 +366,19 @@ exports[`renders ./components/empty/demo/config-provider.tsx extend context corr
</span>
</span>
</div>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<h4>
Cascader
</h4>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
style="width:200px"
@ -476,9 +506,19 @@ exports[`renders ./components/empty/demo/config-provider.tsx extend context corr
</span>
</span>
</div>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<h4>
Transfer
</h4>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<div
class="ant-transfer"
>
@ -1009,9 +1049,19 @@ exports[`renders ./components/empty/demo/config-provider.tsx extend context corr
</div>
</div>
</div>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<h4>
Table
</h4>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<div
class="ant-table-wrapper"
style="margin-top:8px"
@ -1118,9 +1168,18 @@ exports[`renders ./components/empty/demo/config-provider.tsx extend context corr
</div>
</div>
</div>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<h4>
List
</h4>
</div>
<div
class="ant-space-item"
>
<div
class="ant-list ant-list-split"
>
@ -1183,7 +1242,8 @@ exports[`renders ./components/empty/demo/config-provider.tsx extend context corr
</div>
</div>
</div>
</div>
</div>,
]
`;
exports[`renders ./components/empty/demo/customize.tsx extend context correctly 1`] = `

70
components/empty/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -76,7 +76,7 @@ exports[`renders ./components/empty/demo/basic.tsx correctly 1`] = `
`;
exports[`renders ./components/empty/demo/config-provider.tsx correctly 1`] = `
<div>
Array [
<button
aria-checked="false"
class="ant-switch"
@ -100,17 +100,27 @@ exports[`renders ./components/empty/demo/config-provider.tsx correctly 1`] = `
default
</span>
</span>
</button>
</button>,
<div
class="ant-divider ant-divider-horizontal"
role="separator"
/>
/>,
<div
class="config-provider"
class="ant-space ant-space-vertical"
style="width:100%"
>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<h4>
Select
</h4>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
style="width:200px"
@ -168,9 +178,19 @@ exports[`renders ./components/empty/demo/config-provider.tsx correctly 1`] = `
</span>
</span>
</div>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<h4>
TreeSelect
</h4>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
style="width:200px"
@ -227,9 +247,19 @@ exports[`renders ./components/empty/demo/config-provider.tsx correctly 1`] = `
</span>
</span>
</div>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<h4>
Cascader
</h4>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
style="width:200px"
@ -283,9 +313,19 @@ exports[`renders ./components/empty/demo/config-provider.tsx correctly 1`] = `
</span>
</span>
</div>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<h4>
Transfer
</h4>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<div
class="ant-transfer"
>
@ -558,9 +598,19 @@ exports[`renders ./components/empty/demo/config-provider.tsx correctly 1`] = `
</div>
</div>
</div>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<h4>
Table
</h4>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<div
class="ant-table-wrapper"
style="margin-top:8px"
@ -667,9 +717,18 @@ exports[`renders ./components/empty/demo/config-provider.tsx correctly 1`] = `
</div>
</div>
</div>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<h4>
List
</h4>
</div>
<div
class="ant-space-item"
>
<div
class="ant-list ant-list-split"
>
@ -732,7 +791,8 @@ exports[`renders ./components/empty/demo/config-provider.tsx correctly 1`] = `
</div>
</div>
</div>
</div>
</div>,
]
`;
exports[`renders ./components/empty/demo/customize.tsx correctly 1`] = `

7
components/empty/demo/config-provider.md
View File

@ -5,10 +5,3 @@
## en-US
Use ConfigProvider set global Empty style.
<style>
.code-box-demo .config-provider h4 {
font-size: inherit;
margin: 16px 0 8px 0;
}
</style>

35
components/empty/demo/config-provider.tsx
View File

@ -6,6 +6,7 @@ import {
Divider,
List,
Select,
Space,
Switch,
Table,
Transfer,
@ -19,60 +20,42 @@ const customizeRenderEmpty = () => (
</div>
);
const style = { width: 200 };
const style: React.CSSProperties = { width: 200 };
const App: React.FC = () => {
const [customize, setCustomize] = useState(false);
return (
<div>
<>
<Switch
unCheckedChildren="default"
checkedChildren="customize"
checked={customize}
onChange={(val) => {
setCustomize(val);
}}
onChange={setCustomize}
/>
<Divider />
<ConfigProvider renderEmpty={customize ? customizeRenderEmpty : undefined}>
<div className="config-provider">
<Space direction="vertical" style={{ width: '100%' }}>
<h4>Select</h4>
<Select style={style} />
<h4>TreeSelect</h4>
<TreeSelect style={style} treeData={[]} />
<h4>Cascader</h4>
<Cascader style={style} options={[]} showSearch />
<h4>Transfer</h4>
<Transfer />
<h4>Table</h4>
<Table
style={{ marginTop: 8 }}
columns={[
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Age', dataIndex: 'age', key: 'age' },
]}
/>
<h4>List</h4>
<List />
</div>
</Space>
</ConfigProvider>
</div>
</>
);
};

4
components/empty/demo/customize.tsx
View File

@ -4,9 +4,7 @@ import { Button, Empty } from 'antd';
const App: React.FC = () => (
<Empty
image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
imageStyle={{
height: 60,
}}
imageStyle={{ height: 60 }}
description={
<span>
Customize <a href="#API">Description</a>

6
components/empty/index.en-US.md
View File

@ -60,10 +60,4 @@ Empty state placeholder.
height: 116px;
background-image: url("https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png");
}
[data-theme="dark"] .site-empty-buildIn-simple {
background-image: url("https://gw.alipayobjects.com/zos/antfincdn/ldFsHUh3Xh/ea62c5fe-07bb-4fcd-9d35-19220cef372e.png");
}
[data-theme="dark"] .site-empty-buildIn-default {
background-image: url("https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gfq-SoT3wF0AAAAAAAAAAABkARQnAQ");
}
</style>

6
components/empty/index.zh-CN.md
View File

@ -61,10 +61,4 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZdiZSLzEV0wAAAAAAA
height: 116px;
background-image: url("https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png");
}
[data-theme="dark"] .site-empty-buildIn-simple {
background-image: url("https://gw.alipayobjects.com/zos/antfincdn/ldFsHUh3Xh/ea62c5fe-07bb-4fcd-9d35-19220cef372e.png");
}
[data-theme="dark"] .site-empty-buildIn-default {
background-image: url("https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gfq-SoT3wF0AAAAAAAAAAABkARQnAQ");
}
</style>

6
components/form/ErrorList.tsx
View File

@ -19,8 +19,8 @@ interface ErrorEntity {
function toErrorEntity(
error: React.ReactNode,
errorStatus: ValidateStatus | undefined,
prefix: string,
errorStatus?: ValidateStatus,
index: number = 0,
): ErrorEntity {
return {
@ -62,9 +62,9 @@ export default function ErrorList({
const debounceErrors = useDebounce(errors);
const debounceWarnings = useDebounce(warnings);
const fullKeyList = React.useMemo(() => {
const fullKeyList = React.useMemo<ErrorEntity[]>(() => {
if (help !== undefined && help !== null) {
return [toErrorEntity(help, helpStatus, 'help')];
return [toErrorEntity(help, 'help', helpStatus)];
}
return [

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

@ -612,6 +612,7 @@ exports[`renders ./components/form/demo/basic.tsx extend context correctly 1`] =
autocomplete="off"
class="ant-form ant-form-horizontal"
id="basic"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -797,6 +798,7 @@ Array [
autocomplete="off"
class="ant-form ant-form-horizontal"
id="basic"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -1583,6 +1585,7 @@ exports[`renders ./components/form/demo/control-hooks.tsx extend context correct
<form
class="ant-form ant-form-horizontal"
id="control-hooks"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -1864,6 +1867,7 @@ exports[`renders ./components/form/demo/control-ref.tsx extend context correctly
<form
class="ant-form ant-form-horizontal"
id="control-ref"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -2381,6 +2385,7 @@ Array [
</label>,
<form
class="ant-form ant-form-horizontal"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -5177,6 +5182,7 @@ Array [
exports[`renders ./components/form/demo/disabled-input-debug.tsx extend context correctly 1`] = `
<form
class="ant-form ant-form-horizontal"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -5687,6 +5693,7 @@ exports[`renders ./components/form/demo/dynamic-form-item.tsx extend context cor
<form
class="ant-form ant-form-horizontal"
id="dynamic_form_item"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -5812,6 +5819,7 @@ exports[`renders ./components/form/demo/dynamic-form-items.tsx extend context co
autocomplete="off"
class="ant-form ant-form-horizontal"
id="dynamic_form_nest_item"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -5902,6 +5910,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-complex.tsx extend co
autocomplete="off"
class="ant-form ant-form-horizontal"
id="dynamic_form_complex"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -6164,6 +6173,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-no-style.tsx extend c
autocomplete="off"
class="ant-form ant-form-horizontal"
id="dynamic_form_no_style"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -6283,6 +6293,7 @@ exports[`renders ./components/form/demo/dynamic-rule.tsx extend context correctl
<form
class="ant-form ant-form-horizontal"
id="dynamic_rule"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -6434,6 +6445,7 @@ exports[`renders ./components/form/demo/form-context.tsx extend context correctl
<form
class="ant-form ant-form-horizontal"
id="basicForm"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -6923,6 +6935,7 @@ exports[`renders ./components/form/demo/label-debug.tsx extend context correctly
<form
class="ant-form ant-form-horizontal"
id="label-ellipsis"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -7077,6 +7090,7 @@ exports[`renders ./components/form/demo/label-debug.tsx extend context correctly
exports[`renders ./components/form/demo/layout.tsx extend context correctly 1`] = `
<form
class="ant-form ant-form-horizontal"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -7279,6 +7293,7 @@ exports[`renders ./components/form/demo/layout-can-wrap.tsx extend context corre
<form
class="ant-form ant-form-horizontal"
id="wrap"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -7406,6 +7421,7 @@ exports[`renders ./components/form/demo/nest-messages.tsx extend context correct
<form
class="ant-form ant-form-horizontal"
id="nest-messages"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -7891,6 +7907,7 @@ exports[`renders ./components/form/demo/normal-login.tsx extend context correctl
exports[`renders ./components/form/demo/ref-item.tsx extend context correctly 1`] = `
<form
class="ant-form ant-form-horizontal"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -7978,6 +7995,7 @@ exports[`renders ./components/form/demo/register.tsx extend context correctly 1`
<form
class="ant-form ant-form-horizontal"
id="register"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -9665,6 +9683,7 @@ exports[`renders ./components/form/demo/required-mark.tsx extend context correct
exports[`renders ./components/form/demo/size.tsx extend context correctly 1`] = `
<form
class="ant-form ant-form-horizontal ant-form-default"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -11084,6 +11103,7 @@ exports[`renders ./components/form/demo/time-related-controls.tsx extend context
<form
class="ant-form ant-form-horizontal"
id="time_related_controls"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -18849,6 +18869,7 @@ exports[`renders ./components/form/demo/validate-other.tsx extend context correc
<form
class="ant-form ant-form-horizontal"
id="validate_other"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -20443,6 +20464,7 @@ exports[`renders ./components/form/demo/validate-other.tsx extend context correc
exports[`renders ./components/form/demo/validate-static.tsx extend context correctly 1`] = `
<form
class="ant-form ant-form-horizontal"
style="max-width:600px"
>
<div
class="ant-form-item ant-form-item-with-help ant-form-item-has-error"
@ -26687,6 +26709,7 @@ exports[`renders ./components/form/demo/warning-only.tsx extend context correctl
exports[`renders ./components/form/demo/without-form-create.tsx extend context correctly 1`] = `
<form
class="ant-form ant-form-horizontal"
style="max-width:600px"
>
<div
class="ant-form-item ant-form-item-with-help"

23
components/form/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -448,6 +448,7 @@ exports[`renders ./components/form/demo/basic.tsx correctly 1`] = `
autocomplete="off"
class="ant-form ant-form-horizontal"
id="basic"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -633,6 +634,7 @@ Array [
autocomplete="off"
class="ant-form ant-form-horizontal"
id="basic"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -1205,6 +1207,7 @@ exports[`renders ./components/form/demo/control-hooks.tsx correctly 1`] = `
<form
class="ant-form ant-form-horizontal"
id="control-hooks"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -1387,6 +1390,7 @@ exports[`renders ./components/form/demo/control-ref.tsx correctly 1`] = `
<form
class="ant-form ant-form-horizontal"
id="control-ref"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -1723,6 +1727,7 @@ Array [
</label>,
<form
class="ant-form ant-form-horizontal"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -2650,6 +2655,7 @@ Array [
exports[`renders ./components/form/demo/disabled-input-debug.tsx correctly 1`] = `
<form
class="ant-form ant-form-horizontal"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -3160,6 +3166,7 @@ exports[`renders ./components/form/demo/dynamic-form-item.tsx correctly 1`] = `
<form
class="ant-form ant-form-horizontal"
id="dynamic_form_item"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -3285,6 +3292,7 @@ exports[`renders ./components/form/demo/dynamic-form-items.tsx correctly 1`] = `
autocomplete="off"
class="ant-form ant-form-horizontal"
id="dynamic_form_nest_item"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -3375,6 +3383,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-complex.tsx correctly
autocomplete="off"
class="ant-form ant-form-horizontal"
id="dynamic_form_complex"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -3555,6 +3564,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-no-style.tsx correctl
autocomplete="off"
class="ant-form ant-form-horizontal"
id="dynamic_form_no_style"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -3674,6 +3684,7 @@ exports[`renders ./components/form/demo/dynamic-rule.tsx correctly 1`] = `
<form
class="ant-form ant-form-horizontal"
id="dynamic_rule"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -3825,6 +3836,7 @@ exports[`renders ./components/form/demo/form-context.tsx correctly 1`] = `
<form
class="ant-form ant-form-horizontal"
id="basicForm"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -4314,6 +4326,7 @@ exports[`renders ./components/form/demo/label-debug.tsx correctly 1`] = `
<form
class="ant-form ant-form-horizontal"
id="label-ellipsis"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -4468,6 +4481,7 @@ exports[`renders ./components/form/demo/label-debug.tsx correctly 1`] = `
exports[`renders ./components/form/demo/layout.tsx correctly 1`] = `
<form
class="ant-form ant-form-horizontal"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -4670,6 +4684,7 @@ exports[`renders ./components/form/demo/layout-can-wrap.tsx correctly 1`] = `
<form
class="ant-form ant-form-horizontal"
id="wrap"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -4797,6 +4812,7 @@ exports[`renders ./components/form/demo/nest-messages.tsx correctly 1`] = `
<form
class="ant-form ant-form-horizontal"
id="nest-messages"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -5282,6 +5298,7 @@ exports[`renders ./components/form/demo/normal-login.tsx correctly 1`] = `
exports[`renders ./components/form/demo/ref-item.tsx correctly 1`] = `
<form
class="ant-form ant-form-horizontal"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -5369,6 +5386,7 @@ exports[`renders ./components/form/demo/register.tsx correctly 1`] = `
<form
class="ant-form ant-form-horizontal"
id="register"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -6617,6 +6635,7 @@ exports[`renders ./components/form/demo/required-mark.tsx correctly 1`] = `
exports[`renders ./components/form/demo/size.tsx correctly 1`] = `
<form
class="ant-form ant-form-horizontal ant-form-default"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -7270,6 +7289,7 @@ exports[`renders ./components/form/demo/time-related-controls.tsx correctly 1`]
<form
class="ant-form ant-form-horizontal"
id="time_related_controls"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -7984,6 +8004,7 @@ exports[`renders ./components/form/demo/validate-other.tsx correctly 1`] = `
<form
class="ant-form ant-form-horizontal"
id="validate_other"
style="max-width:600px"
>
<div
class="ant-form-item"
@ -9391,6 +9412,7 @@ exports[`renders ./components/form/demo/validate-other.tsx correctly 1`] = `
exports[`renders ./components/form/demo/validate-static.tsx correctly 1`] = `
<form
class="ant-form ant-form-horizontal"
style="max-width:600px"
>
<div
class="ant-form-item ant-form-item-with-help ant-form-item-has-error"
@ -11282,6 +11304,7 @@ exports[`renders ./components/form/demo/warning-only.tsx correctly 1`] = `
exports[`renders ./components/form/demo/without-form-create.tsx correctly 1`] = `
<form
class="ant-form ant-form-horizontal"
style="max-width:600px"
>
<div
class="ant-form-item ant-form-item-with-help"

5
components/form/demo/basic.tsx
View File

@ -1,7 +1,6 @@
import React from 'react';
import { Button, Checkbox, Form, Input } from 'antd';
const App: React.FC = () => {
const onFinish = (values: any) => {
console.log('Success:', values);
};
@ -10,11 +9,12 @@ const App: React.FC = () => {
console.log('Failed:', errorInfo);
};
return (
const App: React.FC = () => (
<Form
name="basic"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
style={{ maxWidth: 600 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
@ -47,6 +47,5 @@ const App: React.FC = () => {
</Form.Item>
</Form>
);
};
export default App;

1
components/form/demo/col-24-debug.tsx
View File

@ -38,6 +38,7 @@ const App: React.FC = () => {
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
style={{ maxWidth: 600 }}
autoComplete="off"
>
<Form.Item

12
components/form/demo/complex-form-control.tsx
View File

@ -3,13 +3,18 @@ import { Button, Form, Input, Select, Space, Tooltip, Typography } from 'antd';
const { Option } = Select;
const App: React.FC = () => {
const onFinish = (values: any) => {
console.log('Received values of form: ', values);
};
return (
<Form name="complex-form" onFinish={onFinish} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
const App: React.FC = () => (
<Form
name="complex-form"
onFinish={onFinish}
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
style={{ maxWidth: 600 }}
>
<Form.Item label="Username">
<Space>
<Form.Item
@ -68,6 +73,5 @@ const App: React.FC = () => {
</Form.Item>
</Form>
);
};
export default App;

20
components/form/demo/control-hooks.tsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { Button, Form, Input, Select } from 'antd';
import React from 'react';
const { Option } = Select;
@ -7,6 +7,7 @@ const layout = {
labelCol: { span: 8 },
wrapperCol: { span: 16 },
};
const tailLayout = {
wrapperCol: { offset: 8, span: 16 },
};
@ -18,10 +19,10 @@ const App: React.FC = () => {
switch (value) {
case 'male':
form.setFieldsValue({ note: 'Hi, man!' });
return;
break;
case 'female':
form.setFieldsValue({ note: 'Hi, lady!' });
return;
break;
case 'other':
form.setFieldsValue({ note: 'Hi there!' });
break;
@ -38,14 +39,17 @@ const App: React.FC = () => {
};
const onFill = () => {
form.setFieldsValue({
note: 'Hello world!',
gender: 'male',
});
form.setFieldsValue({ note: 'Hello world!', gender: 'male' });
};
return (
<Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
<Form
{...layout}
form={form}
name="control-hooks"
onFinish={onFinish}
style={{ maxWidth: 600 }}
>
<Form.Item name="note" label="Note" rules={[{ required: true }]}>
<Input />
</Form.Item>

13
components/form/demo/control-ref.tsx
View File

@ -8,6 +8,7 @@ const layout = {
labelCol: { span: 8 },
wrapperCol: { span: 16 },
};
const tailLayout = {
wrapperCol: { offset: 8, span: 16 },
};
@ -19,10 +20,10 @@ const App: React.FC = () => {
switch (value) {
case 'male':
formRef.current?.setFieldsValue({ note: 'Hi, man!' });
return;
break;
case 'female':
formRef.current?.setFieldsValue({ note: 'Hi, lady!' });
return;
break;
case 'other':
formRef.current?.setFieldsValue({ note: 'Hi there!' });
break;
@ -44,7 +45,13 @@ const App: React.FC = () => {
};
return (
<Form {...layout} ref={formRef} name="control-ref" onFinish={onFinish}>
<Form
{...layout}
ref={formRef}
name="control-ref"
onFinish={onFinish}
style={{ maxWidth: 600 }}
>
<Form.Item name="note" label="Note" rules={[{ required: true }]}>
<Input />
</Form.Item>

6
components/form/demo/dep-debug.tsx
View File

@ -9,10 +9,8 @@ const App: React.FC = () => {
<Form
form={form}
name="debug"
initialValues={{
debug1: 'debug1',
debug2: 'debug2',
}}
initialValues={{ debug1: 'debug1', debug2: 'debug2' }}
style={{ maxWidth: 600 }}
>
<Form.Item noStyle dependencies={['debug1']}>
{

2
components/form/demo/disabled-input-debug.md
View File

@ -4,4 +4,4 @@ Test disabled Input with validate state
## en-US
Test disabled Input with validate state
Test disabled Input with validate state.

2
components/form/demo/disabled-input-debug.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { Form, Input } from 'antd';
const App: React.FC = () => (
<Form>
<Form style={{ maxWidth: 600 }}>
<Form.Item label="Normal0">
<Input placeholder="unavailable choice" value="Buggy!" />
</Form.Item>

3
components/form/demo/disabled.tsx
View File

@ -18,7 +18,7 @@ import {
const { RangePicker } = DatePicker;
const { TextArea } = Input;
const FormDisabledDemo = () => {
const FormDisabledDemo: React.FC = () => {
const [componentDisabled, setComponentDisabled] = useState<boolean>(true);
const onFormLayoutChange = ({ disabled }: { disabled: boolean }) => {
setComponentDisabled(disabled);
@ -38,6 +38,7 @@ const FormDisabledDemo = () => {
layout="horizontal"
onValuesChange={onFormLayoutChange}
disabled={componentDisabled}
style={{ maxWidth: 600 }}
>
<Form.Item label="Checkbox" name="disabled" valuePropName="checked">
<Checkbox>Checkbox</Checkbox>

9
components/form/demo/dynamic-form-item.md
View File

@ -24,12 +24,3 @@ Add or remove form items dynamically. `add` function support config initial valu
opacity: 0.5;
}
```
<style>
[data-theme="dark"] .dynamic-delete-button {
color: rgba(255,255,255,.45);
}
[data-theme="dark"] .dynamic-delete-button:hover {
color: rgba(255,255,255,.65);
}
</style>

8
components/form/demo/dynamic-form-item.tsx
View File

@ -12,6 +12,7 @@ const formItemLayout = {
sm: { span: 20 },
},
};
const formItemLayoutWithOutLabel = {
wrapperCol: {
xs: { span: 24, offset: 0 },
@ -25,7 +26,12 @@ const App: React.FC = () => {
};
return (
<Form name="dynamic_form_item" {...formItemLayoutWithOutLabel} onFinish={onFinish}>
<Form
name="dynamic_form_item"
{...formItemLayoutWithOutLabel}
onFinish={onFinish}
style={{ maxWidth: 600 }}
>
<Form.List
name="names"
rules={[

8
components/form/demo/dynamic-form-items-complex.tsx
View File

@ -28,7 +28,13 @@ const App: React.FC = () => {
};
return (
<Form form={form} name="dynamic_form_complex" onFinish={onFinish} autoComplete="off">
<Form
form={form}
name="dynamic_form_complex"
onFinish={onFinish}
style={{ maxWidth: 600 }}
autoComplete="off"
>
<Form.Item name="area" label="Area" rules={[{ required: true, message: 'Missing area' }]}>
<Select options={areas} onChange={handleChange} />
</Form.Item>

11
components/form/demo/dynamic-form-items-no-style.tsx
View File

@ -2,13 +2,17 @@ import React from 'react';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Form, Input, Space } from 'antd';
const App: React.FC = () => {
const onFinish = (values: any) => {
console.log('Received values of form:', values);
};
return (
<Form name="dynamic_form_no_style" onFinish={onFinish} autoComplete="off">
const App: React.FC = () => (
<Form
name="dynamic_form_no_style"
onFinish={onFinish}
style={{ maxWidth: 600 }}
autoComplete="off"
>
<Form.Item label="Users">
<Form.List name="users">
{(fields, { add, remove }) => (
@ -44,6 +48,5 @@ const App: React.FC = () => {
</Form.Item>
</Form>
);
};
export default App;

11
components/form/demo/dynamic-form-items.tsx
View File

@ -2,13 +2,17 @@ import React from 'react';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Form, Input, Space } from 'antd';
const App: React.FC = () => {
const onFinish = (values: any) => {
console.log('Received values of form:', values);
};
return (
<Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
const App: React.FC = () => (
<Form
name="dynamic_form_nest_item"
onFinish={onFinish}
style={{ maxWidth: 600 }}
autoComplete="off"
>
<Form.List name="users">
{(fields, { add, remove }) => (
<>
@ -46,6 +50,5 @@ const App: React.FC = () => {
</Form.Item>
</Form>
);
};
export default App;

16
components/form/demo/dynamic-rule.tsx
View File

@ -33,17 +33,12 @@ const App: React.FC = () => {
};
return (
<Form form={form} name="dynamic_rule">
<Form form={form} name="dynamic_rule" style={{ maxWidth: 600 }}>
<Form.Item
{...formItemLayout}
name="username"
label="Name"
rules={[
{
required: true,
message: 'Please input your name',
},
]}
rules={[{ required: true, message: 'Please input your name' }]}
>
<Input placeholder="Please input your name" />
</Form.Item>
@ -51,12 +46,7 @@ const App: React.FC = () => {
{...formItemLayout}
name="nickname"
label="Nickname"
rules={[
{
required: checkNick,
message: 'Please input your nickname',
},
]}
rules={[{ required: checkNick, message: 'Please input your nickname' }]}
>
<Input placeholder="Please input your nickname" />
</Form.Item>

15
components/form/demo/form-context.md
View File

@ -5,18 +5,3 @@
## en-US
Use `Form.Provider` to process data between forms. In this case, submit button is in the Modal which is out of Form. You can use `form.submit` to submit form. Besides, we recommend native `<Button htmlType="submit" />` to submit a form.
```css
#components-form-demo-form-context .user {
margin-bottom: 8px;
}
#components-form-demo-form-context .user .ant-avatar {
margin-right: 8px;
}
.ant-row-rtl #components-form-demo-form-context .user .ant-avatar {
margin-right: 0;
margin-left: 8px;
}
```

3
components/form/demo/form-context.tsx
View File

@ -7,6 +7,7 @@ const layout = {
labelCol: { span: 8 },
wrapperCol: { span: 16 },
};
const tailLayout = {
wrapperCol: { offset: 8, span: 16 },
};
@ -88,7 +89,7 @@ const App: React.FC = () => {
}
}}
>
<Form {...layout} name="basicForm" onFinish={onFinish}>
<Form {...layout} name="basicForm" onFinish={onFinish} style={{ maxWidth: 600 }}>
<Form.Item name="group" label="Group Name" rules={[{ required: true }]}>
<Input />
</Form.Item>

7
components/form/demo/label-debug.tsx
View File

@ -2,7 +2,12 @@ import React from 'react';
import { Form, Input, Typography } from 'antd';
const App: React.FC = () => (
<Form name="label-ellipsis" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
<Form
name="label-ellipsis"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
style={{ maxWidth: 600 }}
>
<Form.Item
label={
<Typography.Text ellipsis>

1
components/form/demo/layout-can-wrap.tsx
View File

@ -9,6 +9,7 @@ const App: React.FC = () => (
labelWrap
wrapperCol={{ flex: 1 }}
colon={false}
style={{ maxWidth: 600 }}
>
<Form.Item label="正常标签文案" name="username" rules={[{ required: true }]}>
<Input />

14
components/form/demo/layout.tsx
View File

@ -12,19 +12,10 @@ const App: React.FC = () => {
};
const formItemLayout =
formLayout === 'horizontal'
? {
labelCol: { span: 4 },
wrapperCol: { span: 14 },
}
: null;
formLayout === 'horizontal' ? { labelCol: { span: 4 }, wrapperCol: { span: 14 } } : null;
const buttonItemLayout =
formLayout === 'horizontal'
? {
wrapperCol: { span: 14, offset: 4 },
}
: null;
formLayout === 'horizontal' ? { wrapperCol: { span: 14, offset: 4 } } : null;
return (
<Form
@ -33,6 +24,7 @@ const App: React.FC = () => {
form={form}
initialValues={{ layout: formLayout }}
onValuesChange={onFormLayoutChange}
style={{ maxWidth: 600 }}
>
<Form.Item label="Form Layout" name="layout">
<Radio.Group value={formLayout}>

12
components/form/demo/nest-messages.tsx
View File

@ -19,13 +19,18 @@ const validateMessages = {
};
/* eslint-enable no-template-curly-in-string */
const App: React.FC = () => {
const onFinish = (values: any) => {
console.log(values);
};
return (
<Form {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}>
const App: React.FC = () => (
<Form
{...layout}
name="nest-messages"
onFinish={onFinish}
style={{ maxWidth: 600 }}
validateMessages={validateMessages}
>
<Form.Item name={['user', 'name']} label="Name" rules={[{ required: true }]}>
<Input />
</Form.Item>
@ -48,6 +53,5 @@ const App: React.FC = () => {
</Form.Item>
</Form>
);
};
export default App;

2
components/form/demo/ref-item.tsx
View File

@ -7,7 +7,7 @@ const App: React.FC = () => {
const ref = React.useRef<InputRef>(null);
return (
<Form form={form} initialValues={{ list: ['light'] }}>
<Form form={form} initialValues={{ list: ['light'] }} style={{ maxWidth: 600 }}>
<Form.Item name="test" label="test">
<Input ref={ref} />
</Form.Item>

18
components/form/demo/register.tsx
View File

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import type { CascaderProps } from 'antd';
import {
AutoComplete,
Button,
@ -11,10 +11,17 @@ import {
Row,
Select,
} from 'antd';
import React, { useState } from 'react';
const { Option } = Select;
const residences = [
interface DataNodeType {
value: string;
label: string;
children?: DataNodeType[];
}
const residences: CascaderProps<DataNodeType>['options'] = [
{
value: 'zhejiang',
label: 'Zhejiang',
@ -59,6 +66,7 @@ const formItemLayout = {
sm: { span: 16 },
},
};
const tailFormItemLayout = {
wrapperCol: {
xs: {
@ -118,10 +126,8 @@ const App: React.FC = () => {
form={form}
name="register"
onFinish={onFinish}
initialValues={{
residence: ['zhejiang', 'hangzhou', 'xihu'],
prefix: '86',
}}
initialValues={{ residence: ['zhejiang', 'hangzhou', 'xihu'], prefix: '86' }}
style={{ maxWidth: 600 }}
scrollToFirstError
>
<Form.Item

8
components/form/demo/size.tsx
View File

@ -29,6 +29,7 @@ const App: React.FC = () => {
initialValues={{ size: componentSize }}
onValuesChange={onFormLayoutChange}
size={componentSize as SizeType}
style={{ maxWidth: 600 }}
>
<Form.Item label="Form Size" name="size">
<Radio.Group>
@ -58,12 +59,7 @@ const App: React.FC = () => {
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
},
],
children: [{ value: 'hangzhou', label: 'Hangzhou' }],
},
]}
/>

20
components/form/demo/time-related-controls.tsx
View File

@ -13,14 +13,15 @@ const formItemLayout = {
sm: { span: 16 },
},
};
const config = {
rules: [{ type: 'object' as const, required: true, message: 'Please select time!' }],
};
const rangeConfig = {
rules: [{ type: 'array' as const, required: true, message: 'Please select time!' }],
};
const App: React.FC = () => {
const onFinish = (fieldsValue: any) => {
// Should format date value before submit.
const rangeValue = fieldsValue['range-picker'];
@ -40,8 +41,13 @@ const App: React.FC = () => {
console.log('Received values of form: ', values);
};
return (
<Form name="time_related_controls" {...formItemLayout} onFinish={onFinish}>
const App: React.FC = () => (
<Form
name="time_related_controls"
{...formItemLayout}
onFinish={onFinish}
style={{ maxWidth: 600 }}
>
<Form.Item name="date-picker" label="DatePicker" {...config}>
<DatePicker />
</Form.Item>
@ -60,18 +66,12 @@ const App: React.FC = () => {
<Form.Item name="time-picker" label="TimePicker" {...config}>
<TimePicker />
</Form.Item>
<Form.Item
wrapperCol={{
xs: { span: 24, offset: 0 },
sm: { span: 16, offset: 8 },
}}
>
<Form.Item wrapperCol={{ xs: { span: 24, offset: 0 }, sm: { span: 16, offset: 8 } }}>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
};
export default App;

2
components/form/demo/useWatch.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import { Form, Input, InputNumber, Typography } from 'antd';
const Demo = () => {
const Demo: React.FC = () => {
const [form] = Form.useForm<{ name: string; age: number }>();
const nameValue = Form.useWatch('name', form);

11
components/form/demo/validate-other.tsx
View File

@ -30,21 +30,17 @@ const normFile = (e: any) => {
return e?.fileList;
};
const App: React.FC = () => {
const onFinish = (values: any) => {
console.log('Received values of form: ', values);
};
return (
const App: React.FC = () => (
<Form
name="validate_other"
{...formItemLayout}
onFinish={onFinish}
initialValues={{
'input-number': 3,
'checkbox-group': ['A', 'B'],
rate: 3.5,
}}
initialValues={{ 'input-number': 3, 'checkbox-group': ['A', 'B'], rate: 3.5 }}
style={{ maxWidth: 600 }}
>
<Form.Item label="Plain Text">
<span className="ant-form-text">China</span>
@ -191,6 +187,5 @@ const App: React.FC = () => {
</Form.Item>
</Form>
);
};
export default App;

2
components/form/demo/validate-static.tsx
View File

@ -26,7 +26,7 @@ const formItemLayout = {
};
const App: React.FC = () => (
<Form {...formItemLayout}>
<Form {...formItemLayout} style={{ maxWidth: 600 }}>
<Form.Item
label="Fail"
validateStatus="error"

12
components/form/demo/without-form-create.tsx
View File

@ -26,17 +26,15 @@ const formItemLayout = {
wrapperCol: { span: 12 },
};
const tips =
'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.';
const App: React.FC = () => {
const [number, setNumber] = useState<{
value: number;
validateStatus?: ValidateStatus;
errorMsg?: string | null;
}>({
value: 11,
});
const tips =
'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.';
}>({ value: 11 });
const onNumberChange = (value: number) => {
setNumber({
@ -46,7 +44,7 @@ const App: React.FC = () => {
};
return (
<Form>
<Form style={{ maxWidth: 600 }}>
<Form.Item
{...formItemLayout}
label="Prime between 8 & 12"

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

@ -441,16 +441,6 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
| warningOnly | Warning only. Not block form submit | boolean | 4.17.0 |
| whitespace | Failed if only has whitespace, only work with `type: 'string'` rule | boolean | |
<style>
.code-box-demo .ant-form:not(.ant-form-inline):not(.ant-form-vertical) {
max-width: 600px;
}
.markdown.api-container table td:nth-of-type(4) {
white-space: nowrap;
word-wrap: break-word;
}
</style>
## FAQ
### Custom validator not working
@ -543,9 +533,6 @@ React can not get correct interaction of controlled component with async value u
.site-form-item-icon {
color: rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .site-form-item-icon {
color: rgba(255,255,255,.3);
}
</style>
### `scrollToFirstError` and `scrollToField` not working on custom form control?

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

@ -440,16 +440,6 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
| warningOnly | 仅警告，不阻塞表单提交 | boolean | 4.17.0 |
| whitespace | 如果字段仅包含空格则校验不通过，只在 `type: 'string'` 时生效 | boolean | |
<style>
.code-box-demo .ant-form:not(.ant-form-inline):not(.ant-form-vertical) {
max-width: 600px;
}
.markdown.api-container table td:nth-of-type(4) {
white-space: nowrap;
word-wrap: break-word;
}
</style>
## FAQ
### 自定义 validator 没有效果
@ -542,9 +532,6 @@ React 中异步更新会导致受控组件交互行为异常。当用户交互
.site-form-item-icon {
color: rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .site-form-item-icon {
color: rgba(255,255,255,.3);
}
</style>
### 自定义表单控件 `scrollToFirstError` 和 `scrollToField` 失效？

6
components/grid/demo/gutter.md
View File

@ -24,9 +24,3 @@ You can use an array to set vertical spacing, `[horizontal, vertical]` `[16, { x
background: #00a0e9;
}
```
<style>
[data-theme="dark"] .gutter-box {
background: #028ac8;
}
</style>

6
components/grid/demo/playground.md
View File

@ -31,9 +31,3 @@ A simple playground for column count and gutter.
padding: 0;
}
```
<style>
[data-theme="dark"] #components-grid-demo-playground [class~='ant-col'] > div {
background: #028ac8;
}
</style>

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

@ -84,10 +84,3 @@ If the Ant Design grid layout component does not meet your needs, you can use th
You can modify the breakpoints values using by modifying `screen[XS|SM|MD|LG|XL|XXL]` with [theme customization](/docs/react/customize-theme) (since 5.1.0, [sandbox demo](https://codesandbox.io/s/antd-reproduction-template-forked-dlq3r9?file=/index.js)).
The breakpoints of responsive grid follow [BootStrap 4 media queries rules](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints) (not including `occasionally part`).
<style>
[data-theme="dark"] #components-grid-demo-playground pre {
background: rgba(255,255,255,0.8);
color: rgba(255,255,255,.65);
}
</style>

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

@ -83,10 +83,3 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
您可以使用 [主题定制](/docs/react/customize-theme-cn) 修改 `screen[XS|SM|MD|LG|XL|XXL]` 来修改断点值（自 5.1.0 起，[codesandbox demo](https://codesandbox.io/s/antd-reproduction-template-forked-dlq3r9?file=/index.js)）。
响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。
<style>
[data-theme="dark"] #components-grid-demo-playground pre {
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,.65);
}
</style>

6
components/input-number/style/index.ts
View File

@ -54,7 +54,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
[componentCls]: {
...resetComponent(token),
...genBasicInputStyle(token),
...genStatusStyle(token),
...genStatusStyle(token, componentCls),
display: 'inline-block',
width: controlWidth,
@ -308,7 +308,7 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
return {
[`${componentCls}-affix-wrapper`]: {
...genBasicInputStyle(token),
...genStatusStyle(token),
...genStatusStyle(token, `${componentCls}-affix-wrapper`),
// or number handler will cover form status
position: 'relative',
display: 'inline-flex',
@ -324,7 +324,7 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
borderRadius: borderRadiusSM,
},
'&:not(&-disabled):hover': {
[`&:not(${componentCls}-affix-wrapper-disabled):hover`]: {
...genHoverStyle(token),
zIndex: 1,
},

6
components/input/demo/group.md
View File

@ -33,9 +33,3 @@ Note: You don't need `Col` to control the width in the `compact` mode.
border-right-width: 1px;
}
```
<style>
[data-theme="dark"] .site-input-group-wrapper .site-input-split {
background-color: transparent;
}
</style>

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

@ -78,7 +78,7 @@ export const genInputSmallStyle = (token: InputToken): CSSObject => ({
borderRadius: token.borderRadiusSM,
});
export const genStatusStyle = (token: InputToken): CSSObject => {
export const genStatusStyle = (token: InputToken, parentCls: string): CSSObject => {
const {
componentCls,
colorError,
@ -90,7 +90,7 @@ export const genStatusStyle = (token: InputToken): CSSObject => {
} = token;
return {
'&-status-error:not(&-disabled):not(&-borderless)&': {
[`&-status-error:not(${parentCls}-disabled):not(${parentCls}-borderless)${parentCls}`]: {
borderColor: colorError,
'&:hover': {
@ -111,7 +111,7 @@ export const genStatusStyle = (token: InputToken): CSSObject => {
color: colorError,
},
},
'&-status-warning:not(&-disabled):not(&-borderless)&': {
[`&-status-warning:not(${parentCls}-disabled):not(${parentCls}-borderless)${parentCls}`]: {
borderColor: colorWarning,
'&:hover': {
@ -511,10 +511,10 @@ const genInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
const colorSmallPadding = (controlHeightSM - lineWidth * 2 - FIXED_CHROME_COLOR_HEIGHT) / 2;
return {
[`${componentCls}`]: {
[componentCls]: {
...resetComponent(token),
...genBasicInputStyle(token),
...genStatusStyle(token),
...genStatusStyle(token, componentCls),
'&[type="color"]': {
height: token.controlHeight,
@ -581,7 +581,7 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
...genBasicInputStyle(token),
display: 'inline-flex',
'&:not(&-disabled):hover': {
[`&:not(${componentCls}-affix-wrapper-disabled):hover`]: {
...genHoverStyle(token),
zIndex: 1,
[`${componentCls}-search-with-button &`]: {
@ -659,7 +659,7 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
},
// status
...genStatusStyle(token),
...genStatusStyle(token, `${componentCls}-affix-wrapper`),
},
};
};

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

@ -577,6 +577,7 @@ exports[`renders ./components/layout/demo/fixed.tsx extend context correctly 1`]
<ul
class="ant-menu ant-menu-sub ant-menu-vertical"
data-menu-list="true"
role="menu"
/>
</div>
</div>
@ -2104,6 +2105,7 @@ exports[`renders ./components/layout/demo/side.tsx extend context correctly 1`]
<ul
class="ant-menu ant-menu-sub ant-menu-inline"
data-menu-list="true"
role="menu"
>
<li
class="ant-menu-item ant-menu-item-only-child"
@ -2259,6 +2261,7 @@ exports[`renders ./components/layout/demo/side.tsx extend context correctly 1`]
<ul
class="ant-menu ant-menu-sub ant-menu-inline"
data-menu-list="true"
role="menu"
>
<li
class="ant-menu-item ant-menu-item-only-child"
@ -3221,6 +3224,7 @@ exports[`renders ./components/layout/demo/top.tsx extend context correctly 1`] =
<ul
class="ant-menu ant-menu-sub ant-menu-vertical"
data-menu-list="true"
role="menu"
/>
</div>
</div>
@ -3787,6 +3791,7 @@ exports[`renders ./components/layout/demo/top-side.tsx extend context correctly
<ul
class="ant-menu ant-menu-sub ant-menu-vertical"
data-menu-list="true"
role="menu"
/>
</div>
</div>
@ -3977,6 +3982,7 @@ exports[`renders ./components/layout/demo/top-side.tsx extend context correctly
<ul
class="ant-menu ant-menu-sub ant-menu-inline"
data-menu-list="true"
role="menu"
>
<li
class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child"
@ -4120,6 +4126,7 @@ exports[`renders ./components/layout/demo/top-side.tsx extend context correctly
<ul
class="ant-menu ant-menu-sub ant-menu-inline"
data-menu-list="true"
role="menu"
>
<li
class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child"
@ -4307,6 +4314,7 @@ exports[`renders ./components/layout/demo/top-side.tsx extend context correctly
<ul
class="ant-menu ant-menu-sub ant-menu-inline"
data-menu-list="true"
role="menu"
>
<li
class="ant-menu-item ant-menu-item-only-child"
@ -4496,6 +4504,7 @@ exports[`renders ./components/layout/demo/top-side.tsx extend context correctly
<ul
class="ant-menu ant-menu-sub ant-menu-inline"
data-menu-list="true"
role="menu"
>
<li
class="ant-menu-item ant-menu-item-only-child"
@ -5088,6 +5097,7 @@ exports[`renders ./components/layout/demo/top-side-2.tsx extend context correctl
<ul
class="ant-menu ant-menu-sub ant-menu-vertical"
data-menu-list="true"
role="menu"
/>
</div>
</div>
@ -5230,6 +5240,7 @@ exports[`renders ./components/layout/demo/top-side-2.tsx extend context correctl
<ul
class="ant-menu ant-menu-sub ant-menu-inline"
data-menu-list="true"
role="menu"
>
<li
class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child"
@ -5373,6 +5384,7 @@ exports[`renders ./components/layout/demo/top-side-2.tsx extend context correctl
<ul
class="ant-menu ant-menu-sub ant-menu-inline"
data-menu-list="true"
role="menu"
>
<li
class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child"
@ -5560,6 +5572,7 @@ exports[`renders ./components/layout/demo/top-side-2.tsx extend context correctl
<ul
class="ant-menu ant-menu-sub ant-menu-inline"
data-menu-list="true"
role="menu"
>
<li
class="ant-menu-item ant-menu-item-only-child"
@ -5749,6 +5762,7 @@ exports[`renders ./components/layout/demo/top-side-2.tsx extend context correctl
<ul
class="ant-menu ant-menu-sub ant-menu-inline"
data-menu-list="true"
role="menu"
>
<li
class="ant-menu-item ant-menu-item-only-child"

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

@ -1912,6 +1912,7 @@ exports[`renders ./components/layout/demo/top-side.tsx correctly 1`] = `
<ul
class="ant-menu ant-menu-sub ant-menu-inline"
data-menu-list="true"
role="menu"
>
<li
class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child"
@ -2224,6 +2225,7 @@ exports[`renders ./components/layout/demo/top-side-2.tsx correctly 1`] = `
<ul
class="ant-menu ant-menu-sub ant-menu-inline"
data-menu-list="true"
role="menu"
>
<li
class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child"

28
components/layout/demo/basic.md
View File

@ -5,31 +5,3 @@
## en-US
Classic page layouts.
<style>
#components-layout-demo-basic .code-box-demo {
text-align: center;
}
#components-layout-demo-basic .ant-layout-header,
#components-layout-demo-basic .ant-layout-footer {
color: #fff;
background: #7dbcea;
}
#components-layout-demo-basic .ant-layout-footer {
line-height: 1.5;
}
#components-layout-demo-basic .ant-layout-sider {
color: #fff;
line-height: 120px;
background: #3ba0e9;
}
#components-layout-demo-basic .ant-layout-content {
min-height: 120px;
color: #fff;
line-height: 120px;
background: rgba(16, 142, 233, 1);
}
#components-layout-demo-basic > .code-box-demo > .ant-layout + .ant-layout {
margin-top: 48px;
}
</style>

7
components/locale/pt_BR.ts
View File

@ -21,6 +21,8 @@ const localeValues: Locale = {
filterConfirm: 'OK',
filterReset: 'Resetar',
filterEmptyText: 'Sem filtros',
filterCheckall: 'Selecionar todos os itens',
filterSearchPlaceholder: 'Pesquisar nos filtros',
emptyText: 'Sem conteúdo',
selectAll: 'Selecionar página atual',
selectInvert: 'Inverter seleção',
@ -33,6 +35,11 @@ const localeValues: Locale = {
triggerAsc: 'Clique organiza por ascendente',
cancelSort: 'Clique para cancelar organização',
},
Tour: {
Next: 'Próximo',
Previous: 'Anterior',
Finish: 'Finalizar',
},
Modal: {
okText: 'OK',
cancelText: 'Cancelar',

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