mirror of
https://github.com/ant-design/ant-design.git
synced 2026-02-17 23:02:28 +08:00
Compare commits
57 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
a1c733ad07 | ||
|
|
9918140695 | ||
|
|
87cbe0168f | ||
|
|
eea0b028c9 | ||
|
|
88bed67368 | ||
|
|
f7e7ce9d4f | ||
|
|
ae7666f8fa | ||
|
|
3fb7325a21 | ||
|
|
59c29a400d | ||
|
|
d3102bb2db | ||
|
|
e036e4c9a3 | ||
|
|
da3540bd59 | ||
|
|
bba87d4125 | ||
|
|
6de8522894 | ||
|
|
674074ce93 | ||
|
|
c68f4463d3 | ||
|
|
a96a95ccb8 | ||
|
|
b112378de3 | ||
|
|
db4bec92be | ||
|
|
b6fc0168db | ||
|
|
92fe411961 | ||
|
|
ab29ecb377 | ||
|
|
23d5a856c0 | ||
|
|
6e4fa95d0f | ||
|
|
2753ce91c9 | ||
|
|
057f5b8526 | ||
|
|
d3eea22097 | ||
|
|
da2f54a18a | ||
|
|
e5dd231aaa | ||
|
|
c6eafe8380 | ||
|
|
0520b844d5 | ||
|
|
8dd91ca648 | ||
|
|
44c9bcafc9 | ||
|
|
4df1cd3db2 | ||
|
|
2f7c895675 | ||
|
|
c513296849 | ||
|
|
2416f733bf | ||
|
|
d102c2bf7a | ||
|
|
2adf8ced24 | ||
|
|
528f1df5d6 | ||
|
|
4297f33e85 | ||
|
|
8ea9356399 | ||
|
|
bcb71b8b78 | ||
|
|
121437b666 | ||
|
|
8e793c431f | ||
|
|
89472751a7 | ||
|
|
df8f34309f | ||
|
|
670bd4bf5b | ||
|
|
75ed2e0745 | ||
|
|
2f72e472e5 | ||
|
|
77dc5fa4e7 | ||
|
|
9ea5fb3050 | ||
|
|
847f5fcd31 | ||
|
|
44a63acf13 | ||
|
|
1ae09841e9 | ||
|
|
dc3bf75452 | ||
|
|
b826157e73 |
2
.github/workflows/deploy-site.yml
vendored
2
.github/workflows/deploy-site.yml
vendored
@@ -3,7 +3,7 @@ on:
|
||||
release:
|
||||
types: [published]
|
||||
branches:
|
||||
- master
|
||||
- 3.x-stable
|
||||
|
||||
jobs:
|
||||
build-and-deploy:
|
||||
|
||||
@@ -15,10 +15,62 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 3.26.9
|
||||
|
||||
`2020-02-08`
|
||||
|
||||
- 🐞 Fix Badge that count is not align when wrapped by Typography. [#21237](https://github.com/ant-design/ant-design/pull/21237)
|
||||
- 🐞 Fix Steps that icon is not align when `size="small"` and `labelPlacement="vertical"`. [#21258](https://github.com/ant-design/ant-design/pull/21258)
|
||||
- 🐞 Fix Typography not focus at the end of textarea when `editable` is true. [#21268](https://github.com/ant-design/ant-design/pull/21268)
|
||||
- TypeScript
|
||||
- 💄 Improve type definition of validation rule's type for Form. [#21250](https://github.com/ant-design/ant-design/pull/21250) [@hansololai](https://github.com/hansololai)
|
||||
- 🐞 Fix type definition of `event` for Tree. [#21200](https://github.com/ant-design/ant-design/pull/21200) [@Jirka-Lhotka](https://github.com/Jirka-Lhotka)
|
||||
|
||||
## 3.26.8
|
||||
|
||||
`2020-02-03`
|
||||
|
||||
- 🐞 Fix Tooltip hidden when `title` is `0`. [#20894](https://github.com/ant-design/ant-design/pull/20894)
|
||||
- 🐞 Fix List `actions` inconsistent position. [#20897](https://github.com/ant-design/ant-design/pull/20897)
|
||||
- 🐞 Fix Card `font-size` of `actions` not in less theme variables. [#21106](https://github.com/ant-design/ant-design/pull/21106)
|
||||
- 🐞 Fix Layout components `displayName`. [#21124](https://github.com/ant-design/ant-design/pull/21124)
|
||||
- 🐞 Fix Modal.confirm `okButtonProps` and `cancelButtonProps` interface. [#21165](https://github.com/ant-design/ant-design/pull/21165)
|
||||
|
||||
## 3.26.7
|
||||
|
||||
`2020-01-13`
|
||||
|
||||
- 💄 Optimize Table fixed columns blank problem in some case. [#20821](https://github.com/ant-design/ant-design/pull/20821) [@AshoneA](https://github.com/AshoneA)
|
||||
- 🐞 Fix Tree `switcherIcon` shown in leaf node problem. [#20753](https://github.com/ant-design/ant-design/pull/20753)
|
||||
- 🐞 Fix Badge `z-index` higher than Table fixed columns. [#20751](https://github.com/ant-design/ant-design/pull/20751)
|
||||
- 🐞 Fix Cascader search bug when `fieldNames` is existed and label/value share same name. [#20720](https://github.com/ant-design/ant-design/pull/20720)
|
||||
- 🐞 Fix Collapse background color with wrong less variable. [#20718](https://github.com/ant-design/ant-design/pull/20718) [@kuitos](https://github.com/kuitos)
|
||||
- 🐞 Fix Input.Group inside `<Form layout="vertical" >` 1px bug. [#20685](https://github.com/ant-design/ant-design/pull/20685)
|
||||
|
||||
## 3.26.6
|
||||
|
||||
`2020-01-03`
|
||||
|
||||
- 📢 v3 branch changes from `master` to `3.x-stable` and v4 merge into `master`.
|
||||
- 💄 Improve Steps `type="navigation"` UI in small screen. [#20545](https://github.com/ant-design/ant-design/pull/20545)
|
||||
- 🐞 Fix `message.xxx` pass `null` will failed. [#20546](https://github.com/ant-design/ant-design/pull/20546)
|
||||
- 🐞 Remove Input.Password `value` attribute from dom. [#20544](https://github.com/ant-design/ant-design/pull/20544)
|
||||
|
||||
## 3.26.5
|
||||
|
||||
`2019-12-29`
|
||||
|
||||
- Table
|
||||
- 🐞 Revert the logic of return fisrt page by default after sort. [#20507](https://github.com/ant-design/ant-design/pull/20507)
|
||||
- 🐞 Fix header wrong text align when `colspan=1`. [#20463](https://github.com/ant-design/ant-design/pull/20463)
|
||||
- 🐞 Fix Tabs ink bar disappearing when `animated` prop is false. [#20417](https://github.com/ant-design/ant-design/pull/20417) [@xrkffgg](https://github.com/xrkffgg)
|
||||
- 🐞 Fix Tree wrong indent. [#20456](https://github.com/ant-design/ant-design/pull/20456)
|
||||
|
||||
## 3.26.4
|
||||
|
||||
`2019-12-14`
|
||||
`2019-12-22`
|
||||
|
||||
- 💄 Optimize Steps `subTitle` UI when `labelPlacement="vertical"`. [#20325](https://github.com/ant-design/ant-design/pull/20325)
|
||||
- 🐞 Fix upload preview not support ico file type issue. [#20375](https://github.com/ant-design/ant-design/pull/20375) [@Rustin-Liu](https://github.com/Rustin-Liu)
|
||||
- 🐞 Fix Form feedback icon combine Input `suffix` display not correct. [#20363](https://github.com/ant-design/ant-design/pull/20363)
|
||||
- 🐞 Fix Tag `onClick` been triggered when close it. [#20355](https://github.com/ant-design/ant-design/pull/20355)
|
||||
|
||||
@@ -15,10 +15,60 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
`2020-02-08`
|
||||
|
||||
- 🐞 修复 Badge 在 Typography 下数字错位的问题。[#21237](https://github.com/ant-design/ant-design/pull/21237)
|
||||
- 🐞 修复 Steps 在 `size="small"` 和 `labelPlacement="vertical"` 时图标没有对齐的问题。[#21258](https://github.com/ant-design/ant-design/pull/21258)
|
||||
- 🐞 修复 Typography 在可编辑状态时光标没有在输入框末位的问题。[#21268](https://github.com/ant-design/ant-design/pull/21268)
|
||||
- TypeScript
|
||||
- 💄 完善 Form 中校验规则类型的类型定义。[#21250](https://github.com/ant-design/ant-design/pull/21250) [@hansololai](https://github.com/hansololai)
|
||||
- 🐞 修复 Tree 中事件类型定义不正确的问题。[#21200](https://github.com/ant-design/ant-design/pull/21200) [@Jirka-Lhotka](https://github.com/Jirka-Lhotka)
|
||||
|
||||
## 3.26.8
|
||||
|
||||
`2020-02-03`
|
||||
|
||||
- 🐞 修复 Tooltip `title` 为 `0` 时没有显示的问题。[#20894](https://github.com/ant-design/ant-design/pull/20894)
|
||||
- 🐞 修复 List `actions` 位置不在右边的问题。[#20897](https://github.com/ant-design/ant-design/pull/20897)
|
||||
- 🐞 修复 Card `actions` 字体大小不受 less 变量影响的问题。[#21106](https://github.com/ant-design/ant-design/pull/21106)
|
||||
- 🐞 修正 Layout 各组件的 `displayName`。[#21124](https://github.com/ant-design/ant-design/pull/21124)
|
||||
- 🐞 优化 Modal.confirm 的 `okButtonProps` 和 `cancelButtonProps` 的 TypeScript 类型。[#21165](https://github.com/ant-design/ant-design/pull/21165)
|
||||
|
||||
## 3.26.7
|
||||
|
||||
`2020-01-13`
|
||||
|
||||
- 💄 优化 Table 固定列在某些情况下出现空白间隔的问题。[#20821](https://github.com/ant-design/ant-design/pull/20821) [@AshoneA](https://github.com/AshoneA)
|
||||
- 🐞 修复 Tree `switcherIcon` 在叶子节点上展示的问题。[#20753](https://github.com/ant-design/ant-design/pull/20753)
|
||||
- 🐞 修复 Badge 在 Table 固定列中穿透的问题。[#20751](https://github.com/ant-design/ant-design/pull/20751)
|
||||
- 🐞 修复 Cascader `fieldNames` 中 label 和 value 共用一个值时搜索功能失效的问题。[#20720](https://github.com/ant-design/ant-design/pull/20720)
|
||||
- 🐞 修复 Collapse 背景使用错误的 less 变量。[#20718](https://github.com/ant-design/ant-design/pull/20718) [@kuitos](https://github.com/kuitos)
|
||||
- 🐞 修复 `<Form layout="vertical" >` 内 Input.Group 偏上一像素的问题。[#20685](https://github.com/ant-design/ant-design/pull/20685)
|
||||
|
||||
## 3.26.6
|
||||
|
||||
`2020-01-03`
|
||||
|
||||
- 📢 v3 分支由 `master` 进入 `3.x-stable`,v4 合入 `master`。
|
||||
- 💄 优化 Steps `type="navigation"` 在小屏幕下的样式。[#20545](https://github.com/ant-design/ant-design/pull/20545)
|
||||
- 🐞 修复 `message.xxx` 传入 `null` 会报错的问题。[#20546](https://github.com/ant-design/ant-design/pull/20546)
|
||||
- 🐞 优化 Input.Password 在 dom 中明文显示 `value` 属性的问题。[#20544](https://github.com/ant-design/ant-design/pull/20544)
|
||||
|
||||
## 3.26.5
|
||||
|
||||
`2019-12-29`
|
||||
|
||||
- Table
|
||||
- 🐞 回滚排序后默认回到第一页的逻辑。[#20507](https://github.com/ant-design/ant-design/pull/20507)
|
||||
- 🐞 修复分组列头在 `colspan=1` 时文本没有对齐的问题。[#20463](https://github.com/ant-design/ant-design/pull/20463)
|
||||
- 🐞 修复 Tabs 的 `animated` 属性为 false 时,高亮条消失的问题。[#20417](https://github.com/ant-design/ant-design/pull/20417) [@xrkffgg](https://github.com/xrkffgg)
|
||||
- 🐞 修复 Tree 节点缩进不正确的问题。[#20456](https://github.com/ant-design/ant-design/pull/20456)
|
||||
|
||||
## 3.26.4
|
||||
|
||||
`2019-12-14`
|
||||
`2019-12-22`
|
||||
|
||||
- 💄 优化 Steps `subTitle` 在 `labelPlacement="vertical"` 下的展现方式。[#20325](https://github.com/ant-design/ant-design/pull/20325)
|
||||
- 🐞 修复 Upload 组件预览不支持 `.ico` 文件问题。[#20375](https://github.com/ant-design/ant-design/pull/20375) [@Rustin-Liu](https://github.com/Rustin-Liu)
|
||||
- 🐞 修复 Form feedback 图标结合 Input `suffix` 显示不正确。[#20363](https://github.com/ant-design/ant-design/pull/20363)
|
||||
- 🐞 修复 Tag 关闭时 `onClick` 被触发的问题。[#20355](https://github.com/ant-design/ant-design/pull/20355)
|
||||
|
||||
@@ -27,7 +27,7 @@ English | [简体中文](./README-zh_CN.md)
|
||||
- 🌈 Enterprise-class UI designed for web applications.
|
||||
- 📦 A set of high-quality React components out of the box.
|
||||
- 🛡 Written in TypeScript with predictable static types.
|
||||
- ⚙️ The whole package of development and design resources and tools.
|
||||
- ⚙️ Whole package of design resources and development tools.
|
||||
- 🌍 Internationalization support for dozens of languages.
|
||||
- 🎨 Powerful theme customization in every detail.
|
||||
|
||||
|
||||
@@ -41,152 +41,152 @@ exports[`renders ./components/avatar/demo/badge.md correctly 1`] = `
|
||||
style="transition:none;-ms-transform:translateY(-1100%);-webkit-transform:translateY(-1100%);transform:translateY(-1100%)"
|
||||
>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
0
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
1
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
2
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
3
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
4
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
5
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
6
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
7
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
8
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
9
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
0
|
||||
</p>
|
||||
<p
|
||||
class="current"
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
1
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
2
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
3
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
4
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
5
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
6
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
7
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
8
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
9
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
0
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
1
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
2
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
3
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
4
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
5
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
6
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
7
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
8
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
9
|
||||
</p>
|
||||
|
||||
@@ -17,12 +17,16 @@ function getNumberArray(num: string | number | undefined | null) {
|
||||
: [];
|
||||
}
|
||||
|
||||
function renderNumberList(position: number) {
|
||||
function renderNumberList(position: number, className: string) {
|
||||
const childrenToReturn: React.ReactElement<any>[] = [];
|
||||
for (let i = 0; i < 30; i++) {
|
||||
const currentClassName = position === i ? 'current' : '';
|
||||
childrenToReturn.push(
|
||||
<p key={i.toString()} className={currentClassName}>
|
||||
<p
|
||||
key={i.toString()}
|
||||
className={classNames(className, {
|
||||
current: position === i,
|
||||
})}
|
||||
>
|
||||
{i % 10}
|
||||
</p>,
|
||||
);
|
||||
@@ -138,7 +142,7 @@ class ScrollNumber extends React.Component<ScrollNumberProps, ScrollNumberState>
|
||||
},
|
||||
key: i,
|
||||
},
|
||||
renderNumberList(position),
|
||||
renderNumberList(position, `${prefixCls}-only-unit`),
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -159,7 +159,7 @@
|
||||
display: inline-block;
|
||||
height: @badge-height;
|
||||
transition: all 0.3s @ease-in-out;
|
||||
> p {
|
||||
> p.@{number-prefix-cls}-only-unit {
|
||||
height: @badge-height;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -32,7 +32,7 @@ A card can be used to display content related to a single subject. The content c
|
||||
| hoverable | Lift up when hovering card | boolean | false | |
|
||||
| loading | Shows a loading indicator while the contents of the card are being fetched | boolean | false | |
|
||||
| tabList | List of TabPane's head. | Array<{key: string, tab: ReactNode}> | - | |
|
||||
| tabBarExtraContent | Extra content in tab bar | React.ReactNode | - | |
|
||||
| tabBarExtraContent | Extra content in tab bar | React.ReactNode | - | 3.23.0 |
|
||||
| size | Size of card | `default` \| `small` | `default` | 3.12.0 |
|
||||
| title | Card title | string\|ReactNode | - | |
|
||||
| type | Card style type, can be set to `inner` or not set | string | - | |
|
||||
|
||||
@@ -33,7 +33,7 @@ cols: 1
|
||||
| hoverable | 鼠标移过时可浮起 | boolean | false | |
|
||||
| loading | 当卡片内容还在加载中时,可以用 loading 展示一个占位 | boolean | false | |
|
||||
| tabList | 页签标题列表 | Array<{key: string, tab: ReactNode}> | - | |
|
||||
| tabBarExtraContent | tab bar 上额外的元素 | React.ReactNode | 无 | |
|
||||
| tabBarExtraContent | tab bar 上额外的元素 | React.ReactNode | 无 | 3.23.0 |
|
||||
| size | card 的尺寸 | `default` \| `small` | `default` | 3.12.0 |
|
||||
| title | 卡片标题 | string\|ReactNode | - | |
|
||||
| type | 卡片类型,可设置为 `inner` 或 不设置 | string | - | |
|
||||
|
||||
@@ -144,7 +144,7 @@
|
||||
position: relative;
|
||||
display: block;
|
||||
min-width: 32px;
|
||||
font-size: 14px;
|
||||
font-size: @font-size-base;
|
||||
line-height: 22px;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
@@ -839,6 +839,7 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
|
||||
Object {
|
||||
"__IS_FILTERED_OPTION": true,
|
||||
"disabled": false,
|
||||
"isEmptyNode": true,
|
||||
"label": Array [
|
||||
"Jiangsu",
|
||||
Array [
|
||||
@@ -891,6 +892,7 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
|
||||
Object {
|
||||
"__IS_FILTERED_OPTION": true,
|
||||
"disabled": false,
|
||||
"isEmptyNode": true,
|
||||
"label": Array [
|
||||
"Zhejiang",
|
||||
Array [
|
||||
@@ -1025,6 +1027,49 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
|
||||
</Popup>
|
||||
`;
|
||||
|
||||
exports[`Cascader should highlight keyword and filter when search in Cascader with same field name of label and value 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft slide-up-appear"
|
||||
style="left: -999px; top: -995px;"
|
||||
>
|
||||
<div>
|
||||
<ul
|
||||
class="ant-cascader-menu"
|
||||
style="width: 0px;"
|
||||
>
|
||||
<li
|
||||
class="ant-cascader-menu-item"
|
||||
role="menuitem"
|
||||
title=""
|
||||
>
|
||||
Zhejiang / Hang
|
||||
<span
|
||||
class="ant-cascader-menu-item-keyword"
|
||||
>
|
||||
z
|
||||
</span>
|
||||
hou / West Lake
|
||||
</li>
|
||||
<li
|
||||
class="ant-cascader-menu-item ant-cascader-menu-item-disabled"
|
||||
role="menuitem"
|
||||
title=""
|
||||
>
|
||||
Zhejiang / Hang
|
||||
<span
|
||||
class="ant-cascader-menu-item-keyword"
|
||||
>
|
||||
z
|
||||
</span>
|
||||
hou / Xia Sha
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Cascader should render not found content 1`] = `
|
||||
<Popup
|
||||
action={
|
||||
@@ -1242,6 +1287,7 @@ exports[`Cascader should render not found content 1`] = `
|
||||
Array [
|
||||
Object {
|
||||
"disabled": true,
|
||||
"isEmptyNode": true,
|
||||
"label": <Context.Consumer>
|
||||
[Function]
|
||||
</Context.Consumer>,
|
||||
@@ -1569,6 +1615,7 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
|
||||
Array [
|
||||
Object {
|
||||
"disabled": true,
|
||||
"isEmptyNode": true,
|
||||
"label": <Context.Consumer>
|
||||
[Function]
|
||||
</Context.Consumer>,
|
||||
|
||||
@@ -205,6 +205,52 @@ describe('Cascader', () => {
|
||||
expect(popupWrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should highlight keyword and filter when search in Cascader with same field name of label and value', () => {
|
||||
const customOptions = [
|
||||
{
|
||||
name: 'Zhejiang',
|
||||
value: 'Zhejiang',
|
||||
children: [
|
||||
{
|
||||
name: 'Hangzhou',
|
||||
value: 'Hangzhou',
|
||||
children: [
|
||||
{
|
||||
name: 'West Lake',
|
||||
value: 'West Lake',
|
||||
},
|
||||
{
|
||||
name: 'Xia Sha',
|
||||
value: 'Xia Sha',
|
||||
disabled: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
function customFilter(inputValue, path) {
|
||||
return path.some(option => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
|
||||
}
|
||||
const wrapper = mount(
|
||||
<Cascader
|
||||
options={customOptions}
|
||||
fieldNames={{ label: 'name', value: 'name' }}
|
||||
showSearch={{ filter: customFilter }}
|
||||
/>,
|
||||
);
|
||||
wrapper.find('input').simulate('click');
|
||||
wrapper.find('input').simulate('change', { target: { value: 'z' } });
|
||||
expect(wrapper.state('inputValue')).toBe('z');
|
||||
const popupWrapper = mount(
|
||||
wrapper
|
||||
.find('Trigger')
|
||||
.instance()
|
||||
.getComponent(),
|
||||
);
|
||||
expect(popupWrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render not found content', () => {
|
||||
const wrapper = mount(<Cascader options={options} showSearch={{ filter }} />);
|
||||
wrapper.find('input').simulate('click');
|
||||
|
||||
@@ -397,17 +397,19 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
|
||||
return {
|
||||
__IS_FILTERED_OPTION: true,
|
||||
path,
|
||||
[names.label]: render(inputValue, path, prefixCls, names),
|
||||
[names.value]: path.map((o: CascaderOptionType) => o[names.value]),
|
||||
[names.label]: render(inputValue, path, prefixCls, names),
|
||||
disabled: path.some((o: CascaderOptionType) => !!o.disabled),
|
||||
isEmptyNode: true,
|
||||
} as CascaderOptionType;
|
||||
});
|
||||
}
|
||||
return [
|
||||
{
|
||||
[names.label]: notFoundContent || renderEmpty('Cascader'),
|
||||
[names.value]: 'ANT_CASCADER_NOT_FOUND',
|
||||
[names.label]: notFoundContent || renderEmpty('Cascader'),
|
||||
disabled: true,
|
||||
isEmptyNode: true,
|
||||
},
|
||||
];
|
||||
}
|
||||
@@ -503,9 +505,10 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
|
||||
} else {
|
||||
options = [
|
||||
{
|
||||
[names.label]: notFoundContent || renderEmpty('Cascader'),
|
||||
[names.value]: 'ANT_CASCADER_NOT_FOUND',
|
||||
[names.label]: notFoundContent || renderEmpty('Cascader'),
|
||||
disabled: true,
|
||||
isEmptyNode: true,
|
||||
},
|
||||
];
|
||||
}
|
||||
@@ -517,8 +520,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
|
||||
}
|
||||
|
||||
const dropdownMenuColumnStyle: { width?: number; height?: string } = {};
|
||||
const isNotFound =
|
||||
(options || []).length === 1 && options[0][names.value] === 'ANT_CASCADER_NOT_FOUND';
|
||||
const isNotFound = (options || []).length === 1 && options[0].isEmptyNode;
|
||||
if (isNotFound) {
|
||||
dropdownMenuColumnStyle.height = 'auto'; // Height of one row.
|
||||
}
|
||||
|
||||
@@ -102,7 +102,7 @@
|
||||
}
|
||||
|
||||
&-borderless {
|
||||
background-color: @component-background;
|
||||
background-color: @collapse-header-bg;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -445,152 +445,152 @@ exports[`ConfigProvider components Badge configProvider 1`] = `
|
||||
style="transition:none;-ms-transform:translateY(-1500%);-webkit-transform:translateY(-1500%);transform:translateY(-1500%)"
|
||||
>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
0
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
1
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
2
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
3
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
4
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
5
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
6
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
7
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
8
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
9
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
0
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
1
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
2
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
3
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
4
|
||||
</p>
|
||||
<p
|
||||
class="current"
|
||||
class="config-scroll-number-only-unit current"
|
||||
>
|
||||
5
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
6
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
7
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
8
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
9
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
0
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
1
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
2
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
3
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
4
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
5
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
6
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
7
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
8
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="config-scroll-number-only-unit"
|
||||
>
|
||||
9
|
||||
</p>
|
||||
@@ -625,152 +625,152 @@ exports[`ConfigProvider components Badge normal 1`] = `
|
||||
style="transition:none;-ms-transform:translateY(-1500%);-webkit-transform:translateY(-1500%);transform:translateY(-1500%)"
|
||||
>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
0
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
1
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
2
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
3
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
4
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
5
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
6
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
7
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
8
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
9
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
0
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
1
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
2
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
3
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
4
|
||||
</p>
|
||||
<p
|
||||
class="current"
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
5
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
6
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
7
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
8
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
9
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
0
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
1
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
2
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
3
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
4
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
5
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
6
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
7
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
8
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
9
|
||||
</p>
|
||||
@@ -805,152 +805,152 @@ exports[`ConfigProvider components Badge prefixCls 1`] = `
|
||||
style="transition:none;-ms-transform:translateY(-1500%);-webkit-transform:translateY(-1500%);transform:translateY(-1500%)"
|
||||
>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
0
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
1
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
2
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
3
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
4
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
5
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
6
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
7
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
8
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
9
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
0
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
1
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
2
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
3
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
4
|
||||
</p>
|
||||
<p
|
||||
class="current"
|
||||
class="prefix-scroll-number-only-unit current"
|
||||
>
|
||||
5
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
6
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
7
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
8
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
9
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
0
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
1
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
2
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
3
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
4
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
5
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
6
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
7
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
8
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
class="prefix-scroll-number-only-unit"
|
||||
>
|
||||
9
|
||||
</p>
|
||||
@@ -8617,7 +8617,7 @@ exports[`ConfigProvider components Pagination configProvider 1`] = `
|
||||
<div
|
||||
class="config-pagination-options-quick-jumper"
|
||||
>
|
||||
Goto
|
||||
Go to
|
||||
<input
|
||||
type="text"
|
||||
value=""
|
||||
@@ -8753,7 +8753,7 @@ exports[`ConfigProvider components Pagination configProvider 1`] = `
|
||||
<div
|
||||
class="config-pagination-options-quick-jumper"
|
||||
>
|
||||
Goto
|
||||
Go to
|
||||
<input
|
||||
type="text"
|
||||
value=""
|
||||
@@ -8894,7 +8894,7 @@ exports[`ConfigProvider components Pagination normal 1`] = `
|
||||
<div
|
||||
class="ant-pagination-options-quick-jumper"
|
||||
>
|
||||
Goto
|
||||
Go to
|
||||
<input
|
||||
type="text"
|
||||
value=""
|
||||
@@ -9030,7 +9030,7 @@ exports[`ConfigProvider components Pagination normal 1`] = `
|
||||
<div
|
||||
class="ant-pagination-options-quick-jumper"
|
||||
>
|
||||
Goto
|
||||
Go to
|
||||
<input
|
||||
type="text"
|
||||
value=""
|
||||
@@ -9171,7 +9171,7 @@ exports[`ConfigProvider components Pagination prefixCls 1`] = `
|
||||
<div
|
||||
class="prefix-Pagination-options-quick-jumper"
|
||||
>
|
||||
Goto
|
||||
Go to
|
||||
<input
|
||||
type="text"
|
||||
value=""
|
||||
@@ -9307,7 +9307,7 @@ exports[`ConfigProvider components Pagination prefixCls 1`] = `
|
||||
<div
|
||||
class="prefix-Pagination-options-quick-jumper"
|
||||
>
|
||||
Goto
|
||||
Go to
|
||||
<input
|
||||
type="text"
|
||||
value=""
|
||||
|
||||
@@ -127,7 +127,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
|
||||
| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/components/time-picker/#API) | |
|
||||
| showTime.defaultValue | to set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | \[moment(), moment()] | |
|
||||
| value | to set date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |
|
||||
| onCalendarChange | a callback function, can be executed when the start time or the end time of the range is changing | function(dates: \[moment, moment], dateStrings: \[string, string]) | - | 3.10.9 |
|
||||
| onCalendarChange | a callback function, can be executed when the start time or the end time of the range is changing | function(dates: \[moment, moment]) | - | 3.0.0 |
|
||||
| onChange | a callback function, can be executed when the selected time is changing | function(dates: \[moment, moment], dateStrings: \[string, string]) | - | |
|
||||
| onOk | callback when click ok button | function(dates: [moment](http://momentjs.com/)\[]) | - | |
|
||||
|
||||
|
||||
@@ -129,7 +129,7 @@ moment.locale('zh-cn');
|
||||
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) | |
|
||||
| showTime.defaultValue | 设置用户选择日期时默认的时分秒,[例子](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | \[moment(), moment()] | |
|
||||
| value | 日期 | [moment](http://momentjs.com/)\[] | 无 | |
|
||||
| onCalendarChange | 待选日期发生变化的回调 | function(dates: \[moment, moment\], dateStrings: \[string, string\]) | 无 | |
|
||||
| onCalendarChange | 待选日期发生变化的回调 | function(dates: \[moment, moment\]) | 无 | 3.0.0 |
|
||||
| onChange | 日期范围发生变化的回调 | function(dates: \[moment, moment\], dateStrings: \[string, string\]) | 无 | |
|
||||
| onOk | 点击确定按钮的回调 | function(dates: [moment](http://momentjs.com/)\[]) | - | |
|
||||
|
||||
|
||||
@@ -29,7 +29,7 @@ export interface FormCreateOption<T> {
|
||||
}
|
||||
|
||||
const FormLayouts = tuple('horizontal', 'inline', 'vertical');
|
||||
export type FormLayout = (typeof FormLayouts)[number];
|
||||
export type FormLayout = typeof FormLayouts[number];
|
||||
|
||||
export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
|
||||
layout?: FormLayout;
|
||||
@@ -51,11 +51,28 @@ export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
|
||||
labelAlign?: FormLabelAlign;
|
||||
}
|
||||
|
||||
export type ValidationRuleType =
|
||||
| 'string'
|
||||
| 'number'
|
||||
| 'boolean'
|
||||
| 'method'
|
||||
| 'regexp'
|
||||
| 'integer'
|
||||
| 'float'
|
||||
| 'array'
|
||||
| 'object'
|
||||
| 'enum'
|
||||
| 'date'
|
||||
| 'url'
|
||||
| 'hex'
|
||||
| 'email'
|
||||
| 'any';
|
||||
|
||||
export type ValidationRule = {
|
||||
/** validation error message */
|
||||
message?: React.ReactNode;
|
||||
/** built-in validation type, available options: https://github.com/yiminghe/async-validator#type */
|
||||
type?: string;
|
||||
type?: ValidationRuleType;
|
||||
/** indicates whether field is required */
|
||||
required?: boolean;
|
||||
/** treat required fields that only contain whitespace as errors */
|
||||
@@ -67,7 +84,7 @@ export type ValidationRule = {
|
||||
/** validate the max length of a field */
|
||||
max?: number;
|
||||
/** validate the value from a list of possible values */
|
||||
enum?: string | string[];
|
||||
enum?: (string | number | boolean)[];
|
||||
/** validate from a regular expression */
|
||||
pattern?: RegExp;
|
||||
/** transform a value before validation */
|
||||
|
||||
@@ -210,7 +210,7 @@ Note: if Form.Item has multiple children that had been decorated by `getFieldDec
|
||||
|
||||
| Property | Description | Type | Default Value | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| enum | validate a value from a list of possible values | string | - | |
|
||||
| enum | validate a value from a list of possible values | string[] | - | |
|
||||
| len | validate an exact length of a field | number | - | |
|
||||
| max | validate a max length of a field | number | - | |
|
||||
| message | validation error message | string\|ReactNode | - | |
|
||||
|
||||
@@ -212,7 +212,7 @@ validateFields(['field1', 'field2'], options, (errors, values) => {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| enum | 枚举类型 | string | - | |
|
||||
| enum | 枚举类型 | string[] | - | |
|
||||
| len | 字段长度 | number | - | |
|
||||
| max | 最大长度 | number | - | |
|
||||
| message | 校验文案 | string\|ReactNode | - | |
|
||||
|
||||
@@ -262,11 +262,18 @@ form {
|
||||
// fix input with addon position. https://github.com/ant-design/ant-design/issues/8243
|
||||
:not(.@{ant-prefix}-input-group-wrapper) > .@{ant-prefix}-input-group,
|
||||
.@{ant-prefix}-input-group-wrapper {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/20616
|
||||
&:not(.@{form-prefix-cls}-vertical) {
|
||||
:not(.@{ant-prefix}-input-group-wrapper) > .@{ant-prefix}-input-group,
|
||||
.@{ant-prefix}-input-group-wrapper {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Form layout
|
||||
|
||||
@@ -17,7 +17,7 @@ export const InputSizes = tuple('small', 'default', 'large');
|
||||
export interface InputProps
|
||||
extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
|
||||
prefixCls?: string;
|
||||
size?: (typeof InputSizes)[number];
|
||||
size?: typeof InputSizes[number];
|
||||
onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
|
||||
addonBefore?: React.ReactNode;
|
||||
addonAfter?: React.ReactNode;
|
||||
@@ -61,7 +61,7 @@ export function resolveOnChange(
|
||||
|
||||
export function getInputClassName(
|
||||
prefixCls: string,
|
||||
size?: (typeof InputSizes)[number],
|
||||
size?: typeof InputSizes[number],
|
||||
disabled?: boolean,
|
||||
) {
|
||||
return classNames(prefixCls, {
|
||||
@@ -114,6 +114,8 @@ class Input extends React.Component<InputProps, InputState> {
|
||||
|
||||
clearableInput: ClearableLabeledInput;
|
||||
|
||||
removePasswordTimeout: number;
|
||||
|
||||
constructor(props: InputProps) {
|
||||
super(props);
|
||||
const value = typeof props.value === 'undefined' ? props.defaultValue : props.value;
|
||||
@@ -131,6 +133,10 @@ class Input extends React.Component<InputProps, InputState> {
|
||||
return null;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.clearPasswordValueAttribute();
|
||||
}
|
||||
|
||||
// Since polyfill `getSnapshotBeforeUpdate` need work with `componentDidUpdate`.
|
||||
// We keep an empty function here.
|
||||
componentDidUpdate() {}
|
||||
@@ -146,6 +152,12 @@ class Input extends React.Component<InputProps, InputState> {
|
||||
return null;
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.removePasswordTimeout) {
|
||||
clearTimeout(this.removePasswordTimeout);
|
||||
}
|
||||
}
|
||||
|
||||
focus() {
|
||||
this.input.focus();
|
||||
}
|
||||
@@ -209,8 +221,21 @@ class Input extends React.Component<InputProps, InputState> {
|
||||
);
|
||||
};
|
||||
|
||||
clearPasswordValueAttribute = () => {
|
||||
// https://github.com/ant-design/ant-design/issues/20541
|
||||
this.removePasswordTimeout = setTimeout(() => {
|
||||
if (
|
||||
this.input &&
|
||||
this.input.getAttribute('type') === 'password' &&
|
||||
this.input.hasAttribute('value')
|
||||
) {
|
||||
this.input.removeAttribute('value');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
this.setValue(e.target.value);
|
||||
this.setValue(e.target.value, this.clearPasswordValueAttribute);
|
||||
resolveOnChange(this.input, e, this.props.onChange);
|
||||
};
|
||||
|
||||
|
||||
@@ -33,7 +33,7 @@ export default class Password extends React.Component<PasswordProps, PasswordSta
|
||||
visible: false,
|
||||
};
|
||||
|
||||
onChange = () => {
|
||||
onVisibleChange = () => {
|
||||
const { disabled } = this.props;
|
||||
if (disabled) {
|
||||
return;
|
||||
@@ -46,7 +46,7 @@ export default class Password extends React.Component<PasswordProps, PasswordSta
|
||||
const { prefixCls, action } = this.props;
|
||||
const iconTrigger = ActionMap[action!] || '';
|
||||
const iconProps = {
|
||||
[iconTrigger]: this.onChange,
|
||||
[iconTrigger]: this.onVisibleChange,
|
||||
className: `${prefixCls}-icon`,
|
||||
type: this.state.visible ? 'eye' : 'eye-invisible',
|
||||
key: 'passwordIcon',
|
||||
|
||||
@@ -4,6 +4,7 @@ import { mount } from 'enzyme';
|
||||
import Input from '..';
|
||||
import focusTest from '../../../tests/shared/focusTest';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import { sleep } from '../../../tests/utils';
|
||||
|
||||
describe('Input.Password', () => {
|
||||
focusTest(Input.Password);
|
||||
@@ -70,4 +71,46 @@ describe('Input.Password', () => {
|
||||
.getDOMNode(),
|
||||
);
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/20541
|
||||
it('should not show value attribute in input element', async () => {
|
||||
const wrapper = mount(<Input.Password />);
|
||||
wrapper
|
||||
.find('input')
|
||||
.at('0')
|
||||
.simulate('change', { target: { value: 'value' } });
|
||||
await sleep();
|
||||
expect(
|
||||
wrapper
|
||||
.find('input')
|
||||
.at('0')
|
||||
.getDOMNode()
|
||||
.getAttribute('value'),
|
||||
).toBeFalsy();
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/20541
|
||||
it('could be unmount without errors', () => {
|
||||
expect(() => {
|
||||
const wrapper = mount(<Input.Password />);
|
||||
wrapper
|
||||
.find('input')
|
||||
.at('0')
|
||||
.simulate('change', { target: { value: 'value' } });
|
||||
wrapper.unmount();
|
||||
}).not.toThrow();
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/pull/20544#issuecomment-569861679
|
||||
it('should not contain value attribute in input element with defautValue', async () => {
|
||||
const wrapper = mount(<Input.Password defaultValue="value" />);
|
||||
await sleep();
|
||||
expect(
|
||||
wrapper
|
||||
.find('input')
|
||||
.at('0')
|
||||
.getDOMNode()
|
||||
.getAttribute('value'),
|
||||
).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -35,7 +35,7 @@ function formatNumber(value) {
|
||||
class NumericInput extends React.Component {
|
||||
onChange = e => {
|
||||
const { value } = e.target;
|
||||
const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/;
|
||||
const reg = /^-?[0-9]*(\.[0-9]*)?$/;
|
||||
if ((!isNaN(value) && reg.test(value)) || value === '' || value === '-') {
|
||||
this.props.onChange(value);
|
||||
}
|
||||
@@ -44,9 +44,11 @@ class NumericInput extends React.Component {
|
||||
// '.' at the end or only '-' in the input box.
|
||||
onBlur = () => {
|
||||
const { value, onBlur, onChange } = this.props;
|
||||
let valueTemp = value;
|
||||
if (value.charAt(value.length - 1) === '.' || value === '-') {
|
||||
onChange(value.slice(0, -1));
|
||||
valueTemp = value.slice(0, -1);
|
||||
}
|
||||
onChange(valueTemp.replace(/0*(\d+)/, '$1'));
|
||||
if (onBlur) {
|
||||
onBlur();
|
||||
}
|
||||
|
||||
@@ -7,6 +7,7 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
export interface GeneratorProps {
|
||||
suffixCls: string;
|
||||
tagName: 'header' | 'footer' | 'main' | 'section';
|
||||
displayName: string;
|
||||
}
|
||||
export interface BasicProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
prefixCls?: string;
|
||||
@@ -30,9 +31,11 @@ interface BasicPropsWithTagName extends BasicProps {
|
||||
tagName: 'header' | 'footer' | 'main' | 'section';
|
||||
}
|
||||
|
||||
function generator({ suffixCls, tagName }: GeneratorProps) {
|
||||
function generator({ suffixCls, tagName, displayName }: GeneratorProps) {
|
||||
return (BasicComponent: any) => {
|
||||
return class Adapter extends React.Component<BasicProps, any> {
|
||||
static displayName: string = displayName;
|
||||
|
||||
static Header: any;
|
||||
|
||||
static Footer: any;
|
||||
@@ -108,21 +111,25 @@ const Layout: React.ComponentClass<BasicProps> & {
|
||||
} = generator({
|
||||
suffixCls: 'layout',
|
||||
tagName: 'section',
|
||||
displayName: 'Layout',
|
||||
})(BasicLayout);
|
||||
|
||||
const Header = generator({
|
||||
suffixCls: 'layout-header',
|
||||
tagName: 'header',
|
||||
displayName: 'Header',
|
||||
})(Basic);
|
||||
|
||||
const Footer = generator({
|
||||
suffixCls: 'layout-footer',
|
||||
tagName: 'footer',
|
||||
displayName: 'Footer',
|
||||
})(Basic);
|
||||
|
||||
const Content = generator({
|
||||
suffixCls: 'layout-content',
|
||||
tagName: 'main',
|
||||
displayName: 'Content',
|
||||
})(Basic);
|
||||
|
||||
Layout.Header = Header;
|
||||
|
||||
@@ -72,7 +72,7 @@ export default class Item extends React.Component<ListItemProps, any> {
|
||||
|
||||
context: any;
|
||||
|
||||
isItemContainsTextNode() {
|
||||
isItemContainsTextNodeAndNotSingular() {
|
||||
const { children } = this.props;
|
||||
let result;
|
||||
React.Children.forEach(children, (element: React.ReactElement<any>) => {
|
||||
@@ -80,7 +80,7 @@ export default class Item extends React.Component<ListItemProps, any> {
|
||||
result = true;
|
||||
}
|
||||
});
|
||||
return result;
|
||||
return result && React.Children.count(children) > 1;
|
||||
}
|
||||
|
||||
isFlexMode() {
|
||||
@@ -89,7 +89,7 @@ export default class Item extends React.Component<ListItemProps, any> {
|
||||
if (itemLayout === 'vertical') {
|
||||
return !!extra;
|
||||
}
|
||||
return !this.isItemContainsTextNode();
|
||||
return !this.isItemContainsTextNodeAndNotSingular();
|
||||
}
|
||||
|
||||
renderItem = ({ getPrefixCls }: ConfigConsumerProps) => {
|
||||
|
||||
@@ -763,27 +763,27 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
|
||||
class="ant-list-items"
|
||||
>
|
||||
<li
|
||||
class="ant-list-item ant-list-item-no-flex"
|
||||
class="ant-list-item"
|
||||
>
|
||||
Racing car sprays burning fuel into crowd.
|
||||
</li>
|
||||
<li
|
||||
class="ant-list-item ant-list-item-no-flex"
|
||||
class="ant-list-item"
|
||||
>
|
||||
Japanese princess to wed commoner.
|
||||
</li>
|
||||
<li
|
||||
class="ant-list-item ant-list-item-no-flex"
|
||||
class="ant-list-item"
|
||||
>
|
||||
Australian walks 100km after outback crash.
|
||||
</li>
|
||||
<li
|
||||
class="ant-list-item ant-list-item-no-flex"
|
||||
class="ant-list-item"
|
||||
>
|
||||
Man charged over missing wedding girl.
|
||||
</li>
|
||||
<li
|
||||
class="ant-list-item ant-list-item-no-flex"
|
||||
class="ant-list-item"
|
||||
>
|
||||
Los Angeles battles huge wildfires.
|
||||
</li>
|
||||
@@ -823,27 +823,27 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
|
||||
class="ant-list-items"
|
||||
>
|
||||
<li
|
||||
class="ant-list-item ant-list-item-no-flex"
|
||||
class="ant-list-item"
|
||||
>
|
||||
Racing car sprays burning fuel into crowd.
|
||||
</li>
|
||||
<li
|
||||
class="ant-list-item ant-list-item-no-flex"
|
||||
class="ant-list-item"
|
||||
>
|
||||
Japanese princess to wed commoner.
|
||||
</li>
|
||||
<li
|
||||
class="ant-list-item ant-list-item-no-flex"
|
||||
class="ant-list-item"
|
||||
>
|
||||
Australian walks 100km after outback crash.
|
||||
</li>
|
||||
<li
|
||||
class="ant-list-item ant-list-item-no-flex"
|
||||
class="ant-list-item"
|
||||
>
|
||||
Man charged over missing wedding girl.
|
||||
</li>
|
||||
<li
|
||||
class="ant-list-item ant-list-item-no-flex"
|
||||
class="ant-list-item"
|
||||
>
|
||||
Los Angeles battles huge wildfires.
|
||||
</li>
|
||||
|
||||
@@ -52,6 +52,7 @@
|
||||
&-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: @list-item-padding;
|
||||
|
||||
&-content {
|
||||
|
||||
@@ -189,4 +189,8 @@ describe('message', () => {
|
||||
jest.advanceTimersByTime(1500);
|
||||
expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
|
||||
});
|
||||
|
||||
it('should not throw error when pass null', () => {
|
||||
message.error(null);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -114,7 +114,10 @@ type JointContent = ConfigContent | ArgsProps;
|
||||
export type ConfigOnClose = () => void;
|
||||
|
||||
function isArgsProps(content: JointContent): content is ArgsProps {
|
||||
return typeof content === 'object' && !!(content as ArgsProps).content;
|
||||
return (
|
||||
Object.prototype.toString.call(content) === '[object Object]' &&
|
||||
!!(content as ArgsProps).content
|
||||
);
|
||||
}
|
||||
|
||||
export interface ConfigOptions {
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import * as React from 'react';
|
||||
import * as ReactDOM from 'react-dom';
|
||||
import Button from '../button';
|
||||
import { ButtonType, NativeButtonProps } from '../button/button';
|
||||
import { ButtonType, ButtonProps } from '../button/button';
|
||||
|
||||
export interface ActionButtonProps {
|
||||
type?: ButtonType;
|
||||
actionFn?: (...args: any[]) => any | PromiseLike<any>;
|
||||
closeModal: Function;
|
||||
autoFocus?: boolean;
|
||||
buttonProps?: NativeButtonProps;
|
||||
buttonProps?: ButtonProps;
|
||||
}
|
||||
|
||||
export interface ActionButtonState {
|
||||
|
||||
@@ -6,7 +6,7 @@ import addEventListener from 'rc-util/lib/Dom/addEventListener';
|
||||
import { getConfirmLocale } from './locale';
|
||||
import Icon from '../icon';
|
||||
import Button from '../button';
|
||||
import { ButtonType, NativeButtonProps } from '../button/button';
|
||||
import { ButtonType, ButtonProps } from '../button/button';
|
||||
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
|
||||
@@ -60,8 +60,8 @@ export interface ModalProps {
|
||||
maskClosable?: boolean;
|
||||
/** 强制渲染 Modal */
|
||||
forceRender?: boolean;
|
||||
okButtonProps?: NativeButtonProps;
|
||||
cancelButtonProps?: NativeButtonProps;
|
||||
okButtonProps?: ButtonProps;
|
||||
cancelButtonProps?: ButtonProps;
|
||||
destroyOnClose?: boolean;
|
||||
style?: React.CSSProperties;
|
||||
wrapClassName?: string;
|
||||
@@ -90,8 +90,8 @@ export interface ModalFuncProps {
|
||||
// TODO: find out exact types
|
||||
onOk?: (...args: any[]) => any;
|
||||
onCancel?: (...args: any[]) => any;
|
||||
okButtonProps?: NativeButtonProps;
|
||||
cancelButtonProps?: NativeButtonProps;
|
||||
okButtonProps?: ButtonProps;
|
||||
cancelButtonProps?: ButtonProps;
|
||||
centered?: boolean;
|
||||
width?: string | number;
|
||||
iconClassName?: string;
|
||||
|
||||
@@ -64,7 +64,7 @@ The items listed above are all functions, expecting a settings object as paramet
|
||||
| centered | Centered Modal | Boolean | `false` | 3.8.0 |
|
||||
| className | className of container | string | - | 3.1.1 |
|
||||
| content | Content | string\|ReactNode | - | |
|
||||
| icon | custom icon (`Added in 3.12.0`) | string\|ReactNode | `<Icon type="question-circle">` | 3.12.0 |
|
||||
| icon | custom icon (`Added in 3.12.0`) | string\|ReactNode | `<Icon type="question-circle" />` | 3.12.0 |
|
||||
| iconType | Icon `type` of the Icon component (deprecated after `3.12.0`) | string | `question-circle` | |
|
||||
| keyboard | Whether support press esc to close | Boolean | true | 3.4.2 |
|
||||
| mask | Whether show mask or not. | Boolean | true | 3.13.0 |
|
||||
|
||||
@@ -68,7 +68,7 @@ title: Modal
|
||||
| centered | 垂直居中展示 Modal | Boolean | `false` | 3.8.2 |
|
||||
| className | 容器类名 | string | - | 3.1.1 |
|
||||
| content | 内容 | string\|ReactNode | 无 | |
|
||||
| icon | 自定义图标(3.12.0 新增) | string\|ReactNode | `<Icon type="question-circle">` | 3.12.0 |
|
||||
| icon | 自定义图标(3.12.0 新增) | string\|ReactNode | `<Icon type="question-circle" />` | 3.12.0 |
|
||||
| iconType | 图标类型(3.12.0 后废弃,请使用 `icon`) | string | `question-circle` | |
|
||||
| mask | 是否展示遮罩 | Boolean | true | 3.13.0 |
|
||||
| maskClosable | 点击蒙层是否允许关闭 | Boolean | `false` | |
|
||||
|
||||
@@ -938,7 +938,7 @@ exports[`renders ./components/pagination/demo/jump.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-pagination-options-quick-jumper"
|
||||
>
|
||||
Goto
|
||||
Go to
|
||||
<input
|
||||
type="text"
|
||||
value=""
|
||||
@@ -1109,7 +1109,7 @@ exports[`renders ./components/pagination/demo/jump.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-pagination-options-quick-jumper"
|
||||
>
|
||||
Goto
|
||||
Go to
|
||||
<input
|
||||
disabled=""
|
||||
type="text"
|
||||
@@ -1397,7 +1397,7 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-pagination-options-quick-jumper"
|
||||
>
|
||||
Goto
|
||||
Go to
|
||||
<input
|
||||
type="text"
|
||||
value=""
|
||||
|
||||
@@ -11,7 +11,6 @@
|
||||
.reset-component;
|
||||
|
||||
display: inline-block;
|
||||
line-height: unset;
|
||||
}
|
||||
|
||||
// 一般状态
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
&.@{steps-prefix-cls}-small:not(.@{steps-prefix-cls}-dot) {
|
||||
.@{steps-prefix-cls}-item {
|
||||
&-icon {
|
||||
margin-left: 40px;
|
||||
margin-left: 47px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -89,3 +89,36 @@
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @screen-xs) {
|
||||
.@{steps-prefix-cls}-navigation {
|
||||
> .@{steps-prefix-cls}-item {
|
||||
margin-right: 0 !important;
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
&.@{steps-prefix-cls}-item-active::before {
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: unset;
|
||||
display: block;
|
||||
width: 3px;
|
||||
height: calc(100% - 24px);
|
||||
}
|
||||
&::after {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
left: 50%;
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
> .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -265,10 +265,10 @@
|
||||
@layout-trigger-color-light: @text-color;
|
||||
|
||||
// z-index list, order by `z-index`
|
||||
@zindex-badge: auto;
|
||||
@zindex-table-fixed: auto;
|
||||
@zindex-affix: 10;
|
||||
@zindex-back-top: 10;
|
||||
@zindex-badge: 10;
|
||||
@zindex-picker-panel: 10;
|
||||
@zindex-popup-close: 10;
|
||||
@zindex-modal: 1000;
|
||||
|
||||
@@ -868,7 +868,6 @@ class Table<T> extends React.Component<InternalTableProps<T>, TableState<T>> {
|
||||
};
|
||||
|
||||
toggleSortOrder(column: ColumnProps<T>) {
|
||||
const pagination = { ...this.state.pagination };
|
||||
const sortDirections = column.sortDirections || (this.props.sortDirections as SortOrder[]);
|
||||
const { sortOrder, sortColumn } = this.state;
|
||||
// 只同时允许一列进行排序,否则会导致排序顺序的逻辑问题
|
||||
@@ -883,14 +882,7 @@ class Table<T> extends React.Component<InternalTableProps<T>, TableState<T>> {
|
||||
newSortOrder = sortDirections[0];
|
||||
}
|
||||
|
||||
if (this.props.pagination) {
|
||||
// Reset current prop
|
||||
pagination.current = 1;
|
||||
pagination.onChange!(pagination.current);
|
||||
}
|
||||
|
||||
const newState = {
|
||||
pagination,
|
||||
sortOrder: newSortOrder,
|
||||
sortColumn: newSortOrder ? column : null,
|
||||
};
|
||||
|
||||
@@ -613,6 +613,7 @@ describe('Table.sorter', () => {
|
||||
createTable({
|
||||
pagination: {
|
||||
pageSize: 2,
|
||||
defaultCurrent: 2,
|
||||
onChange: onPageChange,
|
||||
},
|
||||
onChange,
|
||||
@@ -620,8 +621,8 @@ describe('Table.sorter', () => {
|
||||
);
|
||||
|
||||
wrapper.find('.ant-table-column-sorters').simulate('click');
|
||||
expect(onChange.mock.calls[0][0].current).toBe(1);
|
||||
expect(onPageChange.mock.calls[0][0]).toBe(1);
|
||||
expect(onChange.mock.calls[0][0].current).toBe(2);
|
||||
expect(onPageChange).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should support onHeaderCell in sort column', () => {
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
transition: background 0.3s ease;
|
||||
|
||||
&[colspan] {
|
||||
&[colspan]:not([colspan='1']) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -623,7 +623,10 @@
|
||||
// https://github.com/ant-design/ant-design/issues/14545
|
||||
// https://github.com/ant-design/ant-design/issues/19491
|
||||
.@{table-prefix-cls}-fixed-columns-in-body:not([colspan]) {
|
||||
visibility: hidden;
|
||||
color: transparent;
|
||||
& > * {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -33,7 +33,6 @@
|
||||
height: 2px;
|
||||
background-color: @tabs-ink-bar-color;
|
||||
transform-origin: 0 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-bar {
|
||||
@@ -405,16 +404,12 @@
|
||||
|
||||
.@{tab-prefix-cls}-top .@{tab-prefix-cls}-ink-bar-animated,
|
||||
.@{tab-prefix-cls}-bottom .@{tab-prefix-cls}-ink-bar-animated {
|
||||
opacity: 1;
|
||||
transition: transform 0.3s @ease-in-out, width 0.2s @ease-in-out, left 0.3s @ease-in-out,
|
||||
opacity 0.3s;
|
||||
transition: transform 0.3s @ease-in-out, width 0.2s @ease-in-out, left 0.3s @ease-in-out;
|
||||
}
|
||||
|
||||
.@{tab-prefix-cls}-left .@{tab-prefix-cls}-ink-bar-animated,
|
||||
.@{tab-prefix-cls}-right .@{tab-prefix-cls}-ink-bar-animated {
|
||||
opacity: 1;
|
||||
transition: transform 0.3s @ease-in-out, height 0.2s @ease-in-out, top 0.3s @ease-in-out,
|
||||
opacity 0.3s;
|
||||
transition: transform 0.3s @ease-in-out, height 0.2s @ease-in-out, top 0.3s @ease-in-out;
|
||||
}
|
||||
|
||||
// No animation
|
||||
|
||||
@@ -442,11 +442,11 @@ exports[`renders ./components/tag/demo/controlled.md correctly 1`] = `
|
||||
|
||||
exports[`renders ./components/tag/demo/hot-tags.md correctly 1`] = `
|
||||
<div>
|
||||
<h6
|
||||
style="margin-right:8px;display:inline"
|
||||
<span
|
||||
style="margin-right:8px"
|
||||
>
|
||||
Categories:
|
||||
</h6>
|
||||
</span>
|
||||
<span
|
||||
class="ant-tag ant-tag-checkable"
|
||||
>
|
||||
|
||||
@@ -36,7 +36,7 @@ class HotTags extends React.Component {
|
||||
const { selectedTags } = this.state;
|
||||
return (
|
||||
<div>
|
||||
<h6 style={{ marginRight: 8, display: 'inline' }}>Categories:</h6>
|
||||
<span style={{ marginRight: 8 }}>Categories:</span>
|
||||
{tagsFromServer.map(tag => (
|
||||
<CheckableTag
|
||||
key={tag}
|
||||
|
||||
@@ -13,6 +13,7 @@ export interface TimelineProps {
|
||||
style?: React.CSSProperties;
|
||||
reverse?: boolean;
|
||||
mode?: 'left' | 'alternate' | 'right';
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
export default class Timeline extends React.Component<TimelineProps, any> {
|
||||
|
||||
@@ -11,6 +11,7 @@ export interface TimeLineItemProps {
|
||||
pending?: boolean;
|
||||
position?: string;
|
||||
style?: React.CSSProperties;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
const TimelineItem: React.SFC<TimeLineItemProps> = props => (
|
||||
|
||||
@@ -241,4 +241,14 @@ describe('Tooltip', () => {
|
||||
expect(onVisibleChange).toHaveBeenCalledWith(false);
|
||||
expect(wrapper.instance().tooltip.props.visible).toBe(false);
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/20891
|
||||
it('should display zero', async () => {
|
||||
const wrapper = mount(
|
||||
<Tooltip title={0} visible>
|
||||
<div />
|
||||
</Tooltip>,
|
||||
);
|
||||
expect(wrapper.find('.ant-tooltip-inner').getDOMNode().innerHTML).toBe('0');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -226,7 +226,15 @@ class Tooltip extends React.Component<TooltipProps, any> {
|
||||
|
||||
isNoTitle() {
|
||||
const { title, overlay } = this.props;
|
||||
return !title && !overlay; // overlay for old version compatibility
|
||||
return !title && !overlay && title !== 0; // overlay for old version compatibility
|
||||
}
|
||||
|
||||
getOverlay() {
|
||||
const { title, overlay } = this.props;
|
||||
if (title === 0) {
|
||||
return title;
|
||||
}
|
||||
return overlay || title || '';
|
||||
}
|
||||
|
||||
renderTooltip = ({
|
||||
@@ -236,8 +244,6 @@ class Tooltip extends React.Component<TooltipProps, any> {
|
||||
const { props, state } = this;
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
title,
|
||||
overlay,
|
||||
openClassName,
|
||||
getPopupContainer,
|
||||
getTooltipContainer,
|
||||
@@ -266,7 +272,7 @@ class Tooltip extends React.Component<TooltipProps, any> {
|
||||
getTooltipContainer={getPopupContainer || getTooltipContainer || getContextPopupContainer}
|
||||
ref={this.saveTooltip}
|
||||
builtinPlacements={this.getPlacements()}
|
||||
overlay={overlay || title || ''}
|
||||
overlay={this.getOverlay()}
|
||||
visible={visible}
|
||||
onVisibleChange={this.onVisibleChange}
|
||||
onPopupAlign={this.onPopupAlign}
|
||||
|
||||
@@ -40,7 +40,7 @@ Tree selection control.
|
||||
| suffixIcon | The custom suffix icon | ReactNode | - | 3.10.0 |
|
||||
| treeCheckable | Whether to show checkbox on the treeNodes | boolean | false | |
|
||||
| treeCheckStrictly | Whether to check nodes precisely (in the `checkable` mode), means parent and child nodes are not associated, and it will make `labelInValue` be true | boolean | false | |
|
||||
| treeData | Data of the treeNodes, manual construction work is no longer needed if this property has been set(ensure the Uniqueness of each value) | array\<{ value, title, children, \[disabled, disableCheckbox, checkable] }> | \[] | |
|
||||
| treeData | Data of the treeNodes, manual construction work is no longer needed if this property has been set(ensure the Uniqueness of each value) | array\<{ value, title, children, \[disabled, disableCheckbox, selectable, checkable] }> | \[] | |
|
||||
| treeDataSimpleMode | Enable simple mode of treeData. Changes the `treeData` schema to: \[{id:1, pId:0, value:'1', title:"test1",...},...] where pId is parent node's id). It is possible to replace the default `id` and `pId` keys by providing object to `treeDataSimpleMode` | false\|object\<{ id: string, pId: string, rootPId: string }> | false | |
|
||||
| treeDefaultExpandAll | Whether to expand all treeNodes by default | boolean | false | |
|
||||
| treeDefaultExpandedKeys | Default expanded treeNodes | string\[] | - | |
|
||||
@@ -66,7 +66,8 @@ Tree selection control.
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| checkable | can be checked | boolean | true | 3.9.3 |
|
||||
| selectable | can be selected | boolean | true | 3.9.3 |
|
||||
| checkable | When Tree is checkable, set TreeNode display Checkbox or not | boolean | - | 3.17.0 |
|
||||
| disableCheckbox | Disables the checkbox of the treeNode | boolean | false | |
|
||||
| disabled | Disabled or not | boolean | false | |
|
||||
| isLeaf | Leaf node or not | boolean | false | |
|
||||
|
||||
@@ -41,7 +41,7 @@ title: TreeSelect
|
||||
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | 3.10.0 |
|
||||
| treeCheckable | 显示 checkbox | boolean | false | |
|
||||
| treeCheckStrictly | checkable 状态下节点选择完全受控(父子节点选中状态不再关联),会使得 `labelInValue` 强制为 true | boolean | false | |
|
||||
| treeData | treeNodes 数据,如果设置则不需要手动构造 TreeNode 节点(value 在整个树范围内唯一) | array\<{value, title, children, \[disabled, disableCheckbox, checkable]}> | \[] | |
|
||||
| treeData | treeNodes 数据,如果设置则不需要手动构造 TreeNode 节点(value 在整个树范围内唯一) | array\<{value, title, children, \[disabled, disableCheckbox, selectable, checkable]}> | \[] | |
|
||||
| treeDataSimpleMode | 使用简单格式的 treeData,具体设置参考可设置的类型 (此时 treeData 应变为这样的数据结构: \[{id:1, pId:0, value:'1', title:"test1",...},...], `pId` 是父节点的 id) | false\|object\<{ id: string, pId: string, rootPId: string }> | false | |
|
||||
| treeDefaultExpandAll | 默认展开所有树节点 | boolean | false | |
|
||||
| treeDefaultExpandedKeys | 默认展开的树节点 | string\[] | - | |
|
||||
@@ -67,7 +67,8 @@ title: TreeSelect
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| checkable | 是否可选 | boolean | true | 3.9.3 |
|
||||
| selectable | 是否可选 | boolean | true | 3.9.3 |
|
||||
| checkable | 当树为 checkable 时,设置独立节点是否展示 Checkbox | boolean | - | 3.17.0 |
|
||||
| disableCheckbox | 禁掉 checkbox | boolean | false | |
|
||||
| disabled | 是否禁用 | boolean | false | |
|
||||
| isLeaf | 是否是叶子节点 | boolean | false | |
|
||||
|
||||
@@ -70,7 +70,7 @@ export interface AntTreeNodeExpandedEvent extends AntTreeNodeBaseEvent {
|
||||
|
||||
export interface AntTreeNodeMouseEvent {
|
||||
node: AntTreeNode;
|
||||
event: React.MouseEvent<HTMLElement>;
|
||||
event: React.DragEvent<HTMLElement>;
|
||||
}
|
||||
|
||||
export interface AntTreeNodeDragEnterEvent extends AntTreeNodeMouseEvent {
|
||||
@@ -194,15 +194,15 @@ export default class Tree extends React.Component<TreeProps, any> {
|
||||
if (loading) {
|
||||
return <Icon type="loading" className={`${prefixCls}-switcher-loading-icon`} />;
|
||||
}
|
||||
if (isLeaf) {
|
||||
return showLine ? <Icon type="file" className={`${prefixCls}-switcher-line-icon`} /> : null;
|
||||
}
|
||||
const switcherCls = `${prefixCls}-switcher-icon`;
|
||||
if (switcherIcon) {
|
||||
return React.cloneElement(switcherIcon, {
|
||||
className: classNames(switcherIcon.props.className || '', switcherCls),
|
||||
});
|
||||
}
|
||||
if (isLeaf) {
|
||||
return showLine ? <Icon type="file" className={`${prefixCls}-switcher-line-icon`} /> : null;
|
||||
}
|
||||
return showLine ? (
|
||||
<Icon
|
||||
type={expanded ? 'minus-square' : 'plus-square'}
|
||||
|
||||
@@ -725,27 +725,7 @@ exports[`renders ./components/tree/demo/customized-icon.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: down"
|
||||
class="anticon anticon-down ant-tree-switcher-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
/>
|
||||
<span
|
||||
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal ant-tree-node-selected"
|
||||
title="leaf"
|
||||
@@ -786,27 +766,7 @@ exports[`renders ./components/tree/demo/customized-icon.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: down"
|
||||
class="anticon anticon-down ant-tree-switcher-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
/>
|
||||
<span
|
||||
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
|
||||
title="leaf"
|
||||
@@ -2249,13 +2209,13 @@ exports[`renders ./components/tree/demo/switcher-icon.md correctly 1`] = `
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: down"
|
||||
class="anticon anticon-down ant-tree-switcher-icon"
|
||||
aria-label="icon: file"
|
||||
class="anticon anticon-file ant-tree-switcher-line-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
data-icon="file"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
@@ -2263,7 +2223,7 @@ exports[`renders ./components/tree/demo/switcher-icon.md correctly 1`] = `
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
@@ -2287,13 +2247,13 @@ exports[`renders ./components/tree/demo/switcher-icon.md correctly 1`] = `
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: down"
|
||||
class="anticon anticon-down ant-tree-switcher-icon"
|
||||
aria-label="icon: file"
|
||||
class="anticon anticon-file ant-tree-switcher-line-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
data-icon="file"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
@@ -2301,7 +2261,7 @@ exports[`renders ./components/tree/demo/switcher-icon.md correctly 1`] = `
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
@@ -2325,13 +2285,13 @@ exports[`renders ./components/tree/demo/switcher-icon.md correctly 1`] = `
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: down"
|
||||
class="anticon anticon-down ant-tree-switcher-icon"
|
||||
aria-label="icon: file"
|
||||
class="anticon anticon-file ant-tree-switcher-line-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
data-icon="file"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
@@ -2339,7 +2299,7 @@ exports[`renders ./components/tree/demo/switcher-icon.md correctly 1`] = `
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
|
||||
@@ -30,4 +30,16 @@ describe('Tree', () => {
|
||||
);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('switcherIcon in Tree should not render at leaf nodes', () => {
|
||||
const wrapper = mount(
|
||||
<Tree switcherIcon={<i className="switcherIcon" />} defaultExpandAll>
|
||||
<TreeNode icon="icon">
|
||||
<TreeNode id="node1" title="node1" icon="icon" key="0-0-2" />
|
||||
<TreeNode id="node2" title="node2" key="0-0-3" />
|
||||
</TreeNode>
|
||||
</Tree>,
|
||||
);
|
||||
expect(wrapper.find('.switcherIcon').length).toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -100,7 +100,7 @@ class Demo extends React.Component {
|
||||
) {
|
||||
loop(data, dropKey, item => {
|
||||
item.children = item.children || [];
|
||||
// where to insert 示例添加到尾部,可以是随意位置
|
||||
// where to insert 示例添加到头部,可以是随意位置
|
||||
item.children.unshift(dragObj);
|
||||
});
|
||||
} else {
|
||||
|
||||
@@ -147,10 +147,10 @@
|
||||
border: 0 none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
&.@{tree-prefix-cls}-iconEle:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.@{tree-prefix-cls}-switcher {
|
||||
|
||||
@@ -46,8 +46,11 @@ class Editable extends React.Component<EditableProps, EditableState> {
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
if (this.textarea) {
|
||||
this.textarea.focus();
|
||||
if (this.textarea && this.textarea.resizableTextArea) {
|
||||
const { textArea } = this.textarea.resizableTextArea;
|
||||
textArea.focus();
|
||||
const { length } = textArea.value;
|
||||
textArea.setSelectionRange(length, length);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -241,6 +241,17 @@ describe('Typography', () => {
|
||||
wrapper.find('TextArea').simulate('blur');
|
||||
});
|
||||
});
|
||||
|
||||
it('should focus at the end of textarea', () => {
|
||||
const wrapper = mount(<Paragraph editable>content</Paragraph>);
|
||||
wrapper
|
||||
.find('.ant-typography-edit')
|
||||
.first()
|
||||
.simulate('click');
|
||||
const textareaNode = wrapper.find('textarea').getDOMNode();
|
||||
expect(textareaNode.selectionStart).toBe(7);
|
||||
expect(textareaNode.selectionEnd).toBe(7);
|
||||
});
|
||||
});
|
||||
|
||||
it('warning if use setContentRef', () => {
|
||||
|
||||
@@ -114,16 +114,18 @@ import { Menu, Breadcrumb, Icon } from 'antd';
|
||||
|
||||
### 当我指定了 DatePicker/RangePicker 的 `mode` 属性后,点击后无法选择年份/月份?
|
||||
|
||||
在业务开发中,你可能有年份选择,月份范围选择,周范围选择等需求,此时你给现有组件增加了 `mode` 属性,却发现无法进行点击选择行为,面板也不会关闭。
|
||||
在业务开发中,你可能有年份选择,月份范围选择,周范围选择等需求,此时你给现有组件增加了 `mode` 属性,却发现无法进行点击选择行为,面板也不会关闭。如果给面板添加 `disabledDate` 也不会相应禁用对应的年/月/周。
|
||||
|
||||
- 重现链接:https://codesandbox.io/s/dank-brook-v1csy
|
||||
- 相同 issue:[#15572](https://github.com/ant-design/ant-design/issues/15572)、[#16436](https://github.com/ant-design/ant-design/issues/16436)、[#11938](https://github.com/ant-design/ant-design/issues/11938)、[#11735](https://github.com/ant-design/ant-design/issues/11735)、[#11586](https://github.com/ant-design/ant-design/issues/11586)、[#10425](https://github.com/ant-design/ant-design/issues/10425)、[#11053](https://github.com/ant-design/ant-design/issues/11053)
|
||||
|
||||
就像[这个回复](https://github.com/ant-design/ant-design/issues/15572#issuecomment-475476135)里解释的一样,这是因为 `<DatePicker mode="year" />` 不等于 `YearPicker`,`<RangePicker mode="month" />` 不等于 `MonthRangePicker`。 `mode` 属性是在 antd 3.0 时,为了控制面板展现状态而添加的属性,以支持[展示时间面板](https://github.com/ant-design/ant-design/issues/5190)等需求而添加的。`mode` 只会简单的改变当前显示的面板,不会修改默认的交互行为(比如 DatePicker 依然是点击日才会完成选择并关闭面板)。
|
||||
|
||||
同样的,`disabledDate` 对于任何 `<DatePicker />` 也只会针对**日面板**生效,[并不会对 `<DatePicker mode="year/month" />` 上的年/月面板生效](https://github.com/ant-design/ant-design/issues/9008#issuecomment-358554118)。
|
||||
|
||||
##### 解决办法
|
||||
|
||||
你可以参照 [这篇文章](https://juejin.im/post/5cf65c366fb9a07eca6968f9) 或者 [这篇文章](https://www.cnblogs.com/zyl-Tara/p/10197177.html) 里的做法,利用 `mode` 和 `onPanelChange` 等方法去封装一个 `YearPicker` 等组件。我们计划在 [antd@4.0](https://github.com/ant-design/ant-design/issues/16911) 中直接[添加更多相关日期组件](https://github.com/ant-design/ant-design/issues/4524#issuecomment-480576884)来支持这些需求。
|
||||
你可以参照 [这篇文章](https://juejin.im/post/5cf65c366fb9a07eca6968f9) 或者 [这篇文章](https://www.cnblogs.com/zyl-Tara/p/10197177.html) 里的做法,利用 `mode` 和 `onPanelChange` 等方法去封装一个 `YearPicker` 等组件。我们计划在 [antd@4.0](https://github.com/ant-design/ant-design/issues/16911) 中直接[添加更多相关日期组件](https://github.com/ant-design/ant-design/issues/4524#issuecomment-480576884)来支持这些需求。届时不再需要使用 `mode="year|month"`,而是直接可以用 `YearPicker` `MonthPicker`,并且 `disabledDate` 也可以正确作用于这些 Picker。
|
||||
|
||||
### 如何正确的拼写 Ant Design?
|
||||
|
||||
|
||||
@@ -30,7 +30,7 @@ Following the Ant Design specification, we developed a React UI library `antd` t
|
||||
- 🌈 Enterprise-class UI designed for web applications.
|
||||
- 📦 A set of high-quality React components out of the box.
|
||||
- 🛡 Written in TypeScript with predictable static types.
|
||||
- ⚙️ The whole package of development and design resources and tools.
|
||||
- ⚙️ Whole package of design resources and development tools.
|
||||
- 🌍 Internationalization support for dozens of languages.
|
||||
- 🎨 Powerful theme customization in every detail.
|
||||
|
||||
|
||||
@@ -16,9 +16,9 @@ While there is a possibility of too much feedback (or, more accurately, too much
|
||||
|
||||
## Lookup Patterns
|
||||
|
||||
<img class="preview-img" align="right" alt="example of Certain Category" description="The keyword of the user query is only displayed in three categories, Topics, Questions and Articles." src="https://gw.alipayobjects.com/zos/rmsportal/XlqFYhYiZtWFNImtRElR.png">
|
||||
<img class="preview-img" align="right" alt="example of Certain Category" description="The keyword of the user query is only displayed in three categories, Topics, Questions and Articles." src="https://gw.alipayobjects.com/zos/rmsportal/czfJRLltwXcsTLlTpytV.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="example of Uncertain Category" description="The number of categories the keyword of the user query belongs to is uncertain." src="https://gw.alipayobjects.com/zos/rmsportal/czfJRLltwXcsTLlTpytV.png">
|
||||
<img class="preview-img" align="right" alt="example of Uncertain Category" description="The number of categories the keyword of the user query belongs to is uncertain." src="https://gw.alipayobjects.com/zos/rmsportal/XlqFYhYiZtWFNImtRElR.png">
|
||||
|
||||
Auto Complete: As the user types input into a field, a drop-down menu of matching values is displayed. Depending on the categories of search results, it can be divided into two types, Certain Category and Uncertain Category.
|
||||
|
||||
|
||||
@@ -69,4 +69,4 @@ If actual performance can hardly improved, there is a difference between actual
|
||||
|
||||
## Natural Motion
|
||||
|
||||
Please refer to [Ant Motion, a motion language](http://motion.ant.design/#/language/).
|
||||
Please refer to [Ant Motion, a motion language](https://motion.ant.design/language/basic).
|
||||
|
||||
@@ -70,4 +70,4 @@ title: 巧用过渡
|
||||
|
||||
## 自然运动
|
||||
|
||||
参见 [Ant Motion 动画语言](http://motion.ant.design/language/time)。
|
||||
参见 [Ant Motion 动画语言](https://motion.ant.design/language/basic-cn)。
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "3.26.4",
|
||||
"version": "3.26.9",
|
||||
"description": "An enterprise-class UI design language and React components implementation",
|
||||
"keywords": [
|
||||
"ant",
|
||||
@@ -243,7 +243,7 @@
|
||||
"stylelint-config-rational-order": "^0.1.2",
|
||||
"stylelint-config-standard": "^19.0.0",
|
||||
"stylelint-declaration-block-no-ignored-properties": "^2.1.0",
|
||||
"stylelint-order": "^3.0.0",
|
||||
"stylelint-order": "^4.0.0",
|
||||
"typescript": "~3.7.2",
|
||||
"xhr-mock": "^2.4.1",
|
||||
"xhr2": "^0.2.0",
|
||||
|
||||
@@ -24,7 +24,7 @@ async function checkVersion() {
|
||||
}
|
||||
|
||||
async function checkBranch({ current }) {
|
||||
if (current !== 'master') {
|
||||
if (current !== '3.x-stable') {
|
||||
console.log(chalk.yellow('🤔 You are not in the master branch!'));
|
||||
exitProcess();
|
||||
}
|
||||
|
||||
@@ -54,6 +54,7 @@ module.exports = {
|
||||
'app.home.recommend': 'Recommend',
|
||||
'app.home.recommend.yuque': 'Yuque, our favorite documentation tool',
|
||||
'app.home.recommend.antv.g2plot': 'G2Plot, the new charting library',
|
||||
'app.home.recommend.antd.next': 'Ant Design 4.0: Creating happy work',
|
||||
'app.home.more': 'Learn more',
|
||||
'app.home.more-mobile-react': 'Ant Design Mobile of React',
|
||||
'app.home.more-mobile-angular': 'Ant Design Mobile of Angular',
|
||||
|
||||
@@ -28,14 +28,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 991.99px) {
|
||||
.main-menu {
|
||||
> div > .ant-affix {
|
||||
position: static !important;
|
||||
}
|
||||
.main-menu-inner {
|
||||
max-height: none;
|
||||
overflow: hidden;
|
||||
@media only screen and (max-width: @screen-lg) {
|
||||
.main-container {
|
||||
padding-right: 48px;
|
||||
padding-left: 48px;
|
||||
|
||||
.toc-affix {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.code-boxes-col-2-1,
|
||||
|
||||
@@ -11,7 +11,7 @@ import { ping, getMetaDescription } from '../utils';
|
||||
class ComponentDoc extends React.Component {
|
||||
state = {
|
||||
expandAll: false,
|
||||
visibleAll: false,
|
||||
visibleAll: process.env.NODE_ENV !== 'production',
|
||||
showRiddleButton: false,
|
||||
};
|
||||
|
||||
|
||||
@@ -320,13 +320,13 @@ class MainContent extends Component {
|
||||
{menuChild}
|
||||
</MobileMenu>
|
||||
) : (
|
||||
<Col xxl={4} xl={5} lg={6} md={24} sm={24} xs={24} className="main-menu">
|
||||
<Col xxl={4} xl={5} lg={6} md={6} sm={24} xs={24} className="main-menu">
|
||||
<Affix>
|
||||
<section className="main-menu-inner">{menuChild}</section>
|
||||
</Affix>
|
||||
</Col>
|
||||
)}
|
||||
<Col xxl={20} xl={19} lg={18} md={24} sm={24} xs={24}>
|
||||
<Col xxl={20} xl={19} lg={18} md={18} sm={24} xs={24}>
|
||||
<section className={mainContainerClass}>
|
||||
{demos ? (
|
||||
<ComponentDoc {...this.props} doc={localizedPageData} demos={demos} />
|
||||
|
||||
@@ -97,19 +97,19 @@ const Banner = ({ isMobile }) => {
|
||||
<FormattedMessage id="app.home.recommend" />
|
||||
</Divider>
|
||||
<a
|
||||
href="https://github.com/antvis/G2Plot?from=antd"
|
||||
href="https://github.com/antvis/g2plot?from=antd"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={() => {
|
||||
if (window.gtag) {
|
||||
window.gtag('event', '点击', {
|
||||
event_category: '首页推广',
|
||||
event_label: `https://github.com/antvis/G2Plot?from=antd`,
|
||||
event_label: `https://github.com/antvis/g2plot?from=antd`,
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<img src="https://antv.vision/icons/icon-512x512.png" alt="AntV logo" />
|
||||
<img src="https://antv.vision/icons/icon-512x512.png" alt="antv logo" />
|
||||
<FormattedMessage id="app.home.recommend.antv.g2plot" />
|
||||
<Icon type="right" style={{ marginLeft: 6, fontSize: 12, opacity: 0.6 }} />
|
||||
</a>
|
||||
|
||||
@@ -49,8 +49,9 @@ module.exports = {
|
||||
'app.home.tool-kitchen-content': '一个为设计师提效的 Sketch 工具集',
|
||||
'app.home.getting-started': '开始使用',
|
||||
'app.home.recommend': '推荐',
|
||||
'app.home.recommend.yuque': '语雀,我们都喜欢的文档工具',
|
||||
'app.home.recommend.yuque': '语雀:2020 领福蛋有大奖',
|
||||
'app.home.recommend.antv.g2plot': 'G2Plot:全新企业级图表',
|
||||
'app.home.recommend.antd.next': 'Ant Design 4.0:创造快乐工作',
|
||||
'app.home.more': '查看更多',
|
||||
'app.home.more-mobile-react': 'Ant Design Mobile of React',
|
||||
'app.home.more-mobile-angular': 'Ant Design Mobile of Angular',
|
||||
|
||||
Reference in New Issue
Block a user