antd
Version:
An enterprise-class UI design language and React components implementation
245 lines • 7.24 kB
JavaScript
import { Keyframes } from '@ant-design/cssinjs';
import { resetComponent } from '../../style';
import { genStyleHooks, mergeToken } from '../../theme/internal';
import { genCssVar } from '../../theme/util/genStyleUtils';
const antSpinMove = new Keyframes('antSpinMove', {
to: {
opacity: 1
}
});
const antRotate = new Keyframes('antRotate', {
to: {
transform: 'rotate(405deg)'
}
});
// =============================== Spin ===============================
const genSpinStyle = token => {
const {
componentCls
} = token;
const sectionCls = `${componentCls}-section`;
return {
[componentCls]: {
...resetComponent(token),
position: 'relative',
'&-rtl': {
direction: 'rtl'
},
// ========================== Section ===========================
[`&${sectionCls}, ${sectionCls}`]: {
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
gap: token.paddingSM,
color: token.colorPrimary
},
[`&${sectionCls}`]: {
display: 'inline-flex'
},
[sectionCls]: {
position: 'absolute',
top: '50%',
left: {
_skip_check_: true,
value: '50%'
},
transform: 'translate(-50%, -50%)',
zIndex: 1
},
[`${componentCls}-description`]: {
fontSize: token.fontSize,
lineHeight: 1
},
// ========================= Container ==========================
[`${componentCls}-container`]: {
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.colorBgContainer,
opacity: 0,
transition: `all ${token.motionDurationSlow}`,
content: '""',
pointerEvents: 'none'
}
},
// ========================== Spinning ==========================
'&-spinning': {
[`${componentCls}-description`]: {
textShadow: `0 0px 5px ${token.colorBgContainer}`
},
[`${componentCls}-container`]: {
clear: 'both',
opacity: 0.5,
userSelect: 'none',
pointerEvents: 'none',
'&::after': {
opacity: 0.4,
pointerEvents: 'auto'
}
}
},
// ========================= Fullscreen =========================
'&-fullscreen': {
position: 'fixed',
inset: 0,
backgroundColor: token.colorBgMask,
zIndex: token.zIndexPopupBase,
opacity: 0,
pointerEvents: 'none',
transition: `all ${token.motionDurationMid}`,
[`&${componentCls}-spinning`]: {
opacity: 1,
pointerEvents: 'auto'
},
[sectionCls]: {
color: token.colorWhite,
[`${componentCls}-description`]: {
color: token.colorTextLightSolid
}
}
}
}
};
};
// ============================ Indicator =============================
const genIndicatorStyle = token => {
const {
componentCls,
antCls,
motionDurationSlow
} = token;
const [varName, varRef] = genCssVar(antCls, 'spin');
return {
[componentCls]: {
[varName('dot-holder-size')]: token.dotSize,
[varName('dot-item-size')]: `calc((${varRef('dot-holder-size')} - ${token.marginXXS} / 2) / 2)`,
[`${componentCls}-dot`]: {
// >>> holder
'&-holder': {
width: '1em',
height: '1em',
fontSize: varRef('dot-holder-size'),
display: 'inline-block',
transition: ['transform', 'opacity'].map(prop => `${prop} ${motionDurationSlow} ease`).join(', '),
transformOrigin: '50% 50%',
lineHeight: 1,
'&-hidden': {
transform: 'scale(0.3)',
opacity: 0
}
},
// >>> holder > dot
position: 'relative',
display: 'inline-block',
fontSize: varRef('dot-holder-size'),
width: '1em',
height: '1em',
'&-spin': {
transform: 'rotate(45deg)',
animationName: antRotate,
animationDuration: '1.2s',
animationIterationCount: 'infinite',
animationTimingFunction: 'linear'
},
// >>> holder > dot > item
'&-item': {
position: 'absolute',
display: 'block',
width: varRef('dot-item-size'),
height: varRef('dot-item-size'),
background: 'currentColor',
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,
animationDelay: '0s'
},
'&: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'
}
},
// ========================= Progress =========================
'&-progress': {
position: 'absolute',
left: '50%',
top: 0,
transform: 'translateX(-50%)'
},
'&-circle': {
strokeLinecap: 'round',
transition: ['stroke-dashoffset', 'stroke-dasharray', 'stroke', 'stroke-width', 'opacity'].map(item => `${item} ${motionDurationSlow} ease`).join(','),
fillOpacity: 0,
stroke: 'currentcolor'
},
'&-circle-bg': {
stroke: token.colorFillSecondary
}
}
}
};
};
// =============================== Size ===============================
const genSizeStyle = token => {
const {
componentCls
} = token;
const [varName] = genCssVar(token.antCls, 'spin');
return {
[componentCls]: {
'&-sm': {
[varName('dot-holder-size')]: token.dotSizeSM
},
'&-lg': {
[varName('dot-holder-size')]: token.dotSizeLG
}
}
};
};
// ========================= Component Token ==========================
export const prepareComponentToken = token => {
const {
controlHeightLG,
controlHeight
} = token;
return {
contentHeight: 400,
dotSize: controlHeightLG / 2,
dotSizeSM: controlHeightLG * 0.35,
dotSizeLG: controlHeight
};
};
// ============================== Export ==============================
export default genStyleHooks('Spin', token => {
const spinToken = mergeToken(token, {
spinDotDefault: token.colorTextDescription
});
return [genSpinStyle(spinToken), genIndicatorStyle(spinToken), genSizeStyle(spinToken)];
}, prepareComponentToken);