diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 08bf8f0058..eb7b1ad4ab 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -48,6 +48,8 @@ Describe changes from userside, and list all potential break changes or other ri ### ☑️ Self Check before Merge +⚠️ Please check all items below before review. ⚠️ + - [ ] Doc is updated/provided or not needed - [ ] Demo is updated/provided or not needed - [ ] TypeScript definition is updated/provided or not needed diff --git a/.github/PULL_REQUEST_TEMPLATE/pr_cn.md b/.github/PULL_REQUEST_TEMPLATE/pr_cn.md index e485e69c78..d4b0f3b7bd 100644 --- a/.github/PULL_REQUEST_TEMPLATE/pr_cn.md +++ b/.github/PULL_REQUEST_TEMPLATE/pr_cn.md @@ -48,7 +48,7 @@ ### ☑️ 请求合并前的自查清单 -> 请自检并全部勾选上 +⚠️ 请自检并全部**勾选全部选项**。⚠️ - [ ] 文档已补充或无须补充 - [ ] 代码演示已提供或无须提供 diff --git a/components/carousel/__tests__/index.test.js b/components/carousel/__tests__/index.test.js index de673511c8..58093d3514 100644 --- a/components/carousel/__tests__/index.test.js +++ b/components/carousel/__tests__/index.test.js @@ -126,18 +126,4 @@ describe('Carousel', () => { ).toBeTruthy(); }); }); - - describe('dots precise control by plain object', () => { - it('use dots to provide dotsClasse', () => { - const wrapper = mount( - -
1
-
2
-
3
- , - ); - wrapper.update(); - expect(wrapper.find('.slick-dots').hasClass('customDots')).toBeTruthy(); - }); - }); }); diff --git a/components/carousel/index.en-US.md b/components/carousel/index.en-US.md index 8245afb15b..217b33042c 100644 --- a/components/carousel/index.en-US.md +++ b/components/carousel/index.en-US.md @@ -20,7 +20,7 @@ A carousel component. Scales with its container. | autoplay | Whether to scroll automatically | boolean | `false` | | | beforeChange | Callback function called before the current index changes | function(from, to) | - | | | dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | bottom | | -| dots | Whether to show the dots at the bottom of the gallery, `string` for `dotsClass` | boolean \| { dotsClass?:string } | `true` | | +| dots | Whether to show the dots at the bottom of the gallery | boolean | `true` | | | easing | Transition interpolation function name | string | `linear` | | | effect | Transition effect | `scrollx` \| `fade` | `scrollx` | | diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx index 447927e314..9196dc8b56 100644 --- a/components/carousel/index.tsx +++ b/components/carousel/index.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import isPlainObject from 'lodash/isPlainObject'; import debounce from 'lodash/debounce'; import { Settings } from '@ant-design/react-slick'; import classNames from 'classnames'; @@ -15,18 +14,13 @@ export type CarouselEffect = 'scrollx' | 'fade'; export type DotPosition = 'top' | 'bottom' | 'left' | 'right'; // Carousel -export interface CarouselProps extends Omit { +export interface CarouselProps extends Settings { effect?: CarouselEffect; style?: React.CSSProperties; prefixCls?: string; slickGoTo?: number; dotPosition?: DotPosition; children?: React.ReactNode; - dots?: - | boolean - | { - dotsClass?: string; - }; } export default class Carousel extends React.Component { @@ -112,13 +106,7 @@ export default class Carousel extends React.Component { const dotsClass = 'slick-dots'; const dotPosition = this.getDotPosition(); props.vertical = dotPosition === 'left' || dotPosition === 'right'; - - const enableDots = props.dots === true || isPlainObject(props.dots); - const dsClass = classNames( - dotsClass, - `${dotsClass}-${dotPosition || 'bottom'}`, - typeof props.dots === 'boolean' ? false : props.dots?.dotsClass, - ); + props.dotsClass = `${dotsClass} ${dotsClass}-${dotPosition || 'bottom'}`; const className = classNames(prefixCls, { [`${prefixCls}-rtl`]: direction === 'rtl', @@ -127,7 +115,7 @@ export default class Carousel extends React.Component { return (
- +
); }; diff --git a/components/carousel/index.zh-CN.md b/components/carousel/index.zh-CN.md index a3aa219567..41fadcc516 100644 --- a/components/carousel/index.zh-CN.md +++ b/components/carousel/index.zh-CN.md @@ -21,7 +21,7 @@ subtitle: 走马灯 | autoplay | 是否自动切换 | boolean | false | | | | beforeChange | 切换面板的回调 | function(from, to) | 无 | | | | dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | bottom | | -| dots | 是否显示面板指示点，如果为 `string` 则指定为 `dotsClass` | boolean \| { dotsClass?:string } | true | | | +| dots | 是否显示面板指示点 | boolean | true | | | | easing | 动画效果 | string | linear | | | | effect | 动画效果函数，可取 scrollx, fade | string | scrollx | | | diff --git a/components/dropdown/demo/overlay-visible.md b/components/dropdown/demo/overlay-visible.md index 2e42d83374..ca788a5008 100644 --- a/components/dropdown/demo/overlay-visible.md +++ b/components/dropdown/demo/overlay-visible.md @@ -37,7 +37,7 @@ class OverlayVisible extends React.Component { Clicking me will not close the menu. Clicking me will not close the menu also. - Clicking me will close the menu + Clicking me will close the menu. ); return ( diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md index c58ac48be1..c669c08a4f 100644 --- a/components/dropdown/index.zh-CN.md +++ b/components/dropdown/index.zh-CN.md @@ -41,9 +41,9 @@ title: Dropdown | icon | 右侧的 icon | ReactNode | - | | | overlay | 菜单 | [Menu](/components/menu/) | - | | | placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | | -| size | 按钮大小，和 [Button](/components/button/) 一致 | string | 'default' | | +| size | 按钮大小，和 [Button](/components/button/) 一致 | string | `default` | | | trigger | 触发下拉的行为 | Array<`click`\|`hover`\|`contextMenu`> | `['hover']` | | -| type | 按钮类型，和 [Button](/components/button/) 一致 | string | 'default' | | +| type | 按钮类型，和 [Button](/components/button/) 一致 | string | `default` | | | visible | 菜单是否显示 | boolean | - | | | onClick | 点击左侧按钮的回调，和 [Button](/components/button/) 一致 | Function | - | | | onVisibleChange | 菜单显示状态改变时调用，参数为 visible | Function | - | | diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less index 1fd85dae83..f849d0218c 100644 --- a/components/dropdown/style/index.less +++ b/components/dropdown/style/index.less @@ -189,6 +189,7 @@ } &-icon { + margin-right: 0; color: @text-color-secondary; font-style: normal; .iconfont-size-under-12px(10px); @@ -203,11 +204,11 @@ } &-submenu-title { - padding-right: 26px; + padding-right: @control-padding-horizontal + @font-size-sm; .@{dropdown-prefix-cls}-rtl & { padding-right: @control-padding-horizontal; - padding-left: 26px; + padding-left: @control-padding-horizontal + @font-size-sm; } } diff --git a/components/form/demo/control-hooks.md b/components/form/demo/control-hooks.md index 52cb53edd1..9b08f721cc 100644 --- a/components/form/demo/control-hooks.md +++ b/components/form/demo/control-hooks.md @@ -9,10 +9,14 @@ title: 通过 `Form.useForm` 对表单数据域进行交互。 +> 注意 `useForm` 是 [React Hooks](https://reactjs.org/docs/hooks-intro.html) 的实现，只能用于函数组件，class 组件请查看下面的例子。 + ## en-US Call form method with `Form.useForm`. +> Note that `useForm` is a [React Hooks](https://reactjs.org/docs/hooks-intro.html) that only works in functional component. + ```tsx import { Form, Input, Button, Select } from 'antd'; diff --git a/components/form/v3.en-US.md b/components/form/v3.en-US.md index 0c595e798d..605d48ddc0 100644 --- a/components/form/v3.en-US.md +++ b/components/form/v3.en-US.md @@ -102,7 +102,7 @@ class Demo extends React.Component { render() { return ( -
+ diff --git a/components/form/v3.zh-CN.md b/components/form/v3.zh-CN.md index 9a43cfbe9d..a15febbe08 100644 --- a/components/form/v3.zh-CN.md +++ b/components/form/v3.zh-CN.md @@ -104,7 +104,7 @@ class Demo extends React.Component { render() { return ( - + diff --git a/components/notification/demo/duration.md b/components/notification/demo/duration.md index 681c619d2a..7db4240424 100644 --- a/components/notification/demo/duration.md +++ b/components/notification/demo/duration.md @@ -20,7 +20,7 @@ const openNotification = () => { const args = { message: 'Notification Title', description: - 'I will never close automatically. I will be close automatically. I will never close automatically.', + 'I will never close automatically. This is a purposely very very long description that has many many characters and words.', duration: 0, }; notification.open(args); diff --git a/components/table/__tests__/Table.filter.test.js b/components/table/__tests__/Table.filter.test.js index 4a993dd200..0f90ad8c63 100644 --- a/components/table/__tests__/Table.filter.test.js +++ b/components/table/__tests__/Table.filter.test.js @@ -1198,4 +1198,19 @@ describe('Table.filter', () => { .text(), ).toEqual('Reset'); }); + + it('filtered should work', () => { + const wrapper = mount( + createTable({ + columns: [ + { + ...column, + filtered: true, + }, + ], + }), + ); + + expect(wrapper.find('.ant-table-filter-trigger').hasClass('active')).toBeTruthy(); + }); }); diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap index 214adadebd..37e80c3226 100755 --- a/components/table/__tests__/__snapshots__/demo.test.js.snap +++ b/components/table/__tests__/__snapshots__/demo.test.js.snap @@ -1460,7 +1460,6 @@ exports[`renders ./components/table/demo/drag-sorting.md correctly 1`] = ` dragingIndex) { - className += ' drop-over-downward'; - } - if (restProps.index < dragingIndex) { - className += ' drop-over-upward'; +const DragableBodyRow = ({ index, moveRow, className, style, ...restProps }) => { + const ref = React.useRef(); + const [{ isOver, dropClassName }, drop] = useDrop({ + accept: type, + collect: monitor => { + const { index: dragIndex } = monitor.getItem() || {}; + if (dragIndex === index) { + return {}; } - } - - return connectDragSource( - connectDropTarget(), - ); - } -} - -const rowSource = { - beginDrag(props) { - dragingIndex = props.index; - return { - index: props.index, - }; - }, -}; - -const rowTarget = { - drop(props, monitor) { - const dragIndex = monitor.getItem().index; - const hoverIndex = props.index; - - // Don't replace items with themselves - if (dragIndex === hoverIndex) { - return; - } - - // Time to actually perform the action - props.moveRow(dragIndex, hoverIndex); - - // Note: we're mutating the monitor item here! - // Generally it's better to avoid mutations, - // but it's good here for the sake of performance - // to avoid expensive index searches. - monitor.getItem().index = hoverIndex; - }, + return { + isOver: monitor.isOver(), + dropClassName: dragIndex < index ? ' drop-over-downward' : ' drop-over-upward', + }; + }, + drop: item => { + moveRow(item.index, index); + }, + }); + const [, drag] = useDrag({ + item: { type, index }, + collect: monitor => ({ + isDragging: monitor.isDragging(), + }), + }); + drop(drag(ref)); + return ( + + ); }; -const DragableBodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({ - connectDropTarget: connect.dropTarget(), - isOver: monitor.isOver(), -}))( - DragSource('row', rowSource, connect => ({ - connectDragSource: connect.dragSource(), - }))(BodyRow), -); - const columns = [ { title: 'Name', diff --git a/components/table/hooks/useFilter/FilterDropdown.tsx b/components/table/hooks/useFilter/FilterDropdown.tsx index dbcfed952b..999dd54fe6 100644 --- a/components/table/hooks/useFilter/FilterDropdown.tsx +++ b/components/table/hooks/useFilter/FilterDropdown.tsx @@ -76,7 +76,10 @@ function FilterDropdown(props: FilterDropdownProps) { const { filterDropdownVisible, onFilterDropdownVisibleChange } = column; const [visible, setVisible] = React.useState(false); - const filtered: boolean = !!(filterState && filterState.filteredKeys); + const filtered: boolean = !!( + filterState && + (filterState.filteredKeys || filterState.forceFiltered) + ); const triggerVisible = (newVisible: boolean) => { setVisible(newVisible); if (onFilterDropdownVisibleChange) { d