@aplus-frontend/antdv
Version:
Vue basic component library maintained based on ant-design-vue
323 lines • 9.87 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import { Keyframes } from '../../_util/cssinjs';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import genNotificationPlacementStyle from './placement';
import { resetComponent } from '../../style';
const genNotificationStyle = token => {
const {
iconCls,
componentCls,
// .ant-notification
boxShadowSecondary,
fontSizeLG,
notificationMarginBottom,
borderRadiusLG,
colorSuccess,
colorInfo,
colorWarning,
colorError,
colorTextHeading,
notificationBg,
notificationPadding,
notificationMarginEdge,
motionDurationSlow,
motionEaseInOut,
fontSize,
lineHeight,
width,
notificationIconSize
} = token;
const noticeCls = `${componentCls}-notice`;
const notificationFadeIn = new Keyframes('antNotificationFadeIn', {
'0%': {
left: {
_skip_check_: true,
value: width
},
opacity: 0
},
'100%': {
left: {
_skip_check_: true,
value: 0
},
opacity: 1
}
});
const notificationFadeOut = new Keyframes('antNotificationFadeOut', {
'0%': {
maxHeight: token.animationMaxHeight,
marginBottom: notificationMarginBottom,
opacity: 1
},
'100%': {
maxHeight: 0,
marginBottom: 0,
paddingTop: 0,
paddingBottom: 0,
opacity: 0
}
});
return [
// ============================ Holder ============================
{
[componentCls]: _extends(_extends(_extends(_extends({}, resetComponent(token)), {
position: 'fixed',
zIndex: token.zIndexPopup,
marginInlineEnd: notificationMarginEdge,
[`${componentCls}-hook-holder`]: {
position: 'relative'
},
[`&${componentCls}-top, &${componentCls}-bottom`]: {
[`${componentCls}-notice`]: {
marginInline: 'auto auto'
}
},
[`&${componentCls}-topLeft, &${componentCls}-bottomLeft`]: {
[`${componentCls}-notice`]: {
marginInlineEnd: 'auto',
marginInlineStart: 0
}
},
// animation
[`${componentCls}-fade-enter, ${componentCls}-fade-appear`]: {
animationDuration: token.motionDurationSlow,
animationTimingFunction: motionEaseInOut,
animationFillMode: 'both',
opacity: 0,
animationPlayState: 'paused'
},
[`${componentCls}-fade-leave`]: {
animationTimingFunction: motionEaseInOut,
animationFillMode: 'both',
animationDuration: motionDurationSlow,
animationPlayState: 'paused'
},
[`${componentCls}-fade-enter${componentCls}-fade-enter-active, ${componentCls}-fade-appear${componentCls}-fade-appear-active`]: {
animationName: notificationFadeIn,
animationPlayState: 'running'
},
[`${componentCls}-fade-leave${componentCls}-fade-leave-active`]: {
animationName: notificationFadeOut,
animationPlayState: 'running'
}
}), genNotificationPlacementStyle(token)), {
// RTL
'&-rtl': {
direction: 'rtl',
[`${componentCls}-notice-btn`]: {
float: 'left'
}
}
})
},
// ============================ Notice ============================
{
[noticeCls]: {
display: 'flow-root',
position: 'relative',
width,
maxWidth: `calc(100vw - ${notificationMarginEdge * 2}px)`,
marginBottom: notificationMarginBottom,
marginInlineStart: 'auto',
padding: notificationPadding,
lineHeight,
wordWrap: 'break-word',
background: notificationBg,
borderRadius: borderRadiusLG,
boxShadow: boxShadowSecondary,
[`${componentCls}-close-icon`]: {
fontSize,
cursor: 'pointer'
},
[`${noticeCls}-message`]: {
marginBottom: token.marginXS,
color: colorTextHeading,
fontSize: fontSizeLG,
lineHeight: token.lineHeightLG
},
[`${noticeCls}-description`]: {
fontSize
},
[`&${noticeCls}-closable ${noticeCls}-message`]: {
paddingInlineEnd: token.paddingLG
},
[`${noticeCls}-with-icon ${noticeCls}-message`]: {
marginBottom: token.marginXS,
marginInlineStart: token.marginSM + notificationIconSize,
fontSize: fontSizeLG
},
[`${noticeCls}-with-icon ${noticeCls}-description`]: {
marginInlineStart: token.marginSM + notificationIconSize,
fontSize
},
// Icon & color style in different selector level
// https://github.com/ant-design/ant-design/issues/16503
// https://github.com/ant-design/ant-design/issues/15512
[`${noticeCls}-icon`]: {
position: 'absolute',
fontSize: notificationIconSize,
lineHeight: 0,
// icon-font
[`&-success${iconCls}`]: {
color: colorSuccess
},
[`&-info${iconCls}`]: {
color: colorInfo
},
[`&-warning${iconCls}`]: {
color: colorWarning
},
[`&-error${iconCls}`]: {
color: colorError
}
},
[`${noticeCls}-close`]: {
position: 'absolute',
top: token.notificationPaddingVertical,
insetInlineEnd: token.notificationPaddingHorizontal,
color: token.colorIcon,
outline: 'none',
width: token.notificationCloseButtonSize,
height: token.notificationCloseButtonSize,
borderRadius: token.borderRadiusSM,
transition: `background-color ${token.motionDurationSlow}, color ${token.motionDurationSlow}`,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
'&:hover': {
color: token.colorIconHover,
backgroundColor: token.wireframe ? 'transparent' : token.colorFillContent
}
},
[`${noticeCls}-btn`]: {
float: 'right',
marginTop: token.marginSM
}
}
},
// ============================= Pure =============================
{
[`${noticeCls}-pure-panel`]: {
margin: 0
}
}];
};
const genStackedNoticeStyle = token => {
const childrenStyle = {};
for (let i = 1; i < 3; i++) {
childrenStyle[`&:nth-last-child(${i + 1})`] = {
background: 'transparent',
backdropFilter: 'blur(10px)',
'-webkit-backdrop-filter': 'blur(10px)',
[`& > ${token.componentCls}-notice-content`]: {
height: '100%',
overflow: 'hidden'
}
};
}
return _extends({}, childrenStyle);
};
const NotificationPlacements = ['top', 'topLeft', 'topRight', 'bottom', 'bottomLeft', 'bottomRight'];
const placementAlignProperty = {
topLeft: 'left',
topRight: 'right',
bottomLeft: 'left',
bottomRight: 'right',
top: 'left',
bottom: 'left'
};
const genPlacementStackStyle = (token, placement) => {
const {
componentCls
} = token;
return {
[`${componentCls}-${placement}${componentCls}-stack `]: {
[`${componentCls}-notice-wrapper`]: {
[placement.startsWith('top') ? 'top' : 'bottom']: 0,
[placementAlignProperty[placement]]: {
value: 0,
_skip_check_: true
}
}
}
};
};
const genStackChildrenStyle = () => {
const childrenStyle = {};
for (let i = 1; i < 3; i++) {
childrenStyle[`&:nth-last-child(${i + 1})`] = {
overflow: 'hidden'
};
}
return _extends({
[`&:not(:nth-last-child(-n+3))`]: {
opacity: 0,
overflow: 'hidden',
color: 'transparent',
pointerEvents: 'none'
}
}, childrenStyle);
};
const getStackStyle = token => {
const {
componentCls
} = token;
return _extends({
[`${componentCls}-stack`]: {
[`${componentCls}-notice-wrapper`]: _extends({
position: 'absolute',
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`
}, genStackChildrenStyle())
},
[`${componentCls}-stack:not(${componentCls}-stack-expanded)`]: {
[`${componentCls}-notice-wrapper`]: _extends({}, genStackedNoticeStyle(token))
},
[`${componentCls}-stack${componentCls}-stack-expanded`]: {
[`${componentCls}-notice-wrapper`]: {
'&:not(:nth-last-child(-n + 1))': {
opacity: 1,
overflow: 'unset',
color: 'inherit',
pointerEvents: 'auto'
},
'&:after': {
content: '""',
position: 'absolute',
height: token.margin,
width: '100%',
insetInline: 0,
bottom: -token.margin,
background: 'transparent',
pointerEvents: 'auto'
},
[`${componentCls}-notice-content`]: {
height: '100%',
overflow: 'hidden'
}
}
}
}, NotificationPlacements.map(placement => genPlacementStackStyle(token, placement)).reduce((acc, cur) => _extends(_extends({}, acc), cur), {}));
};
// ============================== Export ==============================
export default genComponentStyleHook('Notification', token => {
const notificationPaddingVertical = token.paddingMD;
const notificationPaddingHorizontal = token.paddingLG;
const notificationToken = mergeToken(token, {
// default.less variables
notificationBg: token.colorBgElevated,
notificationPaddingVertical,
notificationPaddingHorizontal,
// index.less variables
notificationPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`,
notificationMarginBottom: token.margin,
notificationMarginEdge: token.marginLG,
animationMaxHeight: 150,
notificationIconSize: token.fontSizeLG * token.lineHeightLG,
notificationCloseButtonSize: token.controlHeightLG * 0.55
});
return [genNotificationStyle(notificationToken), getStackStyle(notificationToken)];
}, token => ({
zIndexPopup: token.zIndexPopupBase + 50,
width: 384
}));