mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-29 21:59:41 +08:00
Code Issues Actions 33 Packages Projects Releases Wiki Activity

Merge pull request #22072 from ant-design/new-table-filter-menu-buttons

Browse Source 
style: 💄 New table filter menu buttons
This commit is contained in:
偏右 2020-03-10 22:32:03 +08:00 committed by GitHub
commit 145f72741b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 203 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
components/config-provider/__tests__/__snapshots__/components.test.js.snap
View File

@ -11763,16 +11763,23 @@ exports[`ConfigProvider components Table configProvider 1`] = `
<div
class="config-table-filter-dropdown-btns"
>
<a
class="config-table-filter-dropdown-link confirm"
<button
class="config-btn config-btn-link config-btn-sm"
disabled=""
type="button"
>
OK
</a>
<a
class="config-table-filter-dropdown-link clear"
<span>
Reset
</span>
</button>
<button
class="config-btn config-btn-primary config-btn-sm"
type="button"
>
Reset
</a>
<span>
OK
</span>
</button>
</div>
</div>
</div>
@ -12102,16 +12109,23 @@ exports[`ConfigProvider components Table normal 1`] = `
<div
class="ant-table-filter-dropdown-btns"
>
<a
class="ant-table-filter-dropdown-link confirm"
<button
class="ant-btn ant-btn-link ant-btn-sm"
disabled=""
type="button"
>
OK
</a>
<a
class="ant-table-filter-dropdown-link clear"
<span>
Reset
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
type="button"
>
Reset
</a>
<span>
OK
</span>
</button>
</div>
</div>
</div>
@ -12441,16 +12455,23 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
<div
class="prefix-Table-filter-dropdown-btns"
>
<a
class="prefix-Table-filter-dropdown-link confirm"
<button
class="ant-btn ant-btn-link ant-btn-sm"
disabled=""
type="button"
>
OK
</a>
<a
class="prefix-Table-filter-dropdown-link clear"
<span>
Reset
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
type="button"
>
Reset
</a>
<span>
OK
</span>
</button>
</div>
</div>
</div>

2
components/dropdown/style/index.less
View File

@ -94,7 +94,7 @@
ul {
margin-right: 0.3em;
margin-left: 0.3em;
padding: 0;
padding: @dropdown-edge-child-vertical-padding 0;
}
}

166
components/table/__tests__/Table.filter.test.js
View File

