mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
refactor: Badge migrate to genComponentStyleHook (#34916)
This commit is contained in:
MadCcc
GitHub
parent
662653952e
commit
a2e6e3cec4
@ -42,6 +42,7 @@ export interface OverrideToken {
|
||||
Affix?: {};
|
||||
Alert?: {};
|
||||
Avatar?: {};
|
||||
Badge?: {};
|
||||
Button?: ButtonComponentToken;
|
||||
Carousel?: {};
|
||||
Cascader?: CascaderComponentToken;
|
||||
|
||||
@ -27,7 +27,7 @@ const Ribbon: React.FC<RibbonProps> = function Ribbon({
|
||||
text,
|
||||
placement = 'end',
|
||||
}) {
|
||||
const { getPrefixCls, direction, iconPrefixCls } = React.useContext(ConfigContext);
|
||||
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
||||
const prefixCls = getPrefixCls('ribbon', customizePrefixCls);
|
||||
const colorInPreset = isPresetColor(color);
|
||||
const ribbonCls = classNames(
|
||||
@ -39,7 +39,7 @@ const Ribbon: React.FC<RibbonProps> = function Ribbon({
|
||||
},
|
||||
className,
|
||||
);
|
||||
const [wrapSSR, hashId] = useStyle(getPrefixCls(), prefixCls, iconPrefixCls);
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
const colorStyle: React.CSSProperties = {};
|
||||
const cornerColorStyle: React.CSSProperties = {};
|
||||
if (color && !colorInPreset) {
|
||||
|
||||
@ -55,11 +55,11 @@ const Badge: CompoundedComponent = ({
|
||||
showZero = false,
|
||||
...restProps
|
||||
}) => {
|
||||
const { getPrefixCls, direction, iconPrefixCls } = React.useContext(ConfigContext);
|
||||
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
||||
const prefixCls = getPrefixCls('badge', customizePrefixCls);
|
||||
|
||||
// Style
|
||||
const [wrapSSR, hashId] = useStyle(getPrefixCls(), prefixCls, iconPrefixCls);
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
|
||||
// ================================ Misc ================================
|
||||
const numberedDisplayCount = (
|
||||
|
||||
@ -1,17 +1,15 @@
|
||||
// deps-lint-skip-all
|
||||
import { CSSObject, Keyframes } from '@ant-design/cssinjs';
|
||||
import {
|
||||
useStyleRegister,
|
||||
useToken,
|
||||
resetComponent,
|
||||
UseComponentStyleResult,
|
||||
GenerateStyle,
|
||||
PresetColors,
|
||||
PresetColorType,
|
||||
genComponentStyleHook,
|
||||
FullToken,
|
||||
} from '../../_util/theme';
|
||||
import type { DerivativeToken } from '../../_util/theme';
|
||||
|
||||
interface BadgeToken extends DerivativeToken {
|
||||
interface BadgeToken extends FullToken<'Badge'> {
|
||||
badgeZIndex: number | string;
|
||||
badgeHeight: number;
|
||||
badgeHeightSm: number;
|
||||
@ -22,9 +20,6 @@ interface BadgeToken extends DerivativeToken {
|
||||
badgeDotSize: number;
|
||||
badgeFontSizeSm: number;
|
||||
badgeStatusSize: number;
|
||||
badgePrefixCls: string;
|
||||
antPrefix: string;
|
||||
iconPrefixCls: string;
|
||||
}
|
||||
|
||||
const antStatusProcessing = new Keyframes('antStatusProcessing', {
|
||||
@ -62,17 +57,17 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
|
||||
token: BadgeToken,
|
||||
hashId: string,
|
||||
): CSSObject => {
|
||||
const { badgePrefixCls, iconPrefixCls, antPrefix } = token;
|
||||
const numberPrefixCls = `${antPrefix}-scroll-number`;
|
||||
const ribbonPrefixCls = `${antPrefix}-ribbon`;
|
||||
const ribbonWrapperPrefixCls = `${antPrefix}-ribbon-wrapper`;
|
||||
const { componentCls, iconCls, antCls } = token;
|
||||
const numberPrefixCls = `${antCls}-scroll-number`;
|
||||
const ribbonPrefixCls = `${antCls}-ribbon`;
|
||||
const ribbonWrapperPrefixCls = `${antCls}-ribbon-wrapper`;
|
||||
|
||||
// FIXME preset color 后面可能要统一重构
|
||||
const statusPreset = PresetColors.reduce((prev: CSSObject, colorKey: keyof PresetColorType) => {
|
||||
const darkColor = token[`${colorKey}-6`];
|
||||
return {
|
||||
...prev,
|
||||
[`.${badgePrefixCls}-status-${colorKey}`]: {
|
||||
[`${componentCls}-status-${colorKey}`]: {
|
||||
background: darkColor,
|
||||
},
|
||||
};
|
||||
@ -82,7 +77,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
|
||||
const darkColor = token[`${colorKey}-6`];
|
||||
return {
|
||||
...prev,
|
||||
[`&.${ribbonPrefixCls}-color-${colorKey}`]: {
|
||||
[`&${ribbonPrefixCls}-color-${colorKey}`]: {
|
||||
background: darkColor,
|
||||
color: darkColor,
|
||||
},
|
||||
@ -92,13 +87,13 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
|
||||
);
|
||||
|
||||
return {
|
||||
[`.${badgePrefixCls}`]: {
|
||||
[componentCls]: {
|
||||
...resetComponent(token),
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
lineHeight: 1,
|
||||
|
||||
[`.${badgePrefixCls}-count`]: {
|
||||
[`${componentCls}-count`]: {
|
||||
zIndex: token.badgeZIndex,
|
||||
minWidth: token.badgeHeight,
|
||||
height: token.badgeHeight,
|
||||
@ -119,7 +114,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
|
||||
color: token.badgeTextColor,
|
||||
},
|
||||
},
|
||||
[`.${badgePrefixCls}-count-sm`]: {
|
||||
[`${componentCls}-count-sm`]: {
|
||||
minWidth: token.badgeHeightSm,
|
||||
height: token.badgeHeightSm,
|
||||
padding: 0,
|
||||
@ -128,11 +123,11 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
|
||||
borderRadius: token.badgeHeightSm / 2,
|
||||
},
|
||||
|
||||
[`.${badgePrefixCls}-multiple-words`]: {
|
||||
[`${componentCls}-multiple-words`]: {
|
||||
padding: `0 ${token.paddingXS}px`,
|
||||
},
|
||||
|
||||
[`.${badgePrefixCls}-dot`]: {
|
||||
[`${componentCls}-dot`]: {
|
||||
zIndex: token.badgeZIndex,
|
||||
width: token.badgeDotSize,
|
||||
minWidth: token.badgeDotSize,
|
||||
@ -141,26 +136,26 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
|
||||
borderRadius: '100%',
|
||||
boxShadow: `0 0 0 1px ${token.colorBgComponent}`,
|
||||
},
|
||||
[`.${badgePrefixCls}-dot.${numberPrefixCls}`]: {
|
||||
[`${componentCls}-dot${numberPrefixCls}`]: {
|
||||
transition: 'background 1.5s', // FIXME: hard code, copied from old less file
|
||||
},
|
||||
[`.${badgePrefixCls}-count, .${badgePrefixCls}-dot, .${numberPrefixCls}-custom-component`]: {
|
||||
[`${componentCls}-count, ${componentCls}-dot, ${numberPrefixCls}-custom-component`]: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
insetInlineEnd: 0,
|
||||
transform: 'translate(50%, -50%)',
|
||||
transformOrigin: '100% 0%',
|
||||
[`.${iconPrefixCls}-spin`]: {
|
||||
[`${iconCls}-spin`]: {
|
||||
animation: `${antBadgeLoadingCircle.getName(hashId)} ${
|
||||
token.motionDurationFast
|
||||
} infinite linear`,
|
||||
},
|
||||
},
|
||||
[`&.${badgePrefixCls}-status`]: {
|
||||
[`&${componentCls}-status`]: {
|
||||
lineHeight: 'inherit',
|
||||
verticalAlign: 'baseline',
|
||||
|
||||
[`.${badgePrefixCls}-status-dot`]: {
|
||||
[`${componentCls}-status-dot`]: {
|
||||
position: 'relative',
|
||||
top: -1, // FIXME: hard code, copied from old less file
|
||||
display: 'inline-block',
|
||||
@ -170,10 +165,10 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
|
||||
borderRadius: '50%',
|
||||
},
|
||||
|
||||
[`.${badgePrefixCls}-status-success`]: {
|
||||
[`${componentCls}-status-success`]: {
|
||||
backgroundColor: token.colorSuccess,
|
||||
},
|
||||
[`.${badgePrefixCls}-status-processing`]: {
|
||||
[`${componentCls}-status-processing`]: {
|
||||
position: 'relative',
|
||||
backgroundColor: token.colorPrimary,
|
||||
|
||||
@ -189,83 +184,83 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
|
||||
content: '""',
|
||||
},
|
||||
},
|
||||
[`.${badgePrefixCls}-status-default`]: {
|
||||
[`${componentCls}-status-default`]: {
|
||||
backgroundColor: '#d9d9d9', // FIXME: @normal-color;
|
||||
},
|
||||
|
||||
[`.${badgePrefixCls}-status-error`]: {
|
||||
[`${componentCls}-status-error`]: {
|
||||
backgroundColor: token.colorError,
|
||||
},
|
||||
|
||||
[`.${badgePrefixCls}-status-warning`]: {
|
||||
[`${componentCls}-status-warning`]: {
|
||||
backgroundColor: token.colorWarning,
|
||||
},
|
||||
...statusPreset,
|
||||
[`.${badgePrefixCls}-status-text`]: {
|
||||
[`${componentCls}-status-text`]: {
|
||||
marginInlineStart: token.marginXS,
|
||||
color: token.colorText,
|
||||
fontSize: token.fontSize,
|
||||
},
|
||||
},
|
||||
[`.${badgePrefixCls}-zoom-appear, .${badgePrefixCls}-zoom-enter`]: {
|
||||
[`${componentCls}-zoom-appear, ${componentCls}-zoom-enter`]: {
|
||||
animation: `${antZoomBadgeIn.getName(hashId)} ${token.motionDurationSlow} ${
|
||||
token.motionEaseOutBack
|
||||
}`,
|
||||
animationFillMode: 'both',
|
||||
},
|
||||
[`.${badgePrefixCls}-zoom-leave`]: {
|
||||
[`${componentCls}-zoom-leave`]: {
|
||||
animation: `${antZoomBadgeOut.getName(hashId)} ${token.motionDurationSlow} ${
|
||||
token.motionEaseOutBack
|
||||
}`,
|
||||
animationFillMode: 'both',
|
||||
},
|
||||
[`&.${badgePrefixCls}-not-a-wrapper`]: {
|
||||
[`.${badgePrefixCls}-zoom-appear, .${badgePrefixCls}-zoom-enter`]: {
|
||||
[`&${componentCls}-not-a-wrapper`]: {
|
||||
[`${componentCls}-zoom-appear, ${componentCls}-zoom-enter`]: {
|
||||
animation: `${antNoWrapperZoomBadgeIn.getName(hashId)} ${token.motionDurationSlow} ${
|
||||
token.motionEaseOutBack
|
||||
}`,
|
||||
},
|
||||
|
||||
[`.${badgePrefixCls}-zoom-leave`]: {
|
||||
[`${componentCls}-zoom-leave`]: {
|
||||
animation: `${antNoWrapperZoomBadgeOut.getName(hashId)} ${token.motionDurationSlow} ${
|
||||
token.motionEaseOutBack
|
||||
}`,
|
||||
},
|
||||
[`&:not(.${badgePrefixCls}-status)`]: {
|
||||
[`&:not(${componentCls}-status)`]: {
|
||||
verticalAlign: 'middle',
|
||||
},
|
||||
[`.${numberPrefixCls}-custom-component, .${badgePrefixCls}-count`]: {
|
||||
[`${numberPrefixCls}-custom-component, ${componentCls}-count`]: {
|
||||
transform: 'none',
|
||||
},
|
||||
[`.${numberPrefixCls}-custom-component, .${numberPrefixCls}`]: {
|
||||
[`${numberPrefixCls}-custom-component, ${numberPrefixCls}`]: {
|
||||
position: 'relative',
|
||||
top: 'auto',
|
||||
display: 'block',
|
||||
transformOrigin: '50% 50%',
|
||||
},
|
||||
},
|
||||
[`.${numberPrefixCls}`]: {
|
||||
[`${numberPrefixCls}`]: {
|
||||
overflow: 'hidden',
|
||||
direction: 'ltr',
|
||||
[`.${numberPrefixCls}-only`]: {
|
||||
[`${numberPrefixCls}-only`]: {
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
height: token.badgeHeight,
|
||||
transition: `all ${token.motionDurationSlow} ${token.motionEaseOutBack}`,
|
||||
WebkitTransformStyle: 'preserve-3d',
|
||||
WebkitBackfaceVisibility: 'hidden',
|
||||
[`> p.${numberPrefixCls}-only-unit`]: {
|
||||
[`> p${numberPrefixCls}-only-unit`]: {
|
||||
height: token.badgeHeight,
|
||||
margin: 0,
|
||||
WebkitTransformStyle: 'preserve-3d',
|
||||
WebkitBackfaceVisibility: 'hidden',
|
||||
},
|
||||
},
|
||||
[`.${numberPrefixCls}-symbol`]: { verticalAlign: 'top' },
|
||||
[`${numberPrefixCls}-symbol`]: { verticalAlign: 'top' },
|
||||
},
|
||||
},
|
||||
[`.${ribbonWrapperPrefixCls}`]: { position: 'relative' },
|
||||
[`.${ribbonPrefixCls}`]: {
|
||||
[`${ribbonWrapperPrefixCls}`]: { position: 'relative' },
|
||||
[`${ribbonPrefixCls}`]: {
|
||||
...resetComponent(token),
|
||||
position: 'absolute',
|
||||
top: 8, // FIXME: hard code, copied from old less file
|
||||
@ -276,8 +271,8 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
|
||||
whiteSpace: 'nowrap',
|
||||
backgroundColor: token.colorPrimary,
|
||||
borderRadius: token.controlRadius,
|
||||
[`.${ribbonPrefixCls}-text`]: { color: '#fff' },
|
||||
[`.${ribbonPrefixCls}-corner`]: {
|
||||
[`${ribbonPrefixCls}-text`]: { color: '#fff' },
|
||||
[`${ribbonPrefixCls}-corner`]: {
|
||||
position: 'absolute',
|
||||
top: '100%',
|
||||
width: 8,
|
||||
@ -298,18 +293,18 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
|
||||
},
|
||||
},
|
||||
...statusRibbonPreset,
|
||||
[`&.${ribbonPrefixCls}-placement-end`]: {
|
||||
[`&${ribbonPrefixCls}-placement-end`]: {
|
||||
insetInlineEnd: -1 * token.marginXS,
|
||||
borderBottomRightRadius: 0,
|
||||
[`.${ribbonPrefixCls}-corner`]: {
|
||||
[`${ribbonPrefixCls}-corner`]: {
|
||||
insetInlineEnd: 0,
|
||||
borderColor: 'currentcolor transparent transparent currentcolor',
|
||||
},
|
||||
},
|
||||
[`&.${ribbonPrefixCls}-placement-start`]: {
|
||||
[`&${ribbonPrefixCls}-placement-start`]: {
|
||||
insetInlineStart: -1 * token.marginXS,
|
||||
borderBottomLeftRadius: 0,
|
||||
[`.${ribbonPrefixCls}-corner`]: {
|
||||
[`${ribbonPrefixCls}-corner`]: {
|
||||
insetInlineStart: 0,
|
||||
borderColor: 'currentcolor currentcolor transparent transparent',
|
||||
},
|
||||
@ -325,13 +320,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default function useStyle(
|
||||
antPrefix: string,
|
||||
badgePrefixCls: string,
|
||||
iconPrefixCls: string,
|
||||
): UseComponentStyleResult {
|
||||
const [theme, token, hashId] = useToken();
|
||||
|
||||
export default genComponentStyleHook('Badge', (token, { hashId }) => {
|
||||
const badgeZIndex = 'auto';
|
||||
const badgeHeight = 20; // FIXME: hard code
|
||||
const badgeTextColor = token.colorBgComponent;
|
||||
@ -355,16 +344,7 @@ export default function useStyle(
|
||||
badgeDotSize,
|
||||
badgeFontSizeSm,
|
||||
badgeStatusSize,
|
||||
badgePrefixCls,
|
||||
antPrefix,
|
||||
iconPrefixCls,
|
||||
};
|
||||
|
||||
return [
|
||||
useStyleRegister({ theme, token, hashId, path: [badgePrefixCls] }, () => [
|
||||
genSharedBadgeStyle(badgeToken, hashId),
|
||||
{ display: 'none' },
|
||||
]),
|
||||
hashId,
|
||||
];
|
||||
}
|
||||
return [genSharedBadgeStyle(badgeToken, hashId), { display: 'none' }];
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user