antd
Version:
An enterprise-class UI design language and React components implementation
313 lines (309 loc) • 12.6 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, PresetColors } from '../../theme';
import { resetComponent } from '../../style';
var antStatusProcessing = new Keyframes('antStatusProcessing', {
'0%': {
transform: 'scale(0.8)',
opacity: 0.5
},
'100%': {
transform: 'scale(2.4)',
opacity: 0
}
});
var antZoomBadgeIn = new Keyframes('antZoomBadgeIn', {
'0%': {
transform: 'scale(0) translate(50%, -50%)',
opacity: 0
},
'100%': {
transform: 'scale(1) translate(50%, -50%)'
}
});
var antZoomBadgeOut = new Keyframes('antZoomBadgeOut', {
'0%': {
transform: 'scale(1) translate(50%, -50%)'
},
'100%': {
transform: 'scale(0) translate(50%, -50%)',
opacity: 0
}
});
var antNoWrapperZoomBadgeIn = new Keyframes('antNoWrapperZoomBadgeIn', {
'0%': {
transform: 'scale(0)',
opacity: 0
},
'100%': {
transform: 'scale(1)'
}
});
var antNoWrapperZoomBadgeOut = new Keyframes('antNoWrapperZoomBadgeOut', {
'0%': {
transform: 'scale(1)'
},
'100%': {
transform: 'scale(0)',
opacity: 0
}
});
var antBadgeLoadingCircle = new Keyframes('antBadgeLoadingCircle', {
'0%': {
transformOrigin: '50%'
},
'100%': {
transform: 'translate(50%, -50%) rotate(360deg)',
transformOrigin: '50%'
}
});
var genSharedBadgeStyle = function genSharedBadgeStyle(token) {
var _extends4, _$concat, _$concat3, _extends6, _extends7, _extends8, _ref;
var componentCls = token.componentCls,
iconCls = token.iconCls,
antCls = token.antCls,
badgeFontHeight = token.badgeFontHeight,
badgeShadowSize = token.badgeShadowSize,
badgeHeightSm = token.badgeHeightSm,
motionDurationSlow = token.motionDurationSlow,
badgeStatusSize = token.badgeStatusSize,
marginXS = token.marginXS,
badgeRibbonOffset = token.badgeRibbonOffset;
var numberPrefixCls = "".concat(antCls, "-scroll-number");
var ribbonPrefixCls = "".concat(antCls, "-ribbon");
var ribbonWrapperPrefixCls = "".concat(antCls, "-ribbon-wrapper");
var statusPreset = PresetColors.reduce(function (prev, colorKey) {
var darkColor = token["".concat(colorKey, "-6")];
return _extends(_extends({}, prev), _defineProperty({}, "".concat(componentCls, "-status-").concat(colorKey), {
background: darkColor
}));
}, {});
var statusRibbonPreset = PresetColors.reduce(function (prev, colorKey) {
var darkColor = token["".concat(colorKey, "-6")];
return _extends(_extends({}, prev), _defineProperty({}, "&".concat(ribbonPrefixCls, "-color-").concat(colorKey), {
background: darkColor,
color: darkColor
}));
}, {});
return _ref = {}, _defineProperty(_ref, componentCls, _extends(_extends({}, resetComponent(token)), (_extends6 = {
position: 'relative',
display: 'inline-block',
lineHeight: 1
}, _defineProperty(_extends6, "".concat(componentCls, "-count"), {
zIndex: token.badgeZIndex,
minWidth: token.badgeHeight,
height: token.badgeHeight,
color: token.badgeTextColor,
fontWeight: token.badgeFontWeight,
fontSize: token.badgeFontSize,
lineHeight: "".concat(token.badgeHeight, "px"),
whiteSpace: 'nowrap',
textAlign: 'center',
background: token.badgeColor,
borderRadius: token.badgeHeight / 2,
boxShadow: "0 0 0 ".concat(badgeShadowSize, "px ").concat(token.badgeShadowColor),
transition: "background ".concat(token.motionDurationFast),
a: {
color: token.badgeTextColor
},
'a:hover': {
color: token.badgeTextColor
},
'a:hover &': {
background: token.badgeColorHover
}
}), _defineProperty(_extends6, "".concat(componentCls, "-count-sm"), {
minWidth: badgeHeightSm,
height: badgeHeightSm,
fontSize: token.badgeFontSizeSm,
lineHeight: "".concat(badgeHeightSm, "px"),
borderRadius: badgeHeightSm / 2
}), _defineProperty(_extends6, "".concat(componentCls, "-multiple-words"), {
padding: "0 ".concat(token.paddingXS, "px")
}), _defineProperty(_extends6, "".concat(componentCls, "-dot"), {
zIndex: token.badgeZIndex,
width: token.badgeDotSize,
minWidth: token.badgeDotSize,
height: token.badgeDotSize,
background: token.badgeColor,
borderRadius: '100%',
boxShadow: "0 0 0 ".concat(badgeShadowSize, "px ").concat(token.badgeShadowColor)
}), _defineProperty(_extends6, "".concat(componentCls, "-dot").concat(numberPrefixCls), {
transition: "background ".concat(motionDurationSlow)
}), _defineProperty(_extends6, "".concat(componentCls, "-count, ").concat(componentCls, "-dot, ").concat(numberPrefixCls, "-custom-component"), _defineProperty({
position: 'absolute',
top: 0,
insetInlineEnd: 0,
transform: 'translate(50%, -50%)',
transformOrigin: '100% 0%'
}, "".concat(iconCls, "-spin"), {
animationName: antBadgeLoadingCircle,
animationDuration: token.motionDurationFast,
animationIterationCount: 'infinite',
animationTimingFunction: 'linear'
})), _defineProperty(_extends6, "&".concat(componentCls, "-status"), _extends(_extends((_extends4 = {
lineHeight: 'inherit',
verticalAlign: 'baseline'
}, _defineProperty(_extends4, "".concat(componentCls, "-status-dot"), {
position: 'relative',
top: -1,
display: 'inline-block',
width: badgeStatusSize,
height: badgeStatusSize,
verticalAlign: 'middle',
borderRadius: '50%'
}), _defineProperty(_extends4, "".concat(componentCls, "-status-success"), {
backgroundColor: token.colorSuccess
}), _defineProperty(_extends4, "".concat(componentCls, "-status-processing"), {
position: 'relative',
backgroundColor: token.colorPrimary,
'&::after': {
position: 'absolute',
top: 0,
insetInlineStart: 0,
width: '100%',
height: '100%',
border: "".concat(badgeShadowSize, "px solid ").concat(token.colorPrimary),
borderRadius: '50%',
animationName: antStatusProcessing,
animationDuration: token.badgeProcessingDuration,
animationIterationCount: 'infinite',
animationTimingFunction: 'ease-in-out',
content: '""'
}
}), _defineProperty(_extends4, "".concat(componentCls, "-status-default"), {
backgroundColor: token.colorTextPlaceholder
}), _defineProperty(_extends4, "".concat(componentCls, "-status-error"), {
backgroundColor: token.colorError
}), _defineProperty(_extends4, "".concat(componentCls, "-status-warning"), {
backgroundColor: token.colorWarning
}), _extends4), statusPreset), _defineProperty({}, "".concat(componentCls, "-status-text"), {
marginInlineStart: marginXS,
color: token.colorText,
fontSize: token.fontSize
}))), _defineProperty(_extends6, "".concat(componentCls, "-zoom-appear, ").concat(componentCls, "-zoom-enter"), {
animationName: antZoomBadgeIn,
animationDuration: token.motionDurationSlow,
animationTimingFunction: token.motionEaseOutBack,
animationFillMode: 'both'
}), _defineProperty(_extends6, "".concat(componentCls, "-zoom-leave"), {
animationName: antZoomBadgeOut,
animationDuration: token.motionDurationSlow,
animationTimingFunction: token.motionEaseOutBack,
animationFillMode: 'both'
}), _defineProperty(_extends6, "&".concat(componentCls, "-not-a-wrapper"), (_$concat = {}, _defineProperty(_$concat, "".concat(componentCls, "-zoom-appear, ").concat(componentCls, "-zoom-enter"), {
animationName: antNoWrapperZoomBadgeIn,
animationDuration: token.motionDurationSlow,
animationTimingFunction: token.motionEaseOutBack
}), _defineProperty(_$concat, "".concat(componentCls, "-zoom-leave"), {
animationName: antNoWrapperZoomBadgeOut,
animationDuration: token.motionDurationSlow,
animationTimingFunction: token.motionEaseOutBack
}), _defineProperty(_$concat, "&:not(".concat(componentCls, "-status)"), {
verticalAlign: 'middle'
}), _defineProperty(_$concat, "".concat(numberPrefixCls, "-custom-component, ").concat(componentCls, "-count"), {
transform: 'none'
}), _defineProperty(_$concat, "".concat(numberPrefixCls, "-custom-component, ").concat(numberPrefixCls), {
position: 'relative',
top: 'auto',
display: 'block',
transformOrigin: '50% 50%'
}), _$concat)), _defineProperty(_extends6, "".concat(numberPrefixCls), (_$concat3 = {
overflow: 'hidden',
direction: 'ltr'
}, _defineProperty(_$concat3, "".concat(numberPrefixCls, "-only"), _defineProperty({
position: 'relative',
display: 'inline-block',
height: token.badgeHeight,
transition: "all ".concat(token.motionDurationSlow, " ").concat(token.motionEaseOutBack),
WebkitTransformStyle: 'preserve-3d',
WebkitBackfaceVisibility: 'hidden'
}, "> p".concat(numberPrefixCls, "-only-unit"), {
height: token.badgeHeight,
margin: 0,
WebkitTransformStyle: 'preserve-3d',
WebkitBackfaceVisibility: 'hidden'
})), _defineProperty(_$concat3, "".concat(numberPrefixCls, "-symbol"), {
verticalAlign: 'top'
}), _$concat3)), _extends6))), _defineProperty(_ref, "".concat(ribbonWrapperPrefixCls), {
position: 'relative'
}), _defineProperty(_ref, "".concat(ribbonPrefixCls), _extends(_extends(_extends(_extends({}, resetComponent(token)), (_extends7 = {
position: 'absolute',
top: marginXS,
height: badgeFontHeight,
padding: "0 ".concat(token.paddingXS, "px"),
color: token.colorPrimary,
lineHeight: "".concat(badgeFontHeight, "px"),
whiteSpace: 'nowrap',
backgroundColor: token.colorPrimary,
borderRadius: token.controlRadiusSM
}, _defineProperty(_extends7, "".concat(ribbonPrefixCls, "-text"), {
color: token.colorTextLightSolid
}), _defineProperty(_extends7, "".concat(ribbonPrefixCls, "-corner"), {
position: 'absolute',
top: '100%',
width: badgeRibbonOffset,
height: badgeRibbonOffset,
color: 'currentcolor',
border: "".concat(badgeRibbonOffset / 2, "px solid"),
transform: token.badgeRibbonCornerTransform,
transformOrigin: 'top',
filter: token.badgeRibbonCornerFilter
}), _extends7)), statusRibbonPreset), (_extends8 = {}, _defineProperty(_extends8, "&".concat(ribbonPrefixCls, "-placement-end"), _defineProperty({
insetInlineEnd: -badgeRibbonOffset,
borderEndEndRadius: 0
}, "".concat(ribbonPrefixCls, "-corner"), {
insetInlineEnd: 0,
borderColor: 'currentcolor transparent transparent currentcolor'
})), _defineProperty(_extends8, "&".concat(ribbonPrefixCls, "-placement-start"), _defineProperty({
insetInlineStart: -badgeRibbonOffset,
borderEndStartRadius: 0
}, "".concat(ribbonPrefixCls, "-corner"), {
insetInlineStart: 0,
borderColor: 'currentcolor currentcolor transparent transparent'
})), _extends8))), _ref;
}; // ============================== Export ==============================
export default genComponentStyleHook('Badge', function (token) {
var fontSize = token.fontSize,
lineHeight = token.lineHeight,
fontSizeSM = token.fontSizeSM,
controlLineWidth = token.controlLineWidth,
marginXS = token.marginXS,
colorBorderBg = token.colorBorderBg;
var badgeFontHeight = Math.round(fontSize * lineHeight);
var badgeShadowSize = controlLineWidth;
var badgeZIndex = 'auto';
var badgeHeight = badgeFontHeight - 2 * badgeShadowSize;
var badgeTextColor = token.colorBgContainer;
var badgeFontWeight = 'normal';
var badgeFontSize = fontSizeSM;
var badgeColor = token.colorError;
var badgeColorHover = token.colorErrorHover;
var badgeHeightSm = fontSize;
var badgeDotSize = fontSizeSM / 2;
var badgeFontSizeSm = fontSizeSM;
var badgeStatusSize = fontSizeSM / 2;
var badgeToken = mergeToken(token, {
badgeFontHeight: badgeFontHeight,
badgeShadowSize: badgeShadowSize,
badgeZIndex: badgeZIndex,
badgeHeight: badgeHeight,
badgeTextColor: badgeTextColor,
badgeFontWeight: badgeFontWeight,
badgeFontSize: badgeFontSize,
badgeColor: badgeColor,
badgeColorHover: badgeColorHover,
badgeShadowColor: colorBorderBg,
badgeHeightSm: badgeHeightSm,
badgeDotSize: badgeDotSize,
badgeFontSizeSm: badgeFontSizeSm,
badgeStatusSize: badgeStatusSize,
badgeProcessingDuration: '1.2s',
badgeRibbonOffset: marginXS,
// Follow token just by Design. Not related with token
badgeRibbonCornerTransform: 'scaleY(0.75)',
badgeRibbonCornerFilter: "brightness(75%)"
});
return [genSharedBadgeStyle(badgeToken)];
});