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

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`] = ` exports[`ConfigProvider components Slider configProvider 1`] = `
<div <div
class="config-slider" class="config-slider config-slider-horizontal"
> >
<div <div
class="config-slider-rail" class="config-slider-rail"
/> />
<div <div
class="config-slider-track" class="config-slider-track"
style="left:0%;right:auto;width:0%" style="left:0%;width:0%"
/> />
<div <div
class="config-slider-step" class="config-slider-step"
@ -21923,7 +21923,7 @@ exports[`ConfigProvider components Slider configProvider 1`] = `
aria-valuenow="0" aria-valuenow="0"
class="config-slider-handle config-tooltip-open" class="config-slider-handle config-tooltip-open"
role="slider" role="slider"
style="left:0%;right:auto;transform:translateX(-50%)" style="left:0%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -21950,22 +21950,19 @@ exports[`ConfigProvider components Slider configProvider 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div
class="config-slider-mark"
/>
</div> </div>
`; `;
exports[`ConfigProvider components Slider configProvider componentSize large 1`] = ` exports[`ConfigProvider components Slider configProvider componentSize large 1`] = `
<div <div
class="config-slider" class="config-slider config-slider-horizontal"
> >
<div <div
class="config-slider-rail" class="config-slider-rail"
/> />
<div <div
class="config-slider-track" class="config-slider-track"
style="left:0%;right:auto;width:0%" style="left:0%;width:0%"
/> />
<div <div
class="config-slider-step" class="config-slider-step"
@ -21977,7 +21974,7 @@ exports[`ConfigProvider components Slider configProvider componentSize large 1`]
aria-valuenow="0" aria-valuenow="0"
class="config-slider-handle config-tooltip-open" class="config-slider-handle config-tooltip-open"
role="slider" role="slider"
style="left:0%;right:auto;transform:translateX(-50%)" style="left:0%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -22004,22 +22001,19 @@ exports[`ConfigProvider components Slider configProvider componentSize large 1`]
</div> </div>
</div> </div>
</div> </div>
<div
class="config-slider-mark"
/>
</div> </div>
`; `;
exports[`ConfigProvider components Slider configProvider componentSize middle 1`] = ` exports[`ConfigProvider components Slider configProvider componentSize middle 1`] = `
<div <div
class="config-slider" class="config-slider config-slider-horizontal"
> >
<div <div
class="config-slider-rail" class="config-slider-rail"
/> />
<div <div
class="config-slider-track" class="config-slider-track"
style="left:0%;right:auto;width:0%" style="left:0%;width:0%"
/> />
<div <div
class="config-slider-step" class="config-slider-step"
@ -22031,7 +22025,7 @@ exports[`ConfigProvider components Slider configProvider componentSize middle 1`
aria-valuenow="0" aria-valuenow="0"
class="config-slider-handle config-tooltip-open" class="config-slider-handle config-tooltip-open"
role="slider" role="slider"
style="left:0%;right:auto;transform:translateX(-50%)" style="left:0%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -22058,22 +22052,19 @@ exports[`ConfigProvider components Slider configProvider componentSize middle 1`
</div> </div>
</div> </div>
</div> </div>
<div
class="config-slider-mark"
/>
</div> </div>
`; `;
exports[`ConfigProvider components Slider configProvider virtual and dropdownMatchSelectWidth 1`] = ` exports[`ConfigProvider components Slider configProvider virtual and dropdownMatchSelectWidth 1`] = `
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:0%" style="left:0%;width:0%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -22085,7 +22076,7 @@ exports[`ConfigProvider components Slider configProvider virtual and dropdownMat
aria-valuenow="0" aria-valuenow="0"
class="ant-slider-handle ant-tooltip-open" class="ant-slider-handle ant-tooltip-open"
role="slider" role="slider"
style="left:0%;right:auto;transform:translateX(-50%)" style="left:0%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -22112,22 +22103,19 @@ exports[`ConfigProvider components Slider configProvider virtual and dropdownMat
</div> </div>
</div> </div>
</div> </div>
<div
class="ant-slider-mark"
/>
</div> </div>
`; `;
exports[`ConfigProvider components Slider normal 1`] = ` exports[`ConfigProvider components Slider normal 1`] = `
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:0%" style="left:0%;width:0%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -22139,7 +22127,7 @@ exports[`ConfigProvider components Slider normal 1`] = `
aria-valuenow="0" aria-valuenow="0"
class="ant-slider-handle ant-tooltip-open" class="ant-slider-handle ant-tooltip-open"
role="slider" role="slider"
style="left:0%;right:auto;transform:translateX(-50%)" style="left:0%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -22166,22 +22154,19 @@ exports[`ConfigProvider components Slider normal 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div
class="ant-slider-mark"
/>
</div> </div>
`; `;
exports[`ConfigProvider components Slider prefixCls 1`] = ` exports[`ConfigProvider components Slider prefixCls 1`] = `
<div <div
class="prefix-Slider" class="prefix-Slider prefix-Slider-horizontal"
> >
<div <div
class="prefix-Slider-rail" class="prefix-Slider-rail"
/> />
<div <div
class="prefix-Slider-track" class="prefix-Slider-track"
style="left:0%;right:auto;width:0%" style="left:0%;width:0%"
/> />
<div <div
class="prefix-Slider-step" class="prefix-Slider-step"
@ -22193,7 +22178,7 @@ exports[`ConfigProvider components Slider prefixCls 1`] = `
aria-valuenow="0" aria-valuenow="0"
class="prefix-Slider-handle prefix-Slider-tooltip-open" class="prefix-Slider-handle prefix-Slider-tooltip-open"
role="slider" role="slider"
style="left:0%;right:auto;transform:translateX(-50%)" style="left:0%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -22220,9 +22205,6 @@ exports[`ConfigProvider components Slider prefixCls 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div
class="prefix-Slider-mark"
/>
</div> </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" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-slider ant-slider-with-marks" class="ant-slider ant-slider-horizontal ant-slider-with-marks"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:0%" style="left:0%;width:0%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
> >
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:0%" style="left:0%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:20%" style="left:20%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:40%" style="left:40%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:60%" style="left:60%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:80%" style="left:80%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:100%" style="left:100%;transform:translateX(-50%)"
/> />
</div> </div>
<div <div
@ -15298,7 +15298,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
aria-valuenow="0" aria-valuenow="0"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:0%;right:auto;transform:translateX(-50%)" style="left:0%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -15330,37 +15330,37 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
> >
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 A
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:20%" style="left:20%;transform:translateX(-50%)"
> >
B B
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%" style="left:40%;transform:translateX(-50%)"
> >
C C
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%" style="left:60%;transform:translateX(-50%)"
> >
D D
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%" style="left:80%;transform:translateX(-50%)"
> >
E E
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%" style="left:100%;transform:translateX(-50%)"
> >
F F
</span> </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" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-slider ant-slider-with-marks" class="ant-slider ant-slider-horizontal ant-slider-with-marks"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:0%" style="left:0%;width:0%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
> >
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:0%" style="left:0%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:20%" style="left:20%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:40%" style="left:40%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:60%" style="left:60%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:80%" style="left:80%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:100%" style="left:100%;transform:translateX(-50%)"
/> />
</div> </div>
<div <div
@ -6383,7 +6383,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
aria-valuenow="0" aria-valuenow="0"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:0%;right:auto;transform:translateX(-50%)" style="left:0%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -6391,37 +6391,37 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
> >
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 A
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:20%" style="left:20%;transform:translateX(-50%)"
> >
B B
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%" style="left:40%;transform:translateX(-50%)"
> >
C C
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%" style="left:60%;transform:translateX(-50%)"
> >
D D
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%" style="left:80%;transform:translateX(-50%)"
> >
E E
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%" style="left:100%;transform:translateX(-50%)"
> >
F F
</span> </span>

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

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

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

@ -838,41 +838,41 @@ Array [
style="width:50%" style="width:50%"
> >
<div <div
class="ant-slider ant-slider-with-marks" class="ant-slider ant-slider-horizontal ant-slider-with-marks"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:20%" style="left:0%;width:20%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
> >
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:0%" style="left:0%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:20%" style="left:20%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:40%" style="left:40%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:60%" style="left:60%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:80%" style="left:80%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:100%" style="left:100%;transform:translateX(-50%)"
/> />
</div> </div>
<div <div
@ -882,7 +882,7 @@ Array [
aria-valuenow="1" aria-valuenow="1"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:20%;right:auto;transform:translateX(-50%)" style="left:20%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -890,37 +890,37 @@ Array [
> >
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 8
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 16
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%" style="left:40%;transform:translateX(-50%)"
> >
24 24
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%" style="left:60%;transform:translateX(-50%)"
> >
32 32
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%" style="left:80%;transform:translateX(-50%)"
> >
40 40
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%" style="left:100%;transform:translateX(-50%)"
> >
48 48
</span> </span>
@ -934,41 +934,41 @@ Array [
style="width:50%" style="width:50%"
> >
<div <div
class="ant-slider ant-slider-with-marks" class="ant-slider ant-slider-horizontal ant-slider-with-marks"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:20%" style="left:0%;width:20%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
> >
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:0%" style="left:0%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:20%" style="left:20%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:40%" style="left:40%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:60%" style="left:60%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:80%" style="left:80%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:100%" style="left:100%;transform:translateX(-50%)"
/> />
</div> </div>
<div <div
@ -978,7 +978,7 @@ Array [
aria-valuenow="1" aria-valuenow="1"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:20%;right:auto;transform:translateX(-50%)" style="left:20%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -986,37 +986,37 @@ Array [
> >
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 8
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 16
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%" style="left:40%;transform:translateX(-50%)"
> >
24 24
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%" style="left:60%;transform:translateX(-50%)"
> >
32 32
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%" style="left:80%;transform:translateX(-50%)"
> >
40 40
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%" style="left:100%;transform:translateX(-50%)"
> >
48 48
</span> </span>
@ -1030,41 +1030,41 @@ Array [
style="width:50%;margin-bottom:48px" style="width:50%;margin-bottom:48px"
> >
<div <div
class="ant-slider ant-slider-with-marks" class="ant-slider ant-slider-horizontal ant-slider-with-marks"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:40%" style="left:0%;width:40%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
> >
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:0%" style="left:0%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:20%" style="left:20%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:40%" style="left:40%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:60%" style="left:60%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:80%" style="left:80%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:100%" style="left:100%;transform:translateX(-50%)"
/> />
</div> </div>
<div <div
@ -1074,7 +1074,7 @@ Array [
aria-valuenow="2" aria-valuenow="2"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:40%;right:auto;transform:translateX(-50%)" style="left:40%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -1082,37 +1082,37 @@ Array [
> >
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 2
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 3
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 4
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%" style="left:60%;transform:translateX(-50%)"
> >
6 6
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%" style="left:80%;transform:translateX(-50%)"
> >
8 8
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%" style="left:100%;transform:translateX(-50%)"
> >
12 12
</span> </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`] = ` exports[`renders ./components/slider/demo/basic.md extend context correctly 1`] = `
Array [ Array [
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:30%" style="left:0%;width:30%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -22,7 +22,7 @@ Array [
aria-valuenow="30" aria-valuenow="30"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:30%;right:auto;transform:translateX(-50%)" style="left:30%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -49,19 +49,16 @@ Array [
</div> </div>
</div> </div>
</div> </div>
<div
class="ant-slider-mark"
/>
</div>, </div>,
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track ant-slider-track-1" class="ant-slider-track ant-slider-track-1"
style="left:20%;right:auto;width:30%" style="left:20%;width:30%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -73,7 +70,7 @@ Array [
aria-valuenow="20" aria-valuenow="20"
class="ant-slider-handle ant-slider-handle-1" class="ant-slider-handle ant-slider-handle-1"
role="slider" role="slider"
style="left:20%;right:auto;transform:translateX(-50%)" style="left:20%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -107,7 +104,7 @@ Array [
aria-valuenow="50" aria-valuenow="50"
class="ant-slider-handle ant-slider-handle-2" class="ant-slider-handle ant-slider-handle-2"
role="slider" role="slider"
style="left:50%;right:auto;transform:translateX(-50%)" style="left:50%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -134,9 +131,6 @@ Array [
</div> </div>
</div> </div>
</div> </div>
<div
class="ant-slider-mark"
/>
</div>, </div>,
"Disabled: ", "Disabled: ",
<button <button
@ -157,14 +151,14 @@ Array [
exports[`renders ./components/slider/demo/dragableTrack.md extend context correctly 1`] = ` exports[`renders ./components/slider/demo/dragableTrack.md extend context correctly 1`] = `
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track ant-slider-track-1" class="ant-slider-track ant-slider-track-1"
style="left:20%;right:auto;width:30%" style="left:20%;width:30%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -176,7 +170,7 @@ exports[`renders ./components/slider/demo/dragableTrack.md extend context correc
aria-valuenow="20" aria-valuenow="20"
class="ant-slider-handle ant-slider-handle-1" class="ant-slider-handle ant-slider-handle-1"
role="slider" role="slider"
style="left:20%;right:auto;transform:translateX(-50%)" style="left:20%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -210,7 +204,7 @@ exports[`renders ./components/slider/demo/dragableTrack.md extend context correc
aria-valuenow="50" aria-valuenow="50"
class="ant-slider-handle ant-slider-handle-2" class="ant-slider-handle ant-slider-handle-2"
role="slider" role="slider"
style="left:50%;right:auto;transform:translateX(-50%)" style="left:50%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -237,23 +231,20 @@ exports[`renders ./components/slider/demo/dragableTrack.md extend context correc
</div> </div>
</div> </div>
</div> </div>
<div
class="ant-slider-mark"
/>
</div> </div>
`; `;
exports[`renders ./components/slider/demo/event.md extend context correctly 1`] = ` exports[`renders ./components/slider/demo/event.md extend context correctly 1`] = `
Array [ Array [
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:30%" style="left:0%;width:30%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -265,7 +256,7 @@ Array [
aria-valuenow="30" aria-valuenow="30"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:30%;right:auto;transform:translateX(-50%)" style="left:30%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -292,19 +283,16 @@ Array [
</div> </div>
</div> </div>
</div> </div>
<div
class="ant-slider-mark"
/>
</div>, </div>,
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track ant-slider-track-1" class="ant-slider-track ant-slider-track-1"
style="left:20%;right:auto;width:30%" style="left:20%;width:30%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -316,7 +304,7 @@ Array [
aria-valuenow="20" aria-valuenow="20"
class="ant-slider-handle ant-slider-handle-1" class="ant-slider-handle ant-slider-handle-1"
role="slider" role="slider"
style="left:20%;right:auto;transform:translateX(-50%)" style="left:20%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -350,7 +338,7 @@ Array [
aria-valuenow="50" aria-valuenow="50"
class="ant-slider-handle ant-slider-handle-2" class="ant-slider-handle ant-slider-handle-2"
role="slider" role="slider"
style="left:50%;right:auto;transform:translateX(-50%)" style="left:50%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -377,9 +365,6 @@ Array [
</div> </div>
</div> </div>
</div> </div>
<div
class="ant-slider-mark"
/>
</div>, </div>,
] ]
`; `;
@ -408,14 +393,14 @@ exports[`renders ./components/slider/demo/icon-slider.md extend context correctl
</svg> </svg>
</span> </span>
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:0%" style="left:0%;width:0%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -427,7 +412,7 @@ exports[`renders ./components/slider/demo/icon-slider.md extend context correctl
aria-valuenow="0" aria-valuenow="0"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:0%;right:auto;transform:translateX(-50%)" style="left:0%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -454,9 +439,6 @@ exports[`renders ./components/slider/demo/icon-slider.md extend context correctl
</div> </div>
</div> </div>
</div> </div>
<div
class="ant-slider-mark"
/>
</div> </div>
<span <span
aria-label="smile" aria-label="smile"
@ -489,14 +471,14 @@ exports[`renders ./components/slider/demo/input-number.md extend context correct
class="ant-col ant-col-12" class="ant-col ant-col-12"
> >
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:0%" style="left:0%;width:0%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -508,7 +490,7 @@ exports[`renders ./components/slider/demo/input-number.md extend context correct
aria-valuenow="1" aria-valuenow="1"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:0%;right:auto;transform:translateX(-50%)" style="left:0%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -535,9 +517,6 @@ exports[`renders ./components/slider/demo/input-number.md extend context correct
</div> </div>
</div> </div>
</div> </div>
<div
class="ant-slider-mark"
/>
</div> </div>
</div> </div>
<div <div
@ -629,14 +608,14 @@ exports[`renders ./components/slider/demo/input-number.md extend context correct
class="ant-col ant-col-12" class="ant-col ant-col-12"
> >
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:0%" style="left:0%;width:0%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -648,7 +627,7 @@ exports[`renders ./components/slider/demo/input-number.md extend context correct
aria-valuenow="0" aria-valuenow="0"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:0%;right:auto;transform:translateX(-50%)" style="left:0%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -675,9 +654,6 @@ exports[`renders ./components/slider/demo/input-number.md extend context correct
</div> </div>
</div> </div>
</div> </div>
<div
class="ant-slider-mark"
/>
</div> </div>
</div> </div>
<div <div
@ -771,33 +747,33 @@ Array [
included=true included=true
</h4>, </h4>,
<div <div
class="ant-slider ant-slider-with-marks" class="ant-slider ant-slider-horizontal ant-slider-with-marks"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:37%" style="left:0%;width:37%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
> >
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:0%" style="left:0%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:26%" style="left:26%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:37%" style="left:37%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:100%" style="left:100%;transform:translateX(-50%)"
/> />
</div> </div>
<div <div
@ -807,7 +783,7 @@ Array [
aria-valuenow="37" aria-valuenow="37"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:37%;right:auto;transform:translateX(-50%)" style="left:37%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -839,25 +815,25 @@ Array [
> >
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 0°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 26°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 37°C
</span> </span>
<span <span
class="ant-slider-mark-text" 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> <strong>
100°C 100°C
@ -866,33 +842,33 @@ Array [
</div> </div>
</div>, </div>,
<div <div
class="ant-slider ant-slider-with-marks" class="ant-slider ant-slider-horizontal ant-slider-with-marks"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track ant-slider-track-1" class="ant-slider-track ant-slider-track-1"
style="left:26%;right:auto;width:11%" style="left:26%;width:11%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
> >
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:0%" style="left:0%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:26%" style="left:26%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:37%" style="left:37%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:100%" style="left:100%;transform:translateX(-50%)"
/> />
</div> </div>
<div <div
@ -902,7 +878,7 @@ Array [
aria-valuenow="26" aria-valuenow="26"
class="ant-slider-handle ant-slider-handle-1" class="ant-slider-handle ant-slider-handle-1"
role="slider" role="slider"
style="left:26%;right:auto;transform:translateX(-50%)" style="left:26%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -936,7 +912,7 @@ Array [
aria-valuenow="37" aria-valuenow="37"
class="ant-slider-handle ant-slider-handle-2" class="ant-slider-handle ant-slider-handle-2"
role="slider" role="slider"
style="left:37%;right:auto;transform:translateX(-50%)" style="left:37%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -968,25 +944,25 @@ Array [
> >
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%" style="left:0%;transform:translateX(-50%)"
> >
0°C 0°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 26°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 37°C
</span> </span>
<span <span
class="ant-slider-mark-text" 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> <strong>
100°C 100°C
@ -998,7 +974,7 @@ Array [
included=false included=false
</h4>, </h4>,
<div <div
class="ant-slider ant-slider-with-marks" class="ant-slider ant-slider-horizontal ant-slider-with-marks"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
@ -1008,19 +984,19 @@ Array [
> >
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:0%" style="left:0%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:26%" style="left:26%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:37%"
/> />
<span <span
class="ant-slider-dot" 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>
<div <div
@ -1030,7 +1006,7 @@ Array [
aria-valuenow="37" aria-valuenow="37"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:37%;right:auto;transform:translateX(-50%)" style="left:37%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -1062,25 +1038,25 @@ Array [
> >
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%" style="left:0%;transform:translateX(-50%)"
> >
0°C 0°C
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:26%" style="left:26%;transform:translateX(-50%)"
> >
26°C 26°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:37%" style="left:37%;transform:translateX(-50%)"
> >
37°C 37°C
</span> </span>
<span <span
class="ant-slider-mark-text" 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> <strong>
100°C 100°C
@ -1092,33 +1068,33 @@ Array [
marks & step marks & step
</h4>, </h4>,
<div <div
class="ant-slider ant-slider-with-marks" class="ant-slider ant-slider-horizontal ant-slider-with-marks"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:37%" style="left:0%;width:37%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
> >
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:0%" style="left:0%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:26%" style="left:26%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:37%" style="left:37%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:100%" style="left:100%;transform:translateX(-50%)"
/> />
</div> </div>
<div <div
@ -1128,7 +1104,7 @@ Array [
aria-valuenow="37" aria-valuenow="37"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:37%;right:auto;transform:translateX(-50%)" style="left:37%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -1160,25 +1136,25 @@ Array [
> >
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 0°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 26°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 37°C
</span> </span>
<span <span
class="ant-slider-mark-text" 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> <strong>
100°C 100°C
@ -1190,33 +1166,33 @@ Array [
step=null step=null
</h4>, </h4>,
<div <div
class="ant-slider ant-slider-with-marks" class="ant-slider ant-slider-horizontal ant-slider-with-marks"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:37%" style="left:0%;width:37%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
> >
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:0%" style="left:0%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:26%" style="left:26%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:37%" style="left:37%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:100%" style="left:100%;transform:translateX(-50%)"
/> />
</div> </div>
<div <div
@ -1226,7 +1202,7 @@ Array [
aria-valuenow="37" aria-valuenow="37"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:37%;right:auto;transform:translateX(-50%)" style="left:37%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -1258,25 +1234,25 @@ Array [
> >
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 0°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 26°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 37°C
</span> </span>
<span <span
class="ant-slider-mark-text" 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> <strong>
100°C 100°C
@ -1290,14 +1266,14 @@ Array [
exports[`renders ./components/slider/demo/reverse.md extend context correctly 1`] = ` exports[`renders ./components/slider/demo/reverse.md extend context correctly 1`] = `
Array [ Array [
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="right:0%;left:auto;width:30%" style="right:0%;width:30%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -1309,7 +1285,7 @@ Array [
aria-valuenow="30" aria-valuenow="30"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="right:30%;left:auto;transform:translateX(+50%)" style="right:30%;transform:translateX(50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -1336,19 +1312,16 @@ Array [
</div> </div>
</div> </div>
</div> </div>
<div
class="ant-slider-mark"
/>
</div>, </div>,
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track ant-slider-track-1" class="ant-slider-track ant-slider-track-1"
style="right:20%;left:auto;width:30%" style="right:20%;width:30%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -1360,7 +1333,7 @@ Array [
aria-valuenow="20" aria-valuenow="20"
class="ant-slider-handle ant-slider-handle-1" class="ant-slider-handle ant-slider-handle-1"
role="slider" role="slider"
style="right:20%;left:auto;transform:translateX(+50%)" style="right:20%;transform:translateX(50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -1394,7 +1367,7 @@ Array [
aria-valuenow="50" aria-valuenow="50"
class="ant-slider-handle ant-slider-handle-2" class="ant-slider-handle ant-slider-handle-2"
role="slider" role="slider"
style="right:50%;left:auto;transform:translateX(+50%)" style="right:50%;transform:translateX(50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -1421,9 +1394,6 @@ Array [
</div> </div>
</div> </div>
</div> </div>
<div
class="ant-slider-mark"
/>
</div>, </div>,
"Reversed: ", "Reversed: ",
<button <button
@ -1444,14 +1414,14 @@ Array [
exports[`renders ./components/slider/demo/show-tooltip.md extend context correctly 1`] = ` exports[`renders ./components/slider/demo/show-tooltip.md extend context correctly 1`] = `
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:30%" style="left:0%;width:30%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -1463,7 +1433,7 @@ exports[`renders ./components/slider/demo/show-tooltip.md extend context correct
aria-valuenow="30" aria-valuenow="30"
class="ant-slider-handle ant-tooltip-open" class="ant-slider-handle ant-tooltip-open"
role="slider" role="slider"
style="left:30%;right:auto;transform:translateX(-50%)" style="left:30%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -1490,23 +1460,20 @@ exports[`renders ./components/slider/demo/show-tooltip.md extend context correct
</div> </div>
</div> </div>
</div> </div>
<div
class="ant-slider-mark"
/>
</div> </div>
`; `;
exports[`renders ./components/slider/demo/tip-formatter.md extend context correctly 1`] = ` exports[`renders ./components/slider/demo/tip-formatter.md extend context correctly 1`] = `
Array [ Array [
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:0%" style="left:0%;width:0%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -1518,7 +1485,7 @@ Array [
aria-valuenow="0" aria-valuenow="0"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:0%;right:auto;transform:translateX(-50%)" style="left:0%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -1545,19 +1512,16 @@ Array [
</div> </div>
</div> </div>
</div> </div>
<div
class="ant-slider-mark"
/>
</div>, </div>,
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:0%" style="left:0%;width:0%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -1569,7 +1533,7 @@ Array [
aria-valuenow="0" aria-valuenow="0"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:0%;right:auto;transform:translateX(-50%)" style="left:0%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -1594,9 +1558,6 @@ Array [
</div> </div>
</div> </div>
</div> </div>
<div
class="ant-slider-mark"
/>
</div>, </div>,
] ]
`; `;
@ -1614,7 +1575,7 @@ Array [
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="bottom:0%;top:auto;height:30%" style="bottom:0%;height:30%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -1626,7 +1587,7 @@ Array [
aria-valuenow="30" aria-valuenow="30"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="bottom:30%;top:auto;transform:translateY(+50%)" style="bottom:30%;transform:translateY(50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -1653,9 +1614,6 @@ Array [
</div> </div>
</div> </div>
</div> </div>
<div
class="ant-slider-mark"
/>
</div> </div>
</div>, </div>,
<div <div
@ -1669,7 +1627,7 @@ Array [
/> />
<div <div
class="ant-slider-track ant-slider-track-1" class="ant-slider-track ant-slider-track-1"
style="bottom:20%;top:auto;height:30%" style="bottom:20%;height:30%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -1681,7 +1639,7 @@ Array [
aria-valuenow="20" aria-valuenow="20"
class="ant-slider-handle ant-slider-handle-1" class="ant-slider-handle ant-slider-handle-1"
role="slider" role="slider"
style="bottom:20%;top:auto;transform:translateY(+50%)" style="bottom:20%;transform:translateY(50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -1715,7 +1673,7 @@ Array [
aria-valuenow="50" aria-valuenow="50"
class="ant-slider-handle ant-slider-handle-2" class="ant-slider-handle ant-slider-handle-2"
role="slider" role="slider"
style="bottom:50%;top:auto;transform:translateY(+50%)" style="bottom:50%;transform:translateY(50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -1742,42 +1700,39 @@ Array [
</div> </div>
</div> </div>
</div> </div>
<div
class="ant-slider-mark"
/>
</div> </div>
</div>, </div>,
<div <div
style="display:inline-block;height:300px;margin-left:70px" style="display:inline-block;height:300px;margin-left:70px"
> >
<div <div
class="ant-slider ant-slider-with-marks ant-slider-vertical" class="ant-slider ant-slider-vertical ant-slider-with-marks"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track ant-slider-track-1" class="ant-slider-track ant-slider-track-1"
style="bottom:26%;top:auto;height:11%" style="bottom:26%;height:11%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
> >
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="bottom:0%" style="bottom:0%;transform:translateY(50%)"
/> />
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="bottom:26%" style="bottom:26%;transform:translateY(50%)"
/> />
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="bottom:37%" style="bottom:37%;transform:translateY(50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="bottom:100%" style="bottom:100%;transform:translateY(50%)"
/> />
</div> </div>
<div <div
@ -1787,7 +1742,7 @@ Array [
aria-valuenow="26" aria-valuenow="26"
class="ant-slider-handle ant-slider-handle-1" class="ant-slider-handle ant-slider-handle-1"
role="slider" role="slider"
style="bottom:26%;top:auto;transform:translateY(+50%)" style="bottom:26%;transform:translateY(50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -1821,7 +1776,7 @@ Array [
aria-valuenow="37" aria-valuenow="37"
class="ant-slider-handle ant-slider-handle-2" class="ant-slider-handle ant-slider-handle-2"
role="slider" role="slider"
style="bottom:37%;top:auto;transform:translateY(+50%)" style="bottom:37%;transform:translateY(50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -1853,25 +1808,25 @@ Array [
> >
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="margin-bottom:-50%;bottom:0%" style="bottom:0%;transform:translateY(50%)"
> >
0°C 0°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" class="ant-slider-mark-text ant-slider-mark-text-active"
style="margin-bottom:-50%;bottom:26%" style="bottom:26%;transform:translateY(50%)"
> >
26°C 26°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" class="ant-slider-mark-text ant-slider-mark-text-active"
style="margin-bottom:-50%;bottom:37%" style="bottom:37%;transform:translateY(50%)"
> >
37°C 37°C
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="margin-bottom:-50%;bottom:100%;color:#f50" style="bottom:100%;transform:translateY(50%);color:#f50"
> >
<strong> <strong>
100°C 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`] = ` exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
Array [ Array [
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:30%" style="left:0%;width:30%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -22,22 +22,19 @@ Array [
aria-valuenow="30" aria-valuenow="30"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:30%;right:auto;transform:translateX(-50%)" style="left:30%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div
class="ant-slider-mark"
/>
</div>, </div>,
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track ant-slider-track-1" class="ant-slider-track ant-slider-track-1"
style="left:20%;right:auto;width:30%" style="left:20%;width:30%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -49,7 +46,7 @@ Array [
aria-valuenow="20" aria-valuenow="20"
class="ant-slider-handle ant-slider-handle-1" class="ant-slider-handle ant-slider-handle-1"
role="slider" role="slider"
style="left:20%;right:auto;transform:translateX(-50%)" style="left:20%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -59,12 +56,9 @@ Array [
aria-valuenow="50" aria-valuenow="50"
class="ant-slider-handle ant-slider-handle-2" class="ant-slider-handle ant-slider-handle-2"
role="slider" role="slider"
style="left:50%;right:auto;transform:translateX(-50%)" style="left:50%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div
class="ant-slider-mark"
/>
</div>, </div>,
"Disabled: ", "Disabled: ",
<button <button
@ -85,14 +79,14 @@ Array [
exports[`renders ./components/slider/demo/dragableTrack.md correctly 1`] = ` exports[`renders ./components/slider/demo/dragableTrack.md correctly 1`] = `
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track ant-slider-track-1" class="ant-slider-track ant-slider-track-1"
style="left:20%;right:auto;width:30%" style="left:20%;width:30%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -104,7 +98,7 @@ exports[`renders ./components/slider/demo/dragableTrack.md correctly 1`] = `
aria-valuenow="20" aria-valuenow="20"
class="ant-slider-handle ant-slider-handle-1" class="ant-slider-handle ant-slider-handle-1"
role="slider" role="slider"
style="left:20%;right:auto;transform:translateX(-50%)" style="left:20%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -114,26 +108,23 @@ exports[`renders ./components/slider/demo/dragableTrack.md correctly 1`] = `
aria-valuenow="50" aria-valuenow="50"
class="ant-slider-handle ant-slider-handle-2" class="ant-slider-handle ant-slider-handle-2"
role="slider" role="slider"
style="left:50%;right:auto;transform:translateX(-50%)" style="left:50%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div
class="ant-slider-mark"
/>
</div> </div>
`; `;
exports[`renders ./components/slider/demo/event.md correctly 1`] = ` exports[`renders ./components/slider/demo/event.md correctly 1`] = `
Array [ Array [
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:30%" style="left:0%;width:30%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -145,22 +136,19 @@ Array [
aria-valuenow="30" aria-valuenow="30"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:30%;right:auto;transform:translateX(-50%)" style="left:30%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div
class="ant-slider-mark"
/>
</div>, </div>,
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track ant-slider-track-1" class="ant-slider-track ant-slider-track-1"
style="left:20%;right:auto;width:30%" style="left:20%;width:30%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -172,7 +160,7 @@ Array [
aria-valuenow="20" aria-valuenow="20"
class="ant-slider-handle ant-slider-handle-1" class="ant-slider-handle ant-slider-handle-1"
role="slider" role="slider"
style="left:20%;right:auto;transform:translateX(-50%)" style="left:20%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -182,12 +170,9 @@ Array [
aria-valuenow="50" aria-valuenow="50"
class="ant-slider-handle ant-slider-handle-2" class="ant-slider-handle ant-slider-handle-2"
role="slider" role="slider"
style="left:50%;right:auto;transform:translateX(-50%)" style="left:50%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div
class="ant-slider-mark"
/>
</div>, </div>,
] ]
`; `;
@ -216,14 +201,14 @@ exports[`renders ./components/slider/demo/icon-slider.md correctly 1`] = `
</svg> </svg>
</span> </span>
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:0%" style="left:0%;width:0%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -235,12 +220,9 @@ exports[`renders ./components/slider/demo/icon-slider.md correctly 1`] = `
aria-valuenow="0" aria-valuenow="0"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:0%;right:auto;transform:translateX(-50%)" style="left:0%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div
class="ant-slider-mark"
/>
</div> </div>
<span <span
aria-label="smile" aria-label="smile"
@ -273,14 +255,14 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
class="ant-col ant-col-12" class="ant-col ant-col-12"
> >
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:0%" style="left:0%;width:0%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -292,12 +274,9 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
aria-valuenow="1" aria-valuenow="1"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:0%;right:auto;transform:translateX(-50%)" style="left:0%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div
class="ant-slider-mark"
/>
</div> </div>
</div> </div>
<div <div
@ -389,14 +368,14 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
class="ant-col ant-col-12" class="ant-col ant-col-12"
> >
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:0%" style="left:0%;width:0%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -408,12 +387,9 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
aria-valuenow="0" aria-valuenow="0"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:0%;right:auto;transform:translateX(-50%)" style="left:0%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div
class="ant-slider-mark"
/>
</div> </div>
</div> </div>
<div <div
@ -507,33 +483,33 @@ Array [
included=true included=true
</h4>, </h4>,
<div <div
class="ant-slider ant-slider-with-marks" class="ant-slider ant-slider-horizontal ant-slider-with-marks"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:37%" style="left:0%;width:37%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
> >
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:0%" style="left:0%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:26%" style="left:26%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:37%" style="left:37%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:100%" style="left:100%;transform:translateX(-50%)"
/> />
</div> </div>
<div <div
@ -543,7 +519,7 @@ Array [
aria-valuenow="37" aria-valuenow="37"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:37%;right:auto;transform:translateX(-50%)" style="left:37%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -551,25 +527,25 @@ Array [
> >
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 0°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 26°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 37°C
</span> </span>
<span <span
class="ant-slider-mark-text" 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> <strong>
100°C 100°C
@ -578,33 +554,33 @@ Array [
</div> </div>
</div>, </div>,
<div <div
class="ant-slider ant-slider-with-marks" class="ant-slider ant-slider-horizontal ant-slider-with-marks"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track ant-slider-track-1" class="ant-slider-track ant-slider-track-1"
style="left:26%;right:auto;width:11%" style="left:26%;width:11%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
> >
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:0%" style="left:0%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:26%" style="left:26%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:37%" style="left:37%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:100%" style="left:100%;transform:translateX(-50%)"
/> />
</div> </div>
<div <div
@ -614,7 +590,7 @@ Array [
aria-valuenow="26" aria-valuenow="26"
class="ant-slider-handle ant-slider-handle-1" class="ant-slider-handle ant-slider-handle-1"
role="slider" role="slider"
style="left:26%;right:auto;transform:translateX(-50%)" style="left:26%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -624,7 +600,7 @@ Array [
aria-valuenow="37" aria-valuenow="37"
class="ant-slider-handle ant-slider-handle-2" class="ant-slider-handle ant-slider-handle-2"
role="slider" role="slider"
style="left:37%;right:auto;transform:translateX(-50%)" style="left:37%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -632,25 +608,25 @@ Array [
> >
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%" style="left:0%;transform:translateX(-50%)"
> >
0°C 0°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 26°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 37°C
</span> </span>
<span <span
class="ant-slider-mark-text" 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> <strong>
100°C 100°C
@ -662,7 +638,7 @@ Array [
included=false included=false
</h4>, </h4>,
<div <div
class="ant-slider ant-slider-with-marks" class="ant-slider ant-slider-horizontal ant-slider-with-marks"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
@ -672,19 +648,19 @@ Array [
> >
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:0%" style="left:0%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:26%" style="left:26%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:37%"
/> />
<span <span
class="ant-slider-dot" 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>
<div <div
@ -694,7 +670,7 @@ Array [
aria-valuenow="37" aria-valuenow="37"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:37%;right:auto;transform:translateX(-50%)" style="left:37%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -702,25 +678,25 @@ Array [
> >
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%" style="left:0%;transform:translateX(-50%)"
> >
0°C 0°C
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:26%" style="left:26%;transform:translateX(-50%)"
> >
26°C 26°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:37%" style="left:37%;transform:translateX(-50%)"
> >
37°C 37°C
</span> </span>
<span <span
class="ant-slider-mark-text" 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> <strong>
100°C 100°C
@ -732,33 +708,33 @@ Array [
marks & step marks & step
</h4>, </h4>,
<div <div
class="ant-slider ant-slider-with-marks" class="ant-slider ant-slider-horizontal ant-slider-with-marks"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:37%" style="left:0%;width:37%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
> >
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:0%" style="left:0%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:26%" style="left:26%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:37%" style="left:37%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:100%" style="left:100%;transform:translateX(-50%)"
/> />
</div> </div>
<div <div
@ -768,7 +744,7 @@ Array [
aria-valuenow="37" aria-valuenow="37"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:37%;right:auto;transform:translateX(-50%)" style="left:37%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -776,25 +752,25 @@ Array [
> >
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 0°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 26°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 37°C
</span> </span>
<span <span
class="ant-slider-mark-text" 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> <strong>
100°C 100°C
@ -806,33 +782,33 @@ Array [
step=null step=null
</h4>, </h4>,
<div <div
class="ant-slider ant-slider-with-marks" class="ant-slider ant-slider-horizontal ant-slider-with-marks"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:37%" style="left:0%;width:37%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
> >
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:0%" style="left:0%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:26%" style="left:26%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="left:37%" style="left:37%;transform:translateX(-50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="left:100%" style="left:100%;transform:translateX(-50%)"
/> />
</div> </div>
<div <div
@ -842,7 +818,7 @@ Array [
aria-valuenow="37" aria-valuenow="37"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:37%;right:auto;transform:translateX(-50%)" style="left:37%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -850,25 +826,25 @@ Array [
> >
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 0°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 26°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" 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 37°C
</span> </span>
<span <span
class="ant-slider-mark-text" 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> <strong>
100°C 100°C
@ -882,14 +858,14 @@ Array [
exports[`renders ./components/slider/demo/reverse.md correctly 1`] = ` exports[`renders ./components/slider/demo/reverse.md correctly 1`] = `
Array [ Array [
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="right:0%;left:auto;width:30%" style="right:0%;width:30%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -901,22 +877,19 @@ Array [
aria-valuenow="30" aria-valuenow="30"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="right:30%;left:auto;transform:translateX(+50%)" style="right:30%;transform:translateX(50%)"
tabindex="0" tabindex="0"
/> />
<div
class="ant-slider-mark"
/>
</div>, </div>,
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track ant-slider-track-1" class="ant-slider-track ant-slider-track-1"
style="right:20%;left:auto;width:30%" style="right:20%;width:30%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -928,7 +901,7 @@ Array [
aria-valuenow="20" aria-valuenow="20"
class="ant-slider-handle ant-slider-handle-1" class="ant-slider-handle ant-slider-handle-1"
role="slider" role="slider"
style="right:20%;left:auto;transform:translateX(+50%)" style="right:20%;transform:translateX(50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -938,12 +911,9 @@ Array [
aria-valuenow="50" aria-valuenow="50"
class="ant-slider-handle ant-slider-handle-2" class="ant-slider-handle ant-slider-handle-2"
role="slider" role="slider"
style="right:50%;left:auto;transform:translateX(+50%)" style="right:50%;transform:translateX(50%)"
tabindex="0" tabindex="0"
/> />
<div
class="ant-slider-mark"
/>
</div>, </div>,
"Reversed: ", "Reversed: ",
<button <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`] = ` exports[`renders ./components/slider/demo/tip-formatter.md correctly 1`] = `
Array [ Array [
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:0%" style="left:0%;width:0%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -1038,22 +1008,19 @@ Array [
aria-valuenow="0" aria-valuenow="0"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:0%;right:auto;transform:translateX(-50%)" style="left:0%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div
class="ant-slider-mark"
/>
</div>, </div>,
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:0%" style="left:0%;width:0%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -1065,12 +1032,9 @@ Array [
aria-valuenow="0" aria-valuenow="0"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:0%;right:auto;transform:translateX(-50%)" style="left:0%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div
class="ant-slider-mark"
/>
</div>, </div>,
] ]
`; `;
@ -1088,7 +1052,7 @@ Array [
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="bottom:0%;top:auto;height:30%" style="bottom:0%;height:30%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -1100,12 +1064,9 @@ Array [
aria-valuenow="30" aria-valuenow="30"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="bottom:30%;top:auto;transform:translateY(+50%)" style="bottom:30%;transform:translateY(50%)"
tabindex="0" tabindex="0"
/> />
<div
class="ant-slider-mark"
/>
</div> </div>
</div>, </div>,
<div <div
@ -1119,7 +1080,7 @@ Array [
/> />
<div <div
class="ant-slider-track ant-slider-track-1" class="ant-slider-track ant-slider-track-1"
style="bottom:20%;top:auto;height:30%" style="bottom:20%;height:30%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -1131,7 +1092,7 @@ Array [
aria-valuenow="20" aria-valuenow="20"
class="ant-slider-handle ant-slider-handle-1" class="ant-slider-handle ant-slider-handle-1"
role="slider" role="slider"
style="bottom:20%;top:auto;transform:translateY(+50%)" style="bottom:20%;transform:translateY(50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -1141,45 +1102,42 @@ Array [
aria-valuenow="50" aria-valuenow="50"
class="ant-slider-handle ant-slider-handle-2" class="ant-slider-handle ant-slider-handle-2"
role="slider" role="slider"
style="bottom:50%;top:auto;transform:translateY(+50%)" style="bottom:50%;transform:translateY(50%)"
tabindex="0" tabindex="0"
/> />
<div
class="ant-slider-mark"
/>
</div> </div>
</div>, </div>,
<div <div
style="display:inline-block;height:300px;margin-left:70px" style="display:inline-block;height:300px;margin-left:70px"
> >
<div <div
class="ant-slider ant-slider-with-marks ant-slider-vertical" class="ant-slider ant-slider-vertical ant-slider-with-marks"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track ant-slider-track-1" class="ant-slider-track ant-slider-track-1"
style="bottom:26%;top:auto;height:11%" style="bottom:26%;height:11%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
> >
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="bottom:0%" style="bottom:0%;transform:translateY(50%)"
/> />
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="bottom:26%" style="bottom:26%;transform:translateY(50%)"
/> />
<span <span
class="ant-slider-dot ant-slider-dot-active" class="ant-slider-dot ant-slider-dot-active"
style="bottom:37%" style="bottom:37%;transform:translateY(50%)"
/> />
<span <span
class="ant-slider-dot" class="ant-slider-dot"
style="bottom:100%" style="bottom:100%;transform:translateY(50%)"
/> />
</div> </div>
<div <div
@ -1189,7 +1147,7 @@ Array [
aria-valuenow="26" aria-valuenow="26"
class="ant-slider-handle ant-slider-handle-1" class="ant-slider-handle ant-slider-handle-1"
role="slider" role="slider"
style="bottom:26%;top:auto;transform:translateY(+50%)" style="bottom:26%;transform:translateY(50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -1199,7 +1157,7 @@ Array [
aria-valuenow="37" aria-valuenow="37"
class="ant-slider-handle ant-slider-handle-2" class="ant-slider-handle ant-slider-handle-2"
role="slider" role="slider"
style="bottom:37%;top:auto;transform:translateY(+50%)" style="bottom:37%;transform:translateY(50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -1207,25 +1165,25 @@ Array [
> >
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="margin-bottom:-50%;bottom:0%" style="bottom:0%;transform:translateY(50%)"
> >
0°C 0°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" class="ant-slider-mark-text ant-slider-mark-text-active"
style="margin-bottom:-50%;bottom:26%" style="bottom:26%;transform:translateY(50%)"
> >
26°C 26°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" class="ant-slider-mark-text ant-slider-mark-text-active"
style="margin-bottom:-50%;bottom:37%" style="bottom:37%;transform:translateY(50%)"
> >
37°C 37°C
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="margin-bottom:-50%;bottom:100%;color:#f50" style="bottom:100%;transform:translateY(50%);color:#f50"
> >
<strong> <strong>
100°C 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`] = ` exports[`Slider rtl render component should be rendered correctly in RTL direction 1`] = `
<div <div
class="ant-slider ant-slider-rtl" class="ant-slider ant-slider-rtl ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
@ -21,25 +21,22 @@ exports[`Slider rtl render component should be rendered correctly in RTL directi
aria-valuenow="0" aria-valuenow="0"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="right: 0%; transform: translateX(+50%);" style="right: 0%; transform: translateX(50%);"
tabindex="0" tabindex="0"
/> />
<div
class="ant-slider-mark"
/>
</div> </div>
`; `;
exports[`Slider should render in RTL direction 1`] = ` exports[`Slider should render in RTL direction 1`] = `
<div <div
class="ant-slider ant-slider-rtl" class="ant-slider ant-slider-rtl ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="right:0%;left:auto;width:30%" style="right:0%;width:30%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -51,7 +48,7 @@ exports[`Slider should render in RTL direction 1`] = `
aria-valuenow="30" aria-valuenow="30"
class="ant-slider-handle ant-tooltip-open" class="ant-slider-handle ant-tooltip-open"
role="slider" role="slider"
style="right:30%;left:auto;transform:translateX(+50%)" style="right:30%;transform:translateX(50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -78,9 +75,6 @@ exports[`Slider should render in RTL direction 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div
class="ant-slider-mark"
/>
</div> </div>
`; `;

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

@ -11,7 +11,7 @@ import { sleep } from '../../../tests/utils';
describe('Slider', () => { describe('Slider', () => {
mountTest(Slider); mountTest(Slider);
rtlTest(Slider); rtlTest(Slider);
focusTest(Slider, { refFocus: true }); focusTest(Slider, { testLib: true });
it('should show tooltip when hovering slider handler', () => { it('should show tooltip when hovering slider handler', () => {
const wrapper = mount(<Slider defaultValue={30} />); const wrapper = mount(<Slider defaultValue={30} />);
@ -51,7 +51,7 @@ describe('Slider', () => {
const wrapper = mount( const wrapper = mount(
<Slider marks={marks} defaultValue={intentionallyWrongValue} step={null} tooltipVisible />, <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', () => { 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 />); 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', () => { it('when step is undefined, thumb can be slided to the multiples of step', () => {
@ -75,7 +75,7 @@ describe('Slider', () => {
const wrapper = mount( const wrapper = mount(
<Slider marks={marks} defaultValue={49} step={undefined} tooltipVisible />, <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', () => { it('should render in RTL direction', () => {

120
components/slider/index.tsx
View File

@ -1,18 +1,11 @@
import * as React from 'react'; 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 classNames from 'classnames';
import { TooltipPlacement } from '../tooltip'; import { TooltipPlacement } from '../tooltip';
import SliderTooltip from './SliderTooltip'; import SliderTooltip from './SliderTooltip';
import { ConfigContext } from '../config-provider'; import { ConfigContext } from '../config-provider';
export interface SliderMarks { export type SliderMarks = RcSliderProps['marks'];
[key: number]:
| React.ReactNode
| {
style: React.CSSProperties;
label: React.ReactNode;
};
}
interface HandleGeneratorInfo { interface HandleGeneratorInfo {
value?: number; value?: number;
@ -93,43 +86,6 @@ const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
return direction === 'rtl' ? 'left' : 'right'; 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 { const {
prefixCls: customizePrefixCls, prefixCls: customizePrefixCls,
tooltipPrefixCls: customizeTooltipPrefixCls, tooltipPrefixCls: customizeTooltipPrefixCls,
@ -148,45 +104,57 @@ const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
restProps.reverse = !restProps.reverse; restProps.reverse = !restProps.reverse;
} }
// extrack draggableTrack from range={{ ... }} // Range config
let draggableTrack: boolean | undefined; const [mergedRange, draggableTrack] = React.useMemo(() => {
if (typeof range === 'object') { if (!range) {
draggableTrack = range.draggableTrack; 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 ( return (
<RcRange <SliderTooltip
{...(restProps as SliderRangeProps)} prefixCls={tooltipPrefixCls}
step={restProps.step!} title={tipFormatter ? tipFormatter(info.value) : ''}
draggableTrack={draggableTrack} visible={visible}
className={cls} placement={getTooltipPlacement(tooltipPlacement, vertical)}
ref={ref} transitionName={`${rootPrefixCls}-zoom-down`}
handle={(info: HandleGeneratorInfo) => key={index}
handleWithTooltip({ overlayClassName={`${prefixCls}-tooltip`}
tooltipPrefixCls, getPopupContainer={getTooltipPopupContainer || getPopupContainer}
prefixCls, >
info, {React.cloneElement(node, passedProps)}
}) </SliderTooltip>
}
prefixCls={prefixCls}
/>
); );
} };
return ( return (
<RcSlider <RcSlider
{...(restProps as SliderSingleProps)} {...(restProps as SliderRangeProps)}
step={restProps.step!} step={restProps.step!}
range={mergedRange}
draggableTrack={draggableTrack}
className={cls} className={cls}
ref={ref} ref={ref}
handle={(info: HandleGeneratorInfo) =>
handleWithTooltip({
tooltipPrefixCls,
prefixCls,
info,
})
}
prefixCls={prefixCls} 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, transition: border-color 0.3s, box-shadow 0.6s,
transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
&-dragging&-dragging&-dragging { // &-dragging&-dragging&-dragging {
border-color: @slider-handle-color-focus; // border-color: @slider-handle-color-focus;
box-shadow: 0 0 0 5px @slider-handle-color-focus-shadow; // box-shadow: 0 0 0 5px @slider-handle-color-focus-shadow;
// }
&-dragging {
z-index: 1;
} }
&:focus { &:focus {
@ -104,6 +107,7 @@
width: 100%; width: 100%;
height: 4px; height: 4px;
background: transparent; background: transparent;
pointer-events: none;
} }
&-dot { &-dot {
@ -111,20 +115,11 @@
top: -2px; top: -2px;
width: 8px; width: 8px;
height: 8px; height: 8px;
margin-left: -4px;
background-color: @component-background; background-color: @component-background;
border: 2px solid @slider-dot-border-color; border: 2px solid @slider-dot-border-color;
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
&:first-child {
margin-left: -4px;
}
&:last-child {
margin-left: -4px;
}
&-active { &-active {
border-color: @slider-dot-border-color-active; border-color: @slider-dot-border-color-active;
} }
@ -196,8 +191,7 @@
.@{slider-prefix-cls}-dot { .@{slider-prefix-cls}-dot {
top: auto; top: auto;
left: 2px; margin-left: -2px;
margin-bottom: -4px;
} }
} }

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

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

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

@ -387,14 +387,14 @@ Array [
/> />
</button>, </button>,
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:0%" style="left:0%;width:0%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -406,7 +406,7 @@ Array [
aria-valuenow="1" aria-valuenow="1"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:0%;right:auto;transform:translateX(-50%)" style="left:0%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -433,9 +433,6 @@ Array [
</div> </div>
</div> </div>
</div> </div>
<div
class="ant-slider-mark"
/>
</div>, </div>,
<div <div
class="ant-typography ant-typography-ellipsis ant-typography-single-line" 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`] = ` exports[`renders ./components/typography/demo/suffix.md extend context correctly 1`] = `
Array [ Array [
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:0%" style="left:0%;width:0%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -1554,7 +1551,7 @@ Array [
aria-valuenow="1" aria-valuenow="1"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:0%;right:auto;transform:translateX(-50%)" style="left:0%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -1581,9 +1578,6 @@ Array [
</div> </div>
</div> </div>
</div> </div>
<div
class="ant-slider-mark"
/>
</div>, </div>,
<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" 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>, </button>,
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:0%" style="left:0%;width:0%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -382,12 +382,9 @@ Array [
aria-valuenow="1" aria-valuenow="1"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:0%;right:auto;transform:translateX(-50%)" style="left:0%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div
class="ant-slider-mark"
/>
</div>, </div>,
<div <div
class="ant-typography ant-typography-ellipsis ant-typography-single-line" class="ant-typography ant-typography-ellipsis ant-typography-single-line"
@ -1179,14 +1176,14 @@ Array [
exports[`renders ./components/typography/demo/suffix.md correctly 1`] = ` exports[`renders ./components/typography/demo/suffix.md correctly 1`] = `
Array [ Array [
<div <div
class="ant-slider" class="ant-slider ant-slider-horizontal"
> >
<div <div
class="ant-slider-rail" class="ant-slider-rail"
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;right:auto;width:0%" style="left:0%;width:0%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -1198,12 +1195,9 @@ Array [
aria-valuenow="1" aria-valuenow="1"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:0%;right:auto;transform:translateX(-50%)" style="left:0%;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div
class="ant-slider-mark"
/>
</div>, </div>,
<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" 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-rate": "~2.9.0",
"rc-resize-observer": "^1.2.0", "rc-resize-observer": "^1.2.0",
"rc-select": "~14.0.0-alpha.15", "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-steps": "~4.1.0",
"rc-switch": "~3.2.0", "rc-switch": "~3.2.0",
"rc-table": "~7.23.0", "rc-table": "~7.23.0",
@ -163,6 +163,8 @@
"@docsearch/react": "^3.0.0-alpha.39", "@docsearch/react": "^3.0.0-alpha.39",
"@qixian.cs/github-contributors-list": "^1.0.3", "@qixian.cs/github-contributors-list": "^1.0.3",
"@stackblitz/sdk": "^1.3.0", "@stackblitz/sdk": "^1.3.0",
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.3",
"@types/enzyme": "^3.10.5", "@types/enzyme": "^3.10.5",
"@types/gtag.js": "^0.0.8", "@types/gtag.js": "^0.0.8",
"@types/jest": "^27.0.0", "@types/jest": "^27.0.0",

42
tests/shared/focusTest.tsx
View File

@ -1,9 +1,14 @@
import React from 'react'; import React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';
import { mount, ReactWrapper } from 'enzyme'; import { mount, ReactWrapper } from 'enzyme';
import { sleep } from '../utils'; import { sleep } from '../utils';
// eslint-disable-next-line jest/no-export // 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', () => { describe('focus and blur', () => {
let focused = false; let focused = false;
let blurred = 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; let container: HTMLElement;
beforeEach(() => { beforeEach(() => {
container = document.createElement('div'); container = document.createElement('div');