mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 09:26:06 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

Fix sorter icon click area overflow in Table

Browse Source 
close #8979
This commit is contained in:
afc163 2018-02-09 15:50:08 +08:00
parent b5f88c0005
commit 2909e5f651
5 changed files with 95 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/table/Table.tsx
View File

@ -749,6 +749,11 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
{filterDropdown}
</span>
);
if (sortButton || filterDropdown) {
column.className = classNames(`${prefixCls}-column-has-filters`, column.className);
}
return column;
});
}

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

@ -46,7 +46,7 @@ exports[`Table.filter renders filter correctly 1`] = `
>
<tr>
<th
class=""
class="ant-table-column-has-filters"
>
<span>
Name
@ -65,7 +65,7 @@ exports[`Table.filter renders filter correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -78,7 +78,7 @@ exports[`Table.filter renders filter correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -91,7 +91,7 @@ exports[`Table.filter renders filter correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -104,7 +104,7 @@ exports[`Table.filter renders filter correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"

2
components/table/__tests__/__snapshots__/Table.sorter.test.js.snap
View File

@ -6,7 +6,7 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
>
<tr>
<th
class=""
class="ant-table-column-has-filters"
>
<span>
Name

150
components/table/__tests__/__snapshots__/demo.test.js.snap
View File

@ -36,7 +36,7 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
>
<tr>
<th
class=""
class="ant-table-column-has-filters"
>
<span>
Name
@ -63,7 +63,7 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
</span>
</th>
<th
class=""
class="ant-table-column-has-filters"
>
<span>
Gender
@ -879,7 +879,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
>
<tr>
<th
class=""
class="ant-table-column-has-filters"
>
<span>
Name
@ -898,7 +898,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
</span>
</th>
<th
class=""
class="ant-table-column-has-filters"
>
<span>
Address
@ -917,7 +917,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -931,7 +931,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
32
</td>
<td
class=""
class="ant-table-column-has-filters"
>
New York No. 1 Lake Park
</td>
@ -940,7 +940,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -954,7 +954,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
42
</td>
<td
class=""
class="ant-table-column-has-filters"
>
London No. 1 Lake Park
</td>
@ -963,7 +963,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -977,7 +977,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
32
</td>
<td
class=""
class="ant-table-column-has-filters"
>
Sidney No. 1 Lake Park
</td>
@ -986,7 +986,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -1000,7 +1000,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
32
</td>
<td
class=""
class="ant-table-column-has-filters"
>
London No. 2 Lake Park
</td>
@ -6983,7 +6983,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
>
<tr>
<th
class=""
class="ant-table-column-has-filters"
rowspan="4"
>
<span>
@ -7021,7 +7021,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
</tr>
<tr>
<th
class=""
class="ant-table-column-has-filters"
rowspan="3"
>
<span>
@ -7147,7 +7147,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -7156,7 +7156,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
John Brown
</td>
<td
class=""
class="ant-table-column-has-filters"
>
1
</td>
@ -7195,7 +7195,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -7204,7 +7204,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
John Brown
</td>
<td
class=""
class="ant-table-column-has-filters"
>
2
</td>
@ -7243,7 +7243,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -7252,7 +7252,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
John Brown
</td>
<td
class=""
class="ant-table-column-has-filters"
>
3
</td>
@ -7291,7 +7291,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -7300,7 +7300,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
John Brown
</td>
<td
class=""
class="ant-table-column-has-filters"
>
4
</td>
@ -7339,7 +7339,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -7348,7 +7348,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
John Brown
</td>
<td
class=""
class="ant-table-column-has-filters"
>
5
</td>
@ -7387,7 +7387,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -7396,7 +7396,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
John Brown
</td>
<td
class=""
class="ant-table-column-has-filters"
>
6
</td>
@ -7435,7 +7435,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -7444,7 +7444,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
John Brown
</td>
<td
class=""
class="ant-table-column-has-filters"
>
7
</td>
@ -7483,7 +7483,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -7492,7 +7492,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
John Brown
</td>
<td
class=""
class="ant-table-column-has-filters"
>
8
</td>
@ -7531,7 +7531,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -7540,7 +7540,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
John Brown
</td>
<td
class=""
class="ant-table-column-has-filters"
>
9
</td>
@ -7579,7 +7579,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -7588,7 +7588,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
John Brown
</td>
<td
class=""
class="ant-table-column-has-filters"
>
10
</td>
@ -7646,7 +7646,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
>
<tr>
<th
class=""
class="ant-table-column-has-filters"
rowspan="4"
>
<span>
@ -7684,7 +7684,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -7697,7 +7697,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -7710,7 +7710,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -7723,7 +7723,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -7736,7 +7736,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -7749,7 +7749,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -7762,7 +7762,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -7775,7 +7775,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -7788,7 +7788,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -7801,7 +7801,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -8086,7 +8086,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
>
<tr>
<th
class=""
class="ant-table-column-has-filters"
>
<span>
Name
@ -8117,7 +8117,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
</span>
</th>
<th
class="ant-table-column-sort"
class="ant-table-column-has-filters ant-table-column-sort"
>
<span>
Age
@ -8144,7 +8144,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
</span>
</th>
<th
class=""
class="ant-table-column-has-filters"
>
<span>
Address
@ -8183,7 +8183,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -8192,12 +8192,12 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
Jim Green
</td>
<td
class="ant-table-column-sort"
class="ant-table-column-has-filters ant-table-column-sort"
>
42
</td>
<td
class=""
class="ant-table-column-has-filters"
>
London No. 1 Lake Park
</td>
@ -8206,7 +8206,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -8215,12 +8215,12 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
John Brown
</td>
<td
class="ant-table-column-sort"
class="ant-table-column-has-filters ant-table-column-sort"
>
32
</td>
<td
class=""
class="ant-table-column-has-filters"
>
New York No. 1 Lake Park
</td>
@ -8229,7 +8229,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -8238,12 +8238,12 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
Joe Black
</td>
<td
class="ant-table-column-sort"
class="ant-table-column-has-filters ant-table-column-sort"
>
32
</td>
<td
class=""
class="ant-table-column-has-filters"
>
Sidney No. 1 Lake Park
</td>
@ -8252,7 +8252,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -8261,12 +8261,12 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
Jim Red
</td>
<td
class="ant-table-column-sort"
class="ant-table-column-has-filters ant-table-column-sort"
>
32
</td>
<td
class=""
class="ant-table-column-has-filters"
>
London No. 2 Lake Park
</td>
@ -8974,7 +8974,7 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
>
<tr>
<th
class=""
class="ant-table-column-has-filters"
>
<span>
Name
@ -9005,7 +9005,7 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
</span>
</th>
<th
class=""
class="ant-table-column-has-filters"
>
<span>
Age
@ -9032,7 +9032,7 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
</span>
</th>
<th
class=""
class="ant-table-column-has-filters"
>
<span>
Address
@ -9071,7 +9071,7 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -9080,12 +9080,12 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
John Brown
</td>
<td
class=""
class="ant-table-column-has-filters"
>
32
</td>
<td
class=""
class="ant-table-column-has-filters"
>
New York No. 1 Lake Park
</td>
@ -9094,7 +9094,7 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -9103,12 +9103,12 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
Jim Green
</td>
<td
class=""
class="ant-table-column-has-filters"
>
42
</td>
<td
class=""
class="ant-table-column-has-filters"
>
London No. 1 Lake Park
</td>
@ -9117,7 +9117,7 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -9126,12 +9126,12 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
Joe Black
</td>
<td
class=""
class="ant-table-column-has-filters"
>
32
</td>
<td
class=""
class="ant-table-column-has-filters"
>
Sidney No. 1 Lake Park
</td>
@ -9140,7 +9140,7 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
class="ant-table-column-has-filters"
>
<span
class="ant-table-row-indent indent-level-0"
@ -9149,12 +9149,12 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
Jim Red
</td>
<td
class=""
class="ant-table-column-has-filters"
>
32
</td>
<td
class=""
class="ant-table-column-has-filters"
>
London No. 2 Lake Park
</td>

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

@ -64,6 +64,11 @@
.@{table-prefix-cls}-filter-selected.@{iconfont-css-prefix}-filter {
color: @primary-color;
}
// https://github.com/ant-design/ant-design/issues/8979
&.@{table-prefix-cls}-column-has-filters {
overflow: hidden;
}
}
&-tbody > tr > td {
@ -223,8 +228,9 @@
width: 14px;
height: 6px;
cursor: pointer;
position: relative;
&:hover .@{iconfont-css-prefix} {
color: @text-color;
color: @primary-4;
}
&.on {
.@{iconfont-css-prefix}-caret-up,
@ -243,11 +249,11 @@
}
&-up:after {
top: -30px;
bottom: -2px;
}
&-down:after {
bottom: -30px;
top: 2px;
}
.@{iconfont-css-prefix}-caret-up,