@ -10,6 +10,15 @@ import ConfigProvider from '../../config-provider';
// https://github.com/Semantic-Org/Semantic-UI-React/blob/72c45080e4f20b531fda2e3e430e384083d6766b/test/specs/modules/Dropdown/Dropdown-test.js#L73
const nativeEvent = { nativeEvent: { stopImmediatePropagation: () => {} } };
function getDropdownWrapper(wrapper) {
return mount(
wrapper
.find('Trigger')
.instance()
.getComponent(),
);
}
describe('Table.filter', () => {
const filterFn = (value, record) => record.name.indexOf(value) !== -1;
const column = {
@ -235,7 +244,7 @@ describe('Table.filter', () => {
.simulate('click');
wrapper
.find('FilterDropdown')
.find('.confirm')
.find('.ant-table-filter-dropdown-btns .ant-btn-primary')
.simulate('click');
expect(wrapper.find('FilterDropdown').props().filterState.filteredKeys).toEqual(['boy']);
wrapper.setProps({ dataSource: [...data, { key: 999, name: 'Chris' }] });
@ -379,7 +388,7 @@ describe('Table.filter', () => {
.simulate('click');
wrapper
.find('FilterDropdown')
.find('.confirm')
.find('.ant-table-filter-dropdown-btns .ant-btn-primary')
.simulate('click');
expect(handleChange).toHaveBeenCalledWith(
@ -400,75 +409,73 @@ describe('Table.filter', () => {
.find('.ant-dropdown-trigger')
.first()
.simulate('click');
wrapper.find('.clear').simulate('click');
wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-link').simulate('click');
expect(handleChange).not.toHaveBeenCalled();
});
// enzyme not correct update function component under mini store.
// It's correct in `instance().props` but failed in `props()`
// it.skip('three levels menu', () => {
// const filters = [
// { text: 'Upper', value: 'Upper' },
// { text: 'Lower', value: 'Lower' },
// {
// text: 'Level2',
// value: 'Level2',
// children: [
// { text: 'Large', value: 'Large' },
// { text: 'Small', value: 'Small' },
// {
// text: 'Level3',
// value: 'Level3',
// children: [
// { text: 'Black', value: 'Black' },
// { text: 'White', value: 'White' },
// { text: 'Jack', value: 'Jack' },
// ],
// },
// ],
// },
// ];
// const wrapper = mount(
// createTable({
// columns: [
// {
// ...column,
// filters,
// },
// ],
// }),
// );
// jest.useFakeTimers();
// const dropdownWrapper = getDropdownWrapper(wrapper);
// expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
it('three levels menu', () => {
const filters = [
{ text: 'Upper', value: 'Upper' },
{ text: 'Lower', value: 'Lower' },
{
text: 'Level2',
value: 'Level2',
children: [
{ text: 'Large', value: 'Large' },
{ text: 'Small', value: 'Small' },
{
text: 'Level3',
value: 'Level3',
children: [
{ text: 'Black', value: 'Black' },
{ text: 'White', value: 'White' },
{ text: 'Jack', value: 'Jack' },
],
},
],
},
];
const wrapper = mount(
createTable({
columns: [
{
...column,
filters,
},
],
}),
);
jest.useFakeTimers();
// // select
// dropdownWrapper
// .find('.ant-dropdown-menu-submenu-title')
// .at(0)
// .simulate('mouseEnter');
// jest.runAllTimers();
// dropdownWrapper.update();
// dropdownWrapper
// .find('.ant-dropdown-menu-submenu-title')
// .at(1)
// .simulate('mouseEnter');
// jest.runAllTimers();
// dropdownWrapper.update();
// dropdownWrapper
// .find('MenuItem')
// .last()
// .simulate('click');
// dropdownWrapper.find('.confirm').simulate('click');
// wrapper.update();
// expect(renderedNames(wrapper)).toEqual(['Jack']);
// dropdownWrapper
// .find('MenuItem')
// .last()
// .simulate('click');
// jest.useRealTimers();
// });
let dropdownWrapper = getDropdownWrapper(wrapper);
expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
// select
dropdownWrapper
.find('.ant-dropdown-menu-submenu-title')
.at(0)
.simulate('mouseEnter');
jest.runAllTimers();
dropdownWrapper = getDropdownWrapper(wrapper);
dropdownWrapper
.find('.ant-dropdown-menu-submenu-title')
.at(1)
.simulate('mouseEnter');
jest.runAllTimers();
dropdownWrapper = getDropdownWrapper(wrapper);
dropdownWrapper
.find('MenuItem')
.last()
.simulate('click');
dropdownWrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
wrapper.update();
expect(renderedNames(wrapper)).toEqual(['Jack']);
dropdownWrapper
.find('MenuItem')
.last()
.simulate('click');
jest.useRealTimers();
});
describe('should support value types', () => {
[
@ -501,7 +508,7 @@ describe('Table.filter', () => {
.first()
.simulate('click');
// This test can be remove if refactor
wrapper.find('.confirm').simulate('click');
wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
wrapper.update();
expect(
@ -581,11 +588,11 @@ describe('Table.filter', () => {
.find('MenuItem')
.first()
.simulate('click');
wrapper.find('.confirm').simulate('click');
wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
wrapper.update();
expect(renderedNames(wrapper)).toEqual(['Jack']);
wrapper.find('.clear').simulate('click');
wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-link').simulate('click');
wrapper.update();
expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
});
@ -872,7 +879,7 @@ describe('Table.filter', () => {
.find('MenuItem')
.first()
.simulate('click');
wrapper.find('.confirm').simulate('click');
wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
expect(onChange).toHaveBeenCalled();
onChange.mockReset();
expect(onChange).not.toHaveBeenCalled();
@ -890,7 +897,7 @@ describe('Table.filter', () => {
.find('MenuItem')
.first()
.simulate('click');
wrapper.find('.confirm').simulate('click');
wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
expect(onChange).toHaveBeenCalled();
});
@ -1025,7 +1032,7 @@ describe('Table.filter', () => {
.find('MenuItem')
.first()
.simulate('click');
wrapper.find('.confirm').simulate('click');
wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
expect(handleChange).toHaveBeenCalledWith(
{
@ -1062,7 +1069,7 @@ describe('Table.filter', () => {
.find('MenuItem')
.first()
.simulate('click');
wrapper.find('.confirm').simulate('click');
wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
expect(handleChange).toHaveBeenCalledWith(
{
@ -1155,7 +1162,7 @@ describe('Table.filter', () => {
.find('.ant-dropdown-menu-item')
.first()
.simulate('click');
wrapper.find('.ant-table-filter-dropdown-link.confirm').simulate('click');
wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
expect(onChange).toHaveBeenCalledWith(
expect.anything(),
{
@ -1185,15 +1192,12 @@ describe('Table.filter', () => {
}),
);
expect(wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').text()).toEqual(
'Bamboo',
);
expect(
wrapper
.find('.ant-table-filter-dropdown-link')
.first()
.text(),
).toEqual('Bamboo');
expect(
wrapper
.find('.ant-table-filter-dropdown-link')
.find('.ant-table-filter-dropdown-btns .ant-btn-link')
.last()
.text(),
).toEqual('Reset');

2
components/table/__tests__/Table.rowSelection.test.js
View File

@ -623,7 +623,7 @@ describe('Table.rowSelection', () => {
.simulate('click');
});
wrapper
.find('.ant-table-filter-dropdown-btns .ant-table-filter-dropdown-link.confirm')
.find('.ant-table-filter-dropdown-btns .ant-btn-primary')
.simulate('click');
}

92
components/table/__tests__/__snapshots__/Table.filter.test.js.snap
View File

@ -508,16 +508,23 @@ exports[`Table.filter renders menu correctly 1`] = `
<div
class="ant-table-filter-dropdown-btns"
>
<a
class="ant-table-filter-dropdown-link confirm"
<button
class="ant-btn ant-btn-link ant-btn-sm"
disabled=""
type="button"
>
OK
</a>
<a
class="ant-table-filter-dropdown-link clear"
<span>
Reset
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
type="button"
>
Reset
</a>
<span>
OK
</span>
</button>
</div>
</div>
</div>
@ -605,16 +612,23 @@ exports[`Table.filter renders radio filter correctly 1`] = `
<div
class="ant-table-filter-dropdown-btns"
>
<a
class="ant-table-filter-dropdown-link confirm"
<button
class="ant-btn ant-btn-link ant-btn-sm"
disabled=""
type="button"
>
OK
</a>
<a
class="ant-table-filter-dropdown-link clear"
<span>
Reset
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
type="button"
>
Reset
</a>
<span>
OK
</span>
</button>
</div>
</div>
</div>
@ -769,16 +783,23 @@ exports[`Table.filter should support getPopupContainer 1`] = `
<div
class="ant-table-filter-dropdown-btns"
>
<a
class="ant-table-filter-dropdown-link confirm"
<button
class="ant-btn ant-btn-link ant-btn-sm"
disabled=""
type="button"
>
OK
</a>
<a
class="ant-table-filter-dropdown-link clear"
<span>
Reset
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
type="button"
>
Reset
</a>
<span>
OK
</span>
</button>
</div>
</div>
</div>
@ -995,16 +1016,23 @@ exports[`Table.filter should support getPopupContainer from ConfigProvider 1`] =
<div
class="ant-table-filter-dropdown-btns"
>
<a
class="ant-table-filter-dropdown-link confirm"
<button
class="ant-btn ant-btn-link ant-btn-sm"
disabled=""
type="button"
>
OK
</a>
<a
class="ant-table-filter-dropdown-link clear"
<span>
Reset
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
type="button"
>
Reset
</a>
<span>
OK
</span>
</button>
</div>
</div>
</div>

14
components/table/hooks/useFilter/FilterDropdown.tsx
View File

@ -1,6 +1,7 @@
import * as React from 'react';
import classNames from 'classnames';
import FilterFilled from '@ant-design/icons/FilterFilled';
import Button from '../../../button';
import Menu from '../../../menu';
import Checkbox from '../../../checkbox';
import Radio from '../../../radio';
@ -172,6 +173,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
} else if (column.filterDropdown) {
dropdownContent = column.filterDropdown;
} else {
const selectedKeys = (getFilteredKeysSync() || []) as any;
dropdownContent = (
<>
<Menu
@ -181,7 +183,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
onClick={onMenuClick}
onSelect={onSelectKeys}
onDeselect={onSelectKeys}
selectedKeys={(getFilteredKeysSync() || []) as any}
selectedKeys={selectedKeys}
getPopupContainer={getPopupContainer}
openKeys={openKeys}
onOpenChange={onOpenChange}
@ -189,12 +191,12 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
{renderFilterItems(column.filters!, prefixCls, getFilteredKeysSync(), filterMultiple)}
</Menu>
<div className={`${prefixCls}-dropdown-btns`}>
<a className={`${prefixCls}-dropdown-link confirm`} onClick={onConfirm}>
{locale.filterConfirm}
</a>
<a className={`${prefixCls}-dropdown-link clear`} onClick={onReset}>
<Button type="link" size="small" disabled={selectedKeys.length === 0} onClick={onReset}>
{locale.filterReset}
</a>
</Button>
<Button type="primary" size="small" onClick={onConfirm}>
{locale.filterConfirm}
</Button>
</div>
</>
);

4
components/table/style/index.less
View File

@ -329,7 +329,7 @@
box-shadow: none;
}
min-width: 96px;
min-width: 120px;
background-color: @table-filter-dropdown-bg;
border-radius: @border-radius-base;
@ -352,7 +352,7 @@
&-btns {
display: flex;
justify-content: space-between;
padding: 7px 8px;
padding: 7px 8px 7px 3px;
overflow: hidden;
background-color: @table-filter-btns-bg;
border-top: @border-width-base @border-style-base @border-color-split;

1
components/table/style/index.tsx
View File

@ -3,6 +3,7 @@ import './index.less';
// style dependencies
// deps-lint-skip: menu
import '../../button/style';
import '../../empty/style';
import '../../radio/style';
import '../../checkbox/style';