test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 03:59:01 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

refactor: Badge migrate to genComponentStyleHook (#34916)

Browse Source
This commit is contained in:
MadCcc 2022-04-08 00:18:02 +08:00 committed by GitHub
parent 662653952e
commit a2e6e3cec4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 53 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/_util/theme/interface.ts
View File

@ -42,6 +42,7 @@ export interface OverrideToken {
Affix?: {}; Affix?: {};
Alert?: {}; Alert?: {};
Avatar?: {}; Avatar?: {};
Badge?: {};
Button?: ButtonComponentToken; Button?: ButtonComponentToken;
Carousel?: {}; Carousel?: {};
Cascader?: CascaderComponentToken; Cascader?: CascaderComponentToken;

4
components/badge/Ribbon.tsx
View File

@ -27,7 +27,7 @@ const Ribbon: React.FC<RibbonProps> = function Ribbon({
text, text,
placement = 'end', placement = 'end',
}) { }) {
const { getPrefixCls, direction, iconPrefixCls } = React.useContext(ConfigContext); const { getPrefixCls, direction } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('ribbon', customizePrefixCls); const prefixCls = getPrefixCls('ribbon', customizePrefixCls);
const colorInPreset = isPresetColor(color); const colorInPreset = isPresetColor(color);
const ribbonCls = classNames( const ribbonCls = classNames(
@ -39,7 +39,7 @@ const Ribbon: React.FC<RibbonProps> = function Ribbon({
}, },
className, className,
); );
const [wrapSSR, hashId] = useStyle(getPrefixCls(), prefixCls, iconPrefixCls); const [wrapSSR, hashId] = useStyle(prefixCls);
const colorStyle: React.CSSProperties = {}; const colorStyle: React.CSSProperties = {};
const cornerColorStyle: React.CSSProperties = {}; const cornerColorStyle: React.CSSProperties = {};
if (color && !colorInPreset) { if (color && !colorInPreset) {

4
components/badge/index.tsx
View File

@ -55,11 +55,11 @@ const Badge: CompoundedComponent = ({
showZero = false, showZero = false,
...restProps ...restProps
}) => { }) => {
const { getPrefixCls, direction, iconPrefixCls } = React.useContext(ConfigContext); const { getPrefixCls, direction } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('badge', customizePrefixCls); const prefixCls = getPrefixCls('badge', customizePrefixCls);
// Style // Style
const [wrapSSR, hashId] = useStyle(getPrefixCls(), prefixCls, iconPrefixCls); const [wrapSSR, hashId] = useStyle(prefixCls);
// ================================ Misc ================================ // ================================ Misc ================================
const numberedDisplayCount = ( const numberedDisplayCount = (

116
components/badge/style/index.tsx
View File

@ -1,17 +1,15 @@
// deps-lint-skip-all // deps-lint-skip-all
import { CSSObject, Keyframes } from '@ant-design/cssinjs'; import { CSSObject, Keyframes } from '@ant-design/cssinjs';
import { import {
useStyleRegister,
useToken,
resetComponent, resetComponent,
UseComponentStyleResult,
GenerateStyle, GenerateStyle,
PresetColors, PresetColors,
PresetColorType, PresetColorType,
genComponentStyleHook,
FullToken,
} from '../../_util/theme'; } from '../../_util/theme';
import type { DerivativeToken } from '../../_util/theme';
interface BadgeToken extends DerivativeToken { interface BadgeToken extends FullToken<'Badge'> {
badgeZIndex: number | string; badgeZIndex: number | string;
badgeHeight: number; badgeHeight: number;
badgeHeightSm: number; badgeHeightSm: number;
@ -22,9 +20,6 @@ interface BadgeToken extends DerivativeToken {
badgeDotSize: number; badgeDotSize: number;
badgeFontSizeSm: number; badgeFontSizeSm: number;
badgeStatusSize: number; badgeStatusSize: number;
badgePrefixCls: string;
antPrefix: string;
iconPrefixCls: string;
} }
const antStatusProcessing = new Keyframes('antStatusProcessing', { const antStatusProcessing = new Keyframes('antStatusProcessing', {
@ -62,17 +57,17 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
token: BadgeToken, token: BadgeToken,
hashId: string, hashId: string,
): CSSObject => { ): CSSObject => {
const { badgePrefixCls, iconPrefixCls, antPrefix } = token; const { componentCls, iconCls, antCls } = token;
const numberPrefixCls = `${antPrefix}-scroll-number`; const numberPrefixCls = `${antCls}-scroll-number`;
const ribbonPrefixCls = `${antPrefix}-ribbon`; const ribbonPrefixCls = `${antCls}-ribbon`;
const ribbonWrapperPrefixCls = `${antPrefix}-ribbon-wrapper`; const ribbonWrapperPrefixCls = `${antCls}-ribbon-wrapper`;
// FIXME preset color 后面可能要统一重构 // FIXME preset color 后面可能要统一重构
const statusPreset = PresetColors.reduce((prev: CSSObject, colorKey: keyof PresetColorType) => { const statusPreset = PresetColors.reduce((prev: CSSObject, colorKey: keyof PresetColorType) => {
const darkColor = token[`${colorKey}-6`]; const darkColor = token[`${colorKey}-6`];
return { return {
...prev, ...prev,
[`.${badgePrefixCls}-status-${colorKey}`]: { [`${componentCls}-status-${colorKey}`]: {
background: darkColor, background: darkColor,
}, },
}; };
@ -82,7 +77,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
const darkColor = token[`${colorKey}-6`]; const darkColor = token[`${colorKey}-6`];
return { return {
...prev, ...prev,
[`&.${ribbonPrefixCls}-color-${colorKey}`]: { [`&${ribbonPrefixCls}-color-${colorKey}`]: {
background: darkColor, background: darkColor,
color: darkColor, color: darkColor,
}, },
@ -92,13 +87,13 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
); );
return { return {
[`.${badgePrefixCls}`]: { [componentCls]: {
...resetComponent(token), ...resetComponent(token),
position: 'relative', position: 'relative',
display: 'inline-block', display: 'inline-block',
lineHeight: 1, lineHeight: 1,
[`.${badgePrefixCls}-count`]: { [`${componentCls}-count`]: {
zIndex: token.badgeZIndex, zIndex: token.badgeZIndex,
minWidth: token.badgeHeight, minWidth: token.badgeHeight,
height: token.badgeHeight, height: token.badgeHeight,
@ -119,7 +114,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
color: token.badgeTextColor, color: token.badgeTextColor,
}, },
}, },
[`.${badgePrefixCls}-count-sm`]: { [`${componentCls}-count-sm`]: {
minWidth: token.badgeHeightSm, minWidth: token.badgeHeightSm,
height: token.badgeHeightSm, height: token.badgeHeightSm,
padding: 0, padding: 0,
@ -128,11 +123,11 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
borderRadius: token.badgeHeightSm / 2, borderRadius: token.badgeHeightSm / 2,
}, },
[`.${badgePrefixCls}-multiple-words`]: { [`${componentCls}-multiple-words`]: {
padding: `0 ${token.paddingXS}px`, padding: `0 ${token.paddingXS}px`,
}, },
[`.${badgePrefixCls}-dot`]: { [`${componentCls}-dot`]: {
zIndex: token.badgeZIndex, zIndex: token.badgeZIndex,
width: token.badgeDotSize, width: token.badgeDotSize,
minWidth: token.badgeDotSize, minWidth: token.badgeDotSize,
@ -141,26 +136,26 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
borderRadius: '100%', borderRadius: '100%',
boxShadow: `0 0 0 1px ${token.colorBgComponent}`, 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 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', position: 'absolute',
top: 0, top: 0,
insetInlineEnd: 0, insetInlineEnd: 0,
transform: 'translate(50%, -50%)', transform: 'translate(50%, -50%)',
transformOrigin: '100% 0%', transformOrigin: '100% 0%',
[`.${iconPrefixCls}-spin`]: { [`${iconCls}-spin`]: {
animation: `${antBadgeLoadingCircle.getName(hashId)} ${ animation: `${antBadgeLoadingCircle.getName(hashId)} ${
token.motionDurationFast token.motionDurationFast
} infinite linear`, } infinite linear`,
}, },
}, },
[`&.${badgePrefixCls}-status`]: { [`&${componentCls}-status`]: {
lineHeight: 'inherit', lineHeight: 'inherit',
verticalAlign: 'baseline', verticalAlign: 'baseline',
[`.${badgePrefixCls}-status-dot`]: { [`${componentCls}-status-dot`]: {
position: 'relative', position: 'relative',
top: -1, // FIXME: hard code, copied from old less file top: -1, // FIXME: hard code, copied from old less file
display: 'inline-block', display: 'inline-block',
@ -170,10 +165,10 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
borderRadius: '50%', borderRadius: '50%',
}, },
[`.${badgePrefixCls}-status-success`]: { [`${componentCls}-status-success`]: {
backgroundColor: token.colorSuccess, backgroundColor: token.colorSuccess,
}, },
[`.${badgePrefixCls}-status-processing`]: { [`${componentCls}-status-processing`]: {
position: 'relative', position: 'relative',
backgroundColor: token.colorPrimary, backgroundColor: token.colorPrimary,
@ -189,83 +184,83 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
content: '""', content: '""',
}, },
}, },
[`.${badgePrefixCls}-status-default`]: { [`${componentCls}-status-default`]: {
backgroundColor: '#d9d9d9', // FIXME: @normal-color; backgroundColor: '#d9d9d9', // FIXME: @normal-color;
}, },
[`.${badgePrefixCls}-status-error`]: { [`${componentCls}-status-error`]: {
backgroundColor: token.colorError, backgroundColor: token.colorError,
}, },
[`.${badgePrefixCls}-status-warning`]: { [`${componentCls}-status-warning`]: {
backgroundColor: token.colorWarning, backgroundColor: token.colorWarning,
}, },
...statusPreset, ...statusPreset,
[`.${badgePrefixCls}-status-text`]: { [`${componentCls}-status-text`]: {
marginInlineStart: token.marginXS, marginInlineStart: token.marginXS,
color: token.colorText, color: token.colorText,
fontSize: token.fontSize, fontSize: token.fontSize,
}, },
}, },
[`.${badgePrefixCls}-zoom-appear, .${badgePrefixCls}-zoom-enter`]: { [`${componentCls}-zoom-appear, ${componentCls}-zoom-enter`]: {
animation: `${antZoomBadgeIn.getName(hashId)} ${token.motionDurationSlow} ${ animation: `${antZoomBadgeIn.getName(hashId)} ${token.motionDurationSlow} ${
token.motionEaseOutBack token.motionEaseOutBack
}`, }`,
animationFillMode: 'both', animationFillMode: 'both',
}, },
[`.${badgePrefixCls}-zoom-leave`]: { [`${componentCls}-zoom-leave`]: {
animation: `${antZoomBadgeOut.getName(hashId)} ${token.motionDurationSlow} ${ animation: `${antZoomBadgeOut.getName(hashId)} ${token.motionDurationSlow} ${
token.motionEaseOutBack token.motionEaseOutBack
}`, }`,
animationFillMode: 'both', animationFillMode: 'both',
}, },
[`&.${badgePrefixCls}-not-a-wrapper`]: { [`&${componentCls}-not-a-wrapper`]: {
[`.${badgePrefixCls}-zoom-appear, .${badgePrefixCls}-zoom-enter`]: { [`${componentCls}-zoom-appear, ${componentCls}-zoom-enter`]: {
animation: `${antNoWrapperZoomBadgeIn.getName(hashId)} ${token.motionDurationSlow} ${ animation: `${antNoWrapperZoomBadgeIn.getName(hashId)} ${token.motionDurationSlow} ${
token.motionEaseOutBack token.motionEaseOutBack
}`, }`,
}, },
[`.${badgePrefixCls}-zoom-leave`]: { [`${componentCls}-zoom-leave`]: {
animation: `${antNoWrapperZoomBadgeOut.getName(hashId)} ${token.motionDurationSlow} ${ animation: `${antNoWrapperZoomBadgeOut.getName(hashId)} ${token.motionDurationSlow} ${
token.motionEaseOutBack token.motionEaseOutBack
}`, }`,
}, },
[`&:not(.${badgePrefixCls}-status)`]: { [`&:not(${componentCls}-status)`]: {
verticalAlign: 'middle', verticalAlign: 'middle',
}, },
[`.${numberPrefixCls}-custom-component, .${badgePrefixCls}-count`]: { [`${numberPrefixCls}-custom-component, ${componentCls}-count`]: {
transform: 'none', transform: 'none',
}, },
[`.${numberPrefixCls}-custom-component, .${numberPrefixCls}`]: { [`${numberPrefixCls}-custom-component, ${numberPrefixCls}`]: {
position: 'relative', position: 'relative',
top: 'auto', top: 'auto',
display: 'block', display: 'block',
transformOrigin: '50% 50%', transformOrigin: '50% 50%',
}, },
}, },
[`.${numberPrefixCls}`]: { [`${numberPrefixCls}`]: {
overflow: 'hidden', overflow: 'hidden',
direction: 'ltr', direction: 'ltr',
[`.${numberPrefixCls}-only`]: { [`${numberPrefixCls}-only`]: {
position: 'relative', position: 'relative',
display: 'inline-block', display: 'inline-block',
height: token.badgeHeight, height: token.badgeHeight,
transition: `all ${token.motionDurationSlow} ${token.motionEaseOutBack}`, transition: `all ${token.motionDurationSlow} ${token.motionEaseOutBack}`,
WebkitTransformStyle: 'preserve-3d', WebkitTransformStyle: 'preserve-3d',
WebkitBackfaceVisibility: 'hidden', WebkitBackfaceVisibility: 'hidden',
[`> p.${numberPrefixCls}-only-unit`]: { [`> p${numberPrefixCls}-only-unit`]: {
height: token.badgeHeight, height: token.badgeHeight,
margin: 0, margin: 0,
WebkitTransformStyle: 'preserve-3d', WebkitTransformStyle: 'preserve-3d',
WebkitBackfaceVisibility: 'hidden', WebkitBackfaceVisibility: 'hidden',
}, },
}, },
[`.${numberPrefixCls}-symbol`]: { verticalAlign: 'top' }, [`${numberPrefixCls}-symbol`]: { verticalAlign: 'top' },
}, },
}, },
[`.${ribbonWrapperPrefixCls}`]: { position: 'relative' }, [`${ribbonWrapperPrefixCls}`]: { position: 'relative' },
[`.${ribbonPrefixCls}`]: { [`${ribbonPrefixCls}`]: {
...resetComponent(token), ...resetComponent(token),
position: 'absolute', position: 'absolute',
top: 8, // FIXME: hard code, copied from old less file top: 8, // FIXME: hard code, copied from old less file
@ -276,8 +271,8 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
backgroundColor: token.colorPrimary, backgroundColor: token.colorPrimary,
borderRadius: token.controlRadius, borderRadius: token.controlRadius,
[`.${ribbonPrefixCls}-text`]: { color: '#fff' }, [`${ribbonPrefixCls}-text`]: { color: '#fff' },
[`.${ribbonPrefixCls}-corner`]: { [`${ribbonPrefixCls}-corner`]: {
position: 'absolute', position: 'absolute',
top: '100%', top: '100%',
width: 8, width: 8,
@ -298,18 +293,18 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
}, },
}, },
...statusRibbonPreset, ...statusRibbonPreset,
[`&.${ribbonPrefixCls}-placement-end`]: { [`&${ribbonPrefixCls}-placement-end`]: {
insetInlineEnd: -1 * token.marginXS, insetInlineEnd: -1 * token.marginXS,
borderBottomRightRadius: 0, borderBottomRightRadius: 0,
[`.${ribbonPrefixCls}-corner`]: { [`${ribbonPrefixCls}-corner`]: {
insetInlineEnd: 0, insetInlineEnd: 0,
borderColor: 'currentcolor transparent transparent currentcolor', borderColor: 'currentcolor transparent transparent currentcolor',
}, },
}, },
[`&.${ribbonPrefixCls}-placement-start`]: { [`&${ribbonPrefixCls}-placement-start`]: {
insetInlineStart: -1 * token.marginXS, insetInlineStart: -1 * token.marginXS,
borderBottomLeftRadius: 0, borderBottomLeftRadius: 0,
[`.${ribbonPrefixCls}-corner`]: { [`${ribbonPrefixCls}-corner`]: {
insetInlineStart: 0, insetInlineStart: 0,
borderColor: 'currentcolor currentcolor transparent transparent', borderColor: 'currentcolor currentcolor transparent transparent',
}, },
@ -325,13 +320,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
}; };
// ============================== Export ============================== // ============================== Export ==============================
export default function useStyle( export default genComponentStyleHook('Badge', (token, { hashId }) => {
antPrefix: string,
badgePrefixCls: string,
iconPrefixCls: string,
): UseComponentStyleResult {
const [theme, token, hashId] = useToken();
const badgeZIndex = 'auto'; const badgeZIndex = 'auto';
const badgeHeight = 20; // FIXME: hard code const badgeHeight = 20; // FIXME: hard code
const badgeTextColor = token.colorBgComponent; const badgeTextColor = token.colorBgComponent;
@ -355,16 +344,7 @@ export default function useStyle(
badgeDotSize, badgeDotSize,
badgeFontSizeSm, badgeFontSizeSm,
badgeStatusSize, badgeStatusSize,
badgePrefixCls,
antPrefix,
iconPrefixCls,
}; };
return [ return [genSharedBadgeStyle(badgeToken, hashId), { display: 'none' }];
useStyleRegister({ theme, token, hashId, path: [badgePrefixCls] }, () => [ });
genSharedBadgeStyle(badgeToken, hashId),
{ display: 'none' },
]),
hashId,
];
}