Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weโ€™ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

style: ๐Ÿ’„ New table filter menu buttons #22072

Merged
merged 4 commits into from
Mar 10, 2020
Merged

style: ๐Ÿ’„ New table filter menu buttons #22072

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a68db2d
:lipstick: update Table filter menu UI
afc163 Mar 10, 2020
15ca801
style: fix Dropdown sub menu edge padding missing
afc163 Mar 10, 2020
ebd31cd
test: fix test cases
afc163 Mar 10, 2020
c5c1b6d
fix missing style dep and uncomment test case
afc163 Mar 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 45 additions & 24 deletions components/config-provider/__tests__/__snapshots__/components.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

้‡ๆ–ฐๅ–ไธ€ไธ‹ๅฐฑ่กŒไบ†ใ€‚

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
Open in desktop
Original file line number Diff line number Diff line change
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
Loading