mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-29 18:50:00 +08:00
fix: Fix tour step type (#39382)
* feat: fix-step-type * feat: fix-step-type * feat: add test * feat: update test * feat: update test snapshots * feat: update test snapshots * feat: update test snapshots * fix: PurePanel style * test: update snapshot * feat: update package * feat: fix-step-type * feat: fix-step-type * feat: add test * feat: update test * feat: update test snapshots * feat: update test snapshots * feat: update test snapshots * feat: update package * fix: PurePanel style * test: update snapshot * feat: update for checks Co-authored-by: 二货机器人 <smith3816@gmail.com>
This commit is contained in:
黑雨
GitHub
parent
a0b713c98b
commit
1eaf125528
@ -178,75 +178,83 @@ exports[`renders ./components/tour/demo/render-panel.tsx extend context correctl
|
||||
class="ant-tour-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-tour-close"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-tour-header"
|
||||
class="ant-tour-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-title"
|
||||
>
|
||||
Hello World!
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-description"
|
||||
>
|
||||
Hello World?!
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-footer"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-sliders"
|
||||
class="ant-tour-inner"
|
||||
>
|
||||
<span
|
||||
class="ant-tour-slider-active ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm ant-tour-next-btn"
|
||||
type="button"
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-tour-close"
|
||||
role="img"
|
||||
>
|
||||
<span>
|
||||
Next
|
||||
</span>
|
||||
</button>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-tour-header"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-title"
|
||||
>
|
||||
Hello World!
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-description"
|
||||
>
|
||||
Hello World?!
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-footer"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-sliders"
|
||||
>
|
||||
<span
|
||||
class="ant-tour-slider-active ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm ant-tour-next-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Next
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -265,94 +273,102 @@ exports[`renders ./components/tour/demo/render-panel.tsx extend context correctl
|
||||
class="ant-tour-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-tour-close"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-tour-cover"
|
||||
>
|
||||
<img
|
||||
alt="tour.png"
|
||||
src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-header"
|
||||
class="ant-tour-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-title"
|
||||
>
|
||||
Hello World!
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-description"
|
||||
>
|
||||
Hello World?!
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-footer"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-sliders"
|
||||
class="ant-tour-inner"
|
||||
>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider-active ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm ant-tour-prev-btn"
|
||||
type="button"
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-tour-close"
|
||||
role="img"
|
||||
>
|
||||
<span>
|
||||
Previous
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm ant-tour-next-btn"
|
||||
type="button"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-tour-cover"
|
||||
>
|
||||
<span>
|
||||
Next
|
||||
</span>
|
||||
</button>
|
||||
<img
|
||||
alt="tour.png"
|
||||
src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-header"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-title"
|
||||
>
|
||||
Hello World!
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-description"
|
||||
>
|
||||
Hello World?!
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-footer"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-sliders"
|
||||
>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider-active ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm ant-tour-prev-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Previous
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm ant-tour-next-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Next
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -371,80 +387,88 @@ exports[`renders ./components/tour/demo/render-panel.tsx extend context correctl
|
||||
class="ant-tour-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-tour-close"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-tour-header"
|
||||
class="ant-tour-primary ant-tour-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-title"
|
||||
>
|
||||
Hello World!
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-description"
|
||||
>
|
||||
Hello World?!
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-footer"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-sliders"
|
||||
class="ant-tour-inner"
|
||||
>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider-active ant-tour-slider"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm ant-btn-background-ghost ant-tour-prev-btn"
|
||||
type="button"
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-tour-close"
|
||||
role="img"
|
||||
>
|
||||
<span>
|
||||
Previous
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm ant-tour-next-btn"
|
||||
type="button"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-tour-header"
|
||||
>
|
||||
<span>
|
||||
Finish
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tour-title"
|
||||
>
|
||||
Hello World!
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-description"
|
||||
>
|
||||
Hello World?!
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-footer"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-sliders"
|
||||
>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider-active ant-tour-slider"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm ant-btn-background-ghost ant-tour-prev-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Previous
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm ant-tour-next-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Finish
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -178,75 +178,83 @@ exports[`renders ./components/tour/demo/render-panel.tsx correctly 1`] = `
|
||||
class="ant-tour-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-tour-close"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-tour-header"
|
||||
class="ant-tour-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-title"
|
||||
>
|
||||
Hello World!
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-description"
|
||||
>
|
||||
Hello World?!
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-footer"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-sliders"
|
||||
class="ant-tour-inner"
|
||||
>
|
||||
<span
|
||||
class="ant-tour-slider-active ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm ant-tour-next-btn"
|
||||
type="button"
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-tour-close"
|
||||
role="img"
|
||||
>
|
||||
<span>
|
||||
Next
|
||||
</span>
|
||||
</button>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-tour-header"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-title"
|
||||
>
|
||||
Hello World!
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-description"
|
||||
>
|
||||
Hello World?!
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-footer"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-sliders"
|
||||
>
|
||||
<span
|
||||
class="ant-tour-slider-active ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm ant-tour-next-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Next
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -265,94 +273,102 @@ exports[`renders ./components/tour/demo/render-panel.tsx correctly 1`] = `
|
||||
class="ant-tour-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-tour-close"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-tour-cover"
|
||||
>
|
||||
<img
|
||||
alt="tour.png"
|
||||
src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-header"
|
||||
class="ant-tour-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-title"
|
||||
>
|
||||
Hello World!
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-description"
|
||||
>
|
||||
Hello World?!
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-footer"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-sliders"
|
||||
class="ant-tour-inner"
|
||||
>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider-active ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm ant-tour-prev-btn"
|
||||
type="button"
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-tour-close"
|
||||
role="img"
|
||||
>
|
||||
<span>
|
||||
Previous
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm ant-tour-next-btn"
|
||||
type="button"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-tour-cover"
|
||||
>
|
||||
<span>
|
||||
Next
|
||||
</span>
|
||||
</button>
|
||||
<img
|
||||
alt="tour.png"
|
||||
src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-header"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-title"
|
||||
>
|
||||
Hello World!
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-description"
|
||||
>
|
||||
Hello World?!
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-footer"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-sliders"
|
||||
>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider-active ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm ant-tour-prev-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Previous
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm ant-tour-next-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Next
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -371,80 +387,88 @@ exports[`renders ./components/tour/demo/render-panel.tsx correctly 1`] = `
|
||||
class="ant-tour-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-tour-close"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-tour-header"
|
||||
class="ant-tour-primary ant-tour-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-title"
|
||||
>
|
||||
Hello World!
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-description"
|
||||
>
|
||||
Hello World?!
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-footer"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-sliders"
|
||||
class="ant-tour-inner"
|
||||
>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider-active ant-tour-slider"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm ant-btn-background-ghost ant-tour-prev-btn"
|
||||
type="button"
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-tour-close"
|
||||
role="img"
|
||||
>
|
||||
<span>
|
||||
Previous
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm ant-tour-next-btn"
|
||||
type="button"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-tour-header"
|
||||
>
|
||||
<span>
|
||||
Finish
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tour-title"
|
||||
>
|
||||
Hello World!
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-description"
|
||||
>
|
||||
Hello World?!
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-footer"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-sliders"
|
||||
>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider-active ant-tour-slider"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm ant-btn-background-ghost ant-tour-prev-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Previous
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm ant-tour-next-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Finish
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,61 +1,647 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Tour Primary 1`] = `
|
||||
<button
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
Cover
|
||||
</button>
|
||||
<body>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
<div>
|
||||
<button
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
Cover
|
||||
</button>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tour"
|
||||
style="z-index: 1090; opacity: 0;"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-primary ant-tour-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-arrow"
|
||||
/>
|
||||
<div
|
||||
class="ant-tour-inner"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-tour-close"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-tour-header"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-title"
|
||||
>
|
||||
primary title
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-description"
|
||||
>
|
||||
primary description.
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-footer"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-sliders"
|
||||
/>
|
||||
<div
|
||||
class="ant-tour-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm ant-tour-next-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Finish
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tour-target-placeholder"
|
||||
style="left: -6px; top: -6px; width: 12px; height: 12px; position: fixed; pointer-events: none;"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tour-mask"
|
||||
style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 900; pointer-events: none;"
|
||||
>
|
||||
<svg
|
||||
style="width: 100%; height: 100%;"
|
||||
>
|
||||
<defs>
|
||||
<mask
|
||||
id="ant-tour-mask-test-id"
|
||||
>
|
||||
<rect
|
||||
fill="white"
|
||||
height="100%"
|
||||
width="100%"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
class="ant-tour-placeholder-animated"
|
||||
fill="black"
|
||||
height="12"
|
||||
rx="2"
|
||||
width="12"
|
||||
x="-6"
|
||||
y="-6"
|
||||
/>
|
||||
</mask>
|
||||
</defs>
|
||||
<rect
|
||||
fill="rgba(0,0,0,0.5)"
|
||||
height="100%"
|
||||
mask="url(#ant-tour-mask-test-id)"
|
||||
width="100%"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
fill="transparent"
|
||||
height="-6"
|
||||
pointer-events="auto"
|
||||
width="100%"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
fill="transparent"
|
||||
height="100%"
|
||||
pointer-events="auto"
|
||||
width="-6"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
fill="transparent"
|
||||
height="calc(100vh - 6px)"
|
||||
pointer-events="auto"
|
||||
width="100%"
|
||||
x="0"
|
||||
y="6"
|
||||
/>
|
||||
<rect
|
||||
fill="transparent"
|
||||
height="100%"
|
||||
pointer-events="auto"
|
||||
width="calc(100vw - 6px)"
|
||||
x="6"
|
||||
y="0"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
</body>
|
||||
`;
|
||||
|
||||
exports[`Tour basic 1`] = `
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
>
|
||||
Show
|
||||
</button>
|
||||
<button
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
Cover
|
||||
</button>
|
||||
<button
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
Placement
|
||||
</button>
|
||||
</div>
|
||||
<body>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
<div>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
>
|
||||
Show
|
||||
</button>
|
||||
<button
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
Cover
|
||||
</button>
|
||||
<button
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
Placement
|
||||
</button>
|
||||
</div>
|
||||
<div />
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
</body>
|
||||
`;
|
||||
|
||||
exports[`Tour button props onClick 1`] = `
|
||||
<body>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
<div>
|
||||
<span
|
||||
id="btnName"
|
||||
>
|
||||
finishButton
|
||||
</span>
|
||||
<button
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
target
|
||||
</button>
|
||||
<div />
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
</body>
|
||||
`;
|
||||
|
||||
exports[`Tour rtl render component should be rendered correctly in RTL direction 1`] = `null`;
|
||||
|
||||
exports[`Tour single 1`] = `
|
||||
<button
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
Cover
|
||||
</button>
|
||||
<body>
|
||||
<div>
|
||||
<button
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
Cover
|
||||
</button>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tour"
|
||||
style="z-index: 1090; opacity: 0;"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-arrow"
|
||||
/>
|
||||
<div
|
||||
class="ant-tour-inner"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-tour-close"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-tour-header"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-title"
|
||||
>
|
||||
cover title
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-description"
|
||||
>
|
||||
cover description.
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-footer"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-sliders"
|
||||
/>
|
||||
<div
|
||||
class="ant-tour-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm ant-tour-next-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Finish
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tour-target-placeholder"
|
||||
style="left: -6px; top: -6px; width: 12px; height: 12px; position: fixed; pointer-events: none;"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tour-mask"
|
||||
style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 900; pointer-events: none;"
|
||||
>
|
||||
<svg
|
||||
style="width: 100%; height: 100%;"
|
||||
>
|
||||
<defs>
|
||||
<mask
|
||||
id="ant-tour-mask-test-id"
|
||||
>
|
||||
<rect
|
||||
fill="white"
|
||||
height="100%"
|
||||
width="100%"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
class="ant-tour-placeholder-animated"
|
||||
fill="black"
|
||||
height="12"
|
||||
rx="2"
|
||||
width="12"
|
||||
x="-6"
|
||||
y="-6"
|
||||
/>
|
||||
</mask>
|
||||
</defs>
|
||||
<rect
|
||||
fill="rgba(0,0,0,0.5)"
|
||||
height="100%"
|
||||
mask="url(#ant-tour-mask-test-id)"
|
||||
width="100%"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
fill="transparent"
|
||||
height="-6"
|
||||
pointer-events="auto"
|
||||
width="100%"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
fill="transparent"
|
||||
height="100%"
|
||||
pointer-events="auto"
|
||||
width="-6"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
fill="transparent"
|
||||
height="calc(100vh - 6px)"
|
||||
pointer-events="auto"
|
||||
width="100%"
|
||||
x="0"
|
||||
y="6"
|
||||
/>
|
||||
<rect
|
||||
fill="transparent"
|
||||
height="100%"
|
||||
pointer-events="auto"
|
||||
width="calc(100vw - 6px)"
|
||||
x="6"
|
||||
y="0"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
</body>
|
||||
`;
|
||||
|
||||
exports[`Tour step support Primary 1`] = `
|
||||
<body>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
<div>
|
||||
<button
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
Cover
|
||||
</button>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tour"
|
||||
style="z-index: 1090; opacity: 0;"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-primary ant-tour-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-arrow"
|
||||
/>
|
||||
<div
|
||||
class="ant-tour-inner"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-tour-close"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-tour-header"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-title"
|
||||
>
|
||||
primary title
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-description"
|
||||
>
|
||||
primary description.
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-footer"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-sliders"
|
||||
>
|
||||
<span
|
||||
class="ant-tour-slider"
|
||||
/>
|
||||
<span
|
||||
class="ant-tour-slider-active ant-tour-slider"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm ant-btn-background-ghost ant-tour-prev-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Previous
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
ant-click-animating-without-extra-node="false"
|
||||
class="ant-btn ant-btn-default ant-btn-sm ant-tour-next-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Finish
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tour-target-placeholder"
|
||||
style="left: -6px; top: -6px; width: 12px; height: 12px; position: fixed; pointer-events: none;"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tour-mask"
|
||||
style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 900; pointer-events: none;"
|
||||
>
|
||||
<svg
|
||||
style="width: 100%; height: 100%;"
|
||||
>
|
||||
<defs>
|
||||
<mask
|
||||
id="ant-tour-mask-test-id"
|
||||
>
|
||||
<rect
|
||||
fill="white"
|
||||
height="100%"
|
||||
width="100%"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
class="ant-tour-placeholder-animated"
|
||||
fill="black"
|
||||
height="12"
|
||||
rx="2"
|
||||
width="12"
|
||||
x="-6"
|
||||
y="-6"
|
||||
/>
|
||||
</mask>
|
||||
</defs>
|
||||
<rect
|
||||
fill="rgba(0,0,0,0.5)"
|
||||
height="100%"
|
||||
mask="url(#ant-tour-mask-test-id)"
|
||||
width="100%"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
fill="transparent"
|
||||
height="-6"
|
||||
pointer-events="auto"
|
||||
width="100%"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
fill="transparent"
|
||||
height="100%"
|
||||
pointer-events="auto"
|
||||
width="-6"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
fill="transparent"
|
||||
height="calc(100vh - 6px)"
|
||||
pointer-events="auto"
|
||||
width="100%"
|
||||
x="0"
|
||||
y="6"
|
||||
/>
|
||||
<rect
|
||||
fill="transparent"
|
||||
height="100%"
|
||||
pointer-events="auto"
|
||||
width="calc(100vw - 6px)"
|
||||
x="6"
|
||||
y="0"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
</body>
|
||||
`;
|
||||
|
||||
exports[`Tour steps is empty 1`] = `
|
||||
<button
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
Cover
|
||||
</button>
|
||||
<body>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
<div>
|
||||
<button
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
Cover
|
||||
</button>
|
||||
</div>
|
||||
</body>
|
||||
`;
|
||||
|
||||
exports[`Tour steps props stepRender 1`] = `
|
||||
<button
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
Cover
|
||||
</button>
|
||||
<body>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
<div>
|
||||
<button
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
Cover
|
||||
</button>
|
||||
<div />
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
</body>
|
||||
`;
|
||||
|
||||
@ -29,10 +29,10 @@ describe('Tour', () => {
|
||||
</>
|
||||
);
|
||||
};
|
||||
const { getByText, container } = render(<App />);
|
||||
const { getByText, baseElement } = render(<App />);
|
||||
expect(getByText('cover title')).toBeTruthy();
|
||||
expect(getByText('cover description.')).toBeTruthy();
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
expect(baseElement).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('steps is empty', () => {
|
||||
@ -48,8 +48,8 @@ describe('Tour', () => {
|
||||
</>
|
||||
);
|
||||
};
|
||||
const { container } = render(<App />);
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
const { baseElement } = render(<App />);
|
||||
expect(baseElement).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('steps props stepRender', () => {
|
||||
@ -95,14 +95,14 @@ describe('Tour', () => {
|
||||
</>
|
||||
);
|
||||
};
|
||||
const { container } = render(<App />);
|
||||
const { baseElement } = render(<App />);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Next' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Previous' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Next' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Next' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Finish' }));
|
||||
expect(onClickMock).toHaveBeenCalledTimes(5);
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
expect(baseElement).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('button props onClick', () => {
|
||||
@ -141,15 +141,16 @@ describe('Tour', () => {
|
||||
</>
|
||||
);
|
||||
};
|
||||
const { container } = render(<App />);
|
||||
expect(container.querySelector('#btnName')).toHaveTextContent('defaultBtn');
|
||||
const { baseElement } = render(<App />);
|
||||
expect(baseElement.querySelector('#btnName')).toHaveTextContent('defaultBtn');
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Next' }));
|
||||
expect(container.querySelector('#btnName')).toHaveTextContent('nextButton');
|
||||
expect(baseElement.querySelector('#btnName')).toHaveTextContent('nextButton');
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Previous' }));
|
||||
expect(container.querySelector('#btnName')).toHaveTextContent('prevButton');
|
||||
expect(baseElement.querySelector('#btnName')).toHaveTextContent('prevButton');
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Next' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Finish' }));
|
||||
expect(container.querySelector('#btnName')).toHaveTextContent('finishButton');
|
||||
expect(baseElement.querySelector('#btnName')).toHaveTextContent('finishButton');
|
||||
expect(baseElement).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('Primary', () => {
|
||||
@ -174,10 +175,47 @@ describe('Tour', () => {
|
||||
</>
|
||||
);
|
||||
};
|
||||
const { getByText, container } = render(<App />);
|
||||
const { getByText, baseElement } = render(<App />);
|
||||
expect(getByText('primary description.')).toBeTruthy();
|
||||
expect(container.querySelector('.ant-tour')).toHaveClass('ant-tour-primary');
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
expect(baseElement.querySelector('.ant-tour-content')).toHaveClass('ant-tour-primary');
|
||||
expect(baseElement).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('step support Primary', () => {
|
||||
const App: React.FC = () => {
|
||||
const coverBtnRef = useRef<HTMLButtonElement>(null);
|
||||
return (
|
||||
<>
|
||||
<button disabled ref={coverBtnRef} type="button">
|
||||
Cover
|
||||
</button>
|
||||
|
||||
<Tour
|
||||
type="default"
|
||||
steps={[
|
||||
{
|
||||
title: 'cover title',
|
||||
description: 'cover description.',
|
||||
target: () => coverBtnRef.current!,
|
||||
},
|
||||
{
|
||||
title: 'primary title',
|
||||
description: 'primary description.',
|
||||
target: () => coverBtnRef.current!,
|
||||
type: 'primary',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
const { getByText, container, baseElement } = render(<App />);
|
||||
expect(getByText('cover description.')).toBeTruthy();
|
||||
expect(container.querySelector('.ant-tour-content.ant-tour-primary')).toBeFalsy();
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Next' }));
|
||||
expect(getByText('primary description.')).toBeTruthy();
|
||||
expect(container.querySelector('.ant-tour-content.ant-tour-primary')).toBeTruthy();
|
||||
expect(baseElement).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('basic', () => {
|
||||
@ -243,7 +281,7 @@ describe('Tour', () => {
|
||||
</>
|
||||
);
|
||||
};
|
||||
const { getByText, container } = render(<App />);
|
||||
const { getByText, container, baseElement } = render(<App />);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Show' }));
|
||||
expect(getByText('Show in Center')).toBeTruthy();
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Next' }));
|
||||
@ -252,7 +290,7 @@ describe('Tour', () => {
|
||||
expect(getByText('Adjust Placement')).toBeTruthy();
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Finish' }));
|
||||
expect(container.querySelector('.ant-tour')).toBeFalsy();
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
expect(baseElement).toMatchSnapshot();
|
||||
});
|
||||
it('panelRender should correct render when total is undefined', () => {
|
||||
expect(() => {
|
||||
|
||||
@ -27,9 +27,6 @@ const Tour: React.ForwardRefRenderFunction<HTMLDivElement, TourProps> & {
|
||||
{
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
},
|
||||
{
|
||||
[`${prefixCls}-primary`]: type === 'primary',
|
||||
},
|
||||
hashId,
|
||||
rootClassName,
|
||||
);
|
||||
|
||||
@ -26,8 +26,12 @@ const panelRender = (
|
||||
nextButtonProps,
|
||||
prevButtonProps,
|
||||
stepRender,
|
||||
type: stepType,
|
||||
arrow,
|
||||
className,
|
||||
} = props;
|
||||
|
||||
const mergedType = typeof stepType !== 'undefined' ? stepType : type;
|
||||
const isLastStep = current === total - 1;
|
||||
|
||||
const prevBtnClick = () => {
|
||||
@ -80,47 +84,56 @@ const panelRender = (
|
||||
));
|
||||
const slickNode: ReactNode = total > 1 ? mergedSlickNode : null;
|
||||
|
||||
const mainBtnType = type === 'primary' ? 'default' : 'primary';
|
||||
const mainBtnType = mergedType === 'primary' ? 'default' : 'primary';
|
||||
const secondaryBtnProps: ButtonProps = {
|
||||
type: 'default',
|
||||
ghost: type === 'primary',
|
||||
ghost: mergedType === 'primary',
|
||||
};
|
||||
|
||||
return (
|
||||
<LocaleReceiver componentName="Tour" defaultLocale={defaultLocale.Tour}>
|
||||
{(contextLocale) => (
|
||||
<>
|
||||
<CloseOutlined className={`${prefixCls}-close`} onClick={onClose} />
|
||||
{coverNode}
|
||||
{headerNode}
|
||||
{descriptionNode}
|
||||
<div className={`${prefixCls}-footer`}>
|
||||
<div className={`${prefixCls}-sliders`}>{slickNode}</div>
|
||||
<div className={`${prefixCls}-buttons`}>
|
||||
{current !== 0 ? (
|
||||
<div
|
||||
className={classNames(
|
||||
mergedType === 'primary' ? `${prefixCls}-primary` : '',
|
||||
className,
|
||||
`${prefixCls}-content`,
|
||||
)}
|
||||
>
|
||||
{arrow && <div className={`${prefixCls}-arrow`} key="arrow" />}
|
||||
<div className={`${prefixCls}-inner`}>
|
||||
<CloseOutlined className={`${prefixCls}-close`} onClick={onClose} />
|
||||
{coverNode}
|
||||
{headerNode}
|
||||
{descriptionNode}
|
||||
<div className={`${prefixCls}-footer`}>
|
||||
<div className={`${prefixCls}-sliders`}>{slickNode}</div>
|
||||
<div className={`${prefixCls}-buttons`}>
|
||||
{current !== 0 ? (
|
||||
<Button
|
||||
{...secondaryBtnProps}
|
||||
{...prevButtonProps}
|
||||
onClick={prevBtnClick}
|
||||
size="small"
|
||||
className={`${prefixCls}-prev-btn`}
|
||||
>
|
||||
{prevButtonProps?.children ?? contextLocale.Previous}
|
||||
</Button>
|
||||
) : null}
|
||||
<Button
|
||||
{...secondaryBtnProps}
|
||||
{...prevButtonProps}
|
||||
onClick={prevBtnClick}
|
||||
type={mainBtnType}
|
||||
{...nextButtonProps}
|
||||
onClick={nextBtnClick}
|
||||
size="small"
|
||||
className={`${prefixCls}-prev-btn`}
|
||||
className={`${prefixCls}-next-btn`}
|
||||
>
|
||||
{prevButtonProps?.children ?? contextLocale.Previous}
|
||||
{nextButtonProps?.children ??
|
||||
(isLastStep ? contextLocale.Finish : contextLocale.Next)}
|
||||
</Button>
|
||||
) : null}
|
||||
<Button
|
||||
type={mainBtnType}
|
||||
{...nextButtonProps}
|
||||
onClick={nextBtnClick}
|
||||
size="small"
|
||||
className={`${prefixCls}-next-btn`}
|
||||
>
|
||||
{nextButtonProps?.children ??
|
||||
(isLastStep ? contextLocale.Finish : contextLocale.Next)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
</LocaleReceiver>
|
||||
);
|
||||
|
||||
@ -66,7 +66,7 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
|
||||
display: 'none',
|
||||
},
|
||||
|
||||
// ============================= panel content ===========================
|
||||
// ============================= panel content ============================
|
||||
[`${componentCls}-content`]: {
|
||||
position: 'relative',
|
||||
},
|
||||
@ -152,9 +152,13 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
|
||||
},
|
||||
},
|
||||
|
||||
// ============================= primary type ===========================
|
||||
[`&${componentCls}-primary`]: {
|
||||
// ============================= primary type ===========================
|
||||
// `$` for panel, `&$` for pure panel
|
||||
[`${componentCls}-primary, &${componentCls}-primary`]: {
|
||||
'--antd-arrow-background-color': colorPrimary,
|
||||
},
|
||||
|
||||
[`${componentCls}-primary`]: {
|
||||
[`${componentCls}-inner`]: {
|
||||
color: colorTextLightSolid,
|
||||
textAlign: 'start',
|
||||
@ -180,6 +184,7 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
|
||||
[`${componentCls}-prev-btn`]: {
|
||||
color: colorTextLightSolid,
|
||||
borderColor: new TinyColor(colorTextLightSolid).setAlpha(0.15).toRgbString(),
|
||||
backgroundColor: colorPrimary,
|
||||
|
||||
'&:hover': {
|
||||
backgroundColor: new TinyColor(colorTextLightSolid).setAlpha(0.15).toRgbString(),
|
||||
|
||||
@ -115,7 +115,7 @@
|
||||
"@ant-design/react-slick": "~1.0.0",
|
||||
"@babel/runtime": "^7.18.3",
|
||||
"@ctrl/tinycolor": "^3.4.0",
|
||||
"@rc-component/tour": "~1.0.1-2",
|
||||
"@rc-component/tour": "~1.1.0",
|
||||
"classnames": "^2.2.6",
|
||||
"copy-to-clipboard": "^3.2.0",
|
||||
"dayjs": "^1.11.1",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user