mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-04 00:49:39 +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/fullscreen.tsx extend context correctly 1`] = `
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Show fullscreen for 2s
</span>
</button>
Array [
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Show fullscreen for 3s
</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`] = `[]`;

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`] = `
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Show fullscreen for 2s
</span>
</button>
Array [
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Show fullscreen for 3s
</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`] = `

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';
const App: React.FC = () => {
const [show, setShow] = useState(false);
const [spinning, setSpinning] = React.useState<boolean>(false);
const showLoader = () => {
setShow(true);
setSpinning(true);
setTimeout(() => {
setShow(false);
}, 2000);
setSpinning(false);
}, 3000);
};
return (
<>
<Button onClick={showLoader}>Show fullscreen for 2s</Button>
{show && <Spin fullscreen size="large" />}
<Button onClick={showLoader}>Show fullscreen for 3s</Button>
<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}-show-text`]: !!tip,
[`${prefixCls}-fullscreen`]: fullscreen,
[`${prefixCls}-fullscreen-show`]: fullscreen && spinning,
[`${prefixCls}-rtl`]: direction === 'rtl',
},
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,
paddingTop: dotPadding(token),
},
'&-fullscreen': {
position: 'fixed',
width: '100vw',
@ -76,6 +75,14 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject =>
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'center',
pointerEvents: 'none',
opacity: 0,
visibility: 'hidden',
transition: `all ${token.motionDurationMid}`,
'&-show': {
opacity: 1,
visibility: 'visible',
},
[`${token.componentCls}-dot ${token.componentCls}-dot-item`]: {
backgroundColor: token.colorWhite,
},