antd
Version:
An enterprise-class UI design language and React components implementation
265 lines (244 loc) • 12.2 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';
var skeletonClsLoading = new Keyframes("ant-skeleton-loading", {
'0%': {
transform: 'translateX(-37.5%)'
},
'100%': {
transform: 'translateX(37.5%)'
}
});
var genSkeletonElementCommonSize = function genSkeletonElementCommonSize(size) {
return {
height: size,
lineHeight: "".concat(size, "px")
};
};
var genSkeletonElementAvatarSize = function genSkeletonElementAvatarSize(size) {
return _extends({
width: size
}, genSkeletonElementCommonSize(size));
};
var genSkeletonColor = function genSkeletonColor(token) {
return {
position: 'relative',
// fix https://github.com/ant-design/ant-design/issues/36444
// https://monshin.github.io/202109/css/safari-border-radius-overflow-hidden/
/* stylelint-disable-next-line property-no-vendor-prefix,value-no-vendor-prefix */
zIndex: 0,
overflow: 'hidden',
background: 'transparent',
'&::after': {
position: 'absolute',
top: 0,
insetInlineEnd: '-150%',
bottom: 0,
insetInlineStart: '-150%',
background: token.skeletonLoadingBackground,
animationName: skeletonClsLoading,
animationDuration: token.skeletonLoadingMotionDuration,
animationTimingFunction: 'ease',
animationIterationCount: 'infinite',
content: '""'
}
};
};
var genSkeletonElementInputSize = function genSkeletonElementInputSize(size) {
return _extends({
width: size * 5,
minWidth: size * 5
}, genSkeletonElementCommonSize(size));
};
var genSkeletonElementAvatar = function genSkeletonElementAvatar(token) {
var _ref;
var skeletonAvatarCls = token.skeletonAvatarCls,
color = token.color,
controlHeight = token.controlHeight,
controlHeightLG = token.controlHeightLG,
controlHeightSM = token.controlHeightSM;
return _ref = {}, _defineProperty(_ref, "".concat(skeletonAvatarCls), _extends({
display: 'inline-block',
verticalAlign: 'top',
background: color
}, genSkeletonElementAvatarSize(controlHeight))), _defineProperty(_ref, "".concat(skeletonAvatarCls).concat(skeletonAvatarCls, "-circle"), {
borderRadius: '50%'
}), _defineProperty(_ref, "".concat(skeletonAvatarCls).concat(skeletonAvatarCls, "-lg"), _extends({}, genSkeletonElementAvatarSize(controlHeightLG))), _defineProperty(_ref, "".concat(skeletonAvatarCls).concat(skeletonAvatarCls, "-sm"), _extends({}, genSkeletonElementAvatarSize(controlHeightSM))), _ref;
};
var genSkeletonElementInput = function genSkeletonElementInput(token) {
var _ref2;
var controlHeight = token.controlHeight,
skeletonInputCls = token.skeletonInputCls,
controlHeightLG = token.controlHeightLG,
controlHeightSM = token.controlHeightSM,
color = token.color;
return _ref2 = {}, _defineProperty(_ref2, "".concat(skeletonInputCls), _extends({
display: 'inline-block',
verticalAlign: 'top',
background: color
}, genSkeletonElementInputSize(controlHeight))), _defineProperty(_ref2, "".concat(skeletonInputCls, "-lg"), _extends({}, genSkeletonElementInputSize(controlHeightLG))), _defineProperty(_ref2, "".concat(skeletonInputCls, "-sm"), _extends({}, genSkeletonElementInputSize(controlHeightSM))), _ref2;
};
var genSkeletonElementImageSize = function genSkeletonElementImageSize(size) {
return _extends({
width: size
}, genSkeletonElementCommonSize(size));
};
var genSkeletonElementImage = function genSkeletonElementImage(token) {
var _extends2, _ref3;
var skeletonImageCls = token.skeletonImageCls,
imageSizeBase = token.imageSizeBase,
color = token.color;
return _ref3 = {}, _defineProperty(_ref3, "".concat(skeletonImageCls), _extends(_extends({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
verticalAlign: 'top',
background: color
}, genSkeletonElementImageSize(imageSizeBase * 2)), (_extends2 = {}, _defineProperty(_extends2, "".concat(skeletonImageCls, "-path"), {
fill: '#bfbfbf'
}), _defineProperty(_extends2, "".concat(skeletonImageCls, "-svg"), _extends(_extends({}, genSkeletonElementImageSize(imageSizeBase)), {
maxWidth: imageSizeBase * 4,
maxHeight: imageSizeBase * 4
})), _defineProperty(_extends2, "".concat(skeletonImageCls, "-svg").concat(skeletonImageCls, "-svg-circle"), {
borderRadius: '50%'
}), _extends2))), _defineProperty(_ref3, "".concat(skeletonImageCls).concat(skeletonImageCls, "-circle"), {
borderRadius: '50%'
}), _ref3;
};
var genSkeletonElementButtonShape = function genSkeletonElementButtonShape(token, size, buttonCls) {
var _ref4;
var skeletonButtonCls = token.skeletonButtonCls;
return _ref4 = {}, _defineProperty(_ref4, "".concat(buttonCls).concat(skeletonButtonCls, "-circle"), {
width: size,
minWidth: size,
borderRadius: '50%'
}), _defineProperty(_ref4, "".concat(buttonCls).concat(skeletonButtonCls, "-round"), {
borderRadius: size
}), _ref4;
};
var genSkeletonElementButtonSize = function genSkeletonElementButtonSize(size) {
return _extends({
width: size * 2,
minWidth: size * 2
}, genSkeletonElementCommonSize(size));
};
var genSkeletonElementButton = function genSkeletonElementButton(token) {
var radiusSM = token.radiusSM,
skeletonButtonCls = token.skeletonButtonCls,
controlHeight = token.controlHeight,
controlHeightLG = token.controlHeightLG,
controlHeightSM = token.controlHeightSM,
color = token.color;
return _extends(_extends(_extends(_extends(_extends(_defineProperty({}, "".concat(skeletonButtonCls), _extends({
display: 'inline-block',
verticalAlign: 'top',
background: color,
borderRadius: radiusSM,
width: controlHeight * 2,
minWidth: controlHeight * 2
}, genSkeletonElementButtonSize(controlHeight))), genSkeletonElementButtonShape(token, controlHeight, skeletonButtonCls)), _defineProperty({}, "".concat(skeletonButtonCls, "-lg"), _extends({}, genSkeletonElementButtonSize(controlHeightLG)))), genSkeletonElementButtonShape(token, controlHeightLG, "".concat(skeletonButtonCls, "-lg"))), _defineProperty({}, "".concat(skeletonButtonCls, "-sm"), _extends({}, genSkeletonElementButtonSize(controlHeightSM)))), genSkeletonElementButtonShape(token, controlHeightSM, "".concat(skeletonButtonCls, "-sm")));
}; // =============================== Base ===============================
var genBaseStyle = function genBaseStyle(token) {
var _$concat, _$concat3, _$concat4, _$concat$concat2, _ref5;
var componentCls = token.componentCls,
skeletonAvatarCls = token.skeletonAvatarCls,
skeletonTitleCls = token.skeletonTitleCls,
skeletonParagraphCls = token.skeletonParagraphCls,
skeletonButtonCls = token.skeletonButtonCls,
skeletonInputCls = token.skeletonInputCls,
skeletonImageCls = token.skeletonImageCls,
controlHeight = token.controlHeight,
controlHeightLG = token.controlHeightLG,
controlHeightSM = token.controlHeightSM,
color = token.color,
padding = token.padding,
marginSM = token.marginSM,
borderRadius = token.borderRadius,
skeletonTitleHeight = token.skeletonTitleHeight,
skeletonBlockRadius = token.skeletonBlockRadius,
skeletonParagraphLineHeight = token.skeletonParagraphLineHeight,
controlHeightXS = token.controlHeightXS,
skeletonParagraphMarginTop = token.skeletonParagraphMarginTop;
return _ref5 = {}, _defineProperty(_ref5, "".concat(componentCls), (_$concat4 = {
display: 'table',
width: '100%'
}, _defineProperty(_$concat4, "".concat(componentCls, "-header"), (_$concat = {
display: 'table-cell',
paddingInlineEnd: padding,
verticalAlign: 'top'
}, _defineProperty(_$concat, "".concat(skeletonAvatarCls), _extends({
display: 'inline-block',
verticalAlign: 'top',
background: color
}, genSkeletonElementAvatarSize(controlHeight))), _defineProperty(_$concat, "".concat(skeletonAvatarCls, "-circle"), {
borderRadius: '50%'
}), _defineProperty(_$concat, "".concat(skeletonAvatarCls, "-lg"), _extends({}, genSkeletonElementAvatarSize(controlHeightLG))), _defineProperty(_$concat, "".concat(skeletonAvatarCls, "-sm"), _extends({}, genSkeletonElementAvatarSize(controlHeightSM))), _$concat)), _defineProperty(_$concat4, "".concat(componentCls, "-content"), (_$concat3 = {
display: 'table-cell',
width: '100%',
verticalAlign: 'top'
}, _defineProperty(_$concat3, "".concat(skeletonTitleCls), _defineProperty({
width: '100%',
height: skeletonTitleHeight,
background: color,
borderRadius: skeletonBlockRadius
}, "+ ".concat(skeletonParagraphCls), {
marginBlockStart: controlHeightSM
})), _defineProperty(_$concat3, "".concat(skeletonParagraphCls), {
padding: 0,
'> li': {
width: '100%',
height: skeletonParagraphLineHeight,
listStyle: 'none',
background: color,
borderRadius: skeletonBlockRadius,
'+ li': {
marginBlockStart: controlHeightXS
}
}
}), _defineProperty(_$concat3, "".concat(skeletonParagraphCls, "> li:last-child:not(:first-child):not(:nth-child(2))"), {
width: '61%'
}), _$concat3)), _defineProperty(_$concat4, "&-round ".concat(componentCls, "-content"), _defineProperty({}, "".concat(skeletonTitleCls, ", ").concat(skeletonParagraphCls, " > li"), {
borderRadius: borderRadius
})), _$concat4)), _defineProperty(_ref5, "".concat(componentCls, "-with-avatar ").concat(componentCls, "-content"), _defineProperty({}, "".concat(skeletonTitleCls), _defineProperty({
marginBlockStart: marginSM
}, "+ ".concat(skeletonParagraphCls), {
marginBlockStart: skeletonParagraphMarginTop
}))), _defineProperty(_ref5, "".concat(componentCls).concat(componentCls, "-element"), _extends(_extends(_extends(_extends({
display: 'inline-block',
width: 'auto'
}, genSkeletonElementButton(token)), genSkeletonElementAvatar(token)), genSkeletonElementInput(token)), genSkeletonElementImage(token))), _defineProperty(_ref5, "".concat(componentCls).concat(componentCls, "-block"), (_$concat$concat2 = {
width: '100%'
}, _defineProperty(_$concat$concat2, "".concat(skeletonButtonCls), {
width: '100%'
}), _defineProperty(_$concat$concat2, "".concat(skeletonInputCls), {
width: '100%'
}), _$concat$concat2)), _defineProperty(_ref5, "".concat(componentCls).concat(componentCls, "-active"), _defineProperty({}, "\n ".concat(skeletonTitleCls, ",\n ").concat(skeletonParagraphCls, " > li,\n ").concat(skeletonAvatarCls, ",\n ").concat(skeletonButtonCls, ",\n ").concat(skeletonInputCls, ",\n ").concat(skeletonImageCls, "\n "), _extends({}, genSkeletonColor(token)))), _ref5;
}; // ============================== Export ==============================
export default genComponentStyleHook('Skeleton', function (token) {
var componentCls = token.componentCls;
var skeletonToken = mergeToken(token, {
skeletonAvatarCls: "".concat(componentCls, "-avatar"),
skeletonTitleCls: "".concat(componentCls, "-title"),
skeletonParagraphCls: "".concat(componentCls, "-paragraph"),
skeletonButtonCls: "".concat(componentCls, "-button"),
skeletonInputCls: "".concat(componentCls, "-input"),
skeletonImageCls: "".concat(componentCls, "-image"),
imageSizeBase: token.controlHeight * 1.5,
skeletonTitleHeight: token.controlHeight / 2,
skeletonBlockRadius: token.radiusSM,
skeletonParagraphLineHeight: token.controlHeight / 2,
skeletonParagraphMarginTop: token.marginLG + token.marginXXS,
borderRadius: 100,
skeletonLoadingBackground: "linear-gradient(90deg, ".concat(token.color, " 25%, ").concat(token.colorGradientEnd, " 37%, ").concat(token.color, " 63%)"),
skeletonLoadingMotionDuration: '1.4s'
});
return [genBaseStyle(skeletonToken)];
}, function (token) {
var colorFillContent = token.colorFillContent,
colorFill = token.colorFill;
return {
color: colorFillContent,
colorGradientEnd: colorFill
};
});