mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 02:59:04 +08:00
refactor: Tag migrate to genComponentStyleHook (#34914)
This commit is contained in:
MadCcc
GitHub
parent
f581159cb5
commit
41452045e0
@ -56,6 +56,7 @@ export interface OverrideToken {
|
||||
Popover?: {};
|
||||
Select?: SelectComponentToken;
|
||||
Slider?: SliderComponentToken;
|
||||
Tag?: {};
|
||||
Tree?: {};
|
||||
TreeSelect?: {};
|
||||
Typography?: TypographyComponentToken;
|
||||
|
||||
@ -25,7 +25,7 @@ const CheckableTag: React.FC<CheckableTagProps> = ({
|
||||
onClick,
|
||||
...restProps
|
||||
}) => {
|
||||
const { getPrefixCls, iconPrefixCls } = React.useContext(ConfigContext);
|
||||
const { getPrefixCls } = React.useContext(ConfigContext);
|
||||
|
||||
const handleClick = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
|
||||
onChange?.(!checked);
|
||||
@ -34,7 +34,7 @@ const CheckableTag: React.FC<CheckableTagProps> = ({
|
||||
|
||||
const prefixCls = getPrefixCls('tag', customizePrefixCls);
|
||||
// Style
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
|
||||
const cls = classNames(
|
||||
prefixCls,
|
||||
|
||||
@ -53,7 +53,7 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
const { getPrefixCls, direction, iconPrefixCls } = React.useContext(ConfigContext);
|
||||
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
||||
const [visible, setVisible] = React.useState(true);
|
||||
|
||||
React.useEffect(() => {
|
||||
@ -77,7 +77,7 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
|
||||
const presetColor = isPresetColor();
|
||||
const prefixCls = getPrefixCls('tag', customizePrefixCls);
|
||||
// Style
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
|
||||
const tagClassName = classNames(
|
||||
prefixCls,
|
||||
|
||||
@ -3,15 +3,13 @@ import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
|
||||
import capitalize from '../../_util/capitalize';
|
||||
import {
|
||||
PresetColorType,
|
||||
DerivativeToken,
|
||||
useStyleRegister,
|
||||
useToken,
|
||||
resetComponent,
|
||||
UseComponentStyleResult,
|
||||
PresetColors,
|
||||
FullToken,
|
||||
genComponentStyleHook,
|
||||
} from '../../_util/theme';
|
||||
|
||||
interface TagToken extends DerivativeToken {
|
||||
interface TagToken extends FullToken<'Tag'> {
|
||||
tagFontSize: number;
|
||||
tagLineHeight: React.CSSProperties['lineHeight'];
|
||||
tagDefaultBg: string;
|
||||
@ -23,14 +21,13 @@ interface TagToken extends DerivativeToken {
|
||||
type CssVariableType = 'Success' | 'Info' | 'Error' | 'Warning';
|
||||
|
||||
const genTagStatusStyle = (
|
||||
prefixCls: string,
|
||||
token: TagToken,
|
||||
status: 'success' | 'processing' | 'error' | 'warning',
|
||||
cssVariableType: CssVariableType,
|
||||
): CSSInterpolation => {
|
||||
const capitalizedCssVariableType = capitalize<CssVariableType>(cssVariableType);
|
||||
return {
|
||||
[`.${prefixCls}-${status}`]: {
|
||||
[`${token.componentCls}-${status}`]: {
|
||||
color: token[`color${cssVariableType}`],
|
||||
background: token[`colorBg${capitalizedCssVariableType}`],
|
||||
borderColor: token[`color${capitalizedCssVariableType}Secondary`],
|
||||
@ -39,7 +36,7 @@ const genTagStatusStyle = (
|
||||
};
|
||||
|
||||
// FIXME: special preset colors
|
||||
const genTagColorStyle = (prefixCls: string, token: TagToken): CSSInterpolation =>
|
||||
const genTagColorStyle = (token: TagToken): CSSInterpolation =>
|
||||
PresetColors.reduce((prev: CSSObject, colorKey: keyof PresetColorType) => {
|
||||
const lightColor = token[`${colorKey}-1`];
|
||||
const lightBorderColor = token[`${colorKey}-3`];
|
||||
@ -47,12 +44,12 @@ const genTagColorStyle = (prefixCls: string, token: TagToken): CSSInterpolation
|
||||
const textColor = token[`${colorKey}-7`];
|
||||
return {
|
||||
...prev,
|
||||
[`.${prefixCls}-${colorKey}`]: {
|
||||
[`${token.componentCls}-${colorKey}`]: {
|
||||
color: textColor,
|
||||
background: lightColor,
|
||||
borderColor: lightBorderColor,
|
||||
},
|
||||
[`.${prefixCls}-${colorKey}-inverse`]: {
|
||||
[`${token.componentCls}-${colorKey}-inverse`]: {
|
||||
color: token.colorTextLightSolid,
|
||||
background: darkColor,
|
||||
borderColor: darkColor,
|
||||
@ -60,17 +57,13 @@ const genTagColorStyle = (prefixCls: string, token: TagToken): CSSInterpolation
|
||||
};
|
||||
}, {} as CSSObject);
|
||||
|
||||
const genBaseStyle = (
|
||||
prefixCls: string,
|
||||
iconPrefixCls: string,
|
||||
token: TagToken,
|
||||
): CSSInterpolation => ({
|
||||
const genBaseStyle = (token: TagToken): CSSInterpolation => ({
|
||||
// Result
|
||||
[`.${prefixCls}`]: {
|
||||
[token.componentCls]: {
|
||||
...resetComponent(token),
|
||||
display: 'inline-block',
|
||||
height: 'auto',
|
||||
marginInlineStart: token.marginXS,
|
||||
marginInlineEnd: token.marginXS,
|
||||
// FIXME: hard code
|
||||
padding: '0 7px',
|
||||
fontSize: token.tagFontSize,
|
||||
@ -93,7 +86,7 @@ const genBaseStyle = (
|
||||
color: token.tagDefaultColor,
|
||||
},
|
||||
|
||||
[`.${prefixCls}-close-icon`]: {
|
||||
[`${token.componentCls}-close-icon`]: {
|
||||
// FIXME: hard code
|
||||
marginInlineStart: 3,
|
||||
color: token.colorTextSecondary,
|
||||
@ -110,7 +103,7 @@ const genBaseStyle = (
|
||||
[`&&-has-color`]: {
|
||||
borderColor: 'transparent',
|
||||
|
||||
[`&, a, a:hover, .${iconPrefixCls}-close, .${iconPrefixCls}-close:hover`]: {
|
||||
[`&, a, a:hover, ${token.iconCls}-close, ${token.iconCls}-close:hover`]: {
|
||||
color: token.colorTextLightSolid,
|
||||
},
|
||||
},
|
||||
@ -142,18 +135,15 @@ const genBaseStyle = (
|
||||
},
|
||||
|
||||
// To ensure that a space will be placed between character and `Icon`.
|
||||
[`> .${iconPrefixCls} + span, > span + .${iconPrefixCls}`]: {
|
||||
[`> ${token.iconCls} + span, > span + ${token.iconCls}`]: {
|
||||
// FIXME: hard code
|
||||
marginInlineStart: 7,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const genTagStyle = (
|
||||
prefixCls: string,
|
||||
iconPrefixCls: string,
|
||||
token: DerivativeToken,
|
||||
): CSSInterpolation => {
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Tag', token => {
|
||||
const tagFontSize = token.fontSizeSM;
|
||||
// FIXME: hard code
|
||||
const tagLineHeight = '18px';
|
||||
@ -169,30 +159,11 @@ export const genTagStyle = (
|
||||
};
|
||||
|
||||
return [
|
||||
genBaseStyle(prefixCls, iconPrefixCls, tagToken),
|
||||
genTagColorStyle(prefixCls, tagToken),
|
||||
genTagStatusStyle(prefixCls, tagToken, 'success', 'Success'),
|
||||
genTagStatusStyle(prefixCls, tagToken, 'processing', 'Info'),
|
||||
genTagStatusStyle(prefixCls, tagToken, 'error', 'Error'),
|
||||
genTagStatusStyle(prefixCls, tagToken, 'warning', 'Warning'),
|
||||
genBaseStyle(tagToken),
|
||||
genTagColorStyle(tagToken),
|
||||
genTagStatusStyle(tagToken, 'success', 'Success'),
|
||||
genTagStatusStyle(tagToken, 'processing', 'Info'),
|
||||
genTagStatusStyle(tagToken, 'error', 'Error'),
|
||||
genTagStatusStyle(tagToken, 'warning', 'Warning'),
|
||||
];
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export function getStyle(prefixCls: string, iconPrefixCls: string, token: DerivativeToken) {
|
||||
return [genTagStyle(prefixCls, iconPrefixCls, token)];
|
||||
}
|
||||
|
||||
export default function useStyle(
|
||||
prefixCls: string,
|
||||
iconPrefixCls: string,
|
||||
): UseComponentStyleResult {
|
||||
const [theme, token, hashId] = useToken();
|
||||
|
||||
return [
|
||||
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () =>
|
||||
getStyle(prefixCls, iconPrefixCls, token),
|
||||
),
|
||||
hashId,
|
||||
];
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user