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

refactor: Update rc-slider (#34234)

Browse Source 
* chore: Update rc-slider version

* chore: bump

* chore: update sty;e

* fix: style

* test: update snapshot

* test: all fixed

* fix lint
This commit is contained in:
二货机器人 2022-03-01 14:48:41 +08:00 committed by GitHub
parent bfebb88bdb
commit 811fed2fc2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 496 additions and 642 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21904,14 +21904,14 @@ exports[`ConfigProvider components Skeleton prefixCls 1`] = `
exports[`ConfigProvider components Slider configProvider 1`] = `
<div
class="config-slider"
class="config-slider config-slider-horizontal"
>
<div
class="config-slider-rail"
/>
<div
class="config-slider-track"
style="left:0%;right:auto;width:0%"
style="left:0%;width:0%"
/>
<div
class="config-slider-step"
@ -21923,7 +21923,7 @@ exports[`ConfigProvider components Slider configProvider 1`] = `
aria-valuenow="0"
class="config-slider-handle config-tooltip-open"
role="slider"
style="left:0%;right:auto;transform:translateX(-50%)"
style="left:0%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -21950,22 +21950,19 @@ exports[`ConfigProvider components Slider configProvider 1`] = `
</div>
</div>
</div>
<div
class="config-slider-mark"
/>
</div>
`;
exports[`ConfigProvider components Slider configProvider componentSize large 1`] = `
<div
class="config-slider"
class="config-slider config-slider-horizontal"
>
<div
class="config-slider-rail"
/>
<div
class="config-slider-track"
style="left:0%;right:auto;width:0%"
style="left:0%;width:0%"
/>
<div
class="config-slider-step"
@ -21977,7 +21974,7 @@ exports[`ConfigProvider components Slider configProvider componentSize large 1`]
aria-valuenow="0"
class="config-slider-handle config-tooltip-open"
role="slider"
style="left:0%;right:auto;transform:translateX(-50%)"
style="left:0%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -22004,22 +22001,19 @@ exports[`ConfigProvider components Slider configProvider componentSize large 1`]
</div>
</div>
</div>
<div
class="config-slider-mark"
/>
</div>
`;
exports[`ConfigProvider components Slider configProvider componentSize middle 1`] = `
<div
class="config-slider"
class="config-slider config-slider-horizontal"
>
<div
class="config-slider-rail"
/>
<div
class="config-slider-track"
style="left:0%;right:auto;width:0%"
style="left:0%;width:0%"
/>
<div
class="config-slider-step"
@ -22031,7 +22025,7 @@ exports[`ConfigProvider components Slider configProvider componentSize middle 1`
aria-valuenow="0"
class="config-slider-handle config-tooltip-open"
role="slider"
style="left:0%;right:auto;transform:translateX(-50%)"
style="left:0%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -22058,22 +22052,19 @@ exports[`ConfigProvider components Slider configProvider componentSize middle 1`
</div>
</div>
</div>
<div
class="config-slider-mark"
/>
</div>
`;
exports[`ConfigProvider components Slider configProvider virtual and dropdownMatchSelectWidth 1`] = `
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:0%"
style="left:0%;width:0%"
/>
<div
class="ant-slider-step"
@ -22085,7 +22076,7 @@ exports[`ConfigProvider components Slider configProvider virtual and dropdownMat
aria-valuenow="0"
class="ant-slider-handle ant-tooltip-open"
role="slider"
style="left:0%;right:auto;transform:translateX(-50%)"
style="left:0%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -22112,22 +22103,19 @@ exports[`ConfigProvider components Slider configProvider virtual and dropdownMat
</div>
</div>
</div>
<div
class="ant-slider-mark"
/>
</div>
`;
exports[`ConfigProvider components Slider normal 1`] = `
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:0%"
style="left:0%;width:0%"
/>
<div
class="ant-slider-step"
@ -22139,7 +22127,7 @@ exports[`ConfigProvider components Slider normal 1`] = `
aria-valuenow="0"
class="ant-slider-handle ant-tooltip-open"
role="slider"
style="left:0%;right:auto;transform:translateX(-50%)"
style="left:0%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -22166,22 +22154,19 @@ exports[`ConfigProvider components Slider normal 1`] = `
</div>
</div>
</div>
<div
class="ant-slider-mark"
/>
</div>
`;
exports[`ConfigProvider components Slider prefixCls 1`] = `
<div
class="prefix-Slider"
class="prefix-Slider prefix-Slider-horizontal"
>
<div
class="prefix-Slider-rail"
/>
<div
class="prefix-Slider-track"
style="left:0%;right:auto;width:0%"
style="left:0%;width:0%"
/>
<div
class="prefix-Slider-step"
@ -22193,7 +22178,7 @@ exports[`ConfigProvider components Slider prefixCls 1`] = `
aria-valuenow="0"
class="prefix-Slider-handle prefix-Slider-tooltip-open"
role="slider"
style="left:0%;right:auto;transform:translateX(-50%)"
style="left:0%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -22220,9 +22205,6 @@ exports[`ConfigProvider components Slider prefixCls 1`] = `
</div>
</div>
</div>
<div
class="prefix-Slider-mark"
/>
</div>
`;

30
components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -15254,41 +15254,41 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
class="ant-form-item-control-input-content"
>
<div
class="ant-slider ant-slider-with-marks"
class="ant-slider ant-slider-horizontal ant-slider-with-marks"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:0%"
style="left:0%;width:0%"
/>
<div
class="ant-slider-step"
>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:0%"
style="left:0%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:20%"
style="left:20%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:40%"
style="left:40%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:60%"
style="left:60%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:80%"
style="left:80%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:100%"
style="left:100%;transform:translateX(-50%)"
/>
</div>
<div
@ -15298,7 +15298,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
aria-valuenow="0"
class="ant-slider-handle"
role="slider"
style="left:0%;right:auto;transform:translateX(-50%)"
style="left:0%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -15330,37 +15330,37 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
style="left:0%;transform:translateX(-50%)"
>
A
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:20%"
style="left:20%;transform:translateX(-50%)"
>
B
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%"
style="left:40%;transform:translateX(-50%)"
>
C
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%"
style="left:60%;transform:translateX(-50%)"
>
D
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%"
style="left:80%;transform:translateX(-50%)"
>
E
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%"
style="left:100%;transform:translateX(-50%)"
>
F
</span>

30
components/form/__tests__/__snapshots__/demo.test.js.snap
View File

@ -6339,41 +6339,41 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-slider ant-slider-with-marks"
class="ant-slider ant-slider-horizontal ant-slider-with-marks"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:0%"
style="left:0%;width:0%"
/>
<div
class="ant-slider-step"
>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:0%"
style="left:0%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:20%"
style="left:20%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:40%"
style="left:40%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:60%"
style="left:60%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:80%"
style="left:80%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:100%"
style="left:100%;transform:translateX(-50%)"
/>
</div>
<div
@ -6383,7 +6383,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
aria-valuenow="0"
class="ant-slider-handle"
role="slider"
style="left:0%;right:auto;transform:translateX(-50%)"
style="left:0%;transform:translateX(-50%)"
tabindex="0"
/>
<div
@ -6391,37 +6391,37 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
style="left:0%;transform:translateX(-50%)"
>
A
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:20%"
style="left:20%;transform:translateX(-50%)"
>
B
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%"
style="left:40%;transform:translateX(-50%)"
>
C
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%"
style="left:60%;transform:translateX(-50%)"
>
D
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%"
style="left:80%;transform:translateX(-50%)"
>
E
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%"
style="left:100%;transform:translateX(-50%)"
>
F
</span>

90
components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -838,41 +838,41 @@ Array [
style="width:50%"
>
<div
class="ant-slider ant-slider-with-marks"
class="ant-slider ant-slider-horizontal ant-slider-with-marks"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:20%"
style="left:0%;width:20%"
/>
<div
class="ant-slider-step"
>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:0%"
style="left:0%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:20%"
style="left:20%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:40%"
style="left:40%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:60%"
style="left:60%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:80%"
style="left:80%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:100%"
style="left:100%;transform:translateX(-50%)"
/>
</div>
<div
@ -882,7 +882,7 @@ Array [
aria-valuenow="1"
class="ant-slider-handle"
role="slider"
style="left:20%;right:auto;transform:translateX(-50%)"
style="left:20%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -914,37 +914,37 @@ Array [
>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
style="left:0%;transform:translateX(-50%)"
>
8
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:20%"
style="left:20%;transform:translateX(-50%)"
>
16
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%"
style="left:40%;transform:translateX(-50%)"
>
24
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%"
style="left:60%;transform:translateX(-50%)"
>
32
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%"
style="left:80%;transform:translateX(-50%)"
>
40
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%"
style="left:100%;transform:translateX(-50%)"
>
48
</span>
@ -958,41 +958,41 @@ Array [
style="width:50%"
>
<div
class="ant-slider ant-slider-with-marks"
class="ant-slider ant-slider-horizontal ant-slider-with-marks"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:20%"
style="left:0%;width:20%"
/>
<div
class="ant-slider-step"
>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:0%"
style="left:0%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:20%"
style="left:20%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:40%"
style="left:40%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:60%"
style="left:60%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:80%"
style="left:80%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:100%"
style="left:100%;transform:translateX(-50%)"
/>
</div>
<div
@ -1002,7 +1002,7 @@ Array [
aria-valuenow="1"
class="ant-slider-handle"
role="slider"
style="left:20%;right:auto;transform:translateX(-50%)"
style="left:20%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -1034,37 +1034,37 @@ Array [
>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
style="left:0%;transform:translateX(-50%)"
>
8
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:20%"
style="left:20%;transform:translateX(-50%)"
>
16
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%"
style="left:40%;transform:translateX(-50%)"
>
24
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%"
style="left:60%;transform:translateX(-50%)"
>
32
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%"
style="left:80%;transform:translateX(-50%)"
>
40
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%"
style="left:100%;transform:translateX(-50%)"
>
48
</span>
@ -1078,41 +1078,41 @@ Array [
style="width:50%;margin-bottom:48px"
>
<div
class="ant-slider ant-slider-with-marks"
class="ant-slider ant-slider-horizontal ant-slider-with-marks"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:40%"
style="left:0%;width:40%"
/>
<div
class="ant-slider-step"
>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:0%"
style="left:0%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:20%"
style="left:20%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:40%"
style="left:40%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:60%"
style="left:60%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:80%"
style="left:80%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:100%"
style="left:100%;transform:translateX(-50%)"
/>
</div>
<div
@ -1122,7 +1122,7 @@ Array [
aria-valuenow="2"
class="ant-slider-handle"
role="slider"
style="left:40%;right:auto;transform:translateX(-50%)"
style="left:40%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -1154,37 +1154,37 @@ Array [
>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
style="left:0%;transform:translateX(-50%)"
>
2
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:20%"
style="left:20%;transform:translateX(-50%)"
>
3
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%"
style="left:40%;transform:translateX(-50%)"
>
4
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%"
style="left:60%;transform:translateX(-50%)"
>
6
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%"
style="left:80%;transform:translateX(-50%)"
>
8
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%"
style="left:100%;transform:translateX(-50%)"
>
12
</span>

90
components/grid/__tests__/__snapshots__/demo.test.js.snap
View File

@ -838,41 +838,41 @@ Array [
style="width:50%"
>
<div
class="ant-slider ant-slider-with-marks"
class="ant-slider ant-slider-horizontal ant-slider-with-marks"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:20%"
style="left:0%;width:20%"
/>
<div
class="ant-slider-step"
>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:0%"
style="left:0%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:20%"
style="left:20%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:40%"
style="left:40%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:60%"
style="left:60%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:80%"
style="left:80%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:100%"
style="left:100%;transform:translateX(-50%)"
/>
</div>
<div
@ -882,7 +882,7 @@ Array [
aria-valuenow="1"
class="ant-slider-handle"
role="slider"
style="left:20%;right:auto;transform:translateX(-50%)"
style="left:20%;transform:translateX(-50%)"
tabindex="0"
/>
<div
@ -890,37 +890,37 @@ Array [
>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
style="left:0%;transform:translateX(-50%)"
>
8
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:20%"
style="left:20%;transform:translateX(-50%)"
>
16
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%"
style="left:40%;transform:translateX(-50%)"
>
24
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%"
style="left:60%;transform:translateX(-50%)"
>
32
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%"
style="left:80%;transform:translateX(-50%)"
>
40
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%"
style="left:100%;transform:translateX(-50%)"
>
48
</span>
@ -934,41 +934,41 @@ Array [
style="width:50%"
>
<div
class="ant-slider ant-slider-with-marks"
class="ant-slider ant-slider-horizontal ant-slider-with-marks"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:20%"
style="left:0%;width:20%"
/>
<div
class="ant-slider-step"
>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:0%"
style="left:0%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:20%"
style="left:20%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:40%"
style="left:40%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:60%"
style="left:60%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:80%"
style="left:80%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:100%"
style="left:100%;transform:translateX(-50%)"
/>
</div>
<div
@ -978,7 +978,7 @@ Array [
aria-valuenow="1"
class="ant-slider-handle"
role="slider"
style="left:20%;right:auto;transform:translateX(-50%)"
style="left:20%;transform:translateX(-50%)"
tabindex="0"
/>
<div
@ -986,37 +986,37 @@ Array [
>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
style="left:0%;transform:translateX(-50%)"
>
8
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:20%"
style="left:20%;transform:translateX(-50%)"
>
16
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%"
style="left:40%;transform:translateX(-50%)"
>
24
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%"
style="left:60%;transform:translateX(-50%)"
>
32
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%"
style="left:80%;transform:translateX(-50%)"
>
40
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%"
style="left:100%;transform:translateX(-50%)"
>
48
</span>
@ -1030,41 +1030,41 @@ Array [
style="width:50%;margin-bottom:48px"
>
<div
class="ant-slider ant-slider-with-marks"
class="ant-slider ant-slider-horizontal ant-slider-with-marks"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:40%"
style="left:0%;width:40%"
/>
<div
class="ant-slider-step"
>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:0%"
style="left:0%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:20%"
style="left:20%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:40%"
style="left:40%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:60%"
style="left:60%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:80%"
style="left:80%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:100%"
style="left:100%;transform:translateX(-50%)"
/>
</div>
<div
@ -1074,7 +1074,7 @@ Array [
aria-valuenow="2"
class="ant-slider-handle"
role="slider"
style="left:40%;right:auto;transform:translateX(-50%)"
style="left:40%;transform:translateX(-50%)"
tabindex="0"
/>
<div
@ -1082,37 +1082,37 @@ Array [
>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
style="left:0%;transform:translateX(-50%)"
>
2
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:20%"
style="left:20%;transform:translateX(-50%)"
>
3
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%"
style="left:40%;transform:translateX(-50%)"
>
4
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%"
style="left:60%;transform:translateX(-50%)"
>
6
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%"
style="left:80%;transform:translateX(-50%)"
>
8
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%"
style="left:100%;transform:translateX(-50%)"
>
12
</span>

283
components/slider/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -3,14 +3,14 @@
exports[`renders ./components/slider/demo/basic.md extend context correctly 1`] = `
Array [
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:30%"
style="left:0%;width:30%"
/>
<div
class="ant-slider-step"
@ -22,7 +22,7 @@ Array [
aria-valuenow="30"
class="ant-slider-handle"
role="slider"
style="left:30%;right:auto;transform:translateX(-50%)"
style="left:30%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -49,19 +49,16 @@ Array [
</div>
</div>
</div>
<div
class="ant-slider-mark"
/>
</div>,
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track ant-slider-track-1"
style="left:20%;right:auto;width:30%"
style="left:20%;width:30%"
/>
<div
class="ant-slider-step"
@ -73,7 +70,7 @@ Array [
aria-valuenow="20"
class="ant-slider-handle ant-slider-handle-1"
role="slider"
style="left:20%;right:auto;transform:translateX(-50%)"
style="left:20%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -107,7 +104,7 @@ Array [
aria-valuenow="50"
class="ant-slider-handle ant-slider-handle-2"
role="slider"
style="left:50%;right:auto;transform:translateX(-50%)"
style="left:50%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -134,9 +131,6 @@ Array [
</div>
</div>
</div>
<div
class="ant-slider-mark"
/>
</div>,
"Disabled: ",
<button
@ -157,14 +151,14 @@ Array [
exports[`renders ./components/slider/demo/dragableTrack.md extend context correctly 1`] = `
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track ant-slider-track-1"
style="left:20%;right:auto;width:30%"
style="left:20%;width:30%"
/>
<div
class="ant-slider-step"
@ -176,7 +170,7 @@ exports[`renders ./components/slider/demo/dragableTrack.md extend context correc
aria-valuenow="20"
class="ant-slider-handle ant-slider-handle-1"
role="slider"
style="left:20%;right:auto;transform:translateX(-50%)"
style="left:20%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -210,7 +204,7 @@ exports[`renders ./components/slider/demo/dragableTrack.md extend context correc
aria-valuenow="50"
class="ant-slider-handle ant-slider-handle-2"
role="slider"
style="left:50%;right:auto;transform:translateX(-50%)"
style="left:50%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -237,23 +231,20 @@ exports[`renders ./components/slider/demo/dragableTrack.md extend context correc
</div>
</div>
</div>
<div
class="ant-slider-mark"
/>
</div>
`;
exports[`renders ./components/slider/demo/event.md extend context correctly 1`] = `
Array [
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:30%"
style="left:0%;width:30%"
/>
<div
class="ant-slider-step"
@ -265,7 +256,7 @@ Array [
aria-valuenow="30"
class="ant-slider-handle"
role="slider"
style="left:30%;right:auto;transform:translateX(-50%)"
style="left:30%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -292,19 +283,16 @@ Array [
</div>
</div>
</div>
<div
class="ant-slider-mark"
/>
</div>,
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track ant-slider-track-1"
style="left:20%;right:auto;width:30%"
style="left:20%;width:30%"
/>
<div
class="ant-slider-step"
@ -316,7 +304,7 @@ Array [
aria-valuenow="20"
class="ant-slider-handle ant-slider-handle-1"
role="slider"
style="left:20%;right:auto;transform:translateX(-50%)"
style="left:20%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -350,7 +338,7 @@ Array [
aria-valuenow="50"
class="ant-slider-handle ant-slider-handle-2"
role="slider"
style="left:50%;right:auto;transform:translateX(-50%)"
style="left:50%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -377,9 +365,6 @@ Array [
</div>
</div>
</div>
<div
class="ant-slider-mark"
/>
</div>,
]
`;
@ -408,14 +393,14 @@ exports[`renders ./components/slider/demo/icon-slider.md extend context correctl
</svg>
</span>
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:0%"
style="left:0%;width:0%"
/>
<div
class="ant-slider-step"
@ -427,7 +412,7 @@ exports[`renders ./components/slider/demo/icon-slider.md extend context correctl
aria-valuenow="0"
class="ant-slider-handle"
role="slider"
style="left:0%;right:auto;transform:translateX(-50%)"
style="left:0%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -454,9 +439,6 @@ exports[`renders ./components/slider/demo/icon-slider.md extend context correctl
</div>
</div>
</div>
<div
class="ant-slider-mark"
/>
</div>
<span
aria-label="smile"
@ -489,14 +471,14 @@ exports[`renders ./components/slider/demo/input-number.md extend context correct
class="ant-col ant-col-12"
>
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:0%"
style="left:0%;width:0%"
/>
<div
class="ant-slider-step"
@ -508,7 +490,7 @@ exports[`renders ./components/slider/demo/input-number.md extend context correct
aria-valuenow="1"
class="ant-slider-handle"
role="slider"
style="left:0%;right:auto;transform:translateX(-50%)"
style="left:0%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -535,9 +517,6 @@ exports[`renders ./components/slider/demo/input-number.md extend context correct
</div>
</div>
</div>
<div
class="ant-slider-mark"
/>
</div>
</div>
<div
@ -629,14 +608,14 @@ exports[`renders ./components/slider/demo/input-number.md extend context correct
class="ant-col ant-col-12"
>
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:0%"
style="left:0%;width:0%"
/>
<div
class="ant-slider-step"
@ -648,7 +627,7 @@ exports[`renders ./components/slider/demo/input-number.md extend context correct
aria-valuenow="0"
class="ant-slider-handle"
role="slider"
style="left:0%;right:auto;transform:translateX(-50%)"
style="left:0%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -675,9 +654,6 @@ exports[`renders ./components/slider/demo/input-number.md extend context correct
</div>
</div>
</div>
<div
class="ant-slider-mark"
/>
</div>
</div>
<div
@ -771,33 +747,33 @@ Array [
included=true
</h4>,
<div
class="ant-slider ant-slider-with-marks"
class="ant-slider ant-slider-horizontal ant-slider-with-marks"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:37%"
style="left:0%;width:37%"
/>
<div
class="ant-slider-step"
>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:0%"
style="left:0%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:26%"
style="left:26%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:37%"
style="left:37%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:100%"
style="left:100%;transform:translateX(-50%)"
/>
</div>
<div
@ -807,7 +783,7 @@ Array [
aria-valuenow="37"
class="ant-slider-handle"
role="slider"
style="left:37%;right:auto;transform:translateX(-50%)"
style="left:37%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -839,25 +815,25 @@ Array [
>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
style="left:0%;transform:translateX(-50%)"
>
0°C
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:26%"
style="left:26%;transform:translateX(-50%)"
>
26°C
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:37%"
style="left:37%;transform:translateX(-50%)"
>
37°C
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%;color:#f50"
style="left:100%;transform:translateX(-50%);color:#f50"
>
<strong>
100°C
@ -866,33 +842,33 @@ Array [
</div>
</div>,
<div
class="ant-slider ant-slider-with-marks"
class="ant-slider ant-slider-horizontal ant-slider-with-marks"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track ant-slider-track-1"
style="left:26%;right:auto;width:11%"
style="left:26%;width:11%"
/>
<div
class="ant-slider-step"
>
<span
class="ant-slider-dot"
style="left:0%"
style="left:0%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:26%"
style="left:26%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:37%"
style="left:37%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:100%"
style="left:100%;transform:translateX(-50%)"
/>
</div>
<div
@ -902,7 +878,7 @@ Array [
aria-valuenow="26"
class="ant-slider-handle ant-slider-handle-1"
role="slider"
style="left:26%;right:auto;transform:translateX(-50%)"
style="left:26%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -936,7 +912,7 @@ Array [
aria-valuenow="37"
class="ant-slider-handle ant-slider-handle-2"
role="slider"
style="left:37%;right:auto;transform:translateX(-50%)"
style="left:37%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -968,25 +944,25 @@ Array [
>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
style="left:0%;transform:translateX(-50%)"
>
0°C
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:26%"
style="left:26%;transform:translateX(-50%)"
>
26°C
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:37%"
style="left:37%;transform:translateX(-50%)"
>
37°C
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%;color:#f50"
style="left:100%;transform:translateX(-50%);color:#f50"
>
<strong>
100°C
@ -998,7 +974,7 @@ Array [
included=false
</h4>,
<div
class="ant-slider ant-slider-with-marks"
class="ant-slider ant-slider-horizontal ant-slider-with-marks"
>
<div
class="ant-slider-rail"
@ -1008,19 +984,19 @@ Array [
>
<span
class="ant-slider-dot"
style="left:0%"
style="left:0%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:26%"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:37%"
style="left:26%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:100%"
style="left:37%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:100%;transform:translateX(-50%)"
/>
</div>
<div
@ -1030,7 +1006,7 @@ Array [
aria-valuenow="37"
class="ant-slider-handle"
role="slider"
style="left:37%;right:auto;transform:translateX(-50%)"
style="left:37%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -1062,25 +1038,25 @@ Array [
>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
style="left:0%;transform:translateX(-50%)"
>
0°C
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:26%"
style="left:26%;transform:translateX(-50%)"
>
26°C
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:37%"
class="ant-slider-mark-text"
style="left:37%;transform:translateX(-50%)"
>
37°C
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%;color:#f50"
style="left:100%;transform:translateX(-50%);color:#f50"
>
<strong>
100°C
@ -1092,33 +1068,33 @@ Array [
marks & step
</h4>,
<div
class="ant-slider ant-slider-with-marks"
class="ant-slider ant-slider-horizontal ant-slider-with-marks"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:37%"
style="left:0%;width:37%"
/>
<div
class="ant-slider-step"
>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:0%"
style="left:0%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:26%"
style="left:26%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:37%"
style="left:37%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:100%"
style="left:100%;transform:translateX(-50%)"
/>
</div>
<div
@ -1128,7 +1104,7 @@ Array [
aria-valuenow="37"
class="ant-slider-handle"
role="slider"
style="left:37%;right:auto;transform:translateX(-50%)"
style="left:37%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -1160,25 +1136,25 @@ Array [
>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
style="left:0%;transform:translateX(-50%)"
>
0°C
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:26%"
style="left:26%;transform:translateX(-50%)"
>
26°C
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:37%"
style="left:37%;transform:translateX(-50%)"
>
37°C
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%;color:#f50"
style="left:100%;transform:translateX(-50%);color:#f50"
>
<strong>
100°C
@ -1190,33 +1166,33 @@ Array [
step=null
</h4>,
<div
class="ant-slider ant-slider-with-marks"
class="ant-slider ant-slider-horizontal ant-slider-with-marks"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:37%"
style="left:0%;width:37%"
/>
<div
class="ant-slider-step"
>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:0%"
style="left:0%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:26%"
style="left:26%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:37%"
style="left:37%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:100%"
style="left:100%;transform:translateX(-50%)"
/>
</div>
<div
@ -1226,7 +1202,7 @@ Array [
aria-valuenow="37"
class="ant-slider-handle"
role="slider"
style="left:37%;right:auto;transform:translateX(-50%)"
style="left:37%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -1258,25 +1234,25 @@ Array [
>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
style="left:0%;transform:translateX(-50%)"
>
0°C
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:26%"
style="left:26%;transform:translateX(-50%)"
>
26°C
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:37%"
style="left:37%;transform:translateX(-50%)"
>
37°C
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%;color:#f50"
style="left:100%;transform:translateX(-50%);color:#f50"
>
<strong>
100°C
@ -1290,14 +1266,14 @@ Array [
exports[`renders ./components/slider/demo/reverse.md extend context correctly 1`] = `
Array [
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="right:0%;left:auto;width:30%"
style="right:0%;width:30%"
/>
<div
class="ant-slider-step"
@ -1309,7 +1285,7 @@ Array [
aria-valuenow="30"
class="ant-slider-handle"
role="slider"
style="right:30%;left:auto;transform:translateX(+50%)"
style="right:30%;transform:translateX(50%)"
tabindex="0"
/>
<div>
@ -1336,19 +1312,16 @@ Array [
</div>
</div>
</div>
<div
class="ant-slider-mark"
/>
</div>,
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track ant-slider-track-1"
style="right:20%;left:auto;width:30%"
style="right:20%;width:30%"
/>
<div
class="ant-slider-step"
@ -1360,7 +1333,7 @@ Array [
aria-valuenow="20"
class="ant-slider-handle ant-slider-handle-1"
role="slider"
style="right:20%;left:auto;transform:translateX(+50%)"
style="right:20%;transform:translateX(50%)"
tabindex="0"
/>
<div>
@ -1394,7 +1367,7 @@ Array [
aria-valuenow="50"
class="ant-slider-handle ant-slider-handle-2"
role="slider"
style="right:50%;left:auto;transform:translateX(+50%)"
style="right:50%;transform:translateX(50%)"
tabindex="0"
/>
<div>
@ -1421,9 +1394,6 @@ Array [
</div>
</div>
</div>
<div
class="ant-slider-mark"
/>
</div>,
"Reversed: ",
<button
@ -1444,14 +1414,14 @@ Array [
exports[`renders ./components/slider/demo/show-tooltip.md extend context correctly 1`] = `
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:30%"
style="left:0%;width:30%"
/>
<div
class="ant-slider-step"
@ -1463,7 +1433,7 @@ exports[`renders ./components/slider/demo/show-tooltip.md extend context correct
aria-valuenow="30"
class="ant-slider-handle ant-tooltip-open"
role="slider"
style="left:30%;right:auto;transform:translateX(-50%)"
style="left:30%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -1490,23 +1460,20 @@ exports[`renders ./components/slider/demo/show-tooltip.md extend context correct
</div>
</div>
</div>
<div
class="ant-slider-mark"
/>
</div>
`;
exports[`renders ./components/slider/demo/tip-formatter.md extend context correctly 1`] = `
Array [
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:0%"
style="left:0%;width:0%"
/>
<div
class="ant-slider-step"
@ -1518,7 +1485,7 @@ Array [
aria-valuenow="0"
class="ant-slider-handle"
role="slider"
style="left:0%;right:auto;transform:translateX(-50%)"
style="left:0%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -1545,19 +1512,16 @@ Array [
</div>
</div>
</div>
<div
class="ant-slider-mark"
/>
</div>,
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:0%"
style="left:0%;width:0%"
/>
<div
class="ant-slider-step"
@ -1569,7 +1533,7 @@ Array [
aria-valuenow="0"
class="ant-slider-handle"
role="slider"
style="left:0%;right:auto;transform:translateX(-50%)"
style="left:0%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -1594,9 +1558,6 @@ Array [
</div>
</div>
</div>
<div
class="ant-slider-mark"
/>
</div>,
]
`;
@ -1614,7 +1575,7 @@ Array [
/>
<div
class="ant-slider-track"
style="bottom:0%;top:auto;height:30%"
style="bottom:0%;height:30%"
/>
<div
class="ant-slider-step"
@ -1626,7 +1587,7 @@ Array [
aria-valuenow="30"
class="ant-slider-handle"
role="slider"
style="bottom:30%;top:auto;transform:translateY(+50%)"
style="bottom:30%;transform:translateY(50%)"
tabindex="0"
/>
<div>
@ -1653,9 +1614,6 @@ Array [
</div>
</div>
</div>
<div
class="ant-slider-mark"
/>
</div>
</div>,
<div
@ -1669,7 +1627,7 @@ Array [
/>
<div
class="ant-slider-track ant-slider-track-1"
style="bottom:20%;top:auto;height:30%"
style="bottom:20%;height:30%"
/>
<div
class="ant-slider-step"
@ -1681,7 +1639,7 @@ Array [
aria-valuenow="20"
class="ant-slider-handle ant-slider-handle-1"
role="slider"
style="bottom:20%;top:auto;transform:translateY(+50%)"
style="bottom:20%;transform:translateY(50%)"
tabindex="0"
/>
<div>
@ -1715,7 +1673,7 @@ Array [
aria-valuenow="50"
class="ant-slider-handle ant-slider-handle-2"
role="slider"
style="bottom:50%;top:auto;transform:translateY(+50%)"
style="bottom:50%;transform:translateY(50%)"
tabindex="0"
/>
<div>
@ -1742,42 +1700,39 @@ Array [
</div>
</div>
</div>
<div
class="ant-slider-mark"
/>
</div>
</div>,
<div
style="display:inline-block;height:300px;margin-left:70px"
>
<div
class="ant-slider ant-slider-with-marks ant-slider-vertical"
class="ant-slider ant-slider-vertical ant-slider-with-marks"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track ant-slider-track-1"
style="bottom:26%;top:auto;height:11%"
style="bottom:26%;height:11%"
/>
<div
class="ant-slider-step"
>
<span
class="ant-slider-dot"
style="bottom:0%"
style="bottom:0%;transform:translateY(50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="bottom:26%"
style="bottom:26%;transform:translateY(50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="bottom:37%"
style="bottom:37%;transform:translateY(50%)"
/>
<span
class="ant-slider-dot"
style="bottom:100%"
style="bottom:100%;transform:translateY(50%)"
/>
</div>
<div
@ -1787,7 +1742,7 @@ Array [
aria-valuenow="26"
class="ant-slider-handle ant-slider-handle-1"
role="slider"
style="bottom:26%;top:auto;transform:translateY(+50%)"
style="bottom:26%;transform:translateY(50%)"
tabindex="0"
/>
<div>
@ -1821,7 +1776,7 @@ Array [
aria-valuenow="37"
class="ant-slider-handle ant-slider-handle-2"
role="slider"
style="bottom:37%;top:auto;transform:translateY(+50%)"
style="bottom:37%;transform:translateY(50%)"
tabindex="0"
/>
<div>
@ -1853,25 +1808,25 @@ Array [
>
<span
class="ant-slider-mark-text"
style="margin-bottom:-50%;bottom:0%"
style="bottom:0%;transform:translateY(50%)"
>
0°C
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="margin-bottom:-50%;bottom:26%"
style="bottom:26%;transform:translateY(50%)"
>
26°C
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="margin-bottom:-50%;bottom:37%"
style="bottom:37%;transform:translateY(50%)"
>
37°C
</span>
<span
class="ant-slider-mark-text"
style="margin-bottom:-50%;bottom:100%;color:#f50"
style="bottom:100%;transform:translateY(50%);color:#f50"
>
<strong>
100°C

274
components/slider/__tests__/__snapshots__/demo.test.js.snap
View File

@ -3,14 +3,14 @@
exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
Array [
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:30%"
style="left:0%;width:30%"
/>
<div
class="ant-slider-step"
@ -22,22 +22,19 @@ Array [
aria-valuenow="30"
class="ant-slider-handle"
role="slider"
style="left:30%;right:auto;transform:translateX(-50%)"
style="left:30%;transform:translateX(-50%)"
tabindex="0"
/>
<div
class="ant-slider-mark"
/>
</div>,
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track ant-slider-track-1"
style="left:20%;right:auto;width:30%"
style="left:20%;width:30%"
/>
<div
class="ant-slider-step"
@ -49,7 +46,7 @@ Array [
aria-valuenow="20"
class="ant-slider-handle ant-slider-handle-1"
role="slider"
style="left:20%;right:auto;transform:translateX(-50%)"
style="left:20%;transform:translateX(-50%)"
tabindex="0"
/>
<div
@ -59,12 +56,9 @@ Array [
aria-valuenow="50"
class="ant-slider-handle ant-slider-handle-2"
role="slider"
style="left:50%;right:auto;transform:translateX(-50%)"
style="left:50%;transform:translateX(-50%)"
tabindex="0"
/>
<div
class="ant-slider-mark"
/>
</div>,
"Disabled: ",
<button
@ -85,14 +79,14 @@ Array [
exports[`renders ./components/slider/demo/dragableTrack.md correctly 1`] = `
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track ant-slider-track-1"
style="left:20%;right:auto;width:30%"
style="left:20%;width:30%"
/>
<div
class="ant-slider-step"
@ -104,7 +98,7 @@ exports[`renders ./components/slider/demo/dragableTrack.md correctly 1`] = `
aria-valuenow="20"
class="ant-slider-handle ant-slider-handle-1"
role="slider"
style="left:20%;right:auto;transform:translateX(-50%)"
style="left:20%;transform:translateX(-50%)"
tabindex="0"
/>
<div
@ -114,26 +108,23 @@ exports[`renders ./components/slider/demo/dragableTrack.md correctly 1`] = `
aria-valuenow="50"
class="ant-slider-handle ant-slider-handle-2"
role="slider"
style="left:50%;right:auto;transform:translateX(-50%)"
style="left:50%;transform:translateX(-50%)"
tabindex="0"
/>
<div
class="ant-slider-mark"
/>
</div>
`;
exports[`renders ./components/slider/demo/event.md correctly 1`] = `
Array [
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:30%"
style="left:0%;width:30%"
/>
<div
class="ant-slider-step"
@ -145,22 +136,19 @@ Array [
aria-valuenow="30"
class="ant-slider-handle"
role="slider"
style="left:30%;right:auto;transform:translateX(-50%)"
style="left:30%;transform:translateX(-50%)"
tabindex="0"
/>
<div
class="ant-slider-mark"
/>
</div>,
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track ant-slider-track-1"
style="left:20%;right:auto;width:30%"
style="left:20%;width:30%"
/>
<div
class="ant-slider-step"
@ -172,7 +160,7 @@ Array [
aria-valuenow="20"
class="ant-slider-handle ant-slider-handle-1"
role="slider"
style="left:20%;right:auto;transform:translateX(-50%)"
style="left:20%;transform:translateX(-50%)"
tabindex="0"
/>
<div
@ -182,12 +170,9 @@ Array [
aria-valuenow="50"
class="ant-slider-handle ant-slider-handle-2"
role="slider"
style="left:50%;right:auto;transform:translateX(-50%)"
style="left:50%;transform:translateX(-50%)"
tabindex="0"
/>
<div
class="ant-slider-mark"
/>
</div>,
]
`;
@ -216,14 +201,14 @@ exports[`renders ./components/slider/demo/icon-slider.md correctly 1`] = `
</svg>
</span>
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:0%"
style="left:0%;width:0%"
/>
<div
class="ant-slider-step"
@ -235,12 +220,9 @@ exports[`renders ./components/slider/demo/icon-slider.md correctly 1`] = `
aria-valuenow="0"
class="ant-slider-handle"
role="slider"
style="left:0%;right:auto;transform:translateX(-50%)"
style="left:0%;transform:translateX(-50%)"
tabindex="0"
/>
<div
class="ant-slider-mark"
/>
</div>
<span
aria-label="smile"
@ -273,14 +255,14 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
class="ant-col ant-col-12"
>
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:0%"
style="left:0%;width:0%"
/>
<div
class="ant-slider-step"
@ -292,12 +274,9 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
aria-valuenow="1"
class="ant-slider-handle"
role="slider"
style="left:0%;right:auto;transform:translateX(-50%)"
style="left:0%;transform:translateX(-50%)"
tabindex="0"
/>
<div
class="ant-slider-mark"
/>
</div>
</div>
<div
@ -389,14 +368,14 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
class="ant-col ant-col-12"
>
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:0%"
style="left:0%;width:0%"
/>
<div
class="ant-slider-step"
@ -408,12 +387,9 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
aria-valuenow="0"
class="ant-slider-handle"
role="slider"
style="left:0%;right:auto;transform:translateX(-50%)"
style="left:0%;transform:translateX(-50%)"
tabindex="0"
/>
<div
class="ant-slider-mark"
/>
</div>
</div>
<div
@ -507,33 +483,33 @@ Array [
included=true
</h4>,
<div
class="ant-slider ant-slider-with-marks"
class="ant-slider ant-slider-horizontal ant-slider-with-marks"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:37%"
style="left:0%;width:37%"
/>
<div
class="ant-slider-step"
>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:0%"
style="left:0%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:26%"
style="left:26%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:37%"
style="left:37%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:100%"
style="left:100%;transform:translateX(-50%)"
/>
</div>
<div
@ -543,7 +519,7 @@ Array [
aria-valuenow="37"
class="ant-slider-handle"
role="slider"
style="left:37%;right:auto;transform:translateX(-50%)"
style="left:37%;transform:translateX(-50%)"
tabindex="0"
/>
<div
@ -551,25 +527,25 @@ Array [
>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
style="left:0%;transform:translateX(-50%)"
>
0°C
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:26%"
style="left:26%;transform:translateX(-50%)"
>
26°C
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:37%"
style="left:37%;transform:translateX(-50%)"
>
37°C
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%;color:#f50"
style="left:100%;transform:translateX(-50%);color:#f50"
>
<strong>
100°C
@ -578,33 +554,33 @@ Array [
</div>
</div>,
<div
class="ant-slider ant-slider-with-marks"
class="ant-slider ant-slider-horizontal ant-slider-with-marks"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track ant-slider-track-1"
style="left:26%;right:auto;width:11%"
style="left:26%;width:11%"
/>
<div
class="ant-slider-step"
>
<span
class="ant-slider-dot"
style="left:0%"
style="left:0%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:26%"
style="left:26%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:37%"
style="left:37%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:100%"
style="left:100%;transform:translateX(-50%)"
/>
</div>
<div
@ -614,7 +590,7 @@ Array [
aria-valuenow="26"
class="ant-slider-handle ant-slider-handle-1"
role="slider"
style="left:26%;right:auto;transform:translateX(-50%)"
style="left:26%;transform:translateX(-50%)"
tabindex="0"
/>
<div
@ -624,7 +600,7 @@ Array [
aria-valuenow="37"
class="ant-slider-handle ant-slider-handle-2"
role="slider"
style="left:37%;right:auto;transform:translateX(-50%)"
style="left:37%;transform:translateX(-50%)"
tabindex="0"
/>
<div
@ -632,25 +608,25 @@ Array [
>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
style="left:0%;transform:translateX(-50%)"
>
0°C
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:26%"
style="left:26%;transform:translateX(-50%)"
>
26°C
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:37%"
style="left:37%;transform:translateX(-50%)"
>
37°C
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%;color:#f50"
style="left:100%;transform:translateX(-50%);color:#f50"
>
<strong>
100°C
@ -662,7 +638,7 @@ Array [
included=false
</h4>,
<div
class="ant-slider ant-slider-with-marks"
class="ant-slider ant-slider-horizontal ant-slider-with-marks"
>
<div
class="ant-slider-rail"
@ -672,19 +648,19 @@ Array [
>
<span
class="ant-slider-dot"
style="left:0%"
style="left:0%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:26%"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:37%"
style="left:26%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:100%"
style="left:37%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:100%;transform:translateX(-50%)"
/>
</div>
<div
@ -694,7 +670,7 @@ Array [
aria-valuenow="37"
class="ant-slider-handle"
role="slider"
style="left:37%;right:auto;transform:translateX(-50%)"
style="left:37%;transform:translateX(-50%)"
tabindex="0"
/>
<div
@ -702,25 +678,25 @@ Array [
>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
style="left:0%;transform:translateX(-50%)"
>
0°C
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:26%"
style="left:26%;transform:translateX(-50%)"
>
26°C
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:37%"
class="ant-slider-mark-text"
style="left:37%;transform:translateX(-50%)"
>
37°C
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%;color:#f50"
style="left:100%;transform:translateX(-50%);color:#f50"
>
<strong>
100°C
@ -732,33 +708,33 @@ Array [
marks & step
</h4>,
<div
class="ant-slider ant-slider-with-marks"
class="ant-slider ant-slider-horizontal ant-slider-with-marks"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:37%"
style="left:0%;width:37%"
/>
<div
class="ant-slider-step"
>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:0%"
style="left:0%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:26%"
style="left:26%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:37%"
style="left:37%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:100%"
style="left:100%;transform:translateX(-50%)"
/>
</div>
<div
@ -768,7 +744,7 @@ Array [
aria-valuenow="37"
class="ant-slider-handle"
role="slider"
style="left:37%;right:auto;transform:translateX(-50%)"
style="left:37%;transform:translateX(-50%)"
tabindex="0"
/>
<div
@ -776,25 +752,25 @@ Array [
>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
style="left:0%;transform:translateX(-50%)"
>
0°C
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:26%"
style="left:26%;transform:translateX(-50%)"
>
26°C
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:37%"
style="left:37%;transform:translateX(-50%)"
>
37°C
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%;color:#f50"
style="left:100%;transform:translateX(-50%);color:#f50"
>
<strong>
100°C
@ -806,33 +782,33 @@ Array [
step=null
</h4>,
<div
class="ant-slider ant-slider-with-marks"
class="ant-slider ant-slider-horizontal ant-slider-with-marks"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:37%"
style="left:0%;width:37%"
/>
<div
class="ant-slider-step"
>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:0%"
style="left:0%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:26%"
style="left:26%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:37%"
style="left:37%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:100%"
style="left:100%;transform:translateX(-50%)"
/>
</div>
<div
@ -842,7 +818,7 @@ Array [
aria-valuenow="37"
class="ant-slider-handle"
role="slider"
style="left:37%;right:auto;transform:translateX(-50%)"
style="left:37%;transform:translateX(-50%)"
tabindex="0"
/>
<div
@ -850,25 +826,25 @@ Array [
>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
style="left:0%;transform:translateX(-50%)"
>
0°C
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:26%"
style="left:26%;transform:translateX(-50%)"
>
26°C
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:37%"
style="left:37%;transform:translateX(-50%)"
>
37°C
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%;color:#f50"
style="left:100%;transform:translateX(-50%);color:#f50"
>
<strong>
100°C
@ -882,14 +858,14 @@ Array [
exports[`renders ./components/slider/demo/reverse.md correctly 1`] = `
Array [
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="right:0%;left:auto;width:30%"
style="right:0%;width:30%"
/>
<div
class="ant-slider-step"
@ -901,22 +877,19 @@ Array [
aria-valuenow="30"
class="ant-slider-handle"
role="slider"
style="right:30%;left:auto;transform:translateX(+50%)"
style="right:30%;transform:translateX(50%)"
tabindex="0"
/>
<div
class="ant-slider-mark"
/>
</div>,
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track ant-slider-track-1"
style="right:20%;left:auto;width:30%"
style="right:20%;width:30%"
/>
<div
class="ant-slider-step"
@ -928,7 +901,7 @@ Array [
aria-valuenow="20"
class="ant-slider-handle ant-slider-handle-1"
role="slider"
style="right:20%;left:auto;transform:translateX(+50%)"
style="right:20%;transform:translateX(50%)"
tabindex="0"
/>
<div
@ -938,12 +911,9 @@ Array [
aria-valuenow="50"
class="ant-slider-handle ant-slider-handle-2"
role="slider"
style="right:50%;left:auto;transform:translateX(+50%)"
style="right:50%;transform:translateX(50%)"
tabindex="0"
/>
<div
class="ant-slider-mark"
/>
</div>,
"Reversed: ",
<button
@ -1019,14 +989,14 @@ exports[`renders ./components/slider/demo/show-tooltip.md correctly 1`] = `
exports[`renders ./components/slider/demo/tip-formatter.md correctly 1`] = `
Array [
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:0%"
style="left:0%;width:0%"
/>
<div
class="ant-slider-step"
@ -1038,22 +1008,19 @@ Array [
aria-valuenow="0"
class="ant-slider-handle"
role="slider"
style="left:0%;right:auto;transform:translateX(-50%)"
style="left:0%;transform:translateX(-50%)"
tabindex="0"
/>
<div
class="ant-slider-mark"
/>
</div>,
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:0%"
style="left:0%;width:0%"
/>
<div
class="ant-slider-step"
@ -1065,12 +1032,9 @@ Array [
aria-valuenow="0"
class="ant-slider-handle"
role="slider"
style="left:0%;right:auto;transform:translateX(-50%)"
style="left:0%;transform:translateX(-50%)"
tabindex="0"
/>
<div
class="ant-slider-mark"
/>
</div>,
]
`;
@ -1088,7 +1052,7 @@ Array [
/>
<div
class="ant-slider-track"
style="bottom:0%;top:auto;height:30%"
style="bottom:0%;height:30%"
/>
<div
class="ant-slider-step"
@ -1100,12 +1064,9 @@ Array [
aria-valuenow="30"
class="ant-slider-handle"
role="slider"
style="bottom:30%;top:auto;transform:translateY(+50%)"
style="bottom:30%;transform:translateY(50%)"
tabindex="0"
/>
<div
class="ant-slider-mark"
/>
</div>
</div>,
<div
@ -1119,7 +1080,7 @@ Array [
/>
<div
class="ant-slider-track ant-slider-track-1"
style="bottom:20%;top:auto;height:30%"
style="bottom:20%;height:30%"
/>
<div
class="ant-slider-step"
@ -1131,7 +1092,7 @@ Array [
aria-valuenow="20"
class="ant-slider-handle ant-slider-handle-1"
role="slider"
style="bottom:20%;top:auto;transform:translateY(+50%)"
style="bottom:20%;transform:translateY(50%)"
tabindex="0"
/>
<div
@ -1141,45 +1102,42 @@ Array [
aria-valuenow="50"
class="ant-slider-handle ant-slider-handle-2"
role="slider"
style="bottom:50%;top:auto;transform:translateY(+50%)"
style="bottom:50%;transform:translateY(50%)"
tabindex="0"
/>
<div
class="ant-slider-mark"
/>
</div>
</div>,
<div
style="display:inline-block;height:300px;margin-left:70px"
>
<div
class="ant-slider ant-slider-with-marks ant-slider-vertical"
class="ant-slider ant-slider-vertical ant-slider-with-marks"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track ant-slider-track-1"
style="bottom:26%;top:auto;height:11%"
style="bottom:26%;height:11%"
/>
<div
class="ant-slider-step"
>
<span
class="ant-slider-dot"
style="bottom:0%"
style="bottom:0%;transform:translateY(50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="bottom:26%"
style="bottom:26%;transform:translateY(50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="bottom:37%"
style="bottom:37%;transform:translateY(50%)"
/>
<span
class="ant-slider-dot"
style="bottom:100%"
style="bottom:100%;transform:translateY(50%)"
/>
</div>
<div
@ -1189,7 +1147,7 @@ Array [
aria-valuenow="26"
class="ant-slider-handle ant-slider-handle-1"
role="slider"
style="bottom:26%;top:auto;transform:translateY(+50%)"
style="bottom:26%;transform:translateY(50%)"
tabindex="0"
/>
<div
@ -1199,7 +1157,7 @@ Array [
aria-valuenow="37"
class="ant-slider-handle ant-slider-handle-2"
role="slider"
style="bottom:37%;top:auto;transform:translateY(+50%)"
style="bottom:37%;transform:translateY(50%)"
tabindex="0"
/>
<div
@ -1207,25 +1165,25 @@ Array [
>
<span
class="ant-slider-mark-text"
style="margin-bottom:-50%;bottom:0%"
style="bottom:0%;transform:translateY(50%)"
>
0°C
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="margin-bottom:-50%;bottom:26%"
style="bottom:26%;transform:translateY(50%)"
>
26°C
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="margin-bottom:-50%;bottom:37%"
style="bottom:37%;transform:translateY(50%)"
>
37°C
</span>
<span
class="ant-slider-mark-text"
style="margin-bottom:-50%;bottom:100%;color:#f50"
style="bottom:100%;transform:translateY(50%);color:#f50"
>
<strong>
100°C

16
components/slider/__tests__/__snapshots__/index.test.js.snap
View File

@ -2,7 +2,7 @@
exports[`Slider rtl render component should be rendered correctly in RTL direction 1`] = `
<div
class="ant-slider ant-slider-rtl"
class="ant-slider ant-slider-rtl ant-slider-horizontal"
>
<div
class="ant-slider-rail"
@ -21,25 +21,22 @@ exports[`Slider rtl render component should be rendered correctly in RTL directi
aria-valuenow="0"
class="ant-slider-handle"
role="slider"
style="right: 0%; transform: translateX(+50%);"
style="right: 0%; transform: translateX(50%);"
tabindex="0"
/>
<div
class="ant-slider-mark"
/>
</div>
`;
exports[`Slider should render in RTL direction 1`] = `
<div
class="ant-slider ant-slider-rtl"
class="ant-slider ant-slider-rtl ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="right:0%;left:auto;width:30%"
style="right:0%;width:30%"
/>
<div
class="ant-slider-step"
@ -51,7 +48,7 @@ exports[`Slider should render in RTL direction 1`] = `
aria-valuenow="30"
class="ant-slider-handle ant-tooltip-open"
role="slider"
style="right:30%;left:auto;transform:translateX(+50%)"
style="right:30%;transform:translateX(50%)"
tabindex="0"
/>
<div>
@ -78,9 +75,6 @@ exports[`Slider should render in RTL direction 1`] = `
</div>
</div>
</div>
<div
class="ant-slider-mark"
/>
</div>
`;

8
components/slider/__tests__/index.test.js
View File

@ -11,7 +11,7 @@ import { sleep } from '../../../tests/utils';
describe('Slider', () => {
mountTest(Slider);
rtlTest(Slider);
focusTest(Slider, { refFocus: true });
focusTest(Slider, { testLib: true });
it('should show tooltip when hovering slider handler', () => {
const wrapper = mount(<Slider defaultValue={30} />);
@ -51,7 +51,7 @@ describe('Slider', () => {
const wrapper = mount(
<Slider marks={marks} defaultValue={intentionallyWrongValue} step={null} tooltipVisible />,
);
expect(wrapper.find('.ant-slider-handle').get(0).props).toHaveProperty('value', 48);
expect(wrapper.find('.ant-slider-handle').get(0).props).toHaveProperty('aria-valuenow', 48);
});
it('when step is not null, thumb can be slided to the multiples of step', () => {
@ -62,7 +62,7 @@ describe('Slider', () => {
};
const wrapper = mount(<Slider marks={marks} defaultValue={49} step={1} tooltipVisible />);
expect(wrapper.find('.ant-slider-handle').get(0).props).toHaveProperty('value', 49);
expect(wrapper.find('.ant-slider-handle').get(0).props).toHaveProperty('aria-valuenow', 49);
});
it('when step is undefined, thumb can be slided to the multiples of step', () => {
@ -75,7 +75,7 @@ describe('Slider', () => {
const wrapper = mount(
<Slider marks={marks} defaultValue={49} step={undefined} tooltipVisible />,
);
expect(wrapper.find('.ant-slider-handle').get(0).props).toHaveProperty('value', 49);
expect(wrapper.find('.ant-slider-handle').get(0).props).toHaveProperty('aria-valuenow', 49);
});
it('should render in RTL direction', () => {

120
components/slider/index.tsx
View File

@ -1,18 +1,11 @@
import * as React from 'react';
import RcSlider, { Range as RcRange, Handle as RcHandle } from 'rc-slider';
import RcSlider, { SliderProps as RcSliderProps } from 'rc-slider';
import classNames from 'classnames';
import { TooltipPlacement } from '../tooltip';
import SliderTooltip from './SliderTooltip';
import { ConfigContext } from '../config-provider';
export interface SliderMarks {
[key: number]:
| React.ReactNode
| {
style: React.CSSProperties;
label: React.ReactNode;
};
}
export type SliderMarks = RcSliderProps['marks'];
interface HandleGeneratorInfo {
value?: number;
@ -93,43 +86,6 @@ const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
return direction === 'rtl' ? 'left' : 'right';
};
const handleWithTooltip: HandleGeneratorFn = ({
tooltipPrefixCls,
prefixCls,
info: { value, dragging, index, ...restProps },
}) => {
const {
tipFormatter,
tooltipVisible,
tooltipPlacement,
getTooltipPopupContainer,
vertical,
} = props;
const isTipFormatter = tipFormatter ? visibles[index] || dragging : false;
const visible = tooltipVisible || (tooltipVisible === undefined && isTipFormatter);
const rootPrefixCls = getPrefixCls();
return (
<SliderTooltip
prefixCls={tooltipPrefixCls}
title={tipFormatter ? tipFormatter(value) : ''}
visible={visible}
placement={getTooltipPlacement(tooltipPlacement, vertical)}
transitionName={`${rootPrefixCls}-zoom-down`}
key={index}
overlayClassName={`${prefixCls}-tooltip`}
getPopupContainer={getTooltipPopupContainer || getPopupContainer}
>
<RcHandle
{...restProps}
value={value}
onMouseEnter={() => toggleTooltipVisible(index, true)}
onMouseLeave={() => toggleTooltipVisible(index, false)}
/>
</SliderTooltip>
);
};
const {
prefixCls: customizePrefixCls,
tooltipPrefixCls: customizeTooltipPrefixCls,
@ -148,45 +104,57 @@ const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
restProps.reverse = !restProps.reverse;
}
// extrack draggableTrack from range={{ ... }}
let draggableTrack: boolean | undefined;
if (typeof range === 'object') {
draggableTrack = range.draggableTrack;
}
// Range config
const [mergedRange, draggableTrack] = React.useMemo(() => {
if (!range) {
return [false];
}
return typeof range === 'object' ? [true, range.draggableTrack] : [true, false];
}, [range]);
const handleRender: RcSliderProps['handleRender'] = (node, info) => {
const { index, dragging } = info;
const rootPrefixCls = getPrefixCls();
const { tipFormatter, tooltipVisible, tooltipPlacement, getTooltipPopupContainer, vertical } =
props;
const isTipFormatter = tipFormatter ? visibles[index] || dragging : false;
const visible = tooltipVisible || (tooltipVisible === undefined && isTipFormatter);
const passedProps = {
...node.props,
onMouseEnter: () => toggleTooltipVisible(index, true),
onMouseLeave: () => toggleTooltipVisible(index, false),
};
if (range) {
return (
<RcRange
{...(restProps as SliderRangeProps)}
step={restProps.step!}
draggableTrack={draggableTrack}
className={cls}
ref={ref}
handle={(info: HandleGeneratorInfo) =>
handleWithTooltip({
tooltipPrefixCls,
prefixCls,
info,
})
}
prefixCls={prefixCls}
/>
<SliderTooltip
prefixCls={tooltipPrefixCls}
title={tipFormatter ? tipFormatter(info.value) : ''}
visible={visible}
placement={getTooltipPlacement(tooltipPlacement, vertical)}
transitionName={`${rootPrefixCls}-zoom-down`}
key={index}
overlayClassName={`${prefixCls}-tooltip`}
getPopupContainer={getTooltipPopupContainer || getPopupContainer}
>
{React.cloneElement(node, passedProps)}
</SliderTooltip>
);
}
};
return (
<RcSlider
{...(restProps as SliderSingleProps)}
{...(restProps as SliderRangeProps)}
step={restProps.step!}
range={mergedRange}
draggableTrack={draggableTrack}
className={cls}
ref={ref}
handle={(info: HandleGeneratorInfo) =>
handleWithTooltip({
tooltipPrefixCls,
prefixCls,
info,
})
}
prefixCls={prefixCls}
handleRender={handleRender}
/>
);
},

22
components/slider/style/index.less
View File

@ -49,9 +49,12 @@
transition: border-color 0.3s, box-shadow 0.6s,
transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
&-dragging&-dragging&-dragging {
border-color: @slider-handle-color-focus;
box-shadow: 0 0 0 5px @slider-handle-color-focus-shadow;
// &-dragging&-dragging&-dragging {
// border-color: @slider-handle-color-focus;
// box-shadow: 0 0 0 5px @slider-handle-color-focus-shadow;
// }
&-dragging {
z-index: 1;
}
&:focus {
@ -104,6 +107,7 @@
width: 100%;
height: 4px;
background: transparent;
pointer-events: none;
}
&-dot {
@ -111,20 +115,11 @@
top: -2px;
width: 8px;
height: 8px;
margin-left: -4px;
background-color: @component-background;
border: 2px solid @slider-dot-border-color;
border-radius: 50%;
cursor: pointer;
&:first-child {
margin-left: -4px;
}
&:last-child {
margin-left: -4px;
}
&-active {
border-color: @slider-dot-border-color-active;
}
@ -196,8 +191,7 @@
.@{slider-prefix-cls}-dot {
top: auto;
left: 2px;
margin-bottom: -4px;
margin-left: -2px;
}
}

21
components/slider/style/rtl.less
View File

@ -14,27 +14,6 @@
left: auto;
}
}
&-dot {
.@{slider-prefix-cls}-rtl & {
margin-right: -4px;
margin-left: 0;
}
&:first-child {
.@{slider-prefix-cls}-rtl & {
margin-right: -4px;
margin-left: 0;
}
}
&:last-child {
.@{slider-prefix-cls}-rtl & {
margin-right: -4px;
margin-left: 0;
}
}
}
}
.vertical() {

9
components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -321,14 +321,14 @@ exports[`renders ./components/space/demo/base.md extend context correctly 1`] =
exports[`renders ./components/space/demo/customize.md extend context correctly 1`] = `
Array [
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:8%"
style="left:0%;width:8%"
/>
<div
class="ant-slider-step"
@ -340,7 +340,7 @@ Array [
aria-valuenow="8"
class="ant-slider-handle"
role="slider"
style="left:8%;right:auto;transform:translateX(-50%)"
style="left:8%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -367,9 +367,6 @@ Array [
</div>
</div>
</div>
<div
class="ant-slider-mark"
/>
</div>,
<br />,
<br />,

9
components/space/__tests__/__snapshots__/demo.test.js.snap
View File

@ -246,14 +246,14 @@ exports[`renders ./components/space/demo/base.md correctly 1`] = `
exports[`renders ./components/space/demo/customize.md correctly 1`] = `
Array [
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:8%"
style="left:0%;width:8%"
/>
<div
class="ant-slider-step"
@ -265,12 +265,9 @@ Array [
aria-valuenow="8"
class="ant-slider-handle"
role="slider"
style="left:8%;right:auto;transform:translateX(-50%)"
style="left:8%;transform:translateX(-50%)"
tabindex="0"
/>
<div
class="ant-slider-mark"
/>
</div>,
<br />,
<br />,

18
components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -387,14 +387,14 @@ Array [
/>
</button>,
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:0%"
style="left:0%;width:0%"
/>
<div
class="ant-slider-step"
@ -406,7 +406,7 @@ Array [
aria-valuenow="1"
class="ant-slider-handle"
role="slider"
style="left:0%;right:auto;transform:translateX(-50%)"
style="left:0%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -433,9 +433,6 @@ Array [
</div>
</div>
</div>
<div
class="ant-slider-mark"
/>
</div>,
<div
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
@ -1535,14 +1532,14 @@ Array [
exports[`renders ./components/typography/demo/suffix.md extend context correctly 1`] = `
Array [
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:0%"
style="left:0%;width:0%"
/>
<div
class="ant-slider-step"
@ -1554,7 +1551,7 @@ Array [
aria-valuenow="1"
class="ant-slider-handle"
role="slider"
style="left:0%;right:auto;transform:translateX(-50%)"
style="left:0%;transform:translateX(-50%)"
tabindex="0"
/>
<div>
@ -1581,9 +1578,6 @@ Array [
</div>
</div>
</div>
<div
class="ant-slider-mark"
/>
</div>,
<div
aria-label="To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life"

18
components/typography/__tests__/__snapshots__/demo.test.js.snap
View File

@ -363,14 +363,14 @@ Array [
/>
</button>,
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:0%"
style="left:0%;width:0%"
/>
<div
class="ant-slider-step"
@ -382,12 +382,9 @@ Array [
aria-valuenow="1"
class="ant-slider-handle"
role="slider"
style="left:0%;right:auto;transform:translateX(-50%)"
style="left:0%;transform:translateX(-50%)"
tabindex="0"
/>
<div
class="ant-slider-mark"
/>
</div>,
<div
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
@ -1179,14 +1176,14 @@ Array [
exports[`renders ./components/typography/demo/suffix.md correctly 1`] = `
Array [
<div
class="ant-slider"
class="ant-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:0%"
style="left:0%;width:0%"
/>
<div
class="ant-slider-step"
@ -1198,12 +1195,9 @@ Array [
aria-valuenow="1"
class="ant-slider-handle"
role="slider"
style="left:0%;right:auto;transform:translateX(-50%)"
style="left:0%;transform:translateX(-50%)"
tabindex="0"
/>
<div
class="ant-slider-mark"
/>
</div>,
<div
aria-label="To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life"

4
package.json
View File

@ -141,7 +141,7 @@
"rc-rate": "~2.9.0",
"rc-resize-observer": "^1.2.0",
"rc-select": "~14.0.0-alpha.15",
"rc-slider": "~9.7.4",
"rc-slider": "~10.0.0-alpha.4",
"rc-steps": "~4.1.0",
"rc-switch": "~3.2.0",
"rc-table": "~7.23.0",
@ -163,6 +163,8 @@
"@docsearch/react": "^3.0.0-alpha.39",
"@qixian.cs/github-contributors-list": "^1.0.3",
"@stackblitz/sdk": "^1.3.0",
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.3",
"@types/enzyme": "^3.10.5",
"@types/gtag.js": "^0.0.8",
"@types/jest": "^27.0.0",

42
tests/shared/focusTest.tsx
View File

@ -1,9 +1,14 @@
import React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';
import { mount, ReactWrapper } from 'enzyme';
import { sleep } from '../utils';
// eslint-disable-next-line jest/no-export
export default function focusTest(Component: React.ComponentType<any>, { refFocus = false } = {}) {
export default function focusTest(
Component: React.ComponentType<any>,
{ refFocus = false, testLib = false } = {},
) {
describe('focus and blur', () => {
let focused = false;
let blurred = false;
@ -21,6 +26,41 @@ export default function focusTest(Component: React.ComponentType<any>, { refFocu
}
});
// ==================== React Test Lib ====================
if (testLib) {
it('Test: focus() and onFocus', () => {
const handleFocus = jest.fn();
const ref = React.createRef<any>();
const { unmount } = render(<Component onFocus={handleFocus} ref={ref} />);
ref.current.focus();
expect(handleFocus).toHaveBeenCalled();
unmount();
});
it('Test: blur() and onBlur', async () => {
const handleBlur = jest.fn();
const ref = React.createRef<any>();
const { unmount } = render(<Component ref={ref} onBlur={handleBlur} />);
ref.current.focus();
ref.current.blur();
expect(handleBlur).toHaveBeenCalled();
unmount();
});
it('Test: autoFocus', () => {
const handleFocus = jest.fn();
const { unmount } = render(<Component autoFocus onFocus={handleFocus} />);
expect(handleFocus).toHaveBeenCalled();
unmount();
});
return;
}
// ======================== Enzyme ========================
let container: HTMLElement;
beforeEach(() => {
container = document.createElement('div');