Skip to content

Commit

Permalink
Merge pull request #22072 from ant-design/new-table-filter-menu-buttons
Browse files Browse the repository at this point in the history 
style: 馃拕 New table filter menu buttons
  • Loading branch information
@afc163
afc163 committed Mar 10, 2020
2 parents 584d0ae + c5c1b6d commit 145f727
Show file tree
Hide file tree
Showing 8 changed files with 204 additions and 148 deletions.
69 changes: 45 additions & 24 deletions components/config-provider/__tests__/__snapshots__/components.test.js.snap
View file
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion components/dropdown/style/index.less
View file
Expand Up @@ -94,7 +94,7 @@
ul {
margin-right: 0.3em;
margin-left: 0.3em;
padding: 0;
padding: @dropdown-edge-child-vertical-padding 0;
}
}

Expand Down
168 changes: 86 additions & 82 deletions components/table/__tests__/Table.filter.test.js
View file
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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' }] });
Expand Down Expand Up @@ -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(
Expand All @@ -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']);

// // 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();
// });
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();

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', () => {
[
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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']);
});
Expand Down Expand Up @@ -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();
Expand All @@ -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();
});

Expand Down Expand Up @@ -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(
{
Expand Down Expand Up @@ -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(
{
Expand Down Expand Up @@ -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(),
{
Expand Down Expand Up @@ -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');
Expand Down
2 changes: 1 addition & 1 deletion components/table/__tests__/Table.rowSelection.test.js
View file
Expand Up @@ -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');
}

Expand Down

0 comments on commit 145f727

Please sign in to comment.