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

fix: Center not work in Table (#22858)

Browse Source 
* fix: Center not work in Table

* update snapshot

* fix test case
This commit is contained in:
二货机器人 2020-04-02 18:53:49 +08:00 committed by GitHub
parent de827d7eb7
commit b28b2007be
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 798 additions and 725 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11629,59 +11629,63 @@ exports[`ConfigProvider components Table configProvider 1`] = `
class="config-table-filter-column-title"
>
<div
class="config-table-column-sorters"
class="config-table-column-sorters-with-tooltip"
>
<span>
Name
</span>
<span
class="config-table-column-sorter config-table-column-sorter-full"
<div
class="config-table-column-sorters"
>
<span>
Name
</span>
<span
class="config-table-column-sorter-inner"
class="config-table-column-sorter config-table-column-sorter-full"
>
<span
aria-label="caret-up"
class="anticon anticon-caret-up config-table-column-sorter-up"
role="img"
class="config-table-column-sorter-inner"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<span
aria-label="caret-up"
class="anticon anticon-caret-up config-table-column-sorter-up"
role="img"
>
<path
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
/>
</svg>
</span>
<span
aria-label="caret-down"
class="anticon anticon-caret-down config-table-column-sorter-down"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
/>
</svg>
</span>
<span
aria-label="caret-down"
class="anticon anticon-caret-down config-table-column-sorter-down"
role="img"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
</span>
</span>
</span>
</span>
</div>
</div>
</span>
<span
@ -11899,59 +11903,63 @@ exports[`ConfigProvider components Table normal 1`] = `
class="ant-table-filter-column-title"
>
<div
class="ant-table-column-sorters"
class="ant-table-column-sorters-with-tooltip"
>
<span>
Name
</span>
<span
class="ant-table-column-sorter ant-table-column-sorter-full"
<div
class="ant-table-column-sorters"
>
<span>
Name
</span>
<span
class="ant-table-column-sorter-inner"
class="ant-table-column-sorter ant-table-column-sorter-full"
>
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
class="ant-table-column-sorter-inner"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
>
<path
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
/>
</svg>
</span>
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
/>
</svg>
</span>
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
</span>
</span>
</span>
</span>
</div>
</div>
</span>
<span
@ -12169,59 +12177,63 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
class="prefix-Table-filter-column-title"
>
<div
class="prefix-Table-column-sorters"
class="prefix-Table-column-sorters-with-tooltip"
>
<span>
Name
</span>
<span
class="prefix-Table-column-sorter prefix-Table-column-sorter-full"
<div
class="prefix-Table-column-sorters"
>
<span>
Name
</span>
<span
class="prefix-Table-column-sorter-inner"
class="prefix-Table-column-sorter prefix-Table-column-sorter-full"
>
<span
aria-label="caret-up"
class="anticon anticon-caret-up prefix-Table-column-sorter-up"
role="img"
class="prefix-Table-column-sorter-inner"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<span
aria-label="caret-up"
class="anticon anticon-caret-up prefix-Table-column-sorter-up"
role="img"
>
<path
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
/>
</svg>
</span>
<span
aria-label="caret-down"
class="anticon anticon-caret-down prefix-Table-column-sorter-down"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
/>
</svg>
</span>
<span
aria-label="caret-down"
class="anticon anticon-caret-down prefix-Table-column-sorter-down"
role="img"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
</span>
</span>
</span>
</span>
</div>
</div>
</span>
<span

19
components/table/__tests__/Table.sorter.test.js
View File

@ -155,38 +155,37 @@ describe('Table.sorter', () => {
jest.useFakeTimers();
const wrapper = mount(createTable({}));
// default show sorter tooltip
wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseenter');
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy();
wrapper.find('.ant-table-column-sorters').simulate('mouseout');
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseout');
// set table props showSorterTooltip is false
wrapper.setProps({ showSorterTooltip: false });
wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
expect(wrapper.find('.ant-table-column-sorters-with-tooltip')).toHaveLength(0);
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open').length).toBeFalsy();
wrapper.find('.ant-table-column-sorters').simulate('mouseout');
expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0);
// set table props showSorterTooltip is false, column showSorterTooltip is true
wrapper.setProps({
showSorterTooltip: false,
columns: [{ ...column, showSorterTooltip: true }],
});
wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseenter');
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy();
wrapper.find('.ant-table-column-sorters').simulate('mouseout');
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseout');
// set table props showSorterTooltip is true, column showSorterTooltip is false
wrapper.setProps({
showSorterTooltip: true,
columns: [{ ...column, showSorterTooltip: false }],
});
wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
expect(wrapper.find('.ant-table-column-sorters-with-tooltip')).toHaveLength(0);
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open').length).toBeFalsy();
wrapper.find('.ant-table-column-sorters').simulate('mouseout');
expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0);
});
it('works with grouping columns in controlled mode', () => {

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

@ -9,59 +9,63 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
class="ant-table-cell ant-table-column-has-sorters"
>
<div
class="ant-table-column-sorters"
class="ant-table-column-sorters-with-tooltip"
>
<span>
Name
</span>
<span
class="ant-table-column-sorter ant-table-column-sorter-full"
<div
class="ant-table-column-sorters"
>
<span>
Name
</span>
<span
class="ant-table-column-sorter-inner"
class="ant-table-column-sorter ant-table-column-sorter-full"
>
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
class="ant-table-column-sorter-inner"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
>
<path
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
/>
</svg>
</span>
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
/>
</svg>
</span>
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
</span>
</span>
</span>
</span>
</div>
</div>
</th>
</tr>
@ -99,59 +103,63 @@ exports[`Table.sorter should support defaultOrder in Column 1`] = `
class="ant-table-cell ant-table-column-sort ant-table-column-has-sorters"
>
<div
class="ant-table-column-sorters"
class="ant-table-column-sorters-with-tooltip"
>
<span>
Age
</span>
<span
class="ant-table-column-sorter ant-table-column-sorter-full"
<div
class="ant-table-column-sorters"
>
<span>
Age
</span>
<span
class="ant-table-column-sorter-inner"
class="ant-table-column-sorter ant-table-column-sorter-full"
>
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up active"
role="img"
class="ant-table-column-sorter-inner"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up active"
role="img"
>
<path
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
/>
</svg>
</span>
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
/>
</svg>
</span>
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
</span>
</span>
</span>
</span>
</div>
</div>
</th>
</tr>

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

File diff suppressed because it is too large Load Diff

4
components/table/hooks/useSorter.tsx
View File

@ -167,7 +167,9 @@ function injectSorter<RecordType>(
</div>
);
return showSorterTooltip ? (
<Tooltip title={sortTip}>{renderSortTitle}</Tooltip>
<Tooltip title={sortTip}>
<div className={`${prefixCls}-column-sorters-with-tooltip`}>{renderSortTitle}</div>
</Tooltip>
) : (
renderSortTitle
);

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

@ -199,10 +199,14 @@
background: @table-body-sort-bg;
}
&-column-sorters-with-tooltip {
display: inline-block;
width: 100%;
}
&-column-sorters {
display: inline-flex;
align-items: center;
width: 100%;
padding: @table-padding-vertical @table-padding-horizontal;
}
@ -361,7 +365,7 @@
top: 0;
right: -10px;
cursor: pointer;
transition: all .3s;
transition: all 0.3s;
.@{iconfont-css-prefix} {
.iconfont-size-under-12px(10px);