mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

feat: support Keyframes as 'animationName' value (#35142)

Browse Source
This commit is contained in:
MadCcc 2022-04-21 02:06:22 +08:00 committed by GitHub
parent 959049f03e
commit 1d91507a59
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 131 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/_util/theme/index.tsx
View File

@ -105,5 +105,4 @@ export type UseComponentStyleResult = [(node: React.ReactNode) => React.ReactEle
export type GenerateStyle<ComponentToken extends object, ReturnType = CSSInterpolation> = (
token: ComponentToken,
hashId?: string,
) => ReturnType;

5
components/_util/theme/util/motion.tsx
View File

@ -13,7 +13,6 @@ const initMotionCommonLeave = (duration: string): CSSObject => ({
});
export const initMotion = (
hashId: string,
motionName: string,
inKeyframes: Keyframes,
outKeyframes: Keyframes,
@ -39,12 +38,12 @@ export const initMotion = (
${motionCls}-enter${motionCls}-enter-active,
${motionCls}-appear${motionCls}-appear-active
`]: {
animationName: inKeyframes.getName(hashId),
animationName: inKeyframes,
animationPlayState: 'running',
},
[`${motionCls}-leave${motionCls}-leave-active`]: {
animationName: outKeyframes.getName(hashId),
animationName: outKeyframes,
animationPlayState: 'running',
pointerEvents: 'none',
},

3
components/_util/theme/util/slide.tsx
View File

@ -3,7 +3,6 @@ import type { DerivativeToken } from '..';
import { initMotion } from './motion';
export const initSlideMotion = (
hashId: string,
rootPrefixCls: string,
motionName: string,
inKeyframes: Keyframes,
@ -14,7 +13,7 @@ export const initSlideMotion = (
const motionCls = `.${rootMotionName}`;
return [
initMotion(hashId, rootMotionName, inKeyframes, outKeyframes, token.motionDurationMid),
initMotion(rootMotionName, inKeyframes, outKeyframes, token.motionDurationMid),
{
[`

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

@ -54,10 +54,7 @@ const antBadgeLoadingCircle = new Keyframes('antBadgeLoadingCircle', {
},
});
const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
token: BadgeToken,
hashId: string,
): CSSObject => {
const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSObject => {
const { componentCls, iconCls, antCls } = token;
const numberPrefixCls = `${antCls}-scroll-number`;
const ribbonPrefixCls = `${antCls}-ribbon`;
@ -147,9 +144,10 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
transform: 'translate(50%, -50%)',
transformOrigin: '100% 0%',
[`${iconCls}-spin`]: {
animation: `${antBadgeLoadingCircle.getName(hashId)} ${
token.motionDurationFast
} infinite linear`,
animationName: antBadgeLoadingCircle,
animationDuration: token.motionDurationFast,
animationIterationCount: 'infinite',
animationTimingFunction: 'linear',
},
},
[`&${componentCls}-status`]: {
@ -181,7 +179,10 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
height: '100%',
border: `1px solid ${token.colorPrimary}`,
borderRadius: '50%',
animation: `${antStatusProcessing.getName(hashId)} 1.2s infinite ease-in-out`, // FIXME: hard code, copied from old less file
animationName: antStatusProcessing,
animationDuration: '1.2s',
animationIterationCount: 'infinite',
animationTimingFunction: 'ease-in-out',
content: '""',
},
},
@ -204,28 +205,28 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
},
},
[`${componentCls}-zoom-appear, ${componentCls}-zoom-enter`]: {
animation: `${antZoomBadgeIn.getName(hashId)} ${token.motionDurationSlow} ${
token.motionEaseOutBack
}`,
animationName: antZoomBadgeIn,
animationDuration: token.motionDurationSlow,
animationTimingFunction: token.motionEaseOutBack,
animationFillMode: 'both',
},
[`${componentCls}-zoom-leave`]: {
animation: `${antZoomBadgeOut.getName(hashId)} ${token.motionDurationSlow} ${
token.motionEaseOutBack
}`,
animationName: antZoomBadgeOut,
animationDuration: token.motionDurationSlow,
animationTimingFunction: token.motionEaseOutBack,
animationFillMode: 'both',
},
[`&${componentCls}-not-a-wrapper`]: {
[`${componentCls}-zoom-appear, ${componentCls}-zoom-enter`]: {
animation: `${antNoWrapperZoomBadgeIn.getName(hashId)} ${token.motionDurationSlow} ${
token.motionEaseOutBack
}`,
animationName: antNoWrapperZoomBadgeIn,
animationDuration: token.motionDurationSlow,
animationTimingFunction: token.motionEaseOutBack,
},
[`${componentCls}-zoom-leave`]: {
animation: `${antNoWrapperZoomBadgeOut.getName(hashId)} ${token.motionDurationSlow} ${
token.motionEaseOutBack
}`,
animationName: antNoWrapperZoomBadgeOut,
animationDuration: token.motionDurationSlow,
animationTimingFunction: token.motionEaseOutBack,
},
[`&:not(${componentCls}-status)`]: {
verticalAlign: 'middle',
@ -310,18 +311,12 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
borderColor: 'currentcolor currentcolor transparent transparent',
},
},
antStatusProcessing,
antZoomBadgeIn,
antZoomBadgeOut,
antNoWrapperZoomBadgeIn,
antNoWrapperZoomBadgeOut,
antBadgeLoadingCircle,
},
};
};
// ============================== Export ==============================
export default genComponentStyleHook('Badge', (token, { hashId }) => {
export default genComponentStyleHook('Badge', token => {
const badgeZIndex = 'auto';
const badgeHeight = 20; // FIXME: hard code
const badgeTextColor = token.colorBgComponent;
@ -346,5 +341,14 @@ export default genComponentStyleHook('Badge', (token, { hashId }) => {
badgeStatusSize,
});
return [genSharedBadgeStyle(badgeToken, hashId), { display: 'none' }];
return [
genSharedBadgeStyle(badgeToken),
{ display: 'none' },
antStatusProcessing,
antZoomBadgeIn,
antZoomBadgeOut,
antNoWrapperZoomBadgeIn,
antNoWrapperZoomBadgeOut,
antBadgeLoadingCircle,
];
});

15
components/card/style/index.tsx
View File

@ -257,7 +257,7 @@ const genCardTypeInnerStyle: GenerateStyle<CardToken> = (token): CSSObject => {
};
// ============================== Loading ==============================
const genCardLoadingStyle: GenerateStyle<CardToken> = (token, hashId): CSSObject => {
const genCardLoadingStyle: GenerateStyle<CardToken> = (token): CSSObject => {
const { componentCls, gradientMin, gradientMax } = token;
return {
@ -277,13 +277,16 @@ const genCardLoadingStyle: GenerateStyle<CardToken> = (token, hashId): CSSObject
background: `linear-gradient(90deg, ${gradientMin}, ${gradientMax}, ${gradientMin})`,
backgroundSize: '600% 600%',
borderRadius: token.radiusBase,
animation: `${antCardLoading.getName(hashId)} 1.4s ease infinite`, // FIXME: hardcode in v4
animationName: antCardLoading,
animationDuration: '1.4s', // FIXME: hardcode
animationTimingFunction: 'ease',
animationIterationCount: 'infinite',
},
};
};
// ============================== Basic ==============================
const genCardStyle: GenerateStyle<CardToken> = (token, hashId): CSSObject => {
const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
const {
componentCls,
cardHoverableHoverBorder,
@ -380,7 +383,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token, hashId): CSSObject => {
[`${componentCls}-type-inner`]: genCardTypeInnerStyle(token),
[`${componentCls}-loading`]: genCardLoadingStyle(token, hashId),
[`${componentCls}-loading`]: genCardLoadingStyle(token),
};
};
@ -444,7 +447,7 @@ const genCardSizeStyle: GenerateStyle<CardToken> = (token): CSSObject => {
};
// ============================== Export ==============================
export default genComponentStyleHook('Card', (token, { rootPrefixCls, hashId }) => {
export default genComponentStyleHook('Card', (token, { rootPrefixCls }) => {
const cardToken = mergeToken<CardToken>(token, {
rootPrefixCls,
@ -470,7 +473,7 @@ export default genComponentStyleHook('Card', (token, { rootPrefixCls, hashId })
return [
// Style
genCardStyle(cardToken, hashId),
genCardStyle(cardToken),
// Size
genCardSizeStyle(cardToken),

12
components/cascader/style/index.tsx
View File

@ -21,7 +21,7 @@ export interface ComponentToken {
type CascaderToken = FullToken<'Cascader'>;
// =============================== Base ===============================
const genBaseStyle: GenerateStyle<CascaderToken> = (token, hashId) => {
const genBaseStyle: GenerateStyle<CascaderToken> = token => {
const { prefixCls, componentCls } = token;
const cascaderMenuItemCls = `${componentCls}-menu-item`;
const iconCls = `
@ -49,7 +49,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token, hashId) => {
{
[`${componentCls}-dropdown`]: [
// ==================== Checkbox ====================
getCheckboxStyle(`${prefixCls}-checkbox`, token, hashId!),
getCheckboxStyle(`${prefixCls}-checkbox`, token),
{
[componentCls]: {
// ================== Checkbox ==================
@ -158,12 +158,8 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token, hashId) => {
};
// ============================== Export ==============================
export default genComponentStyleHook(
'Cascader',
(token, { hashId }) => [genBaseStyle(token, hashId)],
{
export default genComponentStyleHook('Cascader', token => [genBaseStyle(token)], {
controlWidth: 184,
controlItemWidth: 111,
dropdownHeight: 180,
},
);
});

14
components/checkbox/style/index.tsx
View File

@ -26,7 +26,7 @@ const antCheckboxEffect = new Keyframes('antCheckboxEffect', {
});
// ============================== Styles ==============================
export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) => {
export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
const { checkboxCls } = token;
const wrapperCls = `${checkboxCls}-wrapper`;
@ -197,7 +197,9 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) =>
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorPrimary}`,
borderRadius: token.controlRadius,
visibility: 'hidden',
animation: `${antCheckboxEffect.getName(hashId)} ${token.motionDurationSlow} ease-in-out`,
animationName: antCheckboxEffect,
animationDuration: token.motionDurationSlow,
animationTimingFunction: 'ease-in-out',
animationFillMode: 'backwards',
content: '""',
},
@ -241,14 +243,14 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) =>
};
// ============================== Export ==============================
export function getStyle(prefixCls: string, token: FullToken<'Checkbox'>, hashId: string) {
export function getStyle(prefixCls: string, token: FullToken<'Checkbox'>) {
const checkboxToken: CheckboxToken = mergeToken<CheckboxToken>(token, {
checkboxCls: `.${prefixCls}`,
});
return [genCheckboxStyle(checkboxToken, hashId), antCheckboxEffect];
return [genCheckboxStyle(checkboxToken), antCheckboxEffect];
}
export default genComponentStyleHook('Checkbox', (token, { prefixCls, hashId }) => [
getStyle(prefixCls, token, hashId),
export default genComponentStyleHook('Checkbox', (token, { prefixCls }) => [
getStyle(prefixCls, token),
]);

8
components/date-picker/style/index.tsx
View File

@ -299,24 +299,24 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-topRight,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topLeft,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topRight`]: {
animationName: slideDownIn.getName(token.hashId),
animationName: slideDownIn,
},
[`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-bottomLeft,
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-bottomRight,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-bottomLeft,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-bottomRight`]: {
animationName: slideUpIn.getName(token.hashId),
animationName: slideUpIn,
},
[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topLeft,
&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topRight`]: {
animationName: slideDownOut.getName(token.hashId),
animationName: slideDownOut,
},
[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-bottomLeft,
&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-bottomRight`]: {
animationName: slideUpOut.getName(token.hashId),
animationName: slideUpOut,
},
// Time picker with additional style

13
components/drawer/style/index.tsx
View File

@ -30,10 +30,7 @@ const antdDrawerFadeIn = new Keyframes('antDrawerFadeIn', {
});
// =============================== Base ===============================
const genBaseStyle: GenerateStyle<DrawerToken> = (
token: DrawerToken,
hashId: string,
): CSSObject => {
const genBaseStyle: GenerateStyle<DrawerToken> = (token: DrawerToken): CSSObject => {
const {
componentCls,
motionEaseOut,
@ -171,7 +168,9 @@ const genBaseStyle: GenerateStyle<DrawerToken> = (
height: '100%',
opacity: 1,
transition: 'none',
animation: `${antdDrawerFadeIn.getName(hashId)} ${motionDurationSlow} ${motionEaseOut}`,
animationName: antdDrawerFadeIn,
animationDuration: token.motionDurationSlow,
animationTimingFunction: motionEaseOut,
pointerEvents: 'auto',
},
};
@ -285,7 +284,7 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
};
// ============================== Export ==============================
export default genComponentStyleHook('Drawer', (token, { hashId }) => {
export default genComponentStyleHook('Drawer', token => {
const drawerToken = mergeToken<DrawerToken>(token, {
black: '#000', // FIXME: hard code
white: '#fff', // FIXME: hard code
@ -310,5 +309,5 @@ export default genComponentStyleHook('Drawer', (token, { hashId }) => {
motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)', // FIXME: hard code
});
return [genBaseStyle(drawerToken, hashId), genDrawerStyle(drawerToken), antdDrawerFadeIn];
return [genBaseStyle(drawerToken), genDrawerStyle(drawerToken), antdDrawerFadeIn];
});

4
components/image/style/index.tsx
View File

@ -295,7 +295,7 @@ const genImageStyle: GenerateStyle<ImageToken> = (token: ImageToken) => {
};
// ============================== Export ==============================
export default genComponentStyleHook('Image', (token, { hashId }) => {
export default genComponentStyleHook('Image', token => {
const imageToken = mergeToken<ImageToken>(token, {
previewPrefixCls: `${token.componentCls}-preview`,
@ -321,5 +321,5 @@ export default genComponentStyleHook('Image', (token, { hashId }) => {
motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)', // FIXME: hard code in v4
});
return [genImageStyle(imageToken, hashId)];
return [genImageStyle(imageToken)];
});

8
components/list/style/index.tsx
View File

@ -378,7 +378,7 @@ const genBaseStyle: GenerateStyle<ListToken> = token => {
};
// ============================== Export ==============================
export default genComponentStyleHook('List', (token, { hashId }) => {
export default genComponentStyleHook('List', token => {
const listToken = mergeToken<ListToken>(token, {
listBorderedCls: `${token.componentCls}-bordered`,
antPrefix: '.ant', // FIXME: hard code in v4
@ -406,9 +406,5 @@ export default genComponentStyleHook('List', (token, { hashId }) => {
lineHeight: 1.5,
});
return [
genBaseStyle(listToken, hashId),
genBorderedStyle(listToken),
genResponsiveStyle(listToken),
];
return [genBaseStyle(listToken), genBorderedStyle(listToken), genResponsiveStyle(listToken)];
});

15
components/radio/style/index.tsx
View File

@ -121,11 +121,7 @@ function getGroupRadioStyle(
}
// Styles from radio-wrapper
function getRadioBasicStyle(
prefixCls: string,
hashId: string,
token: RadioToken,
): CSSInterpolation {
function getRadioBasicStyle(prefixCls: string, token: RadioToken): CSSInterpolation {
const radioInnerPrefixCls = `${prefixCls}-inner`;
return {
@ -164,7 +160,9 @@ function getRadioBasicStyle(
border: `1px solid ${token.radioDotColor}`,
borderRadius: '50%',
visibility: 'hidden',
animation: `${antRadioEffect.getName(hashId)} 0.36s ease-in-out`,
animationName: antRadioEffect,
animationDuration: '0.36s',
animationTimingFunction: 'ease-in-out',
animationFillMode: 'both',
content: '""',
},
@ -465,13 +463,12 @@ function getRadioButtonStyle(prefixCls: string, token: RadioToken): CSSInterpola
// ============================== Export ==============================
export function getStyle(
prefixCls: string,
hashId: string,
antPrefix: string,
token: RadioToken,
): CSSInterpolation {
return [
getGroupRadioStyle(prefixCls, antPrefix, token),
getRadioBasicStyle(prefixCls, hashId, token),
getRadioBasicStyle(prefixCls, token),
getRadioButtonStyle(prefixCls, token),
];
}
@ -481,7 +478,7 @@ export default function useStyle(prefixCls: string, antPrefix: string): UseCompo
return [
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => {
const radioToken = getRadioToken(token);
return getStyle(prefixCls, hashId, antPrefix, radioToken);
return getStyle(prefixCls, antPrefix, radioToken);
}),
hashId,
];

14
components/select/style/dropdown.tsx
View File

@ -27,7 +27,7 @@ const genItemStyle: GenerateStyle<SelectToken, CSSObject> = token => {
};
};
const genSingleStyle: GenerateStyle<SelectToken> = (token, hashId) => {
const genSingleStyle: GenerateStyle<SelectToken> = token => {
const { rootPrefixCls, antCls, componentCls } = token;
const selectItemCls = `${componentCls}-item`;
@ -58,22 +58,22 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token, hashId) => {
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-bottomLeft,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-bottomLeft
`]: {
animationName: slideUpIn.getName(hashId),
animationName: slideUpIn,
},
[`
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-topLeft,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topLeft
`]: {
animationName: slideDownIn.getName(hashId),
animationName: slideDownIn,
},
[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-bottomLeft`]: {
animationName: slideUpOut.getName(hashId),
animationName: slideUpOut,
},
[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topLeft`]: {
animationName: slideDownOut.getName(hashId),
animationName: slideDownOut,
},
'&-hidden': {
@ -153,8 +153,8 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token, hashId) => {
},
// Follow code may reuse in other components
initSlideMotion(hashId!, rootPrefixCls, 'slide-up', slideUpIn, slideUpOut, token),
initSlideMotion(hashId!, rootPrefixCls, 'slide-down', slideDownIn, slideDownOut, token),
initSlideMotion(rootPrefixCls, 'slide-up', slideUpIn, slideUpOut, token),
initSlideMotion(rootPrefixCls, 'slide-down', slideDownIn, slideDownOut, token),
slideUpIn,
slideUpOut,
slideDownIn,

8
components/select/style/index.tsx
View File

@ -258,7 +258,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
};
// ============================== Styles ==============================
const genSelectStyle: GenerateStyle<SelectToken> = (token, hashId) => {
const genSelectStyle: GenerateStyle<SelectToken> = token => {
const { componentCls } = token;
return [
@ -291,7 +291,7 @@ const genSelectStyle: GenerateStyle<SelectToken> = (token, hashId) => {
genMultipleStyle(token),
// Dropdown
genDropdownStyle(token, hashId),
genDropdownStyle(token),
// =====================================================
// == RTL ==
@ -334,13 +334,13 @@ const genSelectStyle: GenerateStyle<SelectToken> = (token, hashId) => {
// ============================== Export ==============================
export default genComponentStyleHook(
'Select',
(token, { rootPrefixCls, hashId }) => {
(token, { rootPrefixCls }) => {
const selectToken: SelectToken = mergeToken<SelectToken>(token, {
rootPrefixCls,
inputPaddingHorizontalBase: token.controlPaddingHorizontal - 1,
});
return [genSelectStyle(selectToken, hashId)];
return [genSelectStyle(selectToken)];
},
token => ({
zIndexDropdown: token.zIndexPopup + 50,

24
components/skeleton/style/index.tsx
View File

@ -40,13 +40,15 @@ const genSkeletonElementAvatarSize = (size: number): CSSObject => ({
...genSkeletonElementCommonSize(size),
});
const genSkeletonColor = (token: SkeletonToken, hashId: string): CSSObject => {
const genSkeletonColor = (token: SkeletonToken): CSSObject => {
const { skeletonColor, skeletonToColor } = token;
return {
background: `linear-gradient(90deg, ${skeletonColor} 25%, ${skeletonToColor} 37%, ${skeletonColor} 63%)`,
backgroundSize: '400% 100%',
animation: `${skeletonClsLoading.getName(hashId)} 1.4s ease infinite`,
skeletonClsLoading,
animationName: skeletonClsLoading,
animationDuration: '1.4s', // FIXME: magic
animationTimingFunction: 'ease',
animationIterationCount: 'infinite',
};
};
@ -189,7 +191,7 @@ const genSkeletonElementButton = (token: SkeletonToken): CSSObject => {
};
// =============================== Base ===============================
const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken, hashId: string) => {
const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
const {
componentCls,
skeletonAvatarCls,
@ -319,29 +321,29 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken, hashId
[`${componentCls}${componentCls}-active`]: {
[`${componentCls}-content`]: {
[`${skeletonTitleCls}, ${skeletonParagraphCls} > li`]: {
...genSkeletonColor(token, hashId),
...genSkeletonColor(token),
},
},
[`${skeletonAvatarCls}`]: {
...genSkeletonColor(token, hashId),
...genSkeletonColor(token),
},
[`${skeletonButtonCls}`]: {
...genSkeletonColor(token, hashId),
...genSkeletonColor(token),
},
[`${skeletonInputCls}`]: {
...genSkeletonColor(token, hashId),
...genSkeletonColor(token),
},
[`${skeletonImageCls}`]: {
...genSkeletonColor(token, hashId),
...genSkeletonColor(token),
},
},
};
};
// ============================== Export ==============================
export default genComponentStyleHook('Skeleton', (token, { hashId }) => {
export default genComponentStyleHook('Skeleton', token => {
const { componentCls } = token;
const skeletonToken = mergeToken<SkeletonToken>(token, {
@ -361,5 +363,5 @@ export default genComponentStyleHook('Skeleton', (token, { hashId }) => {
skeletonParagraphMarginTop: 28, // FIXME: hard code in v4
borderRadius: 100, // FIXME: hard code in v4
});
return [genBaseStyle(skeletonToken, hashId)];
return [genBaseStyle(skeletonToken), skeletonClsLoading];
});

4
components/slider/style/index.tsx
View File

@ -282,14 +282,14 @@ const genVerticalStyle: GenerateStyle<SliderToken> = token => {
// ============================== Export ==============================
export default genComponentStyleHook(
'Slider',
(token, { hashId }) => {
token => {
const sliderToken = mergeToken<SliderToken>(token, {
marginPart: (token.controlHeight - token.controlSize) / 2,
marginFull: token.controlSize / 2,
marginPartWithMark: token.controlHeightLG - token.controlSize,
});
return [
genBaseStyle(sliderToken, hashId),
genBaseStyle(sliderToken),
genHorizontalStyle(sliderToken),
genVerticalStyle(sliderToken),
];

21
components/spin/style/index.tsx
View File

@ -23,7 +23,7 @@ const antRotate = new Keyframes('antRotate', {
to: { transform: 'rotate(405deg)' },
});
const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken, hashId: string): CSSObject => ({
const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject => ({
[`${token.componentCls}`]: {
...resetComponent(token),
position: 'absolute',
@ -155,7 +155,11 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken, hashId: string
transform: 'scale(0.75)',
transformOrigin: '50% 50%',
opacity: 0.3,
animation: `${antSpinMove.getName(hashId)} 1s infinite linear alternate`,
animationName: antSpinMove,
animationDuration: '1s',
animationIterationCount: 'infinite',
animationTimingFunction: 'linear',
animationDirection: 'alternate',
'&:nth-child(1)': {
top: 0,
@ -183,7 +187,10 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken, hashId: string
'&-spin': {
transform: 'rotate(45deg)',
animation: `${antRotate.getName(hashId)} 1.2s infinite linear`,
animationName: antRotate,
animationDuration: '1.2s',
animationIterationCount: 'infinite',
animationTimingFunction: 'linear',
},
},
@ -213,20 +220,16 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken, hashId: string
[`&${token.componentCls}-show-text ${token.componentCls}-text`]: {
display: 'block',
},
// animation
antSpinMove,
antRotate,
},
});
// ============================== Export ==============================
export default genComponentStyleHook('Spin', (token, { hashId }) => {
export default genComponentStyleHook('Spin', token => {
const spinToken = mergeToken<SpinToken>(token, {
spinDotDefault: token.colorTextSecondary,
spinDotSize: 20, // FIXME: hard code in v4
spinDotSizeSM: 14, // FIXME: hard code in v4
spinDotSizeLG: 32, // FIXME: hard code in v4
});
return [genSpinStyle(spinToken, hashId)];
return [genSpinStyle(spinToken), antSpinMove, antRotate];
});

10
components/tree-select/style/index.tsx
View File

@ -16,7 +16,7 @@ interface TreeSelectToken extends FullToken<'TreeSelect'> {
}
// =============================== Base ===============================
const genBaseStyle: GenerateStyle<TreeSelectToken> = (token, hashId) => {
const genBaseStyle: GenerateStyle<TreeSelectToken> = token => {
const { componentCls, treePrefixCls } = token;
const treeCls = `.${treePrefixCls}`;
@ -31,7 +31,7 @@ const genBaseStyle: GenerateStyle<TreeSelectToken> = (token, hashId) => {
},
// ====================== Tree ======================
genTreeStyle(treePrefixCls, token, hashId!),
genTreeStyle(treePrefixCls, token),
{
[treeCls]: {
borderRadius: 0,
@ -48,7 +48,7 @@ const genBaseStyle: GenerateStyle<TreeSelectToken> = (token, hashId) => {
},
// ==================== Checkbox ====================
getCheckboxStyle(`${treePrefixCls}-checkbox`, token, hashId!),
getCheckboxStyle(`${treePrefixCls}-checkbox`, token),
// ====================== RTL =======================
{
@ -69,10 +69,10 @@ const genBaseStyle: GenerateStyle<TreeSelectToken> = (token, hashId) => {
// ============================== Export ==============================
export default function useTreeSelectStyle(prefixCls: string, treePrefixCls: string) {
return genComponentStyleHook('TreeSelect', (token, { hashId }) => {
return genComponentStyleHook('TreeSelect', token => {
const treeSelectToken = mergeToken<TreeSelectToken>(token, {
treePrefixCls,
});
return [genBaseStyle(treeSelectToken, hashId)];
return [genBaseStyle(treeSelectToken)];
})(prefixCls);
}

19
components/tree/style/index.tsx
View File

@ -67,7 +67,7 @@ type TreeToken = DerivativeToken & {
treeTitleHeight: number;
};
export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string): CSSObject => {
export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => {
const { treeCls, treeNodeCls, treeNodePadding, treeTitleHeight } = token;
const treeCheckBoxMarginVertical = (treeTitleHeight - token.fontSizeLG) / 2;
@ -123,7 +123,8 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
insetInlineStart: 0,
border: `1px solid ${token.colorPrimary}`,
opacity: 0,
animation: `${treeNodeFX.getName(hashId)} ${token.motionDurationSlow}`,
animationName: treeNodeFX,
animationDuration: token.motionDurationSlow,
animationPlayState: 'running',
animationFillMode: 'forwards',
content: '""',
@ -442,11 +443,7 @@ export const genDirectoryStyle = (token: TreeToken): CSSObject => {
};
// ============================== Merged ==============================
export const genTreeStyle = (
prefixCls: string,
token: DerivativeToken,
hashId: string,
): CSSInterpolation => {
export const genTreeStyle = (prefixCls: string, token: DerivativeToken): CSSInterpolation => {
const treeCls = `.${prefixCls}`;
const treeNodeCls = `${treeCls}-treenode`;
@ -462,7 +459,7 @@ export const genTreeStyle = (
return [
// Basic
genBaseStyle(prefixCls, treeToken, hashId),
genBaseStyle(prefixCls, treeToken),
// Directory
genDirectoryStyle(treeToken),
treeNodeFX,
@ -470,7 +467,7 @@ export const genTreeStyle = (
};
// ============================== Export ==============================
export default genComponentStyleHook('Tree', (token, { prefixCls, hashId }) => [
getCheckboxStyle(`${prefixCls}-checkbox`, token, hashId),
genTreeStyle(prefixCls, token, hashId),
export default genComponentStyleHook('Tree', (token, { prefixCls }) => [
getCheckboxStyle(`${prefixCls}-checkbox`, token),
genTreeStyle(prefixCls, token),
]);

2
package.json
View File

@ -115,7 +115,7 @@
],
"dependencies": {
"@ant-design/colors": "^6.0.0",
"@ant-design/cssinjs": "^0.0.0-alpha.27",
"@ant-design/cssinjs": "^0.0.0-alpha.29",
"@ant-design/icons": "^4.7.0",
"@ant-design/react-slick": "~0.28.1",
"@babel/runtime": "^7.12.5",