Skip to content

Commit

Permalink
feat: adds ability to override filter renderer without migrate to a f…
Browse files Browse the repository at this point in the history 
…ully controlled component
  • Loading branch information
@chrvadala @yesmeck
chrvadala authored and yesmeck committed Jul 2, 2018
1 parent fb96c9d commit 59cc3a8
Show file tree
Hide file tree
Showing 6 changed files with 462 additions and 3 deletions.
40 changes: 40 additions & 0 deletions components/table/__tests__/Table.filter.test.js
View file
Expand Up @@ -84,6 +84,46 @@ describe('Table.filter', () => {
expect(dropdownWrapper).toMatchSnapshot(); expect(dropdownWrapper).toMatchSnapshot();
}); });


it('override custom filter correctly', () => {
const filter = ({ prefixCls, setSelectedKeys, confirm, clearFilters }) => {
return (
<div className={`${prefixCls}-view`} id="customFilter">
<span onClick={() => setSelectedKeys([42])} id="setSelectedKeys">setSelectedKeys</span>
<span onClick={() => confirm()} id="confirm">Confirm</span>
<span onClick={() => clearFilters()} id="reset">Reset</span>
</div>
);
};

const wrapper = mount(createTable({
columns: [{
...column,
filterDropdown: filter,
}],
}));

const filterMenu = wrapper.find('FilterMenu').instance();

// check if renderer well
wrapper.find('Trigger').simulate('click');
expect(wrapper.find('#customFilter')).toMatchSnapshot();

// try to use reset btn
expect(filterMenu.state.selectedKeys).toEqual([]);
wrapper.find('#setSelectedKeys').simulate('click');
expect(filterMenu.state.selectedKeys).toEqual([42]);
wrapper.find('#reset').simulate('click');
expect(filterMenu.state.selectedKeys).toEqual([]);

// try to use confirm btn
wrapper.find('Trigger').simulate('click');
wrapper.find('#setSelectedKeys').simulate('click');
expect(filterMenu.state.visible).toBe(true);
wrapper.find('#confirm').simulate('click');
expect(filterMenu.state.selectedKeys).toEqual([42]);
expect(filterMenu.state.visible).toBe(false);
});

it('can be controlled by filterDropdownVisible', () => { it('can be controlled by filterDropdownVisible', () => {
const wrapper = mount(createTable({ const wrapper = mount(createTable({
columns: [{ columns: [{
Expand Down
26 changes: 26 additions & 0 deletions components/table/__tests__/__snapshots__/Table.filter.test.js.snap
View file
@@ -1,5 +1,31 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP


exports[`Table.filter override custom filter correctly 1`] = `
<div
className="ant-dropdown-custom-view"
id="customFilter"
>
<span
id="setSelectedKeys"
onClick={[Function]}
>
setSelectedKeys
</span>
<span
id="confirm"
onClick={[Function]}
>
Confirm
</span>
<span
id="reset"
onClick={[Function]}
>
Reset
</span>
</div>
`;

exports[`Table.filter renders custom content correctly 1`] = ` exports[`Table.filter renders custom content correctly 1`] = `
<div> <div>
<div <div
Expand Down
285 changes: 285 additions & 0 deletions components/table/__tests__/__snapshots__/demo.test.js.snap 100644 → 100755
View file
Expand Up @@ -8910,6 +8910,291 @@ exports[`renders ./components/table/demo/nested-table.md correctly 1`] = `
</div> </div>
`; `;


exports[`renders ./components/table/demo/override-filter-panel.md correctly 1`] = `
<div
class="ant-table-wrapper"
>
<div
class="ant-spin-nested-loading"
>
<div
class="ant-spin-container"
>
<div
class="ant-table ant-table-default ant-table-scroll-position-left"
>
<div
class="ant-table-content"
>
<div
class="ant-table-body"
>
<table
class=""
>
<colgroup>
<col />
<col />
<col />
<col />
</colgroup>
<thead
class="ant-table-thead"
>
<tr>
<th
class=""
>
<span>
Name
</span>
</th>
<th
class="ant-table-column-has-filters"
>
<span>
Age
<i
class="anticon anticon-filter ant-dropdown-trigger"
title="Filter menu"
/>
</span>
</th>
<th
class=""
>
<span>
Address
</span>
</th>
<th
class=""
>
<span>
Action
</span>
</th>
</tr>
</thead>
<tbody
class="ant-table-tbody"
>
<tr
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
>
<span
class="ant-table-row-indent indent-level-0"
style="padding-left:0px"
/>
<a
href="javascript:;"
>
John Brown
</a>
</td>
<td
class="ant-table-column-has-filters"
>
32
</td>
<td
class=""
>
New York No. 1 Lake Park
</td>
<td
class=""
>
<span>
<a
href="javascript:;"
>
Action 一 John Brown
</a>
<div
class="ant-divider ant-divider-vertical"
/>
<a
href="javascript:;"
>
Delete
</a>
<div
class="ant-divider ant-divider-vertical"
/>
<a
class="ant-dropdown-link"
href="javascript:;"
>
More actions
<i
class="anticon anticon-down"
/>
</a>
</span>
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
>
<span
class="ant-table-row-indent indent-level-0"
style="padding-left:0px"
/>
<a
href="javascript:;"
>
Jim Green
</a>
</td>
<td
class="ant-table-column-has-filters"
>
42
</td>
<td
class=""
>
London No. 1 Lake Park
</td>
<td
class=""
>
<span>
<a
href="javascript:;"
>
Action 一 Jim Green
</a>
<div
class="ant-divider ant-divider-vertical"
/>
<a
href="javascript:;"
>
Delete
</a>
<div
class="ant-divider ant-divider-vertical"
/>
<a
class="ant-dropdown-link"
href="javascript:;"
>
More actions
<i
class="anticon anticon-down"
/>
</a>
</span>
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
>
<span
class="ant-table-row-indent indent-level-0"
style="padding-left:0px"
/>
<a
href="javascript:;"
>
Joe Black
</a>
</td>
<td
class="ant-table-column-has-filters"
>
32
</td>
<td
class=""
>
Sidney No. 1 Lake Park
</td>
<td
class=""
>
<span>
<a
href="javascript:;"
>
Action 一 Joe Black
</a>
<div
class="ant-divider ant-divider-vertical"
/>
<a
href="javascript:;"
>
Delete
</a>
<div
class="ant-divider ant-divider-vertical"
/>
<a
class="ant-dropdown-link"
href="javascript:;"
>
More actions
<i
class="anticon anticon-down"
/>
</a>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<ul
class="ant-pagination ant-table-pagination"
unselectable="unselectable"
>
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
title="Previous Page"
>
<a
class="ant-pagination-item-link"
/>
</li>
<li
class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
tabindex="0"
title="1"
>
<a>
1
</a>
</li>
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-next"
title="Next Page"
>
<a
class="ant-pagination-item-link"
/>
</li>
</ul>
</div>
</div>
</div>
`;

exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = ` exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
<div> <div>
<div <div
Expand Down

0 comments on commit 59cc3a8

Please sign in to comment.