mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-25 03:29:59 +08:00
Code Issues Actions 35 Packages Projects Releases Wiki Activity

Merge pull request #15895 from ant-design/table-align-right

Browse Source 
fix: Table align right not work on title
This commit is contained in:
偏右 2019-04-07 16:53:46 +08:00 committed by GitHub
commit 79aa04bf5a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 4429 additions and 3333 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11417,60 +11417,64 @@ exports[`ConfigProvider components Table configProvider 1`] = `
<th
class="config-table-column-has-actions config-table-column-has-filters config-table-column-has-sorters"
>
<div
class="config-table-column-sorters"
<span
class="config-table-header-column"
>
<span
class="config-table-column-title"
<div
class="config-table-column-sorters"
>
Name
</span>
<span
class="config-table-column-sorter"
>
<div
class="config-table-column-sorter-inner config-table-column-sorter-inner-full"
title="Sort"
<span
class="config-table-column-title"
>
<i
aria-label="icon: caret-up"
class="anticon anticon-caret-up config-table-column-sorter-up off"
Name
</span>
<span
class="config-table-column-sorter"
>
<div
class="config-table-column-sorter-inner config-table-column-sorter-inner-full"
title="Sort"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<i
aria-label="icon: caret-up"
class="anticon anticon-caret-up config-table-column-sorter-up off"
>
<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>
</i>
<i
aria-label="icon: caret-down"
class="anticon anticon-caret-down config-table-column-sorter-down off"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
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>
</i>
<i
aria-label="icon: caret-down"
class="anticon anticon-caret-down config-table-column-sorter-down off"
>
<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>
</i>
</div>
</span>
</div>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
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>
</i>
</div>
</span>
</div>
</span>
<i
aria-label="icon: filter"
class="anticon anticon-filter config-table-filter-open config-dropdown-trigger config-dropdown-open"
@ -11628,60 +11632,64 @@ exports[`ConfigProvider components Table normal 1`] = `
<th
class="ant-table-column-has-actions ant-table-column-has-filters ant-table-column-has-sorters"
>
<div
class="ant-table-column-sorters"
<span
class="ant-table-header-column"
>
<span
class="ant-table-column-title"
<div
class="ant-table-column-sorters"
>
Name
</span>
<span
class="ant-table-column-sorter"
>
<div
class="ant-table-column-sorter-inner ant-table-column-sorter-inner-full"
title="Sort"
<span
class="ant-table-column-title"
>
<i
aria-label="icon: caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up off"
Name
</span>
<span
class="ant-table-column-sorter"
>
<div
class="ant-table-column-sorter-inner ant-table-column-sorter-inner-full"
title="Sort"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<i
aria-label="icon: caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up off"
>
<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>
</i>
<i
aria-label="icon: caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down off"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
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>
</i>
<i
aria-label="icon: caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down off"
>
<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>
</i>
</div>
</span>
</div>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
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>
</i>
</div>
</span>
</div>
</span>
<i
aria-label="icon: filter"
class="anticon anticon-filter ant-table-filter-open ant-dropdown-trigger ant-dropdown-open"
@ -11839,60 +11847,64 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
<th
class="prefix-Table-column-has-actions prefix-Table-column-has-filters prefix-Table-column-has-sorters"
>
<div
class="prefix-Table-column-sorters"
<span
class="prefix-Table-header-column"
>
<span
class="prefix-Table-column-title"
<div
class="prefix-Table-column-sorters"
>
Name
</span>
<span
class="prefix-Table-column-sorter"
>
<div
class="prefix-Table-column-sorter-inner prefix-Table-column-sorter-inner-full"
title="Sort"
<span
class="prefix-Table-column-title"
>
<i
aria-label="icon: caret-up"
class="anticon anticon-caret-up prefix-Table-column-sorter-up off"
Name
</span>
<span
class="prefix-Table-column-sorter"
>
<div
class="prefix-Table-column-sorter-inner prefix-Table-column-sorter-inner-full"
title="Sort"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<i
aria-label="icon: caret-up"
class="anticon anticon-caret-up prefix-Table-column-sorter-up off"
>
<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>
</i>
<i
aria-label="icon: caret-down"
class="anticon anticon-caret-down prefix-Table-column-sorter-down off"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
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>
</i>
<i
aria-label="icon: caret-down"
class="anticon anticon-caret-down prefix-Table-column-sorter-down off"
>
<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>
</i>
</div>
</span>
</div>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
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>
</i>
</div>
</span>
</div>
</span>
<i
aria-label="icon: filter"
class="anticon anticon-filter prefix-Table-filter-open ant-dropdown-trigger ant-dropdown-open"

