Merge pull request #16950 from ant-design/fix-fixed-table-extra-scroll-bar

fix(Table): Hide header extra scrollbar control
This commit is contained in:
偏右 2019-06-04 17:10:07 +08:00 committed by GitHub
commit d9a5ee06eb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 972 additions and 30 deletions

View File

@ -5809,7 +5809,7 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
class="ant-table-scroll"
>
<div
class="ant-table-header"
class="ant-table-header ant-table-hide-scrollbar"
>
<table
class="ant-table-fixed"
@ -6786,7 +6786,7 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
class="ant-table-fixed-left"
>
<div
class="ant-table-header"
class="ant-table-header ant-table-hide-scrollbar"
>
<table
class="ant-table-fixed"
@ -7064,7 +7064,7 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
class="ant-table-fixed-right"
>
<div
class="ant-table-header"
class="ant-table-header ant-table-hide-scrollbar"
>
<table
class="ant-table-fixed"
@ -7447,7 +7447,7 @@ exports[`renders ./components/table/demo/fixed-header.md correctly 1`] = `
class="ant-table-scroll"
>
<div
class="ant-table-header"
class="ant-table-header ant-table-hide-scrollbar"
>
<table
class=""
@ -8855,7 +8855,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
class="ant-table-scroll"
>
<div
class="ant-table-header"
class="ant-table-header ant-table-hide-scrollbar"
>
<table
class="ant-table-fixed"
@ -9721,7 +9721,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
class="ant-table-fixed-left"
>
<div
class="ant-table-header"
class="ant-table-header ant-table-hide-scrollbar"
>
<table
class="ant-table-fixed"
@ -9947,7 +9947,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
class="ant-table-fixed-right"
>
<div
class="ant-table-header"
class="ant-table-header ant-table-hide-scrollbar"
>
<table
class="ant-table-fixed"

View File

@ -598,6 +598,20 @@
// Workaround for additional scroll bar on the table header
// https://github.com/ant-design/ant-design/issues/6515#issuecomment-419634369
opacity: 0.9999;
&::-webkit-scrollbar {
border-bottom: 1px solid @border-color-split;
}
}
&-hide-scrollbar {
// https://github.com/ant-design/ant-design/issues/4637
// https://stackoverflow.com/a/54101063
// https://github.com/react-component/table/pull/333
scrollbar-color: transparent transparent;
&::-webkit-scrollbar {
background-color: transparent;
}
}
&-fixed-left,

View File

@ -41,28 +41,53 @@ exports[`TimePicker not render clean icon when allowClear is false 1`] = `
`;
exports[`TimePicker prop locale should works 1`] = `
<span
class="ant-time-picker"
style=""
>
<input
class="ant-time-picker-input"
id=""
placeholder="Избери дата"
type="text"
value=""
/>
Array [
<span
class="ant-time-picker-icon"
class="ant-time-picker"
style=""
>
<input
class="ant-time-picker-input"
id=""
placeholder="Избери дата"
type="text"
value="00:00:00"
/>
<span
class="ant-time-picker-icon"
>
<i
aria-label="icon: clock-circle"
class="anticon anticon-clock-circle ant-time-picker-clock-icon"
>
<svg
aria-hidden="true"
class=""
data-icon="clock-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
/>
<path
d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
/>
</svg>
</i>
</span>
<i
aria-label="icon: clock-circle"
class="anticon anticon-clock-circle ant-time-picker-clock-icon"
aria-label="icon: close-circle"
class="anticon anticon-close-circle ant-time-picker-clear"
tabindex="-1"
>
<svg
aria-hidden="true"
class=""
data-icon="clock-circle"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
@ -70,15 +95,918 @@ exports[`TimePicker prop locale should works 1`] = `
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
/>
<path
d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</i>
</span>
</span>
</span>,
<div>
<div
class="ant-time-picker-panel ant-time-picker-panel-column-3 ant-time-picker-panel-placement-bottomLeft slide-up-appear"
style="left: -999px; top: -1001px;"
>
<div
class="ant-time-picker-panel-inner"
>
<div
class="ant-time-picker-panel-input-wrap"
>
<input
class="ant-time-picker-panel-input"
placeholder="Избери дата"
value="00:00:00"
/>
</div>
<div
class="ant-time-picker-panel-combobox"
>
<div
class="ant-time-picker-panel-select"
>
<ul>
<li
class="ant-time-picker-panel-select-option-selected"
role="button"
>
00
</li>
<li
class=""
role="button"
>
01
</li>
<li
class=""
role="button"
>
02
</li>
<li
class=""
role="button"
>
03
</li>
<li
class=""
role="button"
>
04
</li>
<li
class=""
role="button"
>
05
</li>
<li
class=""
role="button"
>
06
</li>
<li
class=""
role="button"
>
07
</li>
<li
class=""
role="button"
>
08
</li>
<li
class=""
role="button"
>
09
</li>
<li
class=""
role="button"
>
10
</li>
<li
class=""
role="button"
>
11
</li>
<li
class=""
role="button"
>
12
</li>
<li
class=""
role="button"
>
13
</li>
<li
class=""
role="button"
>
14
</li>
<li
class=""
role="button"
>
15
</li>
<li
class=""
role="button"
>
16
</li>
<li
class=""
role="button"
>
17
</li>
<li
class=""
role="button"
>
18
</li>
<li
class=""
role="button"
>
19
</li>
<li
class=""
role="button"
>
20
</li>
<li
class=""
role="button"
>
21
</li>
<li
class=""
role="button"
>
22
</li>
<li
class=""
role="button"
>
23
</li>
</ul>
</div>
<div
class="ant-time-picker-panel-select"
>
<ul>
<li
class="ant-time-picker-panel-select-option-selected"
role="button"
>
00
</li>
<li
class=""
role="button"
>
01
</li>
<li
class=""
role="button"
>
02
</li>
<li
class=""
role="button"
>
03
</li>
<li
class=""
role="button"
>
04
</li>
<li
class=""
role="button"
>
05
</li>
<li
class=""
role="button"
>
06
</li>
<li
class=""
role="button"
>
07
</li>
<li
class=""
role="button"
>
08
</li>
<li
class=""
role="button"
>
09
</li>
<li
class=""
role="button"
>
10
</li>
<li
class=""
role="button"
>
11
</li>
<li
class=""
role="button"
>
12
</li>
<li
class=""
role="button"
>
13
</li>
<li
class=""
role="button"
>
14
</li>
<li
class=""
role="button"
>
15
</li>
<li
class=""
role="button"
>
16
</li>
<li
class=""
role="button"
>
17
</li>
<li
class=""
role="button"
>
18
</li>
<li
class=""
role="button"
>
19
</li>
<li
class=""
role="button"
>
20
</li>
<li
class=""
role="button"
>
21
</li>
<li
class=""
role="button"
>
22
</li>
<li
class=""
role="button"
>
23
</li>
<li
class=""
role="button"
>
24
</li>
<li
class=""
role="button"
>
25
</li>
<li
class=""
role="button"
>
26
</li>
<li
class=""
role="button"
>
27
</li>
<li
class=""
role="button"
>
28
</li>
<li
class=""
role="button"
>
29
</li>
<li
class=""
role="button"
>
30
</li>
<li
class=""
role="button"
>
31
</li>
<li
class=""
role="button"
>
32
</li>
<li
class=""
role="button"
>
33
</li>
<li
class=""
role="button"
>
34
</li>
<li
class=""
role="button"
>
35
</li>
<li
class=""
role="button"
>
36
</li>
<li
class=""
role="button"
>
37
</li>
<li
class=""
role="button"
>
38
</li>
<li
class=""
role="button"
>
39
</li>
<li
class=""
role="button"
>
40
</li>
<li
class=""
role="button"
>
41
</li>
<li
class=""
role="button"
>
42
</li>
<li
class=""
role="button"
>
43
</li>
<li
class=""
role="button"
>
44
</li>
<li
class=""
role="button"
>
45
</li>
<li
class=""
role="button"
>
46
</li>
<li
class=""
role="button"
>
47
</li>
<li
class=""
role="button"
>
48
</li>
<li
class=""
role="button"
>
49
</li>
<li
class=""
role="button"
>
50
</li>
<li
class=""
role="button"
>
51
</li>
<li
class=""
role="button"
>
52
</li>
<li
class=""
role="button"
>
53
</li>
<li
class=""
role="button"
>
54
</li>
<li
class=""
role="button"
>
55
</li>
<li
class=""
role="button"
>
56
</li>
<li
class=""
role="button"
>
57
</li>
<li
class=""
role="button"
>
58
</li>
<li
class=""
role="button"
>
59
</li>
</ul>
</div>
<div
class="ant-time-picker-panel-select"
>
<ul>
<li
class="ant-time-picker-panel-select-option-selected"
role="button"
>
00
</li>
<li
class=""
role="button"
>
01
</li>
<li
class=""
role="button"
>
02
</li>
<li
class=""
role="button"
>
03
</li>
<li
class=""
role="button"
>
04
</li>
<li
class=""
role="button"
>
05
</li>
<li
class=""
role="button"
>
06
</li>
<li
class=""
role="button"
>
07
</li>
<li
class=""
role="button"
>
08
</li>
<li
class=""
role="button"
>
09
</li>
<li
class=""
role="button"
>
10
</li>
<li
class=""
role="button"
>
11
</li>
<li
class=""
role="button"
>
12
</li>
<li
class=""
role="button"
>
13
</li>
<li
class=""
role="button"
>
14
</li>
<li
class=""
role="button"
>
15
</li>
<li
class=""
role="button"
>
16
</li>
<li
class=""
role="button"
>
17
</li>
<li
class=""
role="button"
>
18
</li>
<li
class=""
role="button"
>
19
</li>
<li
class=""
role="button"
>
20
</li>
<li
class=""
role="button"
>
21
</li>
<li
class=""
role="button"
>
22
</li>
<li
class=""
role="button"
>
23
</li>
<li
class=""
role="button"
>
24
</li>
<li
class=""
role="button"
>
25
</li>
<li
class=""
role="button"
>
26
</li>
<li
class=""
role="button"
>
27
</li>
<li
class=""
role="button"
>
28
</li>
<li
class=""
role="button"
>
29
</li>
<li
class=""
role="button"
>
30
</li>
<li
class=""
role="button"
>
31
</li>
<li
class=""
role="button"
>
32
</li>
<li
class=""
role="button"
>
33
</li>
<li
class=""
role="button"
>
34
</li>
<li
class=""
role="button"
>
35
</li>
<li
class=""
role="button"
>
36
</li>
<li
class=""
role="button"
>
37
</li>
<li
class=""
role="button"
>
38
</li>
<li
class=""
role="button"
>
39
</li>
<li
class=""
role="button"
>
40
</li>
<li
class=""
role="button"
>
41
</li>
<li
class=""
role="button"
>
42
</li>
<li
class=""
role="button"
>
43
</li>
<li
class=""
role="button"
>
44
</li>
<li
class=""
role="button"
>
45
</li>
<li
class=""
role="button"
>
46
</li>
<li
class=""
role="button"
>
47
</li>
<li
class=""
role="button"
>
48
</li>
<li
class=""
role="button"
>
49
</li>
<li
class=""
role="button"
>
50
</li>
<li
class=""
role="button"
>
51
</li>
<li
class=""
role="button"
>
52
</li>
<li
class=""
role="button"
>
53
</li>
<li
class=""
role="button"
>
54
</li>
<li
class=""
role="button"
>
55
</li>
<li
class=""
role="button"
>
56
</li>
<li
class=""
role="button"
>
57
</li>
<li
class=""
role="button"
>
58
</li>
<li
class=""
role="button"
>
59
</li>
</ul>
</div>
</div>
</div>
</div>
</div>,
]
`;
exports[`TimePicker renders addon correctly 1`] = `

View File

@ -73,7 +73,7 @@ describe('TimePicker', () => {
const locale = {
placeholder: 'Избери дата',
};
const wrapper = mount(<TimePicker open locale={locale} />);
const wrapper = mount(<TimePicker defaultValue={moment('2000-01-01 00:00:00')} open locale={locale} />);
expect(wrapper.render()).toMatchSnapshot();
});
});

View File

@ -79,7 +79,7 @@
"rc-slider": "~8.6.5",
"rc-steps": "~3.4.1",
"rc-switch": "~1.9.0",
"rc-table": "~6.5.0",
"rc-table": "~6.6.0",
"rc-tabs": "~9.6.0",
"rc-time-picker": "~3.6.1",
"rc-tooltip": "~3.7.3",