antd
Version:
An enterprise-class UI design language and React components implementation
175 lines (170 loc) • 6.55 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import { Keyframes } from '@ant-design/cssinjs';
import { genComponentStyleHook, mergeToken } from '../../theme';
import { resetComponent } from '../../style';
var antSpinMove = new Keyframes('antSpinMove', {
to: {
opacity: 1
}
});
var antRotate = new Keyframes('antRotate', {
to: {
transform: 'rotate(405deg)'
}
});
var genSpinStyle = function genSpinStyle(token) {
var _div$concat, _div$concat2, _div$concat3, _nestedLoading, _extends2;
return _defineProperty({}, "".concat(token.componentCls), _extends(_extends({}, resetComponent(token)), (_extends2 = {
position: 'absolute',
display: 'none',
color: token.colorPrimary,
textAlign: 'center',
verticalAlign: 'middle',
opacity: 0,
transition: "transform ".concat(token.motionDurationSlow, " ").concat(token.motionEaseInOutCirc),
'&-spinning': {
position: 'static',
display: 'inline-block',
opacity: 1
},
'&-nested-loading': (_nestedLoading = {
position: 'relative'
}, _defineProperty(_nestedLoading, "> div > ".concat(token.componentCls), (_div$concat3 = {
position: 'absolute',
top: 0,
insetInlineStart: 0,
zIndex: 4,
display: 'block',
width: '100%',
height: '100%',
maxHeight: token.contentHeight
}, _defineProperty(_div$concat3, "".concat(token.componentCls, "-dot"), {
position: 'absolute',
top: '50%',
insetInlineStart: '50%',
margin: -token.spinDotSize / 2
}), _defineProperty(_div$concat3, "".concat(token.componentCls, "-text"), {
position: 'absolute',
top: '50%',
width: '100%',
paddingTop: (token.spinDotSize - token.fontSize) / 2 + 2,
textShadow: "0 1px 2px ".concat(token.colorBgContainer) // FIXME: shadow
}), _defineProperty(_div$concat3, "&".concat(token.componentCls, "-show-text ").concat(token.componentCls, "-dot"), {
marginTop: -(token.spinDotSize / 2) - 10
}), _defineProperty(_div$concat3, "> div > ".concat(token.componentCls, "-sm"), (_div$concat = {}, _defineProperty(_div$concat, "".concat(token.componentCls, "-dot"), {
margin: -token.spinDotSizeSM / 2
}), _defineProperty(_div$concat, "".concat(token.componentCls, "-text"), {
paddingTop: (token.spinDotSizeSM - token.fontSize) / 2 + 2
}), _defineProperty(_div$concat, "&".concat(token.componentCls, "-show-text ").concat(token.componentCls, "-dot"), {
marginTop: -(token.spinDotSizeSM / 2) - 10
}), _div$concat)), _defineProperty(_div$concat3, "> div > ".concat(token.componentCls, "-lg"), (_div$concat2 = {}, _defineProperty(_div$concat2, "".concat(token.componentCls, "-dot"), {
margin: -(token.spinDotSizeLG / 2)
}), _defineProperty(_div$concat2, "".concat(token.componentCls, "-text"), {
paddingTop: (token.spinDotSizeLG - token.fontSize) / 2 + 2
}), _defineProperty(_div$concat2, "&".concat(token.componentCls, "-show-text ").concat(token.componentCls, "-dot"), {
marginTop: -(token.spinDotSizeLG / 2) - 10
}), _div$concat2)), _div$concat3)), _defineProperty(_nestedLoading, "".concat(token.componentCls, "-container"), {
position: 'relative',
transition: "opacity ".concat(token.motionDurationSlow),
'&::after': {
position: 'absolute',
top: 0,
insetInlineEnd: 0,
bottom: 0,
insetInlineStart: 0,
zIndex: 10,
width: '100%',
height: '100%',
background: token.colorBgContainer,
opacity: 0,
transition: "all ".concat(token.motionDurationSlow),
content: '""',
pointerEvents: 'none'
}
}), _defineProperty(_nestedLoading, "".concat(token.componentCls, "-blur"), _defineProperty({
clear: 'both',
opacity: 0.5,
userSelect: 'none',
pointerEvents: 'none'
}, "&::after", {
opacity: 0.4,
pointerEvents: 'auto'
})), _nestedLoading)
}, _defineProperty(_extends2, "&-tip", {
color: token.spinDotDefault
}), _defineProperty(_extends2, "".concat(token.componentCls, "-dot"), {
position: 'relative',
display: 'inline-block',
fontSize: token.spinDotSize,
width: '1em',
height: '1em',
'&-item': {
position: 'absolute',
display: 'block',
width: (token.spinDotSize - token.marginXXS / 2) / 2,
height: (token.spinDotSize - token.marginXXS / 2) / 2,
backgroundColor: token.colorPrimary,
borderRadius: '100%',
transform: 'scale(0.75)',
transformOrigin: '50% 50%',
opacity: 0.3,
animationName: antSpinMove,
animationDuration: '1s',
animationIterationCount: 'infinite',
animationTimingFunction: 'linear',
animationDirection: 'alternate',
'&: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)',
animationName: antRotate,
animationDuration: '1.2s',
animationIterationCount: 'infinite',
animationTimingFunction: 'linear'
}
}), _defineProperty(_extends2, "&-sm ".concat(token.componentCls, "-dot"), {
fontSize: token.spinDotSizeSM,
i: {
width: (token.spinDotSizeSM - token.marginXXS / 2) / 2,
height: (token.spinDotSizeSM - token.marginXXS / 2) / 2
}
}), _defineProperty(_extends2, "&-lg ".concat(token.componentCls, "-dot"), {
fontSize: token.spinDotSizeLG,
i: {
width: (token.spinDotSizeLG - token.marginXXS) / 2,
height: (token.spinDotSizeLG - token.marginXXS) / 2
}
}), _defineProperty(_extends2, "&".concat(token.componentCls, "-show-text ").concat(token.componentCls, "-text"), {
display: 'block'
}), _extends2)));
}; // ============================== Export ==============================
export default genComponentStyleHook('Spin', function (token) {
var spinToken = mergeToken(token, {
spinDotDefault: token.colorTextDescription,
spinDotSize: token.controlHeightLG / 2,
spinDotSizeSM: token.controlHeightLG * 0.35,
spinDotSizeLG: token.controlHeight
});
return [genSpinStyle(spinToken)];
}, {
contentHeight: 400
});