48
components/empty/__tests__/__snapshots__/demo.test.js.snap
View File

@ -380,30 +380,38 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
<span
class="ant-table-header-column"
>
<div>
<span
class="ant-table-column-title"
>
Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Age
</span>
<span
class="ant-table-column-sorter"
/>
</div>
<span
class="ant-table-header-column"
>
<div>
<span
class="ant-table-column-title"
>
Age
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
</tr>
</thead>

48
components/locale-provider/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1756,16 +1756,20 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
<th
class="ant-table-column-has-actions ant-table-column-has-filters"
>
<div>
<span
class="ant-table-column-title"
>
Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
<span
class="ant-table-header-column"
>
<div>
<span
class="ant-table-column-title"
>
Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</span>
<i
aria-label="icon: filter"
class="anticon anticon-filter ant-dropdown-trigger"
@ -1790,16 +1794,20 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Age
</span>
<span
class="ant-table-column-sorter"
/>
</div>
<span
class="ant-table-header-column"
>
<div>
<span
class="ant-table-column-title"
>
Age
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
</tr>
</thead>

2112
components/locale-provider/__tests__/__snapshots__/index.test.js.snap
View File

File diff suppressed because it is too large Load Diff

14
components/table/Table.tsx
View File

@ -925,12 +925,14 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
[`${prefixCls}-column-sort`]: isSortColumn && sortOrder,
}),
title: [
<div key="title" className={sortButton ? `${prefixCls}-column-sorters` : undefined}>
<span className={`${prefixCls}-column-title`}>
{this.renderColumnTitle(column.title)}
</span>
<span className={`${prefixCls}-column-sorter`}>{sortButton}</span>
</div>,
<span key="title" className={`${prefixCls}-header-column`}>
<div className={sortButton ? `${prefixCls}-column-sorters` : undefined}>
<span className={`${prefixCls}-column-title`}>
{this.renderColumnTitle(column.title)}
</span>
<span className={`${prefixCls}-column-sorter`}>{sortButton}</span>
</div>
</span>,
filterDropdown,
],
onHeaderCell,

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

