mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
chore: Patch Notification tmpl (#35568)
* chore: init notification style * chore: comment style * chore: clean up recv deps * chore: trigger
This commit is contained in:
二货机器人
GitHub
parent
6dee8254de
commit
178d8d6f19
@ -7,6 +7,7 @@ import type { ComponentToken as EmptyComponentToken } from '../../empty/style';
|
||||
import type { ComponentToken as CascaderComponentToken } from '../../cascader/style';
|
||||
import type { ComponentToken as InputNumberComponentToken } from '../../input-number/style';
|
||||
import type { ComponentToken as MentionsComponentToken } from '../../mentions/style';
|
||||
import type { ComponentToken as NotificationComponentToken } from '../../notification/style';
|
||||
import type { ComponentToken as SegmentedComponentToken } from '../../segmented/style';
|
||||
import type { ComponentToken as SelectComponentToken } from '../../select/style';
|
||||
import type { ComponentToken as SliderComponentToken } from '../../slider/style';
|
||||
@ -78,6 +79,7 @@ export interface OverrideToken {
|
||||
InputNumber?: InputNumberComponentToken;
|
||||
List?: ListComponentToken;
|
||||
Mentions?: MentionsComponentToken;
|
||||
Notification?: NotificationComponentToken;
|
||||
Pagination?: {};
|
||||
Popover?: {};
|
||||
Rate?: {};
|
||||
|
||||
@ -5,7 +5,7 @@ import { useContext } from 'react';
|
||||
import type { GlobalToken, OverrideToken } from '../interface';
|
||||
import type { UseComponentStyleResult } from '../index';
|
||||
import { mergeToken, statisticToken, useToken } from '../index';
|
||||
import { ConfigContext } from '../../../config-provider';
|
||||
import { ConfigContext } from '../../../config-provider/context';
|
||||
|
||||
export type OverrideTokenWithoutDerivative = Omit<OverrideToken, 'derivative'>;
|
||||
export type OverrideComponent = keyof OverrideTokenWithoutDerivative;
|
||||
|
||||
@ -11,8 +11,6 @@ import { ConfigConsumer, ConfigContext, defaultIconPrefixCls } from './context';
|
||||
import type { CSPConfig, DirectionType, ConfigConsumerProps, Theme, ThemeConfig } from './context';
|
||||
import type { SizeType } from './SizeContext';
|
||||
import SizeContext, { SizeContextProvider } from './SizeContext';
|
||||
import message from '../message';
|
||||
import notification from '../notification';
|
||||
import type { RequiredMark } from '../form/Form';
|
||||
import { registerTheme } from './cssVariables';
|
||||
import defaultLocale from '../locale/default';
|
||||
@ -271,34 +269,21 @@ const ConfigProvider: React.FC<ConfigProviderProps> & {
|
||||
SizeContext: typeof SizeContext;
|
||||
config: typeof setGlobalConfig;
|
||||
useToken: typeof useToken;
|
||||
} = props => {
|
||||
React.useEffect(() => {
|
||||
if (props.direction) {
|
||||
message.config({
|
||||
rtl: props.direction === 'rtl',
|
||||
});
|
||||
notification.config({
|
||||
rtl: props.direction === 'rtl',
|
||||
});
|
||||
}
|
||||
}, [props.direction]);
|
||||
|
||||
return (
|
||||
<LocaleReceiver>
|
||||
{(_, __, legacyLocale) => (
|
||||
<ConfigConsumer>
|
||||
{context => (
|
||||
<ProviderChildren
|
||||
parentContext={context}
|
||||
legacyLocale={legacyLocale as Locale}
|
||||
{...props}
|
||||
/>
|
||||
)}
|
||||
</ConfigConsumer>
|
||||
)}
|
||||
</LocaleReceiver>
|
||||
);
|
||||
};
|
||||
} = props => (
|
||||
<LocaleReceiver>
|
||||
{(_, __, legacyLocale) => (
|
||||
<ConfigConsumer>
|
||||
{context => (
|
||||
<ProviderChildren
|
||||
parentContext={context}
|
||||
legacyLocale={legacyLocale as Locale}
|
||||
{...props}
|
||||
/>
|
||||
)}
|
||||
</ConfigConsumer>
|
||||
)}
|
||||
</LocaleReceiver>
|
||||
);
|
||||
|
||||
ConfigProvider.ConfigContext = ConfigContext;
|
||||
ConfigProvider.SizeContext = SizeContext;
|
||||
|
||||
@ -1,207 +1,207 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
|
||||
.popover-customize-bg(@notification-prefix-cls, @popover-background);
|
||||
// .popover-customize-bg(@notification-prefix-cls, @popover-background);
|
||||
|
||||
@notification-prefix-cls: ~'@{ant-prefix}-notification';
|
||||
@notification-width: 384px;
|
||||
@notification-padding: @notification-padding-vertical @notification-padding-horizontal;
|
||||
@notification-margin-bottom: 16px;
|
||||
@notification-margin-edge: 24px;
|
||||
// @notification-prefix-cls: ~'@{ant-prefix}-notification';
|
||||
// @notification-width: 384px;
|
||||
// @notification-padding: @notification-padding-vertical @notification-padding-horizontal;
|
||||
// @notification-margin-bottom: 16px;
|
||||
// @notification-margin-edge: 24px;
|
||||
|
||||
.@{notification-prefix-cls} {
|
||||
.reset-component();
|
||||
// .@{notification-prefix-cls} {
|
||||
// .reset-component();
|
||||
|
||||
position: fixed;
|
||||
z-index: @zindex-notification;
|
||||
margin-right: @notification-margin-edge;
|
||||
// position: fixed;
|
||||
// z-index: @zindex-notification;
|
||||
// margin-right: @notification-margin-edge;
|
||||
|
||||
&-close-icon {
|
||||
font-size: @font-size-base;
|
||||
cursor: pointer;
|
||||
}
|
||||
// &-close-icon {
|
||||
// font-size: @font-size-base;
|
||||
// cursor: pointer;
|
||||
// }
|
||||
|
||||
&-hook-holder {
|
||||
position: relative;
|
||||
}
|
||||
// &-hook-holder {
|
||||
// position: relative;
|
||||
// }
|
||||
|
||||
&-notice {
|
||||
position: relative;
|
||||
width: @notification-width;
|
||||
max-width: ~'calc(100vw - @{notification-margin-edge} * 2)';
|
||||
margin-bottom: @notification-margin-bottom;
|
||||
margin-left: auto;
|
||||
padding: @notification-padding;
|
||||
overflow: hidden;
|
||||
line-height: @line-height-base;
|
||||
word-wrap: break-word;
|
||||
background: @notification-bg;
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: @shadow-2;
|
||||
// &-notice {
|
||||
// position: relative;
|
||||
// width: @notification-width;
|
||||
// max-width: ~'calc(100vw - @{notification-margin-edge} * 2)';
|
||||
// margin-bottom: @notification-margin-bottom;
|
||||
// margin-left: auto;
|
||||
// padding: @notification-padding;
|
||||
// overflow: hidden;
|
||||
// line-height: @line-height-base;
|
||||
// word-wrap: break-word;
|
||||
// background: @notification-bg;
|
||||
// border-radius: @border-radius-base;
|
||||
// box-shadow: @shadow-2;
|
||||
|
||||
.@{notification-prefix-cls}-top &,
|
||||
.@{notification-prefix-cls}-bottom & {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
// .@{notification-prefix-cls}-top &,
|
||||
// .@{notification-prefix-cls}-bottom & {
|
||||
// margin-right: auto;
|
||||
// margin-left: auto;
|
||||
// }
|
||||
|
||||
.@{notification-prefix-cls}-topLeft &,
|
||||
.@{notification-prefix-cls}-bottomLeft & {
|
||||
margin-right: auto;
|
||||
margin-left: 0;
|
||||
}
|
||||
// .@{notification-prefix-cls}-topLeft &,
|
||||
// .@{notification-prefix-cls}-bottomLeft & {
|
||||
// margin-right: auto;
|
||||
// margin-left: 0;
|
||||
// }
|
||||
|
||||
&-message {
|
||||
margin-bottom: 8px;
|
||||
color: @heading-color;
|
||||
font-size: @font-size-lg;
|
||||
line-height: 24px;
|
||||
// &-message {
|
||||
// margin-bottom: 8px;
|
||||
// color: @heading-color;
|
||||
// font-size: @font-size-lg;
|
||||
// line-height: 24px;
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/5846#issuecomment-296244140
|
||||
&-single-line-auto-margin {
|
||||
display: block;
|
||||
width: ~'calc(@{notification-width} - @{notification-padding-horizontal} * 2 - 24px - 48px - 100%)';
|
||||
max-width: 4px;
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
// // https://github.com/ant-design/ant-design/issues/5846#issuecomment-296244140
|
||||
// &-single-line-auto-margin {
|
||||
// display: block;
|
||||
// width: ~'calc(@{notification-width} - @{notification-padding-horizontal} * 2 - 24px - 48px - 100%)';
|
||||
// max-width: 4px;
|
||||
// background-color: transparent;
|
||||
// pointer-events: none;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
// &::before {
|
||||
// display: block;
|
||||
// content: '';
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&-description {
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
// &-description {
|
||||
// font-size: @font-size-base;
|
||||
// }
|
||||
|
||||
&-closable &-message {
|
||||
padding-right: 24px;
|
||||
}
|
||||
// &-closable &-message {
|
||||
// padding-right: 24px;
|
||||
// }
|
||||
|
||||
&-with-icon &-message {
|
||||
margin-bottom: 4px;
|
||||
margin-left: 48px;
|
||||
font-size: @font-size-lg;
|
||||
}
|
||||
// &-with-icon &-message {
|
||||
// margin-bottom: 4px;
|
||||
// margin-left: 48px;
|
||||
// font-size: @font-size-lg;
|
||||
// }
|
||||
|
||||
&-with-icon &-description {
|
||||
margin-left: 48px;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
// &-with-icon &-description {
|
||||
// margin-left: 48px;
|
||||
// font-size: @font-size-base;
|
||||
// }
|
||||
|
||||
// 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
|
||||
&-icon {
|
||||
position: absolute;
|
||||
margin-left: 4px;
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
// // 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
|
||||
// &-icon {
|
||||
// position: absolute;
|
||||
// margin-left: 4px;
|
||||
// font-size: 24px;
|
||||
// line-height: 24px;
|
||||
// }
|
||||
|
||||
.@{iconfont-css-prefix}&-icon {
|
||||
&-success {
|
||||
color: @success-color;
|
||||
}
|
||||
// .@{iconfont-css-prefix}&-icon {
|
||||
// &-success {
|
||||
// color: @success-color;
|
||||
// }
|
||||
|
||||
&-info {
|
||||
color: @info-color;
|
||||
}
|
||||
// &-info {
|
||||
// color: @info-color;
|
||||
// }
|
||||
|
||||
&-warning {
|
||||
color: @warning-color;
|
||||
}
|
||||
// &-warning {
|
||||
// color: @warning-color;
|
||||
// }
|
||||
|
||||
&-error {
|
||||
color: @error-color;
|
||||
}
|
||||
}
|
||||
// &-error {
|
||||
// color: @error-color;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-close {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 22px;
|
||||
color: @text-color-secondary;
|
||||
outline: none;
|
||||
// &-close {
|
||||
// position: absolute;
|
||||
// top: 16px;
|
||||
// right: 22px;
|
||||
// color: @text-color-secondary;
|
||||
// outline: none;
|
||||
|
||||
&:hover {
|
||||
& when (@theme = dark) {
|
||||
color: fade(@white, 85%);
|
||||
}
|
||||
& when not (@theme = dark) {
|
||||
color: shade(@text-color-secondary, 40%);
|
||||
}
|
||||
}
|
||||
}
|
||||
// &:hover {
|
||||
// & when (@theme = dark) {
|
||||
// color: fade(@white, 85%);
|
||||
// }
|
||||
// & when not (@theme = dark) {
|
||||
// color: shade(@text-color-secondary, 40%);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&-btn {
|
||||
float: right;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
// &-btn {
|
||||
// float: right;
|
||||
// margin-top: 16px;
|
||||
// }
|
||||
// }
|
||||
|
||||
.notification-fade-effect {
|
||||
animation-duration: 0.24s;
|
||||
animation-timing-function: @ease-in-out;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
// .notification-fade-effect {
|
||||
// animation-duration: 0.24s;
|
||||
// animation-timing-function: @ease-in-out;
|
||||
// animation-fill-mode: both;
|
||||
// }
|
||||
|
||||
&-fade-enter,
|
||||
&-fade-appear {
|
||||
.notification-fade-effect();
|
||||
// &-fade-enter,
|
||||
// &-fade-appear {
|
||||
// .notification-fade-effect();
|
||||
|
||||
opacity: 0;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
// opacity: 0;
|
||||
// animation-play-state: paused;
|
||||
// }
|
||||
|
||||
&-fade-leave {
|
||||
.notification-fade-effect();
|
||||
// &-fade-leave {
|
||||
// .notification-fade-effect();
|
||||
|
||||
animation-duration: 0.2s;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
// animation-duration: 0.2s;
|
||||
// animation-play-state: paused;
|
||||
// }
|
||||
|
||||
&-fade-enter&-fade-enter-active,
|
||||
&-fade-appear&-fade-appear-active {
|
||||
animation-name: NotificationFadeIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
// &-fade-enter&-fade-enter-active,
|
||||
// &-fade-appear&-fade-appear-active {
|
||||
// animation-name: NotificationFadeIn;
|
||||
// animation-play-state: running;
|
||||
// }
|
||||
|
||||
&-fade-leave&-fade-leave-active {
|
||||
animation-name: NotificationFadeOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
// &-fade-leave&-fade-leave-active {
|
||||
// animation-name: NotificationFadeOut;
|
||||
// animation-play-state: running;
|
||||
// }
|
||||
// }
|
||||
|
||||
@keyframes NotificationFadeIn {
|
||||
0% {
|
||||
left: @notification-width;
|
||||
opacity: 0;
|
||||
}
|
||||
// @keyframes NotificationFadeIn {
|
||||
// 0% {
|
||||
// left: @notification-width;
|
||||
// opacity: 0;
|
||||
// }
|
||||
|
||||
100% {
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
// 100% {
|
||||
// left: 0;
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
|
||||
@keyframes NotificationFadeOut {
|
||||
0% {
|
||||
max-height: 150px;
|
||||
margin-bottom: @notification-margin-bottom;
|
||||
opacity: 1;
|
||||
}
|
||||
// @keyframes NotificationFadeOut {
|
||||
// 0% {
|
||||
// max-height: 150px;
|
||||
// margin-bottom: @notification-margin-bottom;
|
||||
// opacity: 1;
|
||||
// }
|
||||
|
||||
100% {
|
||||
max-height: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
// 100% {
|
||||
// max-height: 0;
|
||||
// margin-bottom: 0;
|
||||
// padding-top: 0;
|
||||
// padding-bottom: 0;
|
||||
// opacity: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
@import './rtl';
|
||||
@import './placement';
|
||||
// @import './rtl';
|
||||
// @import './placement';
|
||||
|
||||
@ -1,2 +1,28 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
// deps-lint-skip-all
|
||||
import { genComponentStyleHook } from '../../_util/theme';
|
||||
import type { FullToken, GenerateStyle } from '../../_util/theme';
|
||||
|
||||
/** Component only token. Which will handle additional calculation of alias token */
|
||||
export interface ComponentToken {}
|
||||
|
||||
export interface NotificationToken extends FullToken<'Notification'> {}
|
||||
|
||||
// =============================== Base ===============================
|
||||
const genBaseStyle: GenerateStyle<NotificationToken> = token => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
[componentCls]: {},
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook(
|
||||
'Notification',
|
||||
token => [genBaseStyle(token)],
|
||||
token => {
|
||||
// Not error in lint tmp
|
||||
console.log('>>', !!token);
|
||||
return {};
|
||||
},
|
||||
);
|
||||
|
||||
@ -1,68 +1,68 @@
|
||||
.@{notification-prefix-cls} {
|
||||
&-top,
|
||||
&-bottom {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
// .@{notification-prefix-cls} {
|
||||
// &-top,
|
||||
// &-bottom {
|
||||
// margin-right: 0;
|
||||
// margin-left: 0;
|
||||
// }
|
||||
|
||||
&-top {
|
||||
.@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
|
||||
.@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
|
||||
animation-name: NotificationTopFadeIn;
|
||||
}
|
||||
}
|
||||
// &-top {
|
||||
// .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
|
||||
// .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
|
||||
// animation-name: NotificationTopFadeIn;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-bottom {
|
||||
.@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
|
||||
.@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
|
||||
animation-name: NotificationBottomFadeIn;
|
||||
}
|
||||
}
|
||||
// &-bottom {
|
||||
// .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
|
||||
// .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
|
||||
// animation-name: NotificationBottomFadeIn;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-topLeft,
|
||||
&-bottomLeft {
|
||||
margin-right: 0;
|
||||
margin-left: @notification-margin-edge;
|
||||
// &-topLeft,
|
||||
// &-bottomLeft {
|
||||
// margin-right: 0;
|
||||
// margin-left: @notification-margin-edge;
|
||||
|
||||
.@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
|
||||
.@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
|
||||
animation-name: NotificationLeftFadeIn;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
|
||||
// .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
|
||||
// animation-name: NotificationLeftFadeIn;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@keyframes NotificationTopFadeIn {
|
||||
0% {
|
||||
margin-top: -100%;
|
||||
opacity: 0;
|
||||
}
|
||||
// @keyframes NotificationTopFadeIn {
|
||||
// 0% {
|
||||
// margin-top: -100%;
|
||||
// opacity: 0;
|
||||
// }
|
||||
|
||||
100% {
|
||||
margin-top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
// 100% {
|
||||
// margin-top: 0;
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
|
||||
@keyframes NotificationBottomFadeIn {
|
||||
0% {
|
||||
margin-bottom: -100%;
|
||||
opacity: 0;
|
||||
}
|
||||
// @keyframes NotificationBottomFadeIn {
|
||||
// 0% {
|
||||
// margin-bottom: -100%;
|
||||
// opacity: 0;
|
||||
// }
|
||||
|
||||
100% {
|
||||
margin-bottom: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
// 100% {
|
||||
// margin-bottom: 0;
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
|
||||
@keyframes NotificationLeftFadeIn {
|
||||
0% {
|
||||
right: @notification-width;
|
||||
opacity: 0;
|
||||
}
|
||||
// @keyframes NotificationLeftFadeIn {
|
||||
// 0% {
|
||||
// right: @notification-width;
|
||||
// opacity: 0;
|
||||
// }
|
||||
|
||||
100% {
|
||||
right: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
// 100% {
|
||||
// right: 0;
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -1,53 +1,53 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
|
||||
@notification-prefix-cls: ~'@{ant-prefix}-notification';
|
||||
// @notification-prefix-cls: ~'@{ant-prefix}-notification';
|
||||
|
||||
.@{notification-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
// .@{notification-prefix-cls} {
|
||||
// &-rtl {
|
||||
// direction: rtl;
|
||||
// }
|
||||
|
||||
&-notice {
|
||||
&-closable &-message {
|
||||
.@{notification-prefix-cls}-rtl & {
|
||||
padding-right: 0;
|
||||
padding-left: 24px;
|
||||
}
|
||||
}
|
||||
// &-notice {
|
||||
// &-closable &-message {
|
||||
// .@{notification-prefix-cls}-rtl & {
|
||||
// padding-right: 0;
|
||||
// padding-left: 24px;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-with-icon &-message {
|
||||
.@{notification-prefix-cls}-rtl & {
|
||||
margin-right: 48px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
// &-with-icon &-message {
|
||||
// .@{notification-prefix-cls}-rtl & {
|
||||
// margin-right: 48px;
|
||||
// margin-left: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-with-icon &-description {
|
||||
.@{notification-prefix-cls}-rtl & {
|
||||
margin-right: 48px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
// &-with-icon &-description {
|
||||
// .@{notification-prefix-cls}-rtl & {
|
||||
// margin-right: 48px;
|
||||
// margin-left: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-icon {
|
||||
.@{notification-prefix-cls}-rtl & {
|
||||
margin-right: 4px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
// &-icon {
|
||||
// .@{notification-prefix-cls}-rtl & {
|
||||
// margin-right: 4px;
|
||||
// margin-left: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-close {
|
||||
.@{notification-prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
left: 22px;
|
||||
}
|
||||
}
|
||||
// &-close {
|
||||
// .@{notification-prefix-cls}-rtl & {
|
||||
// right: auto;
|
||||
// left: 22px;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-btn {
|
||||
.@{notification-prefix-cls}-rtl & {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// &-btn {
|
||||
// .@{notification-prefix-cls}-rtl & {
|
||||
// float: left;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -16,6 +16,7 @@ import type {
|
||||
} from './interface';
|
||||
import { getPlacementStyle, getMotion } from './util';
|
||||
import warning from '../_util/warning';
|
||||
import useStyle from './style';
|
||||
|
||||
const typeToIcon = {
|
||||
success: CheckCircleOutlined,
|
||||
@ -51,12 +52,13 @@ const Holder = React.forwardRef<HolderRef, HolderProps>((props, ref) => {
|
||||
const { getPrefixCls, getPopupContainer } = React.useContext(ConfigContext);
|
||||
|
||||
const prefixCls = staticPrefixCls || getPrefixCls('notification');
|
||||
const [, hashId] = useStyle(prefixCls);
|
||||
|
||||
// =============================== Style ===============================
|
||||
const getStyle = (placement: NotificationPlacement) =>
|
||||
getPlacementStyle(placement, top ?? DEFAULT_OFFSET, bottom ?? DEFAULT_OFFSET);
|
||||
|
||||
const getClassName = () => (rtl ? `${prefixCls}-rtl` : '');
|
||||
const getClassName = () => classNames(hashId, rtl ? `${prefixCls}-rtl` : '');
|
||||
|
||||
// ============================== Motion ===============================
|
||||
const getNotificationMotion = () => getMotion(prefixCls);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user