mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 16:06:28 +08:00
github-actions[bot]
GitHub
commit
b05aa89908
@ -15,6 +15,50 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 4.18.1
|
||||
|
||||
`2021-12-29`
|
||||
|
||||
- 🐞 Fix Popconfirm throws `Can't perform a React state update on an unmounted component.` warning in some async case. [#33432](https://github.com/ant-design/ant-design/pull/33432) [@MadCcc](https://github.com/MadCcc)
|
||||
- 🐞 Fix Input with `suffix` will crash when `value` is number type. [#33462](https://github.com/ant-design/ant-design/pull/33462)
|
||||
- 🐞 Fix Divider with text dashed border color error. [#33452](https://github.com/ant-design/ant-design/pull/33452) [@chen-jingjie](https://github.com/chen-jingjie)
|
||||
- 🐞 Fix Dropdown.Button not support `destroyPopupOnHide`. [#33442](https://github.com/ant-design/ant-design/pull/33442) [@LongHaoo](https://github.com/LongHaoo)
|
||||
- 🐞 Fix Table Pagination not trigger `onChange` when `current` changed. [#33411](https://github.com/ant-design/ant-design/pull/33411) [@2724635499](https://github.com/2724635499)
|
||||
|
||||
## 4.18.0
|
||||
|
||||
`2021-12-27`
|
||||
|
||||
- 🐞 Fix Skeleton missing `style` prop. [#33405](https://github.com/ant-design/ant-design/pull/33405)
|
||||
- 🐞 Fix Descriptions overflow style cause other components being cut. [#33392](https://github.com/ant-design/ant-design/pull/33392)
|
||||
- 🆕 Unique Select-like component generic as OptionType to support FieldNames type. [#33364](https://github.com/ant-design/ant-design/pull/33364)
|
||||
- 🐞 Fix Slider rail hover color when it is disabled. [#33369](https://github.com/ant-design/ant-design/pull/33369) [@chen-jingjie](https://github.com/chen-jingjie)
|
||||
- Table
|
||||
- 🆕 Table `colSpan` & `rowSpan` move to `onCell` function to optimize performance. [#33114](https://github.com/ant-design/ant-design/pull/33114)
|
||||
- 🆕 Table support Table.EXPAND_COLUMN & Table.SELECTION_COLUMN to customize column order. [#33026](https://github.com/ant-design/ant-design/pull/33026)
|
||||
- 🐞 Fix Table hovering will trigger `expandedRowRender` and `column.render` unexpectly. [#33342](https://github.com/ant-design/ant-design/issues/33342)
|
||||
- Form
|
||||
- 🔥 Form.List nest Form.Item no longer need pass `fieldKey` anymore. [#32689](https://github.com/ant-design/ant-design/pull/32689)
|
||||
- 🆕 Form `label` can wrap via setting `labelWrap` now. [#33048](https://github.com/ant-design/ant-design/pull/33048)
|
||||
- 🆕 ConfigProvider support Form `colon`. [9bc148a](https://github.com/ant-design/ant-design/commit/9bc148a) [@seaSuper](https://github.com/seaSuper)
|
||||
- 🆕 add `prefix` to `InputNumber`. [#32600](https://github.com/ant-design/ant-design/pull/32600) [@Austaras](https://github.com/Austaras)
|
||||
- 🆕 Modal static function support `wrapClassName` prop. [#32676](https://github.com/ant-design/ant-design/pull/32676) [@cwjTerrace](https://github.com/cwjTerrace)
|
||||
- 🆕 Popconfirm add `showCancel` prop. [#32620](https://github.com/ant-design/ant-design/pull/32620) [@cwjTerrace](https://github.com/cwjTerrace)
|
||||
- 🆕 Dropdown.Button supports `loading` property now. [#32467](https://github.com/ant-design/ant-design/pull/32467) [@kaysonwu](https://github.com/kaysonwu)
|
||||
- 🆕 Input adds `showCount` property. [#32522](https://github.com/ant-design/ant-design/pull/32522) [@cwjTerrace](https://github.com/cwjTerrace)
|
||||
- 🆕 Alert supports `closeIcon` now. [#32345](https://github.com/ant-design/ant-design/pull/32345) [@chen-jingjie](https://github.com/chen-jingjie)
|
||||
- Typography
|
||||
- 🆕 for editable Paragraph, edit can be triggered by clicking the icon or the value itself (or both) with `triggerType`. [#32219](https://github.com/ant-design/ant-design/pull/32219) [@kachanovskiy](https://github.com/kachanovskiy)
|
||||
- 🆕 Typography support `enterIcon` to config confirm icon. [#32220](https://github.com/ant-design/ant-design/pull/32220) [@kachanovskiy](https://github.com/kachanovskiy)
|
||||
- 🆕 Divider added `orientationMargin` APIs for customizing `margin-left/right` of title. [#32084](https://github.com/ant-design/ant-design/pull/32084) [@neotan](https://github.com/neotan)
|
||||
- 🆕 Avatar add `maxPopoverTrigger` to support configuration of popover trigger. [#32197](https://github.com/ant-design/ant-design/pull/32197) [@RiteshMakan](https://github.com/RiteshMakan)
|
||||
- 🆕 Upload supports `showUploadList.previewIcon` now. [#32059](https://github.com/ant-design/ant-design/pull/32059) [@1040961807](https://github.com/1040961807)
|
||||
- 🏴 Fix Catalan (ca_ES) missing translation key with `Form`. [#33377](https://github.com/ant-design/ant-design/pull/33377) [@ZzGGitter](https://github.com/ZzGGitter)
|
||||
- 🇫🇮 Fix Finland (fi_FI) missing translation key with `Table`. [#33372](https://github.com/ant-design/ant-design/pull/33372) [@ZakarFin](https://github.com/ZakarFin)
|
||||
- 🇰🇭 Added locales for Khmer (km_KH) translation. [#32853](https://github.com/ant-design/ant-design/pull/32853) [@vireakkeosokvibol](https://github.com/vireakkeosokvibol)
|
||||
- TypeScript
|
||||
- 🤖 Add Upload `capture` definition. [#33370](https://github.com/ant-design/ant-design/pull/33370) [@MichalPodeszwa](https://github.com/MichalPodeszwa)
|
||||
|
||||
## 4.17.4
|
||||
|
||||
`2021-12-19`
|
||||
@ -89,6 +133,7 @@ timeline: true
|
||||
- 🐞 Fix Input cannot clear content when focus it. [#31931](https://github.com/ant-design/ant-design/pull/31931) [@adaex](https://github.com/adaex)
|
||||
- Cascader
|
||||
- 🔥 Cascader support `multiple` mode. [#31936](https://github.com/ant-design/ant-design/pull/31936)
|
||||
- 🆕 Cascader support `onSearch` and `searchValue` props. [#31936](https://github.com/ant-design/ant-design/pull/31936)
|
||||
- 🆕 Cascader add `title` prop with content by default. [#31237](https://github.com/ant-design/ant-design/pull/31237) [@yingpengsha](https://github.com/yingpengsha)
|
||||
- 🐞 Fix Cascader missing `popupClassName` and `popupPlacement` props. [#32143](https://github.com/ant-design/ant-design/pull/32143)
|
||||
- Select
|
||||
|
||||
@ -15,6 +15,50 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 4.18.1
|
||||
|
||||
`2021-12-29`
|
||||
|
||||
- 🐞 修复 Popconfirm 在某些情况下会出现 `Can't perform a React state update on an unmounted component.` 的错误。[#33432](https://github.com/ant-design/ant-design/pull/33432) [@MadCcc](https://github.com/MadCcc)
|
||||
- 🐞 修复 Input 配置 `suffix` 时 `value` 为数字类型会崩溃的问题。[#33462](https://github.com/ant-design/ant-design/pull/33462)
|
||||
- 🐞 修复 Divider with text dashed 的边框颜色错误问题。[#33452](https://github.com/ant-design/ant-design/pull/33452) [@chen-jingjie](https://github.com/chen-jingjie)
|
||||
- 🐞 修复 Dropdown.Button 不支持 `destroyPopupOnHide` 的问题。[#33442](https://github.com/ant-design/ant-design/pull/33442) [@LongHaoo](https://github.com/LongHaoo)
|
||||
- 🐞 修复 Table 的 Pagination 在 `current` 改变时不触发 `pagination.onChange` 的问题。[#33411](https://github.com/ant-design/ant-design/pull/33411) [@2724635499](https://github.com/2724635499)
|
||||
|
||||
## 4.18.0
|
||||
|
||||
`2021-12-27`
|
||||
|
||||
- 🐞 修复 Skeleton 不支持 `style` 的问题。[#33405](https://github.com/ant-design/ant-design/pull/33405)
|
||||
- 🐞 修复 Descriptions 内使用其他组件会被切割的问题。[#33392](https://github.com/ant-design/ant-design/pull/33392)
|
||||
- 🆕 统一类 Select 组件泛型定义为 OptionType 以支持自定义 FieldNames 匹配。[#33364](https://github.com/ant-design/ant-design/pull/33364)
|
||||
- 🐞 修复 Slider 禁用时 `hover` 色彩的问题。[#33369](https://github.com/ant-design/ant-design/pull/33369) [@chen-jingjie](https://github.com/chen-jingjie)
|
||||
- Table
|
||||
- 🆕 Table `colSpan` 与 `rowSpan` 迁移至 `onCell` 方法中，以优化渲染性能。[#33114](https://github.com/ant-design/ant-design/pull/33114)
|
||||
- 🆕 Table 支持 Table.EXPAND_COLUMN 和 Table.SELECTION_COLUMN 以实现自定义列排序。[#33026](https://github.com/ant-design/ant-design/pull/33026)
|
||||
- 🐞 修复 Table 鼠标移动时重复触发 `expandedRowRender` 和 `column.render` 的问题。[#33342](https://github.com/ant-design/ant-design/issues/33342)
|
||||
- Form
|
||||
- 🔥 Form.List 嵌套使用 Form.Item 时不再需要手工指定 `fieldKey`。[#32689](https://github.com/ant-design/ant-design/pull/32689)
|
||||
- 🆕 Form 现在支持通过 `labelWrap` 开启标签可换行。[#33048](https://github.com/ant-design/ant-design/pull/33048)
|
||||
- 🆕 ConfigProvider 支持 Form 的 colon 配置。[9bc148a](https://github.com/ant-design/ant-design/commit/9bc148a) [@seaSuper](https://github.com/seaSuper)
|
||||
- 🆕 `InputNumber` 增加 `prefix` 属性支持。[#32600](https://github.com/ant-design/ant-design/pull/32600) [@Austaras](https://github.com/Austaras)
|
||||
- 🆕 Modal 静态方法支持 `wrapClassName` 属性。[#32676](https://github.com/ant-design/ant-design/pull/32676) [@cwjTerrace](https://github.com/cwjTerrace)
|
||||
- 🆕 Popconfirm 新增是否显示取消按钮。[#32620](https://github.com/ant-design/ant-design/pull/32620) [@cwjTerrace](https://github.com/cwjTerrace)
|
||||
- 🆕 Dropdown.Button 新增 `loading` 属性。[#32467](https://github.com/ant-design/ant-design/pull/32467) [@kaysonwu](https://github.com/kaysonwu)
|
||||
- 🆕 Input 新增 `showCount` 属性。[#32522](https://github.com/ant-design/ant-design/pull/32522) [@cwjTerrace](https://github.com/cwjTerrace)
|
||||
- 🆕 Alert 支持 `closeIcon` 自定义关闭图标。[#32345](https://github.com/ant-design/ant-design/pull/32345) [@chen-jingjie](https://github.com/chen-jingjie)
|
||||
- Typography
|
||||
- 🆕 对于可编辑段落，可以通过配置 `triggerType` 配置触发编辑状态。[#32219](https://github.com/ant-design/ant-design/pull/32219) [@kachanovskiy](https://github.com/kachanovskiy)
|
||||
- 🆕 Typography 支持 `enterIcon` 以设置编辑确认图标。[#32220](https://github.com/ant-design/ant-design/pull/32220) [@kachanovskiy](https://github.com/kachanovskiy)
|
||||
- 🆕 Divider 增加了 `orientationMargin` 属性以设置间距。[#32084](https://github.com/ant-design/ant-design/pull/32084) [@neotan](https://github.com/neotan)
|
||||
- 🆕 Avatar.Group 添加 `maxPopoverTrigger` 以定制剩余头像展示的触发逻辑。[#32197](https://github.com/ant-design/ant-design/pull/32197) [@RiteshMakan](https://github.com/RiteshMakan)
|
||||
- 🆕 Upload 新增 `showUploadList.previewIcon` 用于自定义预览图标。[#32059](https://github.com/ant-design/ant-design/pull/32059) [@1040961807](https://github.com/1040961807)
|
||||
- 🏴 修复加泰罗尼亚语 (ca_ES) 对 Form 缺失翻译问题。[#33377](https://github.com/ant-design/ant-design/pull/33377) [@ZzGGitter](https://github.com/ZzGGitter)
|
||||
- 🇫🇮 修复芬兰语 (fi_FI) 对 Table 的缺失翻译问题。[#33372](https://github.com/ant-design/ant-design/pull/33372) [@ZakarFin](https://github.com/ZakarFin)
|
||||
- 🇰🇭 新增高棉语 (km_KH) 语言包。[#32853](https://github.com/ant-design/ant-design/pull/32853) [@vireakkeosokvibol](https://github.com/vireakkeosokvibol)
|
||||
- TypeScript
|
||||
- 🤖 添加 Upload `capture` 定义。[#33370](https://github.com/ant-design/ant-design/pull/33370) [@MichalPodeszwa](https://github.com/MichalPodeszwa)
|
||||
|
||||
## 4.17.4
|
||||
|
||||
`2021-12-19`
|
||||
@ -88,7 +132,8 @@ timeline: true
|
||||
- 🐞 Input.TextArea `maxLength` 属性现在会传给原生 textarea 标签。[#32448](https://github.com/ant-design/ant-design/pull/32448) [@MOHAMMADArsalan](https://github.com/MOHAMMADArsalan)
|
||||
- 🐞 修复 Input 聚焦时点击清除图标无效的问题。[#31931](https://github.com/ant-design/ant-design/pull/31931) [@adaex](https://github.com/adaex)
|
||||
- Cascader
|
||||
- 🔥 Cascader 支持 `multiple` 模式。[#31936](https://github.com/ant-design/ant-design/pull/31936)
|
||||
- 🔥 Cascader 支持 `multiple` 多选模式。[#31936](https://github.com/ant-design/ant-design/pull/31936)
|
||||
- 🆕 Cascader 支持 `onSearch` 和 `searchValue` 属性。[#31936](https://github.com/ant-design/ant-design/pull/31936)
|
||||
- 🆕 在 `Cascader` 组件中，默认给选中值的文本添加 `title` 属性。[#31237](https://github.com/ant-design/ant-design/pull/31237) [@yingpengsha](https://github.com/yingpengsha)
|
||||
- 🐞 修复 Cascader 中 `popupClassName` 与 `popupPlacement` 属性无效问题。[#32143](https://github.com/ant-design/ant-design/pull/32143)
|
||||
- Select
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import Button from '../button';
|
||||
import { LegacyButtonType, ButtonProps, convertLegacyProps } from '../button/button';
|
||||
import useDestroyed from './hooks/useDestroyed';
|
||||
|
||||
export interface ActionButtonProps {
|
||||
type?: LegacyButtonType;
|
||||
@ -20,6 +21,7 @@ function isThenable(thing?: PromiseLike<any>): boolean {
|
||||
const ActionButton: React.FC<ActionButtonProps> = props => {
|
||||
const clickedRef = React.useRef<boolean>(false);
|
||||
const ref = React.useRef<any>();
|
||||
const isDestroyed = useDestroyed();
|
||||
const [loading, setLoading] = React.useState<ButtonProps['loading']>(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
@ -43,7 +45,9 @@ const ActionButton: React.FC<ActionButtonProps> = props => {
|
||||
setLoading(true);
|
||||
returnValueOfOnOk!.then(
|
||||
(...args: any[]) => {
|
||||
setLoading(false);
|
||||
if (!isDestroyed()) {
|
||||
setLoading(false);
|
||||
}
|
||||
close(...args);
|
||||
clickedRef.current = false;
|
||||
},
|
||||
@ -52,7 +56,9 @@ const ActionButton: React.FC<ActionButtonProps> = props => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(e);
|
||||
// See: https://github.com/ant-design/ant-design/issues/6183
|
||||
setLoading(false);
|
||||
if (!isDestroyed()) {
|
||||
setLoading(false);
|
||||
}
|
||||
clickedRef.current = false;
|
||||
},
|
||||
);
|
||||
|
||||
20
components/_util/__tests__/useDestroyed.test.js
Normal file
20
components/_util/__tests__/useDestroyed.test.js
Normal file
@ -0,0 +1,20 @@
|
||||
import { mount } from 'enzyme';
|
||||
import React from 'react';
|
||||
import useDestroyed from '../hooks/useDestroyed';
|
||||
|
||||
describe('useMounted', () => {
|
||||
it('should work properly', () => {
|
||||
let isDestroyed = null;
|
||||
|
||||
const AutoUnmounted = () => {
|
||||
isDestroyed = useDestroyed();
|
||||
|
||||
return <div>Mounted</div>;
|
||||
};
|
||||
|
||||
const wrapper = mount(<AutoUnmounted />);
|
||||
expect(isDestroyed()).toBeFalsy();
|
||||
wrapper.unmount();
|
||||
expect(isDestroyed()).toBeTruthy();
|
||||
});
|
||||
});
|
||||
14
components/_util/hooks/useDestroyed.ts
Normal file
14
components/_util/hooks/useDestroyed.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import * as React from 'react';
|
||||
|
||||
export default function useDestroyed() {
|
||||
const mountedRef = React.useRef<boolean>(true);
|
||||
|
||||
React.useEffect(
|
||||
() => () => {
|
||||
mountedRef.current = false;
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
return () => !mountedRef.current;
|
||||
}
|
||||
@ -74,6 +74,7 @@ ReactDOM.render(
|
||||
onChange={onChange}
|
||||
placeholder="Please select"
|
||||
showSearch={{ filter }}
|
||||
onSearch={value => console.log(value)}
|
||||
/>,
|
||||
mountNode,
|
||||
);
|
||||
|
||||
@ -52,8 +52,8 @@ Cascade selection box.
|
||||
| onChange | Callback when finishing cascader select | (value, selectedOptions) => void | - | |
|
||||
| onDropdownVisibleChange | Callback when popup shown or hidden | (value) => void | - | 4.17.0 |
|
||||
| multiple | Support multiple or not | boolean | - | 4.17.0 |
|
||||
| searchValue | Set search value，Need work with `showSearch` | string | - | |
|
||||
| onSearch | The callback function triggered when input changed | (search: string) => void | - | |
|
||||
| searchValue | Set search value，Need work with `showSearch` | string | - | 4.17.0 |
|
||||
| onSearch | The callback function triggered when input changed | (search: string) => void | - | 4.17.0 |
|
||||
| dropdownMenuColumnStyle | The style of the drop-down menu column | CSSProperties | - | |
|
||||
| loadingIcon | The apparence of lazy loading (now is useless) | ReactNode | - | |
|
||||
|
||||
|
||||
@ -53,10 +53,9 @@ cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
|
||||
| onChange | 选择完成后的回调 | (value, selectedOptions) => void | - | |
|
||||
| onDropdownVisibleChange | 显示/隐藏浮层的回调 | (value) => void | - | 4.17.0 |
|
||||
| multiple | 支持多选节点 | boolean | - | 4.17.0 |
|
||||
| searchValue | 设置搜索的值，需要与 `showSearch` 配合使用 | string | - | |
|
||||
| onSearch | 监听搜索，返回输入的值 | (search: string) => void | - | |
|
||||
| searchValue | 设置搜索的值，需要与 `showSearch` 配合使用 | string | - | 4.17.0 |
|
||||
| onSearch | 监听搜索，返回输入的值 | (search: string) => void | - | 4.17.0 |
|
||||
| dropdownMenuColumnStyle | 下拉菜单列的样式 | CSSProperties | - | |
|
||||
| loadingIcon | 动态加载时的加载动画 (目前这个属性设置后不生效) | ReactNode | - | |
|
||||
|
||||
### showSearch
|
||||
|
||||
|
||||
@ -89,8 +89,6 @@
|
||||
}
|
||||
|
||||
&-horizontal&-with-text&-dashed {
|
||||
border-top: 0;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
border-style: dashed none none;
|
||||
|
||||
@ -59,6 +59,7 @@ const DropdownButton: DropdownButtonInterface = props => {
|
||||
mouseLeaveDelay,
|
||||
overlayClassName,
|
||||
overlayStyle,
|
||||
destroyPopupOnHide,
|
||||
...restProps
|
||||
} = props;
|
||||
|
||||
@ -74,6 +75,7 @@ const DropdownButton: DropdownButtonInterface = props => {
|
||||
mouseLeaveDelay,
|
||||
overlayClassName,
|
||||
overlayStyle,
|
||||
destroyPopupOnHide,
|
||||
} as DropDownProps;
|
||||
|
||||
if ('visible' in props) {
|
||||
|
||||
@ -65,7 +65,7 @@ export function fixControlledValue<T>(value: T) {
|
||||
if (typeof value === 'undefined' || value === null) {
|
||||
return '';
|
||||
}
|
||||
return value;
|
||||
return String(value);
|
||||
}
|
||||
|
||||
export function resolveOnChange<E extends HTMLInputElement | HTMLTextAreaElement>(
|
||||
|
||||
@ -298,4 +298,9 @@ describe('Input allowClear', () => {
|
||||
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
it('not crash when value is number', () => {
|
||||
const wrapper = mount(<Input suffix="Bamboo" value={1} />);
|
||||
expect(wrapper).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@ -26,7 +26,7 @@ A basic widget for getting the user input is a text field. Keyboard and mouse ca
|
||||
| disabled | Whether the input is disabled | boolean | false | |
|
||||
| id | The ID for input | string | - | |
|
||||
| maxLength | The max length | number | - | |
|
||||
| showCount | Whether show text count | boolean \| { formatter: ({ count: number, maxLength?: number }) => ReactNode } | false | 4.17.0 |
|
||||
| showCount | Whether show text count | boolean \| { formatter: ({ count: number, maxLength?: number }) => ReactNode } | false | 4.18.0 |
|
||||
| prefix | The prefix icon for the Input | ReactNode | - | |
|
||||
| size | The size of the input box. Note: in the context of a form, the `large` size is used | `large` \| `middle` \| `small` | - | |
|
||||
| suffix | The suffix icon for the Input | ReactNode | - | |
|
||||
|
||||
@ -27,7 +27,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg
|
||||
| disabled | 是否禁用状态，默认为 false | boolean | false | |
|
||||
| id | 输入框的 id | string | - | |
|
||||
| maxLength | 最大长度 | number | - | |
|
||||
| showCount | 是否展示字数 | boolean \| { formatter: ({ count: number, maxLength?: number }) => ReactNode } | false | 4.17.0 |
|
||||
| showCount | 是否展示字数 | boolean \| { formatter: ({ count: number, maxLength?: number }) => ReactNode } | false | 4.18.0 |
|
||||
| prefix | 带有前缀图标的 input | ReactNode | - | |
|
||||
| size | 控件大小。注：标准表单内的输入框大小限制为 `large` | `large` \| `middle` \| `small` | - | |
|
||||
| suffix | 带有后缀图标的 input | ReactNode | - | |
|
||||
|
||||
@ -87,7 +87,7 @@ The items listed above are all functions, expecting a settings object as paramet
|
||||
| style | Style of floating layer, typically used at least for adjusting the position | CSSProperties | - | |
|
||||
| title | Title | ReactNode | - | |
|
||||
| width | Width of the modal dialog | string \| number | 416 | |
|
||||
| wrapClassName | The class name of the container of the modal dialog | string | - | 4.17.0 |
|
||||
| wrapClassName | The class name of the container of the modal dialog | string | - | 4.18.0 |
|
||||
| zIndex | The `z-index` of the Modal | number | 1000 | |
|
||||
| onCancel | Specify a function that will be called when the user clicks the Cancel button. The parameter of this function is a function whose execution should include closing the dialog. If the function does not take any parameter (`!onCancel.length`) then modal dialog will be closed unless returned value is `true` (`!!onCancel()`). You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function(close) | - | |
|
||||
| onOk | Specify a function that will be called when the user clicks the OK button. The parameter of this function is a function whose execution should include closing the dialog. If the function does not take any parameter (`!onOk.length`) then modal dialog will be closed unless returned value is `true` (`!!onOk()`). You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function(close) | - | |
|
||||
|
||||
@ -90,7 +90,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg
|
||||
| style | 可用于设置浮层的样式，调整浮层位置等 | CSSProperties | - | |
|
||||
| title | 标题 | ReactNode | - | |
|
||||
| width | 宽度 | string \| number | 416 | |
|
||||
| wrapClassName | 对话框外层容器的类名 | string | - | 4.17.0 |
|
||||
| wrapClassName | 对话框外层容器的类名 | string | - | 4.18.0 |
|
||||
| zIndex | 设置 Modal 的 `z-index` | number | 1000 | |
|
||||
| onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function(close) | - | |
|
||||
| onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function(close) | - | |
|
||||
|
||||
@ -5,6 +5,7 @@ import Popconfirm from '..';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import { sleep } from '../../../tests/utils';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import Button from '../../button';
|
||||
|
||||
describe('Popconfirm', () => {
|
||||
mountTest(Popconfirm);
|
||||
@ -223,4 +224,45 @@ describe('Popconfirm', () => {
|
||||
triggerNode.simulate('keydown', { key: 'Escape', keyCode: 27 });
|
||||
expect(onVisibleChange).toHaveBeenLastCalledWith(false, eventObject);
|
||||
});
|
||||
|
||||
it('should not warn memory leaking if setState in async callback', async () => {
|
||||
const error = jest.spyOn(console, 'error');
|
||||
|
||||
const Test = () => {
|
||||
const [show, setShow] = React.useState(true);
|
||||
|
||||
if (show) {
|
||||
return (
|
||||
<Popconfirm
|
||||
title="will unmount"
|
||||
onConfirm={() =>
|
||||
new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
setShow(false);
|
||||
resolve();
|
||||
}, 300);
|
||||
})
|
||||
}
|
||||
>
|
||||
<Button className="clickTarget">Test</Button>
|
||||
</Popconfirm>
|
||||
);
|
||||
}
|
||||
return <Button>Unmounted</Button>;
|
||||
};
|
||||
|
||||
const wrapper = mount(
|
||||
<div>
|
||||
<Test />
|
||||
</div>,
|
||||
);
|
||||
|
||||
expect(wrapper.text()).toEqual('Test');
|
||||
const triggerNode = wrapper.find('.clickTarget').at(0);
|
||||
triggerNode.simulate('click');
|
||||
wrapper.find('.ant-btn-primary').simulate('click');
|
||||
await sleep(500);
|
||||
expect(wrapper.text()).toEqual('Unmounted');
|
||||
expect(error).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
@ -24,7 +24,7 @@ The difference with the `confirm` modal dialog is that it's more lightweight tha
|
||||
| okButtonProps | The ok button props | [ButtonProps](/components/button/#API) | - | |
|
||||
| okText | The text of the Confirm button | string | `OK` | |
|
||||
| okType | Button `type` of the Confirm button | string | `primary` | |
|
||||
| showCancel | Show cancel button | boolean | true | 4.17.0 |
|
||||
| showCancel | Show cancel button | boolean | true | 4.18.0 |
|
||||
| title | The title of the confirmation box | ReactNode \| () => ReactNode | - | |
|
||||
| onCancel | A callback of cancel | function(e) | - | |
|
||||
| onConfirm | A callback of confirmation | function(e) | - | |
|
||||
|
||||
@ -13,6 +13,7 @@ import { getRenderPropValue, RenderFunction } from '../_util/getRenderPropValue'
|
||||
import { cloneElement } from '../_util/reactNode';
|
||||
import { getTransitionName } from '../_util/motion';
|
||||
import ActionButton from '../_util/ActionButton';
|
||||
import useDestroyed from '../_util/hooks/useDestroyed';
|
||||
|
||||
export interface PopconfirmProps extends AbstractTooltipProps {
|
||||
title: React.ReactNode | RenderFunction;
|
||||
@ -48,12 +49,15 @@ const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => {
|
||||
defaultValue: props.defaultVisible,
|
||||
});
|
||||
|
||||
const isDestroyed = useDestroyed();
|
||||
|
||||
const settingVisible = (
|
||||
value: boolean,
|
||||
e?: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLDivElement>,
|
||||
) => {
|
||||
setVisible(value);
|
||||
|
||||
if (!isDestroyed()) {
|
||||
setVisible(value);
|
||||
}
|
||||
props.onVisibleChange?.(value, e);
|
||||
};
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fjMCD9xRq/Popconfirm.svg
|
||||
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - | |
|
||||
| okText | 确认按钮文字 | string | `确定` | |
|
||||
| okType | 确认按钮类型 | string | `primary` | |
|
||||
| showCancel | 是否显示取消按钮 | boolean | true | 4.17.0 |
|
||||
| showCancel | 是否显示取消按钮 | boolean | true | 4.18.0 |
|
||||
| title | 确认框的描述 | ReactNode \| () => ReactNode | - | |
|
||||
| onCancel | 点击取消的回调 | function(e) | - | |
|
||||
| onConfirm | 点击确认的回调 | function(e) | - | |
|
||||
|
||||
@ -37,7 +37,7 @@ Select component to select value from options.
|
||||
| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | true | |
|
||||
| dropdownRender | Customize dropdown content | (originNode: ReactNode) => ReactNode | - | |
|
||||
| dropdownStyle | The style of dropdown menu | CSSProperties | - | |
|
||||
| fieldNames | Customize node title, key, options field name | object | { label: `label`, key: `key`, options: `options` } | 4.17.0 |
|
||||
| fieldNames | Customize node label, value, options field name | object | { label: `label`, value: `value`, options: `options` } | 4.17.0 |
|
||||
| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded | boolean \| function(inputValue, option) | true | |
|
||||
| filterSort | Sort function for search options sorting, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction | (optionA: Option, optionB: Option) => number | - | 4.9.0 |
|
||||
| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative. [Example](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body | |
|
||||
|
||||
@ -38,7 +38,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
|
||||
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \| number | true | |
|
||||
| dropdownRender | 自定义下拉框内容 | (originNode: ReactNode) => ReactNode | - | |
|
||||
| dropdownStyle | 下拉菜单的 style 属性 | CSSProperties | - | |
|
||||
| fieldNames | 自定义节点 label、key、options 的字段 | object | { label: `label`, key: `key`, options: `options` } | 4.17.0 |
|
||||
| fieldNames | 自定义节点 label、value、options 的字段 | object | { label: `label`, value: `value`, options: `options` } | 4.17.0 |
|
||||
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false | boolean \| function(inputValue, option) | true | |
|
||||
| filterSort | 搜索时对筛选结果项的排序函数, 类似[Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)里的 compareFunction | (optionA: Option, optionB: Option) => number | - | 4.9.0 |
|
||||
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body | |
|
||||
|
||||
@ -553,4 +553,30 @@ describe('Table.pagination', () => {
|
||||
'ant-pagination ant-table-pagination ant-table-pagination-right pagination',
|
||||
);
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/33374
|
||||
// https://codesandbox.io/s/festive-edison-6uq3e?file=/src/App.js
|
||||
it('should called onChange when page number is changed by change of total ', () => {
|
||||
const onChange = jest.fn();
|
||||
const wrapper = mount(
|
||||
createTable({
|
||||
pagination: {
|
||||
current: 2,
|
||||
pageSize: 3,
|
||||
total: 4,
|
||||
onChange,
|
||||
},
|
||||
}),
|
||||
);
|
||||
wrapper.setProps({
|
||||
dataSource: data.slice(0, 3),
|
||||
pagination: {
|
||||
current: 2,
|
||||
pageSize: 3,
|
||||
total: 3,
|
||||
onChange,
|
||||
},
|
||||
});
|
||||
expect(onChange).toHaveBeenCalledWith(1, 3);
|
||||
});
|
||||
});
|
||||
|
||||
@ -73,6 +73,7 @@ export default function usePagination(
|
||||
if (mergedPagination.current! > maxPage) {
|
||||
// Prevent a maximum page count of 0
|
||||
mergedPagination.current = maxPage || 1;
|
||||
mergedPagination.onChange?.(mergedPagination.current, mergedPagination?.pageSize!);
|
||||
}
|
||||
|
||||
const refreshPagination = (current?: number, pageSize?: number) => {
|
||||
|
||||
@ -201,7 +201,7 @@ Properties for row selection.
|
||||
| preserveSelectedRowKeys | Keep selection `key` even when it removed from `dataSource` | boolean | - | 4.4.0 |
|
||||
| renderCell | Renderer of the table cell. Same as `render` in column | function(checked, record, index, originNode) {} | - | 4.1.0 |
|
||||
| selectedRowKeys | Controlled selected row keys | string\[] \| number\[] | \[] | |
|
||||
| selections | Custom selection [config](#rowSelection), only displays default selections when set to `true` | object\[] \| boolean | - | |
|
||||
| selections | Custom selection [config](#selection), only displays default selections when set to `true` | object\[] \| boolean | - | |
|
||||
| type | `checkbox` or `radio` | `checkbox` \| `radio` | `checkbox` | |
|
||||
| onChange | Callback executed when selected rows change | function(selectedRowKeys, selectedRows) | - | |
|
||||
| onSelect | Callback executed when select/deselect one row | function(record, selected, selectedRows, nativeEvent) | - | |
|
||||
|
||||
@ -730,7 +730,11 @@ exports[`renders ./components/tree-select/demo/checkable.md extend context corre
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-tree-checkbox ant-select-tree-checkbox-checked"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-select-tree-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-close"
|
||||
title="Node1"
|
||||
@ -776,7 +780,11 @@ exports[`renders ./components/tree-select/demo/checkable.md extend context corre
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-tree-checkbox"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-select-tree-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-close"
|
||||
title="Node2"
|
||||
|
||||
@ -26,7 +26,7 @@ Tree selection control.
|
||||
| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | true | |
|
||||
| dropdownRender | Customize dropdown content | (originNode: ReactNode, props) => ReactNode | - | |
|
||||
| dropdownStyle | To set the style of the dropdown menu | CSSProperties | - | |
|
||||
| fieldNames | Customize node title, key, children field name | object | { label: `label`, key: `key`, children: `children` } | 4.17.0 |
|
||||
| fieldNames | Customize node label, value, children field name | object | { label: `label`, value: `value`, children: `children` } | 4.17.0 |
|
||||
| filterTreeNode | Whether to filter treeNodes by input value. The value of `treeNodeFilterProp` is used for filtering by default | boolean \| function(inputValue: string, treeNode: TreeNode) (should return boolean) | function | |
|
||||
| getPopupContainer | To set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body | |
|
||||
| labelInValue | Whether to embed label in value, turn the format of value from `string` to {value: string, label: ReactNode, halfChecked: string\[]} | boolean | false | |
|
||||
|
||||
@ -27,7 +27,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg
|
||||
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \| number | true | |
|
||||
| dropdownRender | 自定义下拉框内容 | (originNode: ReactNode, props) => ReactNode | - | |
|
||||
| dropdownStyle | 下拉菜单的样式 | object | - | |
|
||||
| fieldNames | 自定义节点 label、key、children 的字段 | object | { label: `label`, key: `key`, children: `children` } | 4.17.0 |
|
||||
| fieldNames | 自定义节点 label、value、children 的字段 | object | { label: `label`, value: `value`, children: `children` } | 4.17.0 |
|
||||
| filterTreeNode | 是否根据输入项进行筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值 | boolean \| function(inputValue: string, treeNode: TreeNode) (函数需要返回 bool 值) | function | |
|
||||
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body | |
|
||||
| labelInValue | 是否把每个选项的 label 包装到 value 中，会把 value 类型从 `string` 变为 {value: string, label: ReactNode, halfChecked(treeCheckStrictly 时有效): string\[] } 的格式 | boolean | false | |
|
||||
|
||||
@ -110,7 +110,7 @@ module.exports = {
|
||||
首先把 `src/App.css` 文件修改为 `src/App.less`，然后修改样式引用为 less 文件。
|
||||
|
||||
```diff
|
||||
/* src/App.ts */
|
||||
/* src/App.tsx */
|
||||
- import './App.css';
|
||||
+ import './App.less';
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "4.17.4",
|
||||
"version": "4.18.1",
|
||||
"description": "An enterprise-class UI design language and React components implementation",
|
||||
"title": "Ant Design",
|
||||
"keywords": [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user