mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-04 17:09:46 +08:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

feat: add transition to spin fullscreen (#45436)

Browse Source
This commit is contained in:
lijianan 2023-10-20 16:28:24 +08:00 committed by GitHub
parent f25fd3cac7
commit 30c8e426c3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 80 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
components/spin/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -119,14 +119,38 @@ exports[`renders components/spin/demo/delayAndDebounce.tsx extend context correc
exports[`renders components/spin/demo/delayAndDebounce.tsx extend context correctly 2`] = `[]`; exports[`renders components/spin/demo/delayAndDebounce.tsx extend context correctly 2`] = `[]`;
exports[`renders components/spin/demo/fullscreen.tsx extend context correctly 1`] = ` exports[`renders components/spin/demo/fullscreen.tsx extend context correctly 1`] = `
<button Array [
class="ant-btn ant-btn-default" <button
type="button" class="ant-btn ant-btn-default"
> type="button"
<span> >
Show fullscreen for 2s <span>
</span> Show fullscreen for 3s
</button> </span>
</button>,
<div
aria-busy="false"
aria-live="polite"
class="ant-spin ant-spin-fullscreen"
>
<span
class="ant-spin-dot ant-spin-dot-spin"
>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
</span>
</div>,
]
`; `;
exports[`renders components/spin/demo/fullscreen.tsx extend context correctly 2`] = `[]`; exports[`renders components/spin/demo/fullscreen.tsx extend context correctly 2`] = `[]`;

40
components/spin/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -113,14 +113,38 @@ exports[`renders components/spin/demo/delayAndDebounce.tsx correctly 1`] = `
`; `;
exports[`renders components/spin/demo/fullscreen.tsx correctly 1`] = ` exports[`renders components/spin/demo/fullscreen.tsx correctly 1`] = `
<button Array [
class="ant-btn ant-btn-default" <button
type="button" class="ant-btn ant-btn-default"
> type="button"
<span> >
Show fullscreen for 2s <span>
</span> Show fullscreen for 3s
</button> </span>
</button>,
<div
aria-busy="false"
aria-live="polite"
class="ant-spin ant-spin-fullscreen"
>
<span
class="ant-spin-dot ant-spin-dot-spin"
>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
</span>
</div>,
]
`; `;
exports[`renders components/spin/demo/inside.tsx correctly 1`] = ` exports[`renders components/spin/demo/inside.tsx correctly 1`] = `

15
components/spin/demo/fullscreen.tsx
View File

@ -1,21 +1,20 @@
import React, { useState } from 'react'; import React from 'react';
import { Button, Spin } from 'antd'; import { Button, Spin } from 'antd';
const App: React.FC = () => { const App: React.FC = () => {
const [show, setShow] = useState(false); const [spinning, setSpinning] = React.useState<boolean>(false);
const showLoader = () => { const showLoader = () => {
setShow(true); setSpinning(true);
setTimeout(() => { setTimeout(() => {
setShow(false); setSpinning(false);
}, 2000); }, 3000);
}; };
return ( return (
<> <>
<Button onClick={showLoader}>Show fullscreen for 2s</Button> <Button onClick={showLoader}>Show fullscreen for 3s</Button>
{show && <Spin fullscreen size="large" />} <Spin spinning={spinning} fullscreen />
</> </>
); );
}; };

1
components/spin/index.tsx
View File

@ -132,6 +132,7 @@ const Spin: React.FC<SpinClassProps> = (props) => {
[`${prefixCls}-spinning`]: spinning, [`${prefixCls}-spinning`]: spinning,
[`${prefixCls}-show-text`]: !!tip, [`${prefixCls}-show-text`]: !!tip,
[`${prefixCls}-fullscreen`]: fullscreen, [`${prefixCls}-fullscreen`]: fullscreen,
[`${prefixCls}-fullscreen-show`]: fullscreen && spinning,
[`${prefixCls}-rtl`]: direction === 'rtl', [`${prefixCls}-rtl`]: direction === 'rtl',
}, },
className, className,

9
components/spin/style/index.tsx → components/spin/style/index.ts
View File

@ -64,7 +64,6 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject =>
fontSize: token.fontSize, fontSize: token.fontSize,
paddingTop: dotPadding(token), paddingTop: dotPadding(token),
}, },
'&-fullscreen': { '&-fullscreen': {
position: 'fixed', position: 'fixed',
width: '100vw', width: '100vw',
@ -76,6 +75,14 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject =>
alignItems: 'center', alignItems: 'center',
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'center', justifyContent: 'center',
pointerEvents: 'none',
opacity: 0,
visibility: 'hidden',
transition: `all ${token.motionDurationMid}`,
'&-show': {
opacity: 1,
visibility: 'visible',
},
[`${token.componentCls}-dot ${token.componentCls}-dot-item`]: { [`${token.componentCls}-dot ${token.componentCls}-dot-item`]: {
backgroundColor: token.colorWhite, backgroundColor: token.colorWhite,
}, },