2022-05-17 20:15:34 +08:00
|
|
|
import type { CSSObject } from '@ant-design/cssinjs';
|
|
|
|
import { Keyframes } from '@ant-design/cssinjs';
|
2024-04-08 14:04:08 +08:00
|
|
|
|
2022-05-17 20:15:34 +08:00
|
|
|
import type { NotificationToken } from '.';
|
2022-11-23 20:22:38 +08:00
|
|
|
import type { GenerateStyle } from '../../theme/internal';
|
2022-05-17 20:15:34 +08:00
|
|
|
|
2022-11-19 13:47:33 +08:00
|
|
|
const genNotificationPlacementStyle: GenerateStyle<NotificationToken, CSSObject> = (token) => {
|
2023-09-20 14:45:09 +08:00
|
|
|
const { componentCls, notificationMarginEdge, animationMaxHeight } = token;
|
2022-05-17 20:15:34 +08:00
|
|
|
|
2023-09-13 15:19:18 +08:00
|
|
|
const noticeCls = `${componentCls}-notice`;
|
|
|
|
|
|
|
|
const rightFadeIn = new Keyframes('antNotificationFadeIn', {
|
2022-05-17 20:15:34 +08:00
|
|
|
'0%': {
|
2023-09-13 15:19:18 +08:00
|
|
|
transform: `translate3d(100%, 0, 0)`,
|
2022-05-20 17:40:03 +08:00
|
|
|
opacity: 0,
|
2022-05-17 20:15:34 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
'100%': {
|
2023-09-13 15:19:18 +08:00
|
|
|
transform: `translate3d(0, 0, 0)`,
|
2022-05-20 17:40:03 +08:00
|
|
|
opacity: 1,
|
2022-05-17 20:15:34 +08:00
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2023-09-13 15:19:18 +08:00
|
|
|
const topFadeIn = new Keyframes('antNotificationTopFadeIn', {
|
2022-05-17 20:15:34 +08:00
|
|
|
'0%': {
|
2023-09-20 15:00:36 +08:00
|
|
|
top: -animationMaxHeight,
|
2022-05-20 17:40:03 +08:00
|
|
|
opacity: 0,
|
2022-05-17 20:15:34 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
'100%': {
|
2023-09-20 15:00:36 +08:00
|
|
|
top: 0,
|
2022-05-20 17:40:03 +08:00
|
|
|
opacity: 1,
|
2022-05-17 20:15:34 +08:00
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2023-09-13 15:19:18 +08:00
|
|
|
const bottomFadeIn = new Keyframes('antNotificationBottomFadeIn', {
|
2022-05-17 20:15:34 +08:00
|
|
|
'0%': {
|
2023-11-14 10:06:18 +08:00
|
|
|
bottom: token.calc(animationMaxHeight).mul(-1).equal(),
|
2022-05-20 17:40:03 +08:00
|
|
|
opacity: 0,
|
2022-05-17 20:15:34 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
'100%': {
|
2023-09-13 15:19:18 +08:00
|
|
|
bottom: 0,
|
2022-05-20 17:40:03 +08:00
|
|
|
opacity: 1,
|
2022-05-17 20:15:34 +08:00
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2023-09-13 15:19:18 +08:00
|
|
|
const leftFadeIn = new Keyframes('antNotificationLeftFadeIn', {
|
|
|
|
'0%': {
|
|
|
|
transform: `translate3d(-100%, 0, 0)`,
|
|
|
|
opacity: 0,
|
2022-05-17 20:15:34 +08:00
|
|
|
},
|
|
|
|
|
2023-09-13 15:19:18 +08:00
|
|
|
'100%': {
|
|
|
|
transform: `translate3d(0, 0, 0)`,
|
|
|
|
opacity: 1,
|
2022-05-17 20:15:34 +08:00
|
|
|
},
|
2023-09-13 15:19:18 +08:00
|
|
|
});
|
2022-05-17 20:15:34 +08:00
|
|
|
|
2023-09-13 15:19:18 +08:00
|
|
|
return {
|
|
|
|
[componentCls]: {
|
|
|
|
[`&${componentCls}-top, &${componentCls}-bottom`]: {
|
|
|
|
marginInline: 0,
|
|
|
|
[noticeCls]: {
|
|
|
|
marginInline: 'auto auto',
|
2022-05-17 20:15:34 +08:00
|
|
|
},
|
2023-09-13 15:19:18 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
[`&${componentCls}-top`]: {
|
|
|
|
[`${componentCls}-fade-enter${componentCls}-fade-enter-active, ${componentCls}-fade-appear${componentCls}-fade-appear-active`]:
|
|
|
|
{
|
|
|
|
animationName: topFadeIn,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`&${componentCls}-bottom`]: {
|
|
|
|
[`${componentCls}-fade-enter${componentCls}-fade-enter-active, ${componentCls}-fade-appear${componentCls}-fade-appear-active`]:
|
|
|
|
{
|
|
|
|
animationName: bottomFadeIn,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`&${componentCls}-topRight, &${componentCls}-bottomRight`]: {
|
|
|
|
[`${componentCls}-fade-enter${componentCls}-fade-enter-active, ${componentCls}-fade-appear${componentCls}-fade-appear-active`]:
|
|
|
|
{
|
|
|
|
animationName: rightFadeIn,
|
|
|
|
},
|
|
|
|
},
|
2022-05-17 20:15:34 +08:00
|
|
|
|
2023-09-13 15:19:18 +08:00
|
|
|
[`&${componentCls}-topLeft, &${componentCls}-bottomLeft`]: {
|
2023-10-17 16:57:54 +08:00
|
|
|
marginRight: {
|
|
|
|
value: 0,
|
|
|
|
_skip_check_: true,
|
|
|
|
},
|
|
|
|
marginLeft: {
|
|
|
|
value: notificationMarginEdge,
|
|
|
|
_skip_check_: true,
|
|
|
|
},
|
2022-05-17 20:15:34 +08:00
|
|
|
|
2023-09-13 15:19:18 +08:00
|
|
|
[noticeCls]: {
|
|
|
|
marginInlineEnd: 'auto',
|
|
|
|
marginInlineStart: 0,
|
2022-05-17 20:15:34 +08:00
|
|
|
},
|
2023-09-13 15:19:18 +08:00
|
|
|
|
|
|
|
[`${componentCls}-fade-enter${componentCls}-fade-enter-active, ${componentCls}-fade-appear${componentCls}-fade-appear-active`]:
|
|
|
|
{
|
|
|
|
animationName: leftFadeIn,
|
|
|
|
},
|
|
|
|
},
|
2022-05-17 20:15:34 +08:00
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
2023-10-17 16:57:54 +08:00
|
|
|
|
2022-05-17 20:15:34 +08:00
|
|
|
export default genNotificationPlacementStyle;
|