@ -96,16 +96,20 @@ exports[`Table.filter renders filter correctly 1`] = `
<th
class="ant-table-column-has-actions ant-table-column-has-filters"
>
<div>
<span
class="ant-table-column-title"
>
Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
<span
class="ant-table-header-column"
>
<div>
<span
class="ant-table-column-title"
>
Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</span>
<i
aria-label="icon: filter"
class="anticon anticon-filter ant-dropdown-trigger"

48
components/table/__tests__/__snapshots__/Table.pagination.test.js.snap
View File

@ -32,16 +32,20 @@ exports[`Table.pagination Accepts pagination as true 1`] = `
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
<span
class="ant-table-header-column"
>
<div>
<span
class="ant-table-column-title"
>
Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
</tr>
</thead>
@ -216,16 +220,20 @@ exports[`Table.pagination renders pagination correctly 1`] = `
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
<span
class="ant-table-header-column"
>
<div>
<span
class="ant-table-column-title"
>
Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
</tr>
</thead>

128
components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
View File

@ -38,48 +38,56 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
<th
class="ant-table-fixed-columns-in-body ant-table-selection-column"
>
<div>
<span
class="ant-table-column-title"
>
<div
class="ant-table-selection"
<span
class="ant-table-header-column"
>
<div>
<span
class="ant-table-column-title"
>
<label
class="ant-checkbox-wrapper"
<div
class="ant-table-selection"
>
<span
class="ant-checkbox"
<label
class="ant-checkbox-wrapper"
>
<input
class="ant-checkbox-input"
type="checkbox"
/>
<span
class="ant-checkbox-inner"
/>
</span>
</label>
</div>
</span>
<span
class="ant-table-column-sorter"
/>
</div>
class="ant-checkbox"
>
<input
class="ant-checkbox-input"
type="checkbox"
/>
<span
class="ant-checkbox-inner"
/>
</span>
</label>
</div>
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
<span
class="ant-table-header-column"
>
<div>
<span
class="ant-table-column-title"
>
Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
</tr>
</thead>
@ -255,34 +263,38 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
<th
class="ant-table-selection-column"
>
<div>
<span
class="ant-table-column-title"
>
<div
class="ant-table-selection"
<span
class="ant-table-header-column"
>
<div>
<span
class="ant-table-column-title"
>
<label
class="ant-checkbox-wrapper"
<div
class="ant-table-selection"
>
<span
class="ant-checkbox"
<label
class="ant-checkbox-wrapper"
>
<input
class="ant-checkbox-input"
type="checkbox"
/>
<span
class="ant-checkbox-inner"
/>
</span>
</label>
</div>
</span>
<span
class="ant-table-column-sorter"
/>
</div>
class="ant-checkbox"
>
<input
class="ant-checkbox-input"
type="checkbox"
/>
<span
class="ant-checkbox-inner"
/>
</span>
</label>
</div>
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
</tr>
</thead>

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

@ -8,60 +8,64 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
<th
class="ant-table-column-has-actions ant-table-column-has-sorters"
>
<div
class="ant-table-column-sorters"
<span
class="ant-table-header-column"
>
<span
class="ant-table-column-title"
<div
class="ant-table-column-sorters"
>
Name
</span>
<span
class="ant-table-column-sorter"
>
<div
class="ant-table-column-sorter-inner ant-table-column-sorter-inner-full"
title="Sort"
<span
class="ant-table-column-title"
>
<i
aria-label="icon: caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up off"
Name
</span>
<span
class="ant-table-column-sorter"
>
<div
class="ant-table-column-sorter-inner ant-table-column-sorter-inner-full"
title="Sort"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<i
aria-label="icon: caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up off"
>
<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>
</i>
<i
aria-label="icon: caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down off"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
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>
</i>
<i
aria-label="icon: caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down off"
>
<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>
</i>
</div>
</span>
</div>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
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>
</i>
</div>
</span>
</div>
</span>
</th>
</tr>
</thead>

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

@ -35,61 +35,77 @@ exports[`Table renders JSX correctly 1`] = `
class=""
colspan="2"
>
<div>
<span
class="ant-table-column-title"
>
Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
<span
class="ant-table-header-column"
>
<div>
<span
class="ant-table-column-title"
>
Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
rowspan="2"
>
<div>
<span
class="ant-table-column-title"
>
Age
</span>
<span
class="ant-table-column-sorter"
/>
</div>
<span
class="ant-table-header-column"
>
<div>
<span
class="ant-table-column-title"
>
Age
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
</tr>
<tr>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
First Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
<span
class="ant-table-header-column"
>
<div>
<span
class="ant-table-column-title"
>
First Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Last Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
<span
class="ant-table-header-column"
>
<div>
<span
class="ant-table-column-title"
>
Last Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
</tr>
</thead>

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

File diff suppressed because it is too large Load Diff

912
components/table/__tests__/__snapshots__/empty.test.js.snap
View File

File diff suppressed because it is too large Load Diff

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

@ -116,6 +116,9 @@
-webkit-background-clip: border-box; // For Chrome extra space: https://github.com/ant-design/ant-design/issues/14926
&.@{table-prefix-cls}-column-has-filters {
// https://github.com/ant-design/ant-design/issues/12650
padding-right: 30px !important;
.@{iconfont-css-prefix}-filter,
.@{table-prefix-cls}-filter-icon {
&.@{table-prefix-cls}-filter-open {
@ -154,41 +157,36 @@
}
}
}
// https://github.com/ant-design/ant-design/issues/12650
&.@{table-prefix-cls}-column-has-sorters,
&.@{table-prefix-cls}-column-has-filters {
padding-right: 30px !important;
}
&.@{table-prefix-cls}-column-has-sorters.@{table-prefix-cls}-column-has-filters {
padding-right: 54px !important;
}
}
.@{table-prefix-cls}-column-sorters {
display: table;
.@{table-prefix-cls}-header-column {
display: inline-block;
vertical-align: top;
> .@{table-prefix-cls}-column-title {
display: table-cell;
vertical-align: middle;
}
.@{table-prefix-cls}-column-sorters {
display: table;
> *:not(.@{table-prefix-cls}-column-sorter) {
position: relative;
}
&::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: all 0.3s;
content: '';
}
&:hover::before {
background: rgba(0, 0, 0, 0.04);
> .@{table-prefix-cls}-column-title {
display: table-cell;
vertical-align: middle;
}
> *:not(.@{table-prefix-cls}-column-sorter) {
position: relative;
}
&::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: all 0.3s;
content: '';
}
&:hover::before {
background: rgba(0, 0, 0, 0.04);
}
}
}