2022-03-25 14:26:09 +08:00
|
|
|
// deps-lint-skip-all
|
2022-05-09 22:20:07 +08:00
|
|
|
import type { CSSObject } from '@ant-design/cssinjs';
|
|
|
|
import { Keyframes } from '@ant-design/cssinjs';
|
2022-05-26 16:05:21 +08:00
|
|
|
import type { FullToken, GenerateStyle } from '../../_util/theme';
|
|
|
|
import { genComponentStyleHook, mergeToken, resetComponent } from '../../_util/theme';
|
|
|
|
|
|
|
|
export interface ComponentToken {
|
|
|
|
contentHeight: number;
|
|
|
|
}
|
2022-04-08 15:28:24 +08:00
|
|
|
|
|
|
|
interface SpinToken extends FullToken<'Spin'> {
|
2022-03-25 14:26:09 +08:00
|
|
|
spinDotDefault: string;
|
|
|
|
spinDotSize: number;
|
|
|
|
spinDotSizeSM: number;
|
|
|
|
spinDotSizeLG: number;
|
|
|
|
}
|
|
|
|
|
|
|
|
const antSpinMove = new Keyframes('antSpinMove', {
|
|
|
|
to: { opacity: 1 },
|
|
|
|
});
|
|
|
|
|
|
|
|
const antRotate = new Keyframes('antRotate', {
|
|
|
|
to: { transform: 'rotate(405deg)' },
|
|
|
|
});
|
|
|
|
|
2022-04-21 02:06:22 +08:00
|
|
|
const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject => ({
|
2022-04-08 15:28:24 +08:00
|
|
|
[`${token.componentCls}`]: {
|
2022-03-25 14:26:09 +08:00
|
|
|
...resetComponent(token),
|
|
|
|
position: 'absolute',
|
|
|
|
display: 'none',
|
|
|
|
color: token.colorPrimary,
|
|
|
|
textAlign: 'center',
|
|
|
|
verticalAlign: 'middle',
|
|
|
|
opacity: 0,
|
|
|
|
transition: `transform ${token.motionDurationSlow} ${token.motionEaseInOutCirc}`,
|
|
|
|
|
|
|
|
'&-spinning': {
|
|
|
|
position: 'static',
|
|
|
|
display: 'inline-block',
|
|
|
|
opacity: 1,
|
|
|
|
},
|
|
|
|
|
|
|
|
'&-nested-loading': {
|
|
|
|
position: 'relative',
|
2022-04-08 15:28:24 +08:00
|
|
|
[`> div > ${token.componentCls}`]: {
|
2022-03-25 14:26:09 +08:00
|
|
|
position: 'absolute',
|
|
|
|
top: 0,
|
|
|
|
insetInlineStart: 0,
|
|
|
|
zIndex: 4,
|
|
|
|
display: 'block',
|
|
|
|
width: '100%',
|
|
|
|
height: '100%',
|
2022-05-26 16:05:21 +08:00
|
|
|
maxHeight: token.contentHeight,
|
2022-03-25 14:26:09 +08:00
|
|
|
|
2022-04-08 15:28:24 +08:00
|
|
|
[`${token.componentCls}-dot`]: {
|
2022-03-25 14:26:09 +08:00
|
|
|
position: 'absolute',
|
|
|
|
top: '50%',
|
|
|
|
insetInlineStart: '50%',
|
|
|
|
margin: -token.spinDotSize / 2,
|
|
|
|
},
|
|
|
|
|
2022-04-08 15:28:24 +08:00
|
|
|
[`${token.componentCls}-text`]: {
|
2022-03-25 14:26:09 +08:00
|
|
|
position: 'absolute',
|
|
|
|
top: '50%',
|
|
|
|
width: '100%',
|
|
|
|
paddingTop: (token.spinDotSize - token.fontSize) / 2 + 2,
|
2022-05-26 16:05:21 +08:00
|
|
|
textShadow: `0 1px 2px ${token.colorBgComponent}`, // FIXME: shadow
|
2022-03-25 14:26:09 +08:00
|
|
|
},
|
|
|
|
|
2022-04-08 15:28:24 +08:00
|
|
|
[`&${token.componentCls}-show-text ${token.componentCls}-dot`]: {
|
2022-03-25 14:26:09 +08:00
|
|
|
marginTop: -(token.spinDotSize / 2) - 10,
|
|
|
|
},
|
|
|
|
|
2022-04-08 15:28:24 +08:00
|
|
|
[`> div > ${token.componentCls}-sm`]: {
|
|
|
|
[`${token.componentCls}-dot`]: {
|
2022-03-25 14:26:09 +08:00
|
|
|
margin: -token.spinDotSizeSM / 2,
|
|
|
|
},
|
2022-04-08 15:28:24 +08:00
|
|
|
[`${token.componentCls}-text`]: {
|
2022-03-25 14:26:09 +08:00
|
|
|
paddingTop: (token.spinDotSizeSM - token.fontSize) / 2 + 2,
|
|
|
|
},
|
2022-04-08 15:28:24 +08:00
|
|
|
[`&${token.componentCls}-show-text ${token.componentCls}-dot`]: {
|
2022-03-25 14:26:09 +08:00
|
|
|
marginTop: -(token.spinDotSizeSM / 2) - 10,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2022-04-08 15:28:24 +08:00
|
|
|
[`> div > ${token.componentCls}-lg`]: {
|
|
|
|
[`${token.componentCls}-dot`]: {
|
2022-03-25 14:26:09 +08:00
|
|
|
margin: -(token.spinDotSizeLG / 2),
|
|
|
|
},
|
2022-04-08 15:28:24 +08:00
|
|
|
[`${token.componentCls}-text`]: {
|
2022-03-25 14:26:09 +08:00
|
|
|
paddingTop: (token.spinDotSizeLG - token.fontSize) / 2 + 2,
|
|
|
|
},
|
2022-04-08 15:28:24 +08:00
|
|
|
[`&${token.componentCls}-show-text ${token.componentCls}-dot`]: {
|
2022-03-25 14:26:09 +08:00
|
|
|
marginTop: -(token.spinDotSizeLG / 2) - 10,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2022-04-08 15:28:24 +08:00
|
|
|
[`${token.componentCls}-container`]: {
|
2022-03-25 14:26:09 +08:00
|
|
|
position: 'relative',
|
|
|
|
transition: `opacity ${token.motionDurationSlow}`,
|
|
|
|
|
|
|
|
'&::after': {
|
|
|
|
position: 'absolute',
|
|
|
|
top: 0,
|
|
|
|
insetInlineEnd: 0,
|
|
|
|
bottom: 0,
|
|
|
|
insetInlineStart: 0,
|
|
|
|
zIndex: 10,
|
|
|
|
width: '100%',
|
|
|
|
height: '100%',
|
|
|
|
background: token.colorBgComponent,
|
|
|
|
opacity: 0,
|
|
|
|
transition: `all ${token.motionDurationSlow}`,
|
|
|
|
content: '""',
|
|
|
|
pointerEvents: 'none',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2022-04-08 15:28:24 +08:00
|
|
|
[`${token.componentCls}-blur`]: {
|
2022-03-25 14:26:09 +08:00
|
|
|
clear: 'both',
|
|
|
|
opacity: 0.5,
|
|
|
|
userSelect: 'none',
|
|
|
|
pointerEvents: 'none',
|
|
|
|
|
|
|
|
[`&::after`]: {
|
|
|
|
opacity: 0.4,
|
|
|
|
pointerEvents: 'auto',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// tip
|
|
|
|
// ------------------------------
|
|
|
|
[`&-tip`]: {
|
|
|
|
color: token.spinDotDefault,
|
|
|
|
},
|
|
|
|
|
|
|
|
// dots
|
|
|
|
// ------------------------------
|
2022-04-08 15:28:24 +08:00
|
|
|
[`${token.componentCls}-dot`]: {
|
2022-03-25 14:26:09 +08:00
|
|
|
position: 'relative',
|
|
|
|
display: 'inline-block',
|
|
|
|
fontSize: token.spinDotSize,
|
|
|
|
width: '1em',
|
|
|
|
height: '1em',
|
|
|
|
|
|
|
|
'&-item': {
|
|
|
|
position: 'absolute',
|
|
|
|
display: 'block',
|
2022-05-26 16:05:21 +08:00
|
|
|
width: (token.spinDotSize - token.marginXXS / 2) / 2,
|
|
|
|
height: (token.spinDotSize - token.marginXXS / 2) / 2,
|
2022-03-25 14:26:09 +08:00
|
|
|
backgroundColor: token.colorPrimary,
|
|
|
|
borderRadius: '100%',
|
|
|
|
transform: 'scale(0.75)',
|
|
|
|
transformOrigin: '50% 50%',
|
|
|
|
opacity: 0.3,
|
2022-04-21 02:06:22 +08:00
|
|
|
animationName: antSpinMove,
|
|
|
|
animationDuration: '1s',
|
|
|
|
animationIterationCount: 'infinite',
|
|
|
|
animationTimingFunction: 'linear',
|
|
|
|
animationDirection: 'alternate',
|
2022-03-25 14:26:09 +08:00
|
|
|
|
|
|
|
'&:nth-child(1)': {
|
|
|
|
top: 0,
|
|
|
|
insetInlineStart: 0,
|
|
|
|
},
|
|
|
|
|
|
|
|
'&:nth-child(2)': {
|
|
|
|
top: 0,
|
|
|
|
insetInlineEnd: 0,
|
|
|
|
animationDelay: '0.4s',
|
|
|
|
},
|
|
|
|
|
|
|
|
'&:nth-child(3)': {
|
|
|
|
insetInlineEnd: 0,
|
|
|
|
bottom: 0,
|
|
|
|
animationDelay: '0.8s',
|
|
|
|
},
|
|
|
|
|
|
|
|
'&:nth-child(4)': {
|
|
|
|
bottom: 0,
|
|
|
|
insetInlineStart: 0,
|
|
|
|
animationDelay: '1.2s',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
'&-spin': {
|
|
|
|
transform: 'rotate(45deg)',
|
2022-04-21 02:06:22 +08:00
|
|
|
animationName: antRotate,
|
|
|
|
animationDuration: '1.2s',
|
|
|
|
animationIterationCount: 'infinite',
|
|
|
|
animationTimingFunction: 'linear',
|
2022-03-25 14:26:09 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// Sizes
|
|
|
|
// ------------------------------
|
|
|
|
|
|
|
|
// small
|
2022-04-08 15:28:24 +08:00
|
|
|
[`&-sm ${token.componentCls}-dot`]: {
|
2022-03-25 14:26:09 +08:00
|
|
|
fontSize: token.spinDotSizeSM,
|
|
|
|
|
|
|
|
i: {
|
2022-05-26 16:05:21 +08:00
|
|
|
width: (token.spinDotSizeSM - token.marginXXS / 2) / 2,
|
|
|
|
height: (token.spinDotSizeSM - token.marginXXS / 2) / 2,
|
2022-03-25 14:26:09 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// large
|
2022-04-08 15:28:24 +08:00
|
|
|
[`&-lg ${token.componentCls}-dot`]: {
|
2022-03-25 14:26:09 +08:00
|
|
|
fontSize: token.spinDotSizeLG,
|
|
|
|
|
|
|
|
i: {
|
2022-05-26 16:05:21 +08:00
|
|
|
width: (token.spinDotSizeLG - token.marginXXS) / 2,
|
|
|
|
height: (token.spinDotSizeLG - token.marginXXS) / 2,
|
2022-03-25 14:26:09 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2022-04-08 15:28:24 +08:00
|
|
|
[`&${token.componentCls}-show-text ${token.componentCls}-text`]: {
|
2022-03-25 14:26:09 +08:00
|
|
|
display: 'block',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
// ============================== Export ==============================
|
2022-05-26 16:05:21 +08:00
|
|
|
export default genComponentStyleHook(
|
|
|
|
'Spin',
|
|
|
|
token => {
|
|
|
|
const spinToken = mergeToken<SpinToken>(token, {
|
|
|
|
spinDotDefault: token.colorTextSecondary,
|
|
|
|
spinDotSize: token.controlHeightLG / 2,
|
|
|
|
spinDotSizeSM: token.controlHeightLG * 0.35,
|
|
|
|
spinDotSizeLG: token.controlHeight,
|
|
|
|
});
|
|
|
|
return [genSpinStyle(spinToken)];
|
|
|
|
},
|
|
|
|
{
|
|
|
|
contentHeight: 400,
|
|
|
|
},
|
|
|
|
);
|