mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 09:26:06 +08:00
merge feature into master-to-merge-feature
This commit is contained in:
afc163
commit
e12e2971d8
@ -27,6 +27,7 @@ Array [
|
||||
"Drawer",
|
||||
"Empty",
|
||||
"Form",
|
||||
"Grid",
|
||||
"Input",
|
||||
"InputNumber",
|
||||
"Layout",
|
||||
@ -49,6 +50,7 @@ Array [
|
||||
"Select",
|
||||
"Skeleton",
|
||||
"Slider",
|
||||
"Space",
|
||||
"Spin",
|
||||
"Steps",
|
||||
"Switch",
|
||||
|
||||
18
components/_util/getRenderPropValue.ts
Normal file
18
components/_util/getRenderPropValue.ts
Normal file
@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
|
||||
export type RenderFunction = () => React.ReactNode;
|
||||
|
||||
export const getRenderPropValue = (
|
||||
propValue?: React.ReactNode | RenderFunction,
|
||||
): React.ReactNode => {
|
||||
if (!propValue) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const isRenderFunction = typeof propValue === 'function';
|
||||
if (isRenderFunction) {
|
||||
return (propValue as RenderFunction)();
|
||||
}
|
||||
|
||||
return propValue;
|
||||
};
|
||||
@ -7,11 +7,11 @@ title:
|
||||
|
||||
## zh-CN
|
||||
|
||||
3.16.0 后新增。我们添加了多种预设色彩的徽标样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。
|
||||
我们添加了多种预设色彩的徽标样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。
|
||||
|
||||
## en-US
|
||||
|
||||
New feature after 3.16.0. We preset a series of colorful Badge styles for use in different situations. You can also set it to a hex color string for custom color.
|
||||
We preset a series of colorful Badge styles for use in different situations. You can also set it to a hex color string for custom color.
|
||||
|
||||
```jsx
|
||||
import { Badge } from 'antd';
|
||||
|
||||
@ -10,6 +10,7 @@ export interface BreadcrumbItemProps {
|
||||
separator?: React.ReactNode;
|
||||
href?: string;
|
||||
overlay?: DropDownProps['overlay'];
|
||||
dropdownProps?: DropDownProps;
|
||||
onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
|
||||
}
|
||||
|
||||
@ -58,10 +59,10 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
|
||||
* Wrap a DropDown
|
||||
*/
|
||||
renderBreadcrumbNode = (breadcrumbItem: React.ReactNode, prefixCls: string) => {
|
||||
const { overlay } = this.props;
|
||||
const { overlay, dropdownProps } = this.props;
|
||||
if (overlay) {
|
||||
return (
|
||||
<DropDown overlay={overlay} placement="bottomCenter">
|
||||
<DropDown overlay={overlay} placement="bottomCenter" {...dropdownProps}>
|
||||
<span className={`${prefixCls}-overlay-link`}>
|
||||
{breadcrumbItem}
|
||||
<DownOutlined />
|
||||
|
||||
@ -30,6 +30,7 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
|
||||
| href | Target of hyperlink | string | - | |
|
||||
| overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - | |
|
||||
| onClick | Set the handler to handle `click` event | (e:MouseEvent)=>void | - | |
|
||||
| dropdownProps | The dropdown props | [Dropdown](/components/dropdown) | - | |
|
||||
|
||||
### Breadcrumb.Separator
|
||||
|
||||
|
||||
@ -26,11 +26,12 @@ title: Breadcrumb
|
||||
|
||||
### Breadcrumb.Item
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ------- | -------------- | -------------------------------------- | ------ | ---- |
|
||||
| href | 链接的目的地 | string | - | |
|
||||
| overlay | 下拉菜单的内容 | [Menu](/components/menu) \| () => Menu | - | |
|
||||
| onClick | 单击事件 | (e:MouseEvent)=>void | - | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| href | 链接的目的地 | string | - | |
|
||||
| overlay | 下拉菜单的内容 | [Menu](/components/menu) \| () => Menu | - | |
|
||||
| onClick | 单击事件 | (e:MouseEvent)=>void | - | |
|
||||
| dropdownProps | 弹出下拉菜单的自定义配置 | [Dropdown](/components/dropdown) | - | |
|
||||
|
||||
### Breadcrumb.Separator
|
||||
|
||||
|
||||
@ -204,9 +204,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell"
|
||||
title="2016-10-30"
|
||||
@ -327,9 +325,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2016-11-06"
|
||||
@ -450,9 +446,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2016-11-13"
|
||||
@ -573,9 +567,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2016-11-20"
|
||||
@ -696,9 +688,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2016-11-27"
|
||||
@ -819,9 +809,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell"
|
||||
title="2016-12-04"
|
||||
@ -1157,9 +1145,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell"
|
||||
title="2016-10-30"
|
||||
@ -1280,9 +1266,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2016-11-06"
|
||||
@ -1403,9 +1387,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2016-11-13"
|
||||
@ -1526,9 +1508,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2016-11-20"
|
||||
@ -1649,9 +1629,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2016-11-27"
|
||||
@ -1772,9 +1750,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell"
|
||||
title="2016-12-04"
|
||||
@ -2136,9 +2112,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell"
|
||||
title="2016-10-30"
|
||||
@ -2259,9 +2233,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2016-11-06"
|
||||
@ -2382,9 +2354,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2016-11-13"
|
||||
@ -2505,9 +2475,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2016-11-20"
|
||||
@ -2628,9 +2596,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2016-11-27"
|
||||
@ -2751,9 +2717,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell"
|
||||
title="2016-12-04"
|
||||
@ -3087,9 +3051,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell"
|
||||
title="2016-10-30"
|
||||
@ -3238,9 +3200,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2016-11-06"
|
||||
@ -3461,9 +3421,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2016-11-13"
|
||||
@ -3697,9 +3655,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2016-11-20"
|
||||
@ -3848,9 +3804,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2016-11-27"
|
||||
@ -3999,9 +3953,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell"
|
||||
title="2016-12-04"
|
||||
@ -4448,9 +4400,7 @@ exports[`renders ./components/calendar/demo/select.md correctly 1`] = `
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2017-01-01"
|
||||
@ -4571,9 +4521,7 @@ exports[`renders ./components/calendar/demo/select.md correctly 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2017-01-08"
|
||||
@ -4694,9 +4642,7 @@ exports[`renders ./components/calendar/demo/select.md correctly 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2017-01-15"
|
||||
@ -4817,9 +4763,7 @@ exports[`renders ./components/calendar/demo/select.md correctly 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2017-01-22"
|
||||
@ -4940,9 +4884,7 @@ exports[`renders ./components/calendar/demo/select.md correctly 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2017-01-29"
|
||||
@ -5063,9 +5005,7 @@ exports[`renders ./components/calendar/demo/select.md correctly 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell"
|
||||
title="2017-02-05"
|
||||
|
||||
@ -206,9 +206,7 @@ exports[`Calendar Calendar should support locale 1`] = `
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2018-10-01"
|
||||
@ -329,9 +327,7 @@ exports[`Calendar Calendar should support locale 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2018-10-08"
|
||||
@ -452,9 +448,7 @@ exports[`Calendar Calendar should support locale 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2018-10-15"
|
||||
@ -575,9 +569,7 @@ exports[`Calendar Calendar should support locale 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2018-10-22"
|
||||
@ -698,9 +690,7 @@ exports[`Calendar Calendar should support locale 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2018-10-29"
|
||||
@ -821,9 +811,7 @@ exports[`Calendar Calendar should support locale 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell"
|
||||
title="2018-11-05"
|
||||
@ -1156,9 +1144,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell"
|
||||
title="2000-08-27"
|
||||
@ -1279,9 +1265,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2000-09-03"
|
||||
@ -1402,9 +1386,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2000-09-10"
|
||||
@ -1525,9 +1507,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2000-09-17"
|
||||
@ -1648,9 +1628,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2000-09-24"
|
||||
@ -1771,9 +1749,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell"
|
||||
title="2000-10-01"
|
||||
|
||||
@ -846,7 +846,7 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-tabs-bar ant-tabs-top-bar ant-tabs-large-bar"
|
||||
role="tablist"
|
||||
tabindex="0"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="ant-tabs-nav-container"
|
||||
@ -920,18 +920,24 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
aria-controls="tabpane-tab1"
|
||||
aria-disabled="false"
|
||||
aria-selected="true"
|
||||
class="ant-tabs-tab-active ant-tabs-tab"
|
||||
id="tab-tab1"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
tab1
|
||||
</div>
|
||||
<div
|
||||
aria-controls="tabpane-tab2"
|
||||
aria-disabled="false"
|
||||
aria-selected="false"
|
||||
class=" ant-tabs-tab"
|
||||
id="tab-tab2"
|
||||
role="tab"
|
||||
tabindex="-1"
|
||||
>
|
||||
tab2
|
||||
</div>
|
||||
@ -944,11 +950,6 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
role="presentation"
|
||||
style="width:0;height:0;overflow:hidden;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content"
|
||||
style="margin-left:0%"
|
||||
@ -957,29 +958,17 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
|
||||
aria-hidden="false"
|
||||
class="ant-tabs-tabpane ant-tabs-tabpane-active"
|
||||
role="tabpanel"
|
||||
>
|
||||
<div
|
||||
role="presentation"
|
||||
style="width:0;height:0;overflow:hidden;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
role="presentation"
|
||||
style="width:0;height:0;overflow:hidden;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
style="visibility:visible"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
|
||||
role="tabpanel"
|
||||
style="visibility:hidden"
|
||||
tabindex="-1"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
role="presentation"
|
||||
style="width:0;height:0;overflow:hidden;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -1008,7 +997,7 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-tabs-bar ant-tabs-top-bar ant-tabs-large-bar"
|
||||
role="tablist"
|
||||
tabindex="0"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="ant-tabs-extra-content"
|
||||
@ -1092,26 +1081,35 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
aria-controls="tabpane-article"
|
||||
aria-disabled="false"
|
||||
aria-selected="false"
|
||||
class=" ant-tabs-tab"
|
||||
id="tab-article"
|
||||
role="tab"
|
||||
tabindex="-1"
|
||||
>
|
||||
article
|
||||
</div>
|
||||
<div
|
||||
aria-controls="tabpane-app"
|
||||
aria-disabled="false"
|
||||
aria-selected="true"
|
||||
class="ant-tabs-tab-active ant-tabs-tab"
|
||||
id="tab-app"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
app
|
||||
</div>
|
||||
<div
|
||||
aria-controls="tabpane-project"
|
||||
aria-disabled="false"
|
||||
aria-selected="false"
|
||||
class=" ant-tabs-tab"
|
||||
id="tab-project"
|
||||
role="tab"
|
||||
tabindex="-1"
|
||||
>
|
||||
project
|
||||
</div>
|
||||
@ -1124,11 +1122,6 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
role="presentation"
|
||||
style="width:0;height:0;overflow:hidden;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content"
|
||||
style="margin-left:-100%"
|
||||
@ -1137,34 +1130,24 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
|
||||
aria-hidden="true"
|
||||
class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
|
||||
role="tabpanel"
|
||||
style="visibility:hidden"
|
||||
tabindex="-1"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="false"
|
||||
class="ant-tabs-tabpane ant-tabs-tabpane-active"
|
||||
role="tabpanel"
|
||||
>
|
||||
<div
|
||||
role="presentation"
|
||||
style="width:0;height:0;overflow:hidden;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
role="presentation"
|
||||
style="width:0;height:0;overflow:hidden;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
style="visibility:visible"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
|
||||
role="tabpanel"
|
||||
style="visibility:hidden"
|
||||
tabindex="-1"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
role="presentation"
|
||||
style="width:0;height:0;overflow:hidden;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
||||
@ -67,4 +67,22 @@ describe('Card', () => {
|
||||
);
|
||||
expect(wrapper.find('.ant-card-actions').length).toBe(0);
|
||||
});
|
||||
|
||||
it('with tab props', () => {
|
||||
const wrapper = mount(
|
||||
<Card
|
||||
title="Card title"
|
||||
tabList={[
|
||||
{
|
||||
key: 'key',
|
||||
tab: 'tab',
|
||||
},
|
||||
]}
|
||||
tabProps={{ size: 'small' }}
|
||||
>
|
||||
<p>Card content</p>
|
||||
</Card>,
|
||||
);
|
||||
expect(wrapper.find('Tabs').get(0).props.size).toBe('small');
|
||||
});
|
||||
});
|
||||
|
||||
@ -37,6 +37,7 @@ A card can be used to display content related to a single subject. The content c
|
||||
| title | Card title | string\|ReactNode | - | |
|
||||
| type | Card style type, can be set to `inner` or not set | string | - | |
|
||||
| onTabChange | Callback when tab is switched | (key) => void | - | |
|
||||
| tabProps | [Tabs](https://ant.design/components/tabs/#Tabs) | - | - | |
|
||||
|
||||
### Card.Grid
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ import classNames from 'classnames';
|
||||
import omit from 'omit.js';
|
||||
import Grid from './Grid';
|
||||
import Meta from './Meta';
|
||||
import Tabs from '../tabs';
|
||||
import Tabs, { TabsProps } from '../tabs';
|
||||
import Row from '../row';
|
||||
import Col from '../col';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
@ -54,6 +54,7 @@ export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 't
|
||||
onTabChange?: (key: string) => void;
|
||||
activeTabKey?: string;
|
||||
defaultActiveTabKey?: string;
|
||||
tabProps?: TabsProps;
|
||||
}
|
||||
|
||||
export default class Card extends React.Component<CardProps, {}> {
|
||||
@ -97,6 +98,7 @@ export default class Card extends React.Component<CardProps, {}> {
|
||||
defaultActiveTabKey,
|
||||
tabBarExtraContent,
|
||||
hoverable,
|
||||
tabProps = {},
|
||||
...others
|
||||
} = this.props;
|
||||
|
||||
@ -152,6 +154,7 @@ export default class Card extends React.Component<CardProps, {}> {
|
||||
|
||||
const hasActiveTabKey = activeTabKey !== undefined;
|
||||
const extraProps = {
|
||||
...tabProps,
|
||||
[hasActiveTabKey ? 'activeKey' : 'defaultActiveKey']: hasActiveTabKey
|
||||
? activeTabKey
|
||||
: defaultActiveTabKey,
|
||||
@ -162,9 +165,9 @@ export default class Card extends React.Component<CardProps, {}> {
|
||||
const tabs =
|
||||
tabList && tabList.length ? (
|
||||
<Tabs
|
||||
size="large"
|
||||
{...extraProps}
|
||||
className={`${prefixCls}-head-tabs`}
|
||||
size="large"
|
||||
onChange={this.onTabChange}
|
||||
>
|
||||
{tabList.map(item => (
|
||||
|
||||
@ -38,6 +38,7 @@ cols: 1
|
||||
| title | 卡片标题 | string\|ReactNode | - | |
|
||||
| type | 卡片类型，可设置为 `inner` 或 不设置 | string | - | |
|
||||
| onTabChange | 页签切换的回调 | (key) => void | - | |
|
||||
| tabProps | [Tabs](https://ant.design/components/tabs-cn/#Tabs) | - | - | |
|
||||
|
||||
### Card.Grid
|
||||
|
||||
|
||||
@ -126,4 +126,18 @@ describe('Carousel', () => {
|
||||
).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('dots precise control by plain object', () => {
|
||||
it('use dots to provide dotsClasse', () => {
|
||||
const wrapper = mount(
|
||||
<Carousel dots={{ className: 'customDots' }}>
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</Carousel>,
|
||||
);
|
||||
wrapper.update();
|
||||
expect(wrapper.find('.slick-dots').hasClass('customDots')).toBeTruthy();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -20,7 +20,7 @@ A carousel component. Scales with its container.
|
||||
| autoplay | Whether to scroll automatically | boolean | `false` | |
|
||||
| beforeChange | Callback function called before the current index changes | function(from, to) | - | |
|
||||
| dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | bottom | |
|
||||
| dots | Whether to show the dots at the bottom of the gallery | boolean | `true` | |
|
||||
| dots | Whether to show the dots at the bottom of the gallery, `object` for `dotsClass` and any others | boolean \| { className?:string } | `true` | |
|
||||
| easing | Transition interpolation function name | string | `linear` | |
|
||||
| effect | Transition effect | `scrollx` \| `fade` | `scrollx` | |
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import isPlainObject from 'lodash/isPlainObject';
|
||||
import debounce from 'lodash/debounce';
|
||||
import SlickCarousel, { Settings } from '@ant-design/react-slick';
|
||||
import classNames from 'classnames';
|
||||
@ -8,13 +9,18 @@ export type CarouselEffect = 'scrollx' | 'fade';
|
||||
export type DotPosition = 'top' | 'bottom' | 'left' | 'right';
|
||||
|
||||
// Carousel
|
||||
export interface CarouselProps extends Settings {
|
||||
export interface CarouselProps extends Omit<Settings, 'dots' | 'dotsClass'> {
|
||||
effect?: CarouselEffect;
|
||||
style?: React.CSSProperties;
|
||||
prefixCls?: string;
|
||||
slickGoTo?: number;
|
||||
dotPosition?: DotPosition;
|
||||
children?: React.ReactNode;
|
||||
dots?:
|
||||
| boolean
|
||||
| {
|
||||
className?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export default class Carousel extends React.Component<CarouselProps, {}> {
|
||||
@ -100,7 +106,13 @@ export default class Carousel extends React.Component<CarouselProps, {}> {
|
||||
const dotsClass = 'slick-dots';
|
||||
const dotPosition = this.getDotPosition();
|
||||
props.vertical = dotPosition === 'left' || dotPosition === 'right';
|
||||
props.dotsClass = `${dotsClass} ${dotsClass}-${dotPosition || 'bottom'}`;
|
||||
|
||||
const enableDots = props.dots === true || isPlainObject(props.dots);
|
||||
const dsClass = classNames(
|
||||
dotsClass,
|
||||
`${dotsClass}-${dotPosition || 'bottom'}`,
|
||||
typeof props.dots === 'boolean' ? false : props.dots?.className,
|
||||
);
|
||||
|
||||
const className = classNames(prefixCls, {
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
@ -109,7 +121,7 @@ export default class Carousel extends React.Component<CarouselProps, {}> {
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<SlickCarousel ref={this.saveSlick} {...props} />
|
||||
<SlickCarousel ref={this.saveSlick} {...props} dots={enableDots} dotsClass={dsClass} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -21,7 +21,7 @@ subtitle: 走马灯
|
||||
| autoplay | 是否自动切换 | boolean | false | | |
|
||||
| beforeChange | 切换面板的回调 | function(from, to) | 无 | | |
|
||||
| dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | bottom | |
|
||||
| dots | 是否显示面板指示点 | boolean | true | | |
|
||||
| dots | 是否显示面板指示点，如果为 `object` 则同时可以指定 `dotsClass` 或者 | boolean \| { className?:string } | true | | |
|
||||
| easing | 动画效果 | string | linear | | |
|
||||
| effect | 动画效果函数，可取 scrollx, fade | string | scrollx | | |
|
||||
|
||||
|
||||
@ -1255,9 +1255,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="config-picker-cell"
|
||||
title="2000-08-27"
|
||||
@ -1378,9 +1376,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="config-picker-cell config-picker-cell-in-view config-picker-cell-selected"
|
||||
title="2000-09-03"
|
||||
@ -1501,9 +1497,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="config-picker-cell config-picker-cell-in-view"
|
||||
title="2000-09-10"
|
||||
@ -1624,9 +1618,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="config-picker-cell config-picker-cell-in-view"
|
||||
title="2000-09-17"
|
||||
@ -1747,9 +1739,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="config-picker-cell config-picker-cell-in-view"
|
||||
title="2000-09-24"
|
||||
@ -1870,9 +1860,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="config-picker-cell"
|
||||
title="2000-10-01"
|
||||
@ -2262,7 +2250,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="config-picker-cell config-picker-cell-selected config-picker-cell-in-view"
|
||||
class="config-picker-cell config-picker-cell-in-view config-picker-cell-selected"
|
||||
title="2000-09"
|
||||
>
|
||||
<div
|
||||
@ -2546,9 +2534,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell"
|
||||
title="2000-08-27"
|
||||
@ -2669,9 +2655,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-selected"
|
||||
title="2000-09-03"
|
||||
@ -2792,9 +2776,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2000-09-10"
|
||||
@ -2915,9 +2897,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2000-09-17"
|
||||
@ -3038,9 +3018,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2000-09-24"
|
||||
@ -3161,9 +3139,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell"
|
||||
title="2000-10-01"
|
||||
@ -3553,7 +3529,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-selected ant-picker-cell-in-view"
|
||||
class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-selected"
|
||||
title="2000-09"
|
||||
>
|
||||
<div
|
||||
@ -3837,9 +3813,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="prefix-Calendar-cell"
|
||||
title="2000-08-27"
|
||||
@ -3960,9 +3934,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="prefix-Calendar-cell prefix-Calendar-cell-in-view prefix-Calendar-cell-selected"
|
||||
title="2000-09-03"
|
||||
@ -4083,9 +4055,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="prefix-Calendar-cell prefix-Calendar-cell-in-view"
|
||||
title="2000-09-10"
|
||||
@ -4206,9 +4176,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="prefix-Calendar-cell prefix-Calendar-cell-in-view"
|
||||
title="2000-09-17"
|
||||
@ -4329,9 +4297,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="prefix-Calendar-cell prefix-Calendar-cell-in-view"
|
||||
title="2000-09-24"
|
||||
@ -4452,9 +4418,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="prefix-Calendar-cell"
|
||||
title="2000-10-01"
|
||||
@ -4844,7 +4808,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="prefix-Calendar-cell prefix-Calendar-cell-selected prefix-Calendar-cell-in-view"
|
||||
class="prefix-Calendar-cell prefix-Calendar-cell-in-view prefix-Calendar-cell-selected"
|
||||
title="2000-09"
|
||||
>
|
||||
<div
|
||||
@ -9271,57 +9235,55 @@ exports[`ConfigProvider components Popconfirm configProvider 1`] = `
|
||||
class="config-popover-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="config-popover-inner-content"
|
||||
>
|
||||
<div
|
||||
class="config-popover-inner-content"
|
||||
class="config-popover-message"
|
||||
>
|
||||
<div
|
||||
class="config-popover-message"
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
class="anticon anticon-exclamation-circle"
|
||||
role="img"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
class="anticon anticon-exclamation-circle"
|
||||
role="img"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="exclamation-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="exclamation-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 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
|
||||
/>
|
||||
</svg>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="config-popover-message-title"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="config-popover-buttons"
|
||||
>
|
||||
<button
|
||||
class="config-btn config-btn-sm"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Cancel
|
||||
</span>
|
||||
<div
|
||||
class="config-popover-message-title"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="config-popover-buttons"
|
||||
</button>
|
||||
<button
|
||||
class="config-btn config-btn-primary config-btn-sm"
|
||||
type="button"
|
||||
>
|
||||
<button
|
||||
class="config-btn config-btn-sm"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Cancel
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="config-btn config-btn-primary config-btn-sm"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -9353,57 +9315,55 @@ exports[`ConfigProvider components Popconfirm normal 1`] = `
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popover-message"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-message"
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
class="anticon anticon-exclamation-circle"
|
||||
role="img"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
class="anticon anticon-exclamation-circle"
|
||||
role="img"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="exclamation-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="exclamation-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 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
|
||||
/>
|
||||
</svg>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-sm"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Cancel
|
||||
</span>
|
||||
<div
|
||||
class="ant-popover-message-title"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-buttons"
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm"
|
||||
type="button"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-sm"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Cancel
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -9435,57 +9395,55 @@ exports[`ConfigProvider components Popconfirm prefixCls 1`] = `
|
||||
class="prefix-Popconfirm-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="prefix-Popconfirm-inner-content"
|
||||
>
|
||||
<div
|
||||
class="prefix-Popconfirm-inner-content"
|
||||
class="prefix-Popconfirm-message"
|
||||
>
|
||||
<div
|
||||
class="prefix-Popconfirm-message"
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
class="anticon anticon-exclamation-circle"
|
||||
role="img"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
class="anticon anticon-exclamation-circle"
|
||||
role="img"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="exclamation-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="exclamation-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 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
|
||||
/>
|
||||
</svg>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="prefix-Popconfirm-message-title"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="prefix-Popconfirm-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-sm"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Cancel
|
||||
</span>
|
||||
<div
|
||||
class="prefix-Popconfirm-message-title"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="prefix-Popconfirm-buttons"
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm"
|
||||
type="button"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-sm"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Cancel
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -9517,11 +9475,9 @@ exports[`ConfigProvider components Popover configProvider 1`] = `
|
||||
class="config-popover-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="config-popover-inner-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="config-popover-inner-content"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -9551,11 +9507,9 @@ exports[`ConfigProvider components Popover normal 1`] = `
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -9585,11 +9539,9 @@ exports[`ConfigProvider components Popover prefixCls 1`] = `
|
||||
class="prefix-Popover-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="prefix-Popover-inner-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="prefix-Popover-inner-content"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -11811,16 +11763,23 @@ exports[`ConfigProvider components Table configProvider 1`] = `
|
||||
<div
|
||||
class="config-table-filter-dropdown-btns"
|
||||
>
|
||||
<a
|
||||
class="config-table-filter-dropdown-link confirm"
|
||||
<button
|
||||
class="config-btn config-btn-link config-btn-sm"
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
OK
|
||||
</a>
|
||||
<a
|
||||
class="config-table-filter-dropdown-link clear"
|
||||
<span>
|
||||
Reset
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="config-btn config-btn-primary config-btn-sm"
|
||||
type="button"
|
||||
>
|
||||
Reset
|
||||
</a>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -12150,16 +12109,23 @@ exports[`ConfigProvider components Table normal 1`] = `
|
||||
<div
|
||||
class="ant-table-filter-dropdown-btns"
|
||||
>
|
||||
<a
|
||||
class="ant-table-filter-dropdown-link confirm"
|
||||
<button
|
||||
class="ant-btn ant-btn-link ant-btn-sm"
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
OK
|
||||
</a>
|
||||
<a
|
||||
class="ant-table-filter-dropdown-link clear"
|
||||
<span>
|
||||
Reset
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm"
|
||||
type="button"
|
||||
>
|
||||
Reset
|
||||
</a>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -12489,16 +12455,23 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
|
||||
<div
|
||||
class="prefix-Table-filter-dropdown-btns"
|
||||
>
|
||||
<a
|
||||
class="prefix-Table-filter-dropdown-link confirm"
|
||||
<button
|
||||
class="ant-btn ant-btn-link ant-btn-sm"
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
OK
|
||||
</a>
|
||||
<a
|
||||
class="prefix-Table-filter-dropdown-link clear"
|
||||
<span>
|
||||
Reset
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm"
|
||||
type="button"
|
||||
>
|
||||
Reset
|
||||
</a>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -12658,7 +12631,7 @@ exports[`ConfigProvider components Tabs configProvider 1`] = `
|
||||
<div
|
||||
class="config-tabs-bar config-tabs-top-bar"
|
||||
role="tablist"
|
||||
tabindex="0"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="config-tabs-nav-container"
|
||||
@ -12732,10 +12705,13 @@ exports[`ConfigProvider components Tabs configProvider 1`] = `
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
aria-controls="tabpane-Light"
|
||||
aria-disabled="false"
|
||||
aria-selected="true"
|
||||
class="config-tabs-tab-active config-tabs-tab"
|
||||
id="tab-Light"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
Bamboo
|
||||
</div>
|
||||
@ -12748,11 +12724,6 @@ exports[`ConfigProvider components Tabs configProvider 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
role="presentation"
|
||||
style="width:0;height:0;overflow:hidden;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="config-tabs-content config-tabs-content-animated config-tabs-top-content"
|
||||
style="margin-left:0%"
|
||||
@ -12761,24 +12732,10 @@ exports[`ConfigProvider components Tabs configProvider 1`] = `
|
||||
aria-hidden="false"
|
||||
class="config-tabs-tabpane config-tabs-tabpane-active"
|
||||
role="tabpanel"
|
||||
>
|
||||
<div
|
||||
role="presentation"
|
||||
style="width:0;height:0;overflow:hidden;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
role="presentation"
|
||||
style="width:0;height:0;overflow:hidden;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
style="visibility:visible"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
role="presentation"
|
||||
style="width:0;height:0;overflow:hidden;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -12789,7 +12746,7 @@ exports[`ConfigProvider components Tabs normal 1`] = `
|
||||
<div
|
||||
class="ant-tabs-bar ant-tabs-top-bar"
|
||||
role="tablist"
|
||||
tabindex="0"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="ant-tabs-nav-container"
|
||||
@ -12863,10 +12820,13 @@ exports[`ConfigProvider components Tabs normal 1`] = `
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
aria-controls="tabpane-Light"
|
||||
aria-disabled="false"
|
||||
aria-selected="true"
|
||||
class="ant-tabs-tab-active ant-tabs-tab"
|
||||
id="tab-Light"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
Bamboo
|
||||
</div>
|
||||
@ -12879,11 +12839,6 @@ exports[`ConfigProvider components Tabs normal 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
role="presentation"
|
||||
style="width:0;height:0;overflow:hidden;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content"
|
||||
style="margin-left:0%"
|
||||
@ -12892,24 +12847,10 @@ exports[`ConfigProvider components Tabs normal 1`] = `
|
||||
aria-hidden="false"
|
||||
class="ant-tabs-tabpane ant-tabs-tabpane-active"
|
||||
role="tabpanel"
|
||||
>
|
||||
<div
|
||||
role="presentation"
|
||||
style="width:0;height:0;overflow:hidden;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
role="presentation"
|
||||
style="width:0;height:0;overflow:hidden;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
style="visibility:visible"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
role="presentation"
|
||||
style="width:0;height:0;overflow:hidden;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -12920,7 +12861,7 @@ exports[`ConfigProvider components Tabs prefixCls 1`] = `
|
||||
<div
|
||||
class="prefix-Tabs-bar prefix-Tabs-top-bar"
|
||||
role="tablist"
|
||||
tabindex="0"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="prefix-Tabs-nav-container"
|
||||
@ -12994,10 +12935,13 @@ exports[`ConfigProvider components Tabs prefixCls 1`] = `
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
aria-controls="tabpane-Light"
|
||||
aria-disabled="false"
|
||||
aria-selected="true"
|
||||
class="prefix-Tabs-tab-active prefix-Tabs-tab"
|
||||
id="tab-Light"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
Bamboo
|
||||
</div>
|
||||
@ -13010,11 +12954,6 @@ exports[`ConfigProvider components Tabs prefixCls 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
role="presentation"
|
||||
style="width:0;height:0;overflow:hidden;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="prefix-Tabs-content prefix-Tabs-content-animated prefix-Tabs-top-content"
|
||||
style="margin-left:0%"
|
||||
@ -13023,24 +12962,10 @@ exports[`ConfigProvider components Tabs prefixCls 1`] = `
|
||||
aria-hidden="false"
|
||||
class="prefix-Tabs-tabpane prefix-Tabs-tabpane-active"
|
||||
role="tabpanel"
|
||||
>
|
||||
<div
|
||||
role="presentation"
|
||||
style="width:0;height:0;overflow:hidden;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
role="presentation"
|
||||
style="width:0;height:0;overflow:hidden;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
style="visibility:visible"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
role="presentation"
|
||||
style="width:0;height:0;overflow:hidden;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import defaultRenderEmpty, { RenderEmptyHandler } from './renderEmpty';
|
||||
import { Locale } from '../locale-provider';
|
||||
import { SizeType } from './SizeContext';
|
||||
|
||||
export interface CSPConfig {
|
||||
nonce?: string;
|
||||
@ -18,6 +19,9 @@ export interface ConfigConsumerProps {
|
||||
ghost: boolean;
|
||||
};
|
||||
direction?: 'ltr' | 'rtl';
|
||||
space?: {
|
||||
size?: SizeType | number;
|
||||
};
|
||||
}
|
||||
|
||||
export const ConfigContext = React.createContext<ConfigConsumerProps>({
|
||||
|
||||
@ -47,6 +47,7 @@ Some components use dynamic style to support wave effect. You can config `csp` p
|
||||
| prefixCls | set prefix class. `Note:` This will discard default styles from `antd`. | string | ant | |
|
||||
| pageHeader | Unify the ghost of PageHeader, ref [PageHeader](/components/page-header) | { ghost:boolean } | 'true' | |
|
||||
| direction | set direction of layout. See [demo](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | |
|
||||
| space | set Space `size`, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 |
|
||||
|
||||
## FAQ
|
||||
|
||||
|
||||
@ -39,6 +39,9 @@ export interface ConfigProviderProps {
|
||||
};
|
||||
componentSize?: SizeType;
|
||||
direction?: 'ltr' | 'rtl';
|
||||
space?: {
|
||||
size?: SizeType | number;
|
||||
};
|
||||
}
|
||||
|
||||
class ConfigProvider extends React.Component<ConfigProviderProps> {
|
||||
@ -62,6 +65,7 @@ class ConfigProvider extends React.Component<ConfigProviderProps> {
|
||||
pageHeader,
|
||||
componentSize,
|
||||
direction,
|
||||
space,
|
||||
} = this.props;
|
||||
|
||||
const config: ConfigConsumerProps = {
|
||||
@ -71,6 +75,7 @@ class ConfigProvider extends React.Component<ConfigProviderProps> {
|
||||
autoInsertSpaceInButton,
|
||||
locale: locale || legacyLocale,
|
||||
direction,
|
||||
space,
|
||||
};
|
||||
|
||||
if (getPopupContainer) {
|
||||
|
||||
@ -48,6 +48,7 @@ return (
|
||||
| prefixCls | 设置统一样式前缀。`注意：这将不会应用由 antd 提供的默认样式` | string | ant | |
|
||||
| pageHeader | 统一设置 PageHeader 的 ghost，参考 [PageHeader](/components/page-header) | { ghost: boolean } | 'true' | |
|
||||
| direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | |
|
||||
| space | 设置 Space 的 `size`，参考 [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 |
|
||||
|
||||
## FAQ
|
||||
|
||||
|
||||
@ -146,9 +146,7 @@ Array [
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-disabled"
|
||||
title="2016-10-30"
|
||||
@ -220,9 +218,7 @@ Array [
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-disabled ant-picker-cell-in-view"
|
||||
title="2016-11-06"
|
||||
@ -294,9 +290,7 @@ Array [
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-disabled ant-picker-cell-in-view"
|
||||
title="2016-11-13"
|
||||
@ -368,9 +362,7 @@ Array [
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-disabled ant-picker-cell-in-view"
|
||||
title="2016-11-20"
|
||||
@ -442,9 +434,7 @@ Array [
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2016-11-27"
|
||||
@ -516,9 +506,7 @@ Array [
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell"
|
||||
title="2016-12-04"
|
||||
@ -780,9 +768,7 @@ Array [
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell"
|
||||
title="1999-12-27"
|
||||
@ -854,9 +840,7 @@ Array [
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2000-01-03"
|
||||
@ -928,9 +912,7 @@ Array [
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2000-01-10"
|
||||
@ -1002,9 +984,7 @@ Array [
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2000-01-17"
|
||||
@ -1076,9 +1056,7 @@ Array [
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2000-01-24"
|
||||
@ -1150,9 +1128,7 @@ Array [
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2000-01-31"
|
||||
|
||||
@ -122,6 +122,46 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div
|
||||
class="ant-picker"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-input"
|
||||
>
|
||||
<input
|
||||
placeholder="Select quarter"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-picker-suffix"
|
||||
>
|
||||
<span
|
||||
aria-label="calendar"
|
||||
class="anticon anticon-calendar"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="calendar"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div
|
||||
class="ant-picker"
|
||||
>
|
||||
|
||||
@ -53,7 +53,7 @@ exports[`MonthPicker and WeekPicker render MonthPicker 1`] = `
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-selected ant-picker-cell-in-view"
|
||||
class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-selected"
|
||||
title="2000-01"
|
||||
>
|
||||
<div
|
||||
|
||||
@ -28,6 +28,8 @@ ReactDOM.render(
|
||||
<br />
|
||||
<DatePicker onChange={onChange} picker="month" />
|
||||
<br />
|
||||
<DatePicker onChange={onChange} picker="quarter" />
|
||||
<br />
|
||||
<DatePicker onChange={onChange} picker="year" />
|
||||
</div>,
|
||||
mountNode,
|
||||
|
||||
@ -13,7 +13,7 @@ import {
|
||||
RangePickerDateProps as RCRangePickerDateProps,
|
||||
RangePickerTimeProps as RCRangePickerTimeProps,
|
||||
} from 'rc-picker/lib/RangePicker';
|
||||
import { PickerMode } from 'rc-picker/lib/interface';
|
||||
import { PickerMode, Locale as RcPickerLocale } from 'rc-picker/lib/interface';
|
||||
import CalendarOutlined from '@ant-design/icons/CalendarOutlined';
|
||||
import ClockCircleOutlined from '@ant-design/icons/ClockCircleOutlined';
|
||||
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
|
||||
@ -24,6 +24,7 @@ import { getPlaceholder, getRangePlaceholder } from './util';
|
||||
import PickerButton from './PickerButton';
|
||||
import PickerTag from './PickerTag';
|
||||
import SizeContext, { SizeType } from '../config-provider/SizeContext';
|
||||
import { TimePickerLocale } from '../time-picker';
|
||||
|
||||
const Components = { button: PickerButton, rangeItem: PickerTag };
|
||||
|
||||
@ -78,11 +79,35 @@ type InjectDefaultProps<Props> = Omit<
|
||||
| 'hideHeader'
|
||||
| 'components'
|
||||
> & {
|
||||
locale?: typeof enUS;
|
||||
locale?: PickerLocale;
|
||||
size?: SizeType;
|
||||
bordered?: boolean;
|
||||
};
|
||||
|
||||
export type PickerLocale = {
|
||||
lang: RcPickerLocale & AdditionalPickerLocaleLangProps;
|
||||
timePickerLocale: TimePickerLocale;
|
||||
} & AdditionalPickerLocaleProps;
|
||||
|
||||
export type AdditionalPickerLocaleProps = {
|
||||
dateFormat?: string;
|
||||
dateTimeFormat?: string;
|
||||
weekFormat?: string;
|
||||
monthFormat?: string;
|
||||
};
|
||||
|
||||
export type AdditionalPickerLocaleLangProps = {
|
||||
placeholder: string;
|
||||
yearPlaceholder?: string;
|
||||
quarterPlaceholder?: string;
|
||||
monthPlaceholder?: string;
|
||||
weekPlaceholder?: string;
|
||||
rangeYearPlaceholder?: [string, string];
|
||||
rangeMonthPlaceholder?: [string, string];
|
||||
rangeWeekPlaceholder?: [string, string];
|
||||
rangePlaceholder?: [string, string];
|
||||
};
|
||||
|
||||
// Picker Props
|
||||
export type PickerBaseProps<DateType> = InjectDefaultProps<RCPickerBaseProps<DateType>>;
|
||||
export type PickerDateProps<DateType> = InjectDefaultProps<RCPickerDateProps<DateType>>;
|
||||
@ -140,12 +165,12 @@ function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
|
||||
};
|
||||
result.lang = {
|
||||
...result.lang,
|
||||
...((locale || {}) as any).lang,
|
||||
...((locale || {}) as PickerLocale).lang,
|
||||
};
|
||||
return result;
|
||||
};
|
||||
|
||||
renderPicker = (locale: any) => {
|
||||
renderPicker = (locale: PickerLocale) => {
|
||||
const { getPrefixCls, direction } = this.context;
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
@ -263,12 +288,12 @@ function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
|
||||
};
|
||||
result.lang = {
|
||||
...result.lang,
|
||||
...((locale || {}) as any).lang,
|
||||
...((locale || {}) as PickerLocale).lang,
|
||||
};
|
||||
return result;
|
||||
};
|
||||
|
||||
renderPicker = (locale: any) => {
|
||||
renderPicker = (locale: PickerLocale) => {
|
||||
const { getPrefixCls, direction } = this.context;
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
|
||||
@ -19,6 +19,7 @@ There are five kinds of picker:
|
||||
- RangePicker
|
||||
- WeekPicker
|
||||
- YearPicker
|
||||
- QuarterPicker (Added in 4.1.0)
|
||||
|
||||
### Localization
|
||||
|
||||
@ -56,7 +57,7 @@ The following APIs are shared by DatePicker, YearPicker, MonthPicker, RangePicke
|
||||
| locale | localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | |
|
||||
| mode | picker panel mode（[Cannot select year or month anymore?](/docs/react/faq#When-set-mode-to-DatePicker/RangePicker,-cannot-select-year-or-month-anymore?) | `time` \| `date` \| `month` \| `year` \| `decade` | - | |
|
||||
| open | open state of picker | boolean | - | |
|
||||
| picker | Set picker type | `date` \| `week` \| `month` \| `year` | `date` | |
|
||||
| picker | Set picker type | `date` \| `week` \| `month` \| `quarter` (4.1.0) \| `year` | `date` | |
|
||||
| placeholder | placeholder of date input | string\|RangePicker\[] | - | |
|
||||
| popupStyle | to customize the style of the popup calendar | object | {} | |
|
||||
| size | determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \| `middle` \| `small` | - | |
|
||||
@ -102,6 +103,19 @@ The following APIs are shared by DatePicker, YearPicker, MonthPicker, RangePicke
|
||||
| value | to set date | [moment](http://momentjs.com/) | - | |
|
||||
| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
|
||||
|
||||
### QuarterPicker
|
||||
|
||||
Added in `4.1.0`.
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultValue | to set default date | [moment](http://momentjs.com/) | - | |
|
||||
| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - | |
|
||||
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-\QQ" | |
|
||||
| renderExtraFooter | render extra footer in panel | () => React.ReactNode | - | |
|
||||
| value | to set date | [moment](http://momentjs.com/) | - | |
|
||||
| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
|
||||
|
||||
### MonthPicker
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
|
||||
@ -20,6 +20,7 @@ subtitle: 日期选择框
|
||||
- RangePicker
|
||||
- WeekPicker
|
||||
- YearPicker
|
||||
- QuarterPicker (4.1.0 新增)
|
||||
|
||||
### 国际化配置
|
||||
|
||||
@ -58,7 +59,7 @@ import 'moment/locale/zh-cn';
|
||||
| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | |
|
||||
| mode | 日期面板的状态（[设置后无法选择年份/月份？](/docs/react/faq#当我指定了-DatePicker/RangePicker-的-mode-属性后，点击后无法选择年份/月份？)） | `time` \| `date` \| `month` \| `year` \| `decade` | - | |
|
||||
| open | 控制弹层是否展开 | boolean | - | |
|
||||
| picker | 设置选择器类型 | `date` \| `week` \| `month` \| `year` | `date` | |
|
||||
| picker | 设置选择器类型 | `date` \| `week` \| `month` \| `quarter` (4.1.0) \| `year` | `date` | |
|
||||
| placeholder | 输入框提示文字 | string\|RangePicker\[] | - | |
|
||||
| popupStyle | 额外的弹出日历样式 | object | {} | |
|
||||
| size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | `large` \| `middle` \| `small` | 无 | |
|
||||
@ -104,6 +105,19 @@ import 'moment/locale/zh-cn';
|
||||
| value | 日期 | [moment](http://momentjs.com/) | 无 | |
|
||||
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | |
|
||||
|
||||
### QuarterPicker
|
||||
|
||||
`4.1.0` 新增。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 | |
|
||||
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | 无 | |
|
||||
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-\QQ" | |
|
||||
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
||||
| value | 日期 | [moment](http://momentjs.com/) | 无 | |
|
||||
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | |
|
||||
|
||||
### MonthPicker
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/ar_EG';
|
||||
import TimePickerLocale from '../../time-picker/locale/ar_EG';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'اختيار التاريخ',
|
||||
rangePlaceholder: ['البداية', 'النهاية'],
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/az_AZ';
|
||||
import TimePickerLocale from '../../time-picker/locale/az_AZ';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Tarix seçin',
|
||||
rangePlaceholder: ['Başlama tarixi', 'Bitmə tarixi'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/bg_BG';
|
||||
import TimePickerLocale from '../../time-picker/locale/bg_BG';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Избор на дата',
|
||||
rangePlaceholder: ['Начална', 'Крайна'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/ca_ES';
|
||||
import TimePickerLocale from '../../time-picker/locale/ca_ES';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Seleccionar data',
|
||||
rangePlaceholder: ['Data inicial', 'Data final'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/cs_CZ';
|
||||
import TimePickerLocale from '../../time-picker/locale/cs_CZ';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Vybrat datum',
|
||||
rangePlaceholder: ['Od', 'Do'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/da_DK';
|
||||
import TimePickerLocale from '../../time-picker/locale/da_DK';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Vælg dato',
|
||||
rangePlaceholder: ['Startdato', 'Slutdato'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/de_DE';
|
||||
import TimePickerLocale from '../../time-picker/locale/de_DE';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Datum auswählen',
|
||||
rangePlaceholder: ['Startdatum', 'Enddatum'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/el_GR';
|
||||
import TimePickerLocale from '../../time-picker/locale/el_GR';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Επιλέξτε ημερομηνία',
|
||||
rangePlaceholder: ['Αρχική ημερομηνία', 'Τελική ημερομηνία'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/en_GB';
|
||||
import TimePickerLocale from '../../time-picker/locale/en_GB';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Select date',
|
||||
rangePlaceholder: ['Start date', 'End date'],
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/en_US';
|
||||
import TimePickerLocale from '../../time-picker/locale/en_US';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Select date',
|
||||
yearPlaceholder: 'Select year',
|
||||
quarterPlaceholder: 'Select quarter',
|
||||
monthPlaceholder: 'Select month',
|
||||
weekPlaceholder: 'Select week',
|
||||
rangePlaceholder: ['Start date', 'End date'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/es_ES';
|
||||
import TimePickerLocale from '../../time-picker/locale/es_ES';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Seleccionar fecha',
|
||||
rangePlaceholder: ['Fecha inicial', 'Fecha final'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/et_EE';
|
||||
import TimePickerLocale from '../../time-picker/locale/et_EE';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// 统一合并为完整的 Locale
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Vali kuupäev',
|
||||
rangePlaceholder: ['Algus kuupäev', 'Lõpu kuupäev'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/fa_IR';
|
||||
import TimePickerLocale from '../../time-picker/locale/fa_IR';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'انتخاب تاریخ',
|
||||
rangePlaceholder: ['تاریخ شروع', 'تاریخ پایان'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/fi_FI';
|
||||
import TimePickerLocale from '../../time-picker/locale/fi_FI';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Valitse päivä',
|
||||
rangePlaceholder: ['Alku päivä', 'Loppu päivä'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/fr_BE';
|
||||
import TimePickerLocale from '../../time-picker/locale/fr_BE';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Sélectionner une date',
|
||||
rangePlaceholder: ['Date de début', 'Date de fin'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/fr_FR';
|
||||
import TimePickerLocale from '../../time-picker/locale/fr_FR';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Sélectionner une date',
|
||||
yearPlaceholder: 'Sélectionner une année',
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/he_IL';
|
||||
import TimePickerLocale from '../../time-picker/locale/he_IL';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'בחר תאריך',
|
||||
rangePlaceholder: ['תאריך התחלה', 'תאריך סיום'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/hi_IN';
|
||||
import TimePickerLocale from '../../time-picker/locale/hi_IN';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'तारीख़ चुनें',
|
||||
rangePlaceholder: ['प्रारंभ तिथि', 'समाप्ति तिथि'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/hr_HR';
|
||||
import TimePickerLocale from '../../time-picker/locale/hr_HR';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Odaberite datum',
|
||||
rangePlaceholder: ['Početni datum', 'Završni datum'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/hu_HU';
|
||||
import TimePickerLocale from '../../time-picker/locale/hu_HU';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Válasszon dátumot',
|
||||
rangePlaceholder: ['Kezdő dátum', 'Befejezés dátuma'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/id_ID';
|
||||
import TimePickerLocale from '../../time-picker/locale/id_ID';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Pilih tanggal',
|
||||
rangePlaceholder: ['Mulai tanggal', 'Tanggal akhir'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/is_IS';
|
||||
import TimePickerLocale from '../../time-picker/locale/is_IS';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Veldu dag',
|
||||
rangePlaceholder: ['Upphafsdagur', 'Lokadagur'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/it_IT';
|
||||
import TimePickerLocale from '../../time-picker/locale/it_IT';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Selezionare la data',
|
||||
rangePlaceholder: ["Data d'inizio", 'Data di fine'],
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/ja_JP';
|
||||
import TimePickerLocale from '../../time-picker/locale/ja_JP';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
const locale = {
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: '日付を選択',
|
||||
rangePlaceholder: ['開始日付', '終了日付'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/kn_IN';
|
||||
import TimePickerLocale from '../../time-picker/locale/kn_IN';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'ದಿನಾಂಕ ಆಯ್ಕೆಮಾಡಿ',
|
||||
rangePlaceholder: ['ಪ್ರಾರಂಭ ದಿನಾಂಕ', 'ಅಂತಿಮ ದಿನಾಂಕ'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/ko_KR';
|
||||
import TimePickerLocale from '../../time-picker/locale/ko_KR';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: '날짜 선택',
|
||||
rangePlaceholder: ['시작일', '종료일'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/ku_IQ';
|
||||
import TimePickerLocale from '../../time-picker/locale/ku_IQ';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Dîrok hilbijêre',
|
||||
rangePlaceholder: ['Dîroka destpêkê', 'Dîroka dawîn'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/lv_LV';
|
||||
import TimePickerLocale from '../../time-picker/locale/lv_LV';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Izvēlieties datumu',
|
||||
rangePlaceholder: ['Sākuma datums', 'Beigu datums'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/mk_MK';
|
||||
import TimePickerLocale from '../../time-picker/locale/mk_MK';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Избери датум',
|
||||
rangePlaceholder: ['Од датум', 'До датум'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/mn_MN';
|
||||
import TimePickerLocale from '../../time-picker/locale/mn_MN';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Огноо сонгох',
|
||||
rangePlaceholder: ['Эхлэх огноо', 'Дуусах огноо'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/ms_MY';
|
||||
import TimePickerLocale from '../../time-picker/locale/ms_MY';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Pilih tarikh',
|
||||
rangePlaceholder: ['Tarikh mula', 'Tarikh akhir'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/nb_NO';
|
||||
import TimePickerLocale from '../../time-picker/locale/nb_NO';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Velg dato',
|
||||
rangePlaceholder: ['Startdato', 'Sluttdato'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/nl_BE';
|
||||
import TimePickerLocale from '../../time-picker/locale/nl_BE';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Selecteer datum',
|
||||
rangePlaceholder: ['Begin datum', 'Eind datum'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/nl_NL';
|
||||
import TimePickerLocale from '../../time-picker/locale/nl_NL';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Selecteer datum',
|
||||
rangePlaceholder: ['Begin datum', 'Eind datum'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/pl_PL';
|
||||
import TimePickerLocale from '../../time-picker/locale/pl_PL';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Wybierz datę',
|
||||
rangePlaceholder: ['Data początkowa', 'Data końcowa'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/pt_BR';
|
||||
import TimePickerLocale from '../../time-picker/locale/pt_BR';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Selecionar data',
|
||||
rangePlaceholder: ['Data inicial', 'Data final'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/pt_PT';
|
||||
import TimePickerLocale from '../../time-picker/locale/pt_PT';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
...CalendarLocale,
|
||||
placeholder: 'Data',
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/ro_RO';
|
||||
import TimePickerLocale from '../../time-picker/locale/ro_RO';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Selectează data',
|
||||
rangePlaceholder: ['Data start', 'Data sfârșit'],
|
||||
|
||||
@ -4,8 +4,10 @@
|
||||
|
||||
import CalendarLocale from 'rc-picker/lib/locale/ru_RU';
|
||||
import TimePickerLocale from '../../time-picker/locale/ru_RU';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
const locale = {
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Выберите дату',
|
||||
rangePlaceholder: ['Начальная дата', 'Конечная дата'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/sk_SK';
|
||||
import TimePickerLocale from '../../time-picker/locale/sk_SK';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// 统一合并为完整的 Locale
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Vybrať dátum',
|
||||
rangePlaceholder: ['Od', 'Do'],
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import TimePickerLocale from '../../time-picker/locale/sl_SI';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
locale: 'sl',
|
||||
placeholder: 'Izberite datum',
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/sr_RS';
|
||||
import TimePickerLocale from '../../time-picker/locale/sr_RS';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Izaberite datum',
|
||||
rangePlaceholder: ['Početni datum', 'Krajnji datum'],
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/sv_SE';
|
||||
import TimePickerLocale from '../../time-picker/locale/sv_SE';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
const locale = {
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Välj datum',
|
||||
rangePlaceholder: ['Startdatum', 'Slutdatum'],
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
// Tamil Locale added to rc-calendar
|
||||
import CalendarLocale from 'rc-picker/lib/locale/ta_IN';
|
||||
import TimePickerLocale from '../../time-picker/locale/ta_IN';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'தேதியைத் தேர்ந்தெடுக்கவும்',
|
||||
rangePlaceholder: ['தொடக்க தேதி', 'கடைசி தேதி'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/th_TH';
|
||||
import TimePickerLocale from '../../time-picker/locale/th_TH';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'เลือกวันที่',
|
||||
rangePlaceholder: ['วันเริ่มต้น', 'วันสิ้นสุด'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/tr_TR';
|
||||
import TimePickerLocale from '../../time-picker/locale/tr_TR';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Tarih Seç',
|
||||
rangePlaceholder: ['Başlangıç Tarihi', 'Bitiş Tarihi'],
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/uk_UA';
|
||||
import TimePickerLocale from '../../time-picker/locale/uk_UA';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
const locale = {
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Оберіть дату',
|
||||
rangePlaceholder: ['Початкова дата', 'Кінцева дата'],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/vi_VN';
|
||||
import TimePickerLocale from '../../time-picker/locale/vi_VN';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Chọn thời điểm',
|
||||
rangePlaceholder: ['Ngày bắt đầu', 'Ngày kết thúc'],
|
||||
|
||||
@ -1,10 +1,13 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/zh_CN';
|
||||
import TimePickerLocale from '../../time-picker/locale/zh_CN';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
const locale = {
|
||||
// 统一合并为完整的 Locale
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: '请选择日期',
|
||||
yearPlaceholder: '请选择年份',
|
||||
quarterPlaceholder: '请选择季度',
|
||||
monthPlaceholder: '请选择月份',
|
||||
weekPlaceholder: '请选择周',
|
||||
rangePlaceholder: ['开始日期', '结束日期'],
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/zh_TW';
|
||||
import TimePickerLocale from '../../time-picker/locale/zh_TW';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
const locale = {
|
||||
// 统一合并为完整的 Locale
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: '請選擇日期',
|
||||
rangePlaceholder: ['開始日期', '結束日期'],
|
||||
|
||||
@ -25,6 +25,7 @@
|
||||
// ========================================================
|
||||
&-decade-panel,
|
||||
&-year-panel,
|
||||
&-quarter-panel,
|
||||
&-month-panel,
|
||||
&-week-panel,
|
||||
&-date-panel,
|
||||
@ -419,6 +420,7 @@
|
||||
|
||||
&-decade-panel,
|
||||
&-year-panel,
|
||||
&-quarter-panel,
|
||||
&-month-panel {
|
||||
.@{picker-prefix-cls}-content {
|
||||
height: 265px;
|
||||
@ -435,6 +437,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
&-quarter-panel {
|
||||
.@{picker-prefix-cls}-content {
|
||||
height: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
// ======================== Footer ========================
|
||||
&-footer {
|
||||
line-height: @picker-text-height - 2 * @border-width-base;
|
||||
@ -487,8 +495,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ================== Year & Month Panel ==================
|
||||
// ============= Year & Quarter & Month Panel =============
|
||||
&-year-panel,
|
||||
&-quarter-panel,
|
||||
&-month-panel {
|
||||
@hover-cell-fixed-distance: (
|
||||
(@picker-panel-width - @padding-xs * 2) / 3 - @picker-year-month-cell-width
|
||||
|
||||
@ -1,9 +1,13 @@
|
||||
import { PickerMode } from 'rc-picker/lib/interface';
|
||||
import { PickerLocale } from './generatePicker';
|
||||
|
||||
export function getPlaceholder(picker: PickerMode | undefined, locale: any): string {
|
||||
export function getPlaceholder(picker: PickerMode | undefined, locale: PickerLocale): string {
|
||||
if (picker === 'year' && locale.lang.yearPlaceholder) {
|
||||
return locale.lang.yearPlaceholder;
|
||||
}
|
||||
if (picker === 'quarter' && locale.lang.quarterPlaceholder) {
|
||||
return locale.lang.quarterPlaceholder;
|
||||
}
|
||||
if (picker === 'month' && locale.lang.monthPlaceholder) {
|
||||
return locale.lang.monthPlaceholder;
|
||||
}
|
||||
@ -16,7 +20,7 @@ export function getPlaceholder(picker: PickerMode | undefined, locale: any): str
|
||||
return locale.lang.placeholder;
|
||||
}
|
||||
|
||||
export function getRangePlaceholder(picker: PickerMode | undefined, locale: any): [string, string] {
|
||||
export function getRangePlaceholder(picker: PickerMode | undefined, locale: PickerLocale) {
|
||||
if (picker === 'year' && locale.lang.yearPlaceholder) {
|
||||
return locale.lang.rangeYearPlaceholder;
|
||||
}
|
||||
|
||||
@ -77,6 +77,7 @@ function FormItem(props: FormItemProps): React.ReactElement {
|
||||
validateStatus,
|
||||
children,
|
||||
required,
|
||||
label,
|
||||
trigger = 'onChange',
|
||||
validateTrigger = 'onChange',
|
||||
...restProps
|
||||
@ -229,9 +230,15 @@ function FormItem(props: FormItemProps): React.ReactElement {
|
||||
return renderLayout(children);
|
||||
}
|
||||
|
||||
const variables: Record<string, string> = {};
|
||||
if (typeof label === 'string') {
|
||||
variables.label = label;
|
||||
}
|
||||
|
||||
return (
|
||||
<Field
|
||||
{...props}
|
||||
messageVariables={variables}
|
||||
trigger={trigger}
|
||||
validateTrigger={validateTrigger}
|
||||
onReset={() => {
|
||||
|
||||
@ -596,6 +596,28 @@ describe('Form', () => {
|
||||
expect(errorSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('`label` support template', async () => {
|
||||
const wrapper = mount(
|
||||
// eslint-disable-next-line no-template-curly-in-string
|
||||
<Form validateMessages={{ required: '${label} is good!' }}>
|
||||
<Form.Item name="test" label="Bamboo" rules={[{ required: true }]}>
|
||||
<input />
|
||||
</Form.Item>
|
||||
</Form>,
|
||||
);
|
||||
|
||||
wrapper.find('form').simulate('submit');
|
||||
await delay(50);
|
||||
wrapper.update();
|
||||
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-form-item-explain')
|
||||
.first()
|
||||
.text(),
|
||||
).toEqual('Bamboo is good!');
|
||||
});
|
||||
|
||||
it('return same form instance', () => {
|
||||
const instances = new Set();
|
||||
|
||||
|
||||
@ -22,13 +22,13 @@ const layout = {
|
||||
};
|
||||
|
||||
const validateMessages = {
|
||||
required: 'This field is required!',
|
||||
required: '${label} is required!',
|
||||
types: {
|
||||
email: 'Not a validate email!',
|
||||
number: 'Not a validate number!',
|
||||
email: '${label} is not validate email!',
|
||||
number: '${label} is not a validate number!',
|
||||
},
|
||||
number: {
|
||||
range: 'Must be between ${min} and ${max}',
|
||||
range: '${label} must be between ${min} and ${max}',
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -1226,3 +1226,15 @@ exports[`renders ./components/grid/demo/sort.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/grid/demo/useBreakpoint.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
>
|
||||
Current break point:
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -3,6 +3,7 @@ import { render, mount } from 'enzyme';
|
||||
import { Col, Row } from '..';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import useBreakpoint from '../hooks/useBreakpoint';
|
||||
|
||||
describe('Grid', () => {
|
||||
mountTest(Row);
|
||||
@ -90,4 +91,26 @@ describe('Grid', () => {
|
||||
marginBottom: 10,
|
||||
});
|
||||
});
|
||||
|
||||
// By jsdom mock, actual jsdom not implemented matchMedia
|
||||
// https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
|
||||
it('should work with useBreakpoint', () => {
|
||||
function Demo() {
|
||||
const screens = useBreakpoint();
|
||||
|
||||
return JSON.stringify(screens);
|
||||
}
|
||||
const wrapper = mount(<Demo />);
|
||||
|
||||
expect(wrapper.text()).toEqual(
|
||||
JSON.stringify({
|
||||
xs: true,
|
||||
sm: false,
|
||||
md: false,
|
||||
lg: false,
|
||||
xl: false,
|
||||
xxl: false,
|
||||
}),
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
36
components/grid/demo/useBreakpoint.md
Normal file
36
components/grid/demo/useBreakpoint.md
Normal file
@ -0,0 +1,36 @@
|
||||
---
|
||||
order: 10
|
||||
title: useBreakpoint Hook
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
使用 `useBreakpoint` Hook 个性化布局。
|
||||
|
||||
## en-US
|
||||
|
||||
Use `useBreakpoint` Hook povide personalized layout.
|
||||
|
||||
```jsx
|
||||
import { Row, Col, Grid } from 'antd';
|
||||
|
||||
const { useBreakpoint } = Grid;
|
||||
|
||||
function UseBreakpointDemo() {
|
||||
const screens = useBreakpoint();
|
||||
|
||||
return (
|
||||
<Row>
|
||||
<Col>
|
||||
Current break point:
|
||||
{Object.entries(screens)
|
||||
.filter(screen => !!screen[1])
|
||||
.map(screen => screen[0])
|
||||
.join(' ')}
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
ReactDOM.render(<UseBreakpointDemo />, mountNode);
|
||||
```
|
||||
18
components/grid/hooks/useBreakpoint.tsx
Normal file
18
components/grid/hooks/useBreakpoint.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import ResponsiveObserve, { ScreenMap } from '../../_util/responsiveObserve';
|
||||
|
||||
function useBreakpoint(): ScreenMap {
|
||||
const [screens, setScreens] = useState<ScreenMap>({});
|
||||
|
||||
useEffect(() => {
|
||||
const token = ResponsiveObserve.subscribe(supportScreens => {
|
||||
setScreens(supportScreens);
|
||||
});
|
||||
|
||||
return () => ResponsiveObserve.unsubscribe(token);
|
||||
}, []);
|
||||
|
||||
return screens;
|
||||
}
|
||||
|
||||
export default useBreakpoint;
|
||||
@ -1,7 +1,10 @@
|
||||
import Row from './row';
|
||||
import Col from './col';
|
||||
import useBreakpoint from './hooks/useBreakpoint';
|
||||
|
||||
export { RowProps } from './row';
|
||||
export { ColProps, ColSize } from './col';
|
||||
|
||||
export { Row, Col };
|
||||
|
||||
export default { useBreakpoint };
|
||||
|
||||
@ -66,6 +66,8 @@ export { default as Empty } from './empty';
|
||||
|
||||
export { default as Form } from './form';
|
||||
|
||||
export { default as Grid } from './grid';
|
||||
|
||||
export { default as Input } from './input';
|
||||
|
||||
export { default as InputNumber } from './input-number';
|
||||
@ -110,6 +112,8 @@ export { default as Skeleton } from './skeleton';
|
||||
|
||||
export { default as Slider } from './slider';
|
||||
|
||||
export { default as Space } from './space';
|
||||
|
||||
export { default as Spin } from './spin';
|
||||
|
||||
export { default as Steps } from './steps';
|
||||
|
||||
@ -348,7 +348,7 @@ exports[`List.pagination should change page size work 2`] = `
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="rc_select_TEST_OR_SSR_list_2"
|
||||
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="true"
|
||||
@ -372,7 +372,7 @@ exports[`List.pagination should change page size work 2`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-select-dropdown"
|
||||
style="width: 0px; opacity: 0;"
|
||||
style="min-width: 0; opacity: 0;"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
@ -380,6 +380,13 @@ exports[`List.pagination should change page size work 2`] = `
|
||||
role="listbox"
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
<div
|
||||
aria-selected="false"
|
||||
id="rc_select_TEST_OR_SSR_list_0"
|
||||
role="option"
|
||||
>
|
||||
10
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
id="rc_select_TEST_OR_SSR_list_1"
|
||||
@ -387,20 +394,6 @@ exports[`List.pagination should change page size work 2`] = `
|
||||
>
|
||||
20
|
||||
</div>
|
||||
<div
|
||||
aria-selected="true"
|
||||
id="rc_select_TEST_OR_SSR_list_2"
|
||||
role="option"
|
||||
>
|
||||
30
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
id="rc_select_TEST_OR_SSR_list_3"
|
||||
role="option"
|
||||
>
|
||||
40
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class=""
|
||||
@ -413,7 +406,7 @@ exports[`List.pagination should change page size work 2`] = `
|
||||
>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option"
|
||||
class="ant-select-item ant-select-item-option ant-select-item-option-active"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
@ -445,7 +438,7 @@ exports[`List.pagination should change page size work 2`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-selected="true"
|
||||
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
|
||||
class="ant-select-item ant-select-item-option ant-select-item-option-selected"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
@ -523,9 +516,6 @@ exports[`List.pagination should change page size work 2`] = `
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,22 +1,35 @@
|
||||
import * as React from 'react';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import { ModalLocale, changeConfirmLocale } from '../modal/locale';
|
||||
import warning from '../_util/warning';
|
||||
|
||||
import { ModalLocale, changeConfirmLocale } from '../modal/locale';
|
||||
import { TransferLocale as TransferLocaleForEmpty } from '../empty';
|
||||
import { PaginationLocale } from '../pagination/Pagination';
|
||||
import { TableLocale } from '../table/interface';
|
||||
import { PopconfirmLocale } from '../popconfirm';
|
||||
import { UploadLocale } from '../upload/interface';
|
||||
import { TransferLocale } from '../transfer';
|
||||
import { PickerLocale as DatePickerLocale } from '../date-picker/generatePicker';
|
||||
|
||||
export const ANT_MARK = 'internalMark';
|
||||
|
||||
export interface Locale {
|
||||
locale: string;
|
||||
Pagination?: Object;
|
||||
DatePicker?: Object;
|
||||
Pagination?: PaginationLocale;
|
||||
DatePicker?: DatePickerLocale;
|
||||
TimePicker?: Object;
|
||||
Calendar?: Object;
|
||||
Table?: Object;
|
||||
Table?: TableLocale;
|
||||
Modal?: ModalLocale;
|
||||
Popconfirm?: Object;
|
||||
Transfer?: Object;
|
||||
Popconfirm?: PopconfirmLocale;
|
||||
Transfer?: Partial<TransferLocale>;
|
||||
Select?: Object;
|
||||
Upload?: Object;
|
||||
Upload?: UploadLocale;
|
||||
Empty?: TransferLocaleForEmpty;
|
||||
global?: Object;
|
||||
PageHeader?: Object;
|
||||
Icon?: Object;
|
||||
Text?: Object;
|
||||
}
|
||||
|
||||
export interface LocaleProviderProps {
|
||||
|
||||
@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/ar_EG';
|
||||
import DatePicker from '../date-picker/locale/ar_EG';
|
||||
import TimePicker from '../time-picker/locale/ar_EG';
|
||||
import Calendar from '../calendar/locale/ar_EG';
|
||||
import { Locale } from '../locale-provider';
|
||||
|
||||
export default {
|
||||
const localeValues: Locale = {
|
||||
locale: 'ar',
|
||||
Pagination,
|
||||
DatePicker,
|
||||
@ -41,3 +42,5 @@ export default {
|
||||
description: 'لا توجد بيانات',
|
||||
},
|
||||
};
|
||||
|
||||
export default localeValues;
|
||||
|
||||
@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/az_AZ';
|
||||
import DatePicker from '../date-picker/locale/az_AZ';
|
||||
import TimePicker from '../time-picker/locale/az_AZ';
|
||||
import Calendar from '../calendar/locale/az_AZ';
|
||||
import { Locale } from '../locale-provider';
|
||||
|
||||
export default {
|
||||
const localeValues: Locale = {
|
||||
locale: 'az',
|
||||
Pagination,
|
||||
DatePicker,
|
||||
@ -43,3 +44,5 @@ export default {
|
||||
previewFile: 'Fayla önbaxış',
|
||||
},
|
||||
};
|
||||
|
||||
export default localeValues;
|
||||
|
||||
@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/bg_BG';
|
||||
import DatePicker from '../date-picker/locale/bg_BG';
|
||||
import TimePicker from '../time-picker/locale/bg_BG';
|
||||
import Calendar from '../calendar/locale/bg_BG';
|
||||
import { Locale } from '../locale-provider';
|
||||
|
||||
export default {
|
||||
const localeValues: Locale = {
|
||||
locale: 'bg',
|
||||
Pagination,
|
||||
DatePicker,
|
||||
@ -41,3 +42,5 @@ export default {
|
||||
description: 'Няма данни',
|
||||
},
|
||||
};
|
||||
|
||||
export default localeValues;
|
||||
|
||||
@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/ca_ES';
|
||||
import DatePicker from '../date-picker/locale/ca_ES';
|
||||
import TimePicker from '../time-picker/locale/ca_ES';
|
||||
import Calendar from '../calendar/locale/ca_ES';
|
||||
import { Locale } from '../locale-provider';
|
||||
|
||||
export default {
|
||||
const localeValues: Locale = {
|
||||
locale: 'ca',
|
||||
Pagination,
|
||||
DatePicker,
|
||||
@ -39,3 +40,5 @@ export default {
|
||||
description: 'Sense dades',
|
||||
},
|
||||
};
|
||||
|
||||
export default localeValues;
|
||||
|
||||
@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/cs_CZ';
|
||||
import DatePicker from '../date-picker/locale/cs_CZ';
|
||||
import TimePicker from '../time-picker/locale/cs_CZ';
|
||||
import Calendar from '../calendar/locale/cs_CZ';
|
||||
import { Locale } from '../locale-provider';
|
||||
|
||||
export default {
|
||||
const localeValues: Locale = {
|
||||
locale: 'cs',
|
||||
Pagination,
|
||||
DatePicker,
|
||||
@ -39,3 +40,5 @@ export default {
|
||||
description: 'Žádná data',
|
||||
},
|
||||
};
|
||||
|
||||
export default localeValues;
|
||||
|
||||
@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/da_DK';
|
||||
import DatePicker from '../date-picker/locale/da_DK';
|
||||
import TimePicker from '../time-picker/locale/da_DK';
|
||||
import Calendar from '../calendar/locale/da_DK';
|
||||
import { Locale } from '../locale-provider';
|
||||
|
||||
export default {
|
||||
const localeValues: Locale = {
|
||||
locale: 'da',
|
||||
DatePicker,
|
||||
TimePicker,
|
||||
@ -41,3 +42,5 @@ export default {
|
||||
description: 'Ingen data',
|
||||
},
|
||||
};
|
||||
|
||||
export default localeValues;
|
||||
|
||||
@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/de_DE';
|
||||
import DatePicker from '../date-picker/locale/de_DE';
|
||||
import TimePicker from '../time-picker/locale/de_DE';
|
||||
import Calendar from '../calendar/locale/de_DE';
|
||||
import { Locale } from '../locale-provider';
|
||||
|
||||
export default {
|
||||
const localeValues: Locale = {
|
||||
locale: 'de',
|
||||
Pagination,
|
||||
DatePicker,
|
||||
@ -57,3 +58,5 @@ export default {
|
||||
back: 'Zurück',
|
||||
},
|
||||
};
|
||||
|
||||
export default localeValues;
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user