From 8fe701b892032532d4ae51df2907924d11c3c88a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 3 Mar 2020 18:18:19 +0800 Subject: [PATCH 1/9] fix: Fix table column filtered not work (#21825) * fix: Table miss filtered * add test case --- components/table/__tests__/Table.filter.test.js | 15 +++++++++++++++ .../table/hooks/useFilter/FilterDropdown.tsx | 5 ++++- components/table/hooks/useFilter/index.tsx | 3 +++ components/table/interface.tsx | 1 + 4 files changed, 23 insertions(+), 1 deletion(-) 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/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) { diff --git a/components/table/hooks/useFilter/index.tsx b/components/table/hooks/useFilter/index.tsx index aa82c7bcca..306469513b 100644 --- a/components/table/hooks/useFilter/index.tsx +++ b/components/table/hooks/useFilter/index.tsx @@ -16,6 +16,7 @@ export interface FilterState { column: ColumnType; key: Key; filteredKeys?: Key[] | null; + forceFiltered?: boolean; } function collectFilterStates( @@ -37,6 +38,7 @@ function collectFilterStates( column, key: getColumnKey(column, columnPos), filteredKeys: column.filteredValue, + forceFiltered: column.filtered, }); } else { // Uncontrolled @@ -45,6 +47,7 @@ function collectFilterStates( key: getColumnKey(column, columnPos), filteredKeys: init && column.defaultFilteredValue ? column.defaultFilteredValue! : undefined, + forceFiltered: column.filtered, }); } } diff --git a/components/table/interface.tsx b/components/table/interface.tsx index c2bb7bdfb5..640b63d602 100644 --- a/components/table/interface.tsx +++ b/components/table/interface.tsx @@ -76,6 +76,7 @@ export interface ColumnType extends RcColumnType { sortDirections?: SortOrder[]; // Filter + filtered?: boolean; filters?: ColumnFilterItem[]; filterDropdown?: React.ReactNode | ((props: FilterDropdownProps) => React.ReactNode); filterMultiple?: boolean; From 453c6818814461e7d082557ecde8825ba8dd4e04 Mon Sep 17 00:00:00 2001 From: zefeng Date: Tue, 3 Mar 2020 22:19:19 +0800 Subject: [PATCH 2/9] docs: rewrite drag-drop demo by react-dnd hooks (#21836) --- .../__tests__/__snapshots__/demo.test.js.snap | 3 - components/table/demo/drag-sorting.md | 93 +++++++------------ 2 files changed, 34 insertions(+), 62 deletions(-) diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap index fc622f90c4..fb16d9ef4e 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', From e7c2ee5be6c289aaaf96c530c514c5b9167f95c7 Mon Sep 17 00:00:00 2001 From: zombiej Date: Tue, 3 Mar 2020 22:52:58 +0800 Subject: [PATCH 3/9] docs: Add Table missing expandIconColumnIndex in doc close #21803 --- components/table/index.en-US.md | 1 + components/table/index.zh-CN.md | 1 + 2 files changed, 2 insertions(+) diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index 5bc0c6c07a..8bf5eb895f 100644 --- a/components/table/index.en-US.md +++ b/components/table/index.en-US.md @@ -165,6 +165,7 @@ Properties for expandable. | defaultExpandAllRows | Expand all rows initially | boolean | `false` | | defaultExpandedRowKeys | Initial expanded row keys | string\[] | - | | expandIcon | Customize row expand Icon. Ref [example](https://codesandbox.io/s/fervent-bird-nuzpr) | Function(props):ReactNode | - | +| expandIconColumnIndex | Customize expand icon column index | number | - | | expandedRowKeys | Current expanded row keys | string\[] | - | | expandedRowRender | Expanded container render for each row | Function(record, index, indent, expanded):ReactNode | - | | expandRowByClick | Whether to expand row by clicking anywhere in the whole row | boolean | `false` | diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index dfee632b57..944757106a 100644 --- a/components/table/index.zh-CN.md +++ b/components/table/index.zh-CN.md @@ -170,6 +170,7 @@ const columns = [ | defaultExpandAllRows | 初始时，是否展开所有行 | boolean | false | | defaultExpandedRowKeys | 默认展开的行 | string\[] | - | | expandIcon | 自定义展开图标，参考[示例](https://codesandbox.io/s/fervent-bird-nuzpr) | Function(props):ReactNode | - | +| expandIconColumnIndex | 自定义展开按钮的列顺序 | number | - | | expandedRowKeys | 展开的行，控制属性 | string\[] | - | | expandedRowRender | 额外的展开行 | Function(record, index, indent, expanded):ReactNode | - | | expandRowByClick | 通过点击行来展开子行 | boolean | `false` | From 92c189f246fad9919e0e3d62f41c3a9348f55fba Mon Sep 17 00:00:00 2001 From: Jason Kurian Date: Tue, 3 Mar 2020 19:28:54 -0500 Subject: [PATCH 4/9] clarify duration example description (#21838) --- components/notification/demo/duration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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); From 55734400cc928865feac015dc4551e2ef6c2e5a4 Mon Sep 17 00:00:00 2001 From: zombiej Date: Wed, 4 Mar 2020 10:26:55 +0800 Subject: [PATCH 5/9] docs: Fix v3 form mig doc --- components/form/v3.en-US.md | 2 +- components/form/v3.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 ( - + From 3c292b9d628eebf4b27fb3c80107172959185ef6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Wed, 4 Mar 2020 11:26:37 +0800 Subject: [PATCH 6/9] docs: :memo: instruction about useForm close https://github.com/ant-design/codemod-v4/issues/90 --- components/form/demo/control-hooks.md | 4 ++++ 1 file changed, 4 insertions(+) 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'; From 1556582884c7f12f72e2f1185a47c2ecaaad906a Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Wed, 4 Mar 2020 11:53:15 +0800 Subject: [PATCH 7/9] style: optimization dropdown menu style (#21768) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * style: optimization dropdown menu style * fix: use var * fix right * Update index.less Co-authored-by: 偏右 --- components/dropdown/demo/overlay-visible.md | 2 +- components/dropdown/index.zh-CN.md | 4 ++-- components/dropdown/style/index.less | 5 +++-- 3 files changed, 6 insertions(+), 5 deletions(-) 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; } } From 6d686db6fc4d89f1a2348979466fae558509c73a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Wed, 4 Mar 2020 12:02:43 +0800 Subject: [PATCH 8/9] =?UTF-8?q?docs:=20=F0=9F=93=9D=20Update=20PULL=5FREQU?= =?UTF-8?q?EST=5FTEMPLATE.md=20(#21844)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Update PULL_REQUEST_TEMPLATE.md * Update pr_cn.md --- .github/PULL_REQUEST_TEMPLATE.md | 2 ++ .github/PULL_REQUEST_TEMPLATE/pr_cn.md | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) 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 @@ ### ☑️ 请求合并前的自查清单 -> 请自检并全部勾选上 +⚠️ 请自检并全部**勾选全部选项**。⚠️ - [ ] 文档已补充或无须补充 - [ ] 代码演示已提供或无须提供 From 63e6c9af37916b74b4d0192861a51746b7791f25 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Wed, 4 Mar 2020 13:30:21 +0800 Subject: [PATCH 9/9] Revert "feat: add support use dots to provide dotsClasse (#21708)" (#21847) This reverts commit 68f8851ec697def5290e2edcffad83cc9911afee. --- components/carousel/__tests__/index.test.js | 14 -------------- components/carousel/index.en-US.md | 2 +- components/carousel/index.tsx | 18 +++--------------- components/carousel/index.zh-CN.md | 2 +- 4 files changed, 5 insertions(+), 31 deletions(-) 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 | | |