From 178d8d6f19c771c213f8f60adff3c09e5244c747 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 16 May 2022 18:02:46 +0800 Subject: [PATCH] chore: Patch Notification tmpl (#35568) * chore: init notification style * chore: comment style * chore: clean up recv deps * chore: trigger --- components/_util/theme/interface.ts | 2 + .../_util/theme/util/genComponentStyleHook.ts | 2 +- components/config-provider/index.tsx | 45 +-- components/notification/style/index.less | 342 +++++++++--------- components/notification/style/index.tsx | 30 +- components/notification/style/placement.less | 116 +++--- components/notification/style/rtl.less | 90 ++--- components/notification/useNotification.tsx | 4 +- 8 files changed, 323 insertions(+), 308 deletions(-) diff --git a/components/_util/theme/interface.ts b/components/_util/theme/interface.ts index ac334a8799..8663effe16 100644 --- a/components/_util/theme/interface.ts +++ b/components/_util/theme/interface.ts @@ -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?: {}; diff --git a/components/_util/theme/util/genComponentStyleHook.ts b/components/_util/theme/util/genComponentStyleHook.ts index 40e3f11481..c9b961bbb7 100644 --- a/components/_util/theme/util/genComponentStyleHook.ts +++ b/components/_util/theme/util/genComponentStyleHook.ts @@ -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; export type OverrideComponent = keyof OverrideTokenWithoutDerivative; diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 9cb99e2c56..c249ca9a76 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -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 & { 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 ( - - {(_, __, legacyLocale) => ( - - {context => ( - - )} - - )} - - ); -}; +} = props => ( + + {(_, __, legacyLocale) => ( + + {context => ( + + )} + + )} + +); ConfigProvider.ConfigContext = ConfigContext; ConfigProvider.SizeContext = SizeContext; diff --git a/components/notification/style/index.less b/components/notification/style/index.less index ae0d0a6744..ace812f67d 100644 --- a/components/notification/style/index.less +++ b/components/notification/style/index.less @@ -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'; diff --git a/components/notification/style/index.tsx b/components/notification/style/index.tsx index 3a3ab0de59..2e5ac073de 100644 --- a/components/notification/style/index.tsx +++ b/components/notification/style/index.tsx @@ -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 = token => { + const { componentCls } = token; + + return { + [componentCls]: {}, + }; +}; + +// ============================== Export ============================== +export default genComponentStyleHook( + 'Notification', + token => [genBaseStyle(token)], + token => { + // Not error in lint tmp + console.log('>>', !!token); + return {}; + }, +); diff --git a/components/notification/style/placement.less b/components/notification/style/placement.less index 9a60fecac4..665be6fa7c 100644 --- a/components/notification/style/placement.less +++ b/components/notification/style/placement.less @@ -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; +// } +// } diff --git a/components/notification/style/rtl.less b/components/notification/style/rtl.less index 9285a25cc5..32742d62dd 100644 --- a/components/notification/style/rtl.less +++ b/components/notification/style/rtl.less @@ -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; +// } +// } +// } +// } diff --git a/components/notification/useNotification.tsx b/components/notification/useNotification.tsx index 3934a3cdd5..b58e317cf4 100644 --- a/components/notification/useNotification.tsx +++ b/components/notification/useNotification.tsx @@ -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((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);