1
This commit is contained in:
+26
@@ -0,0 +1,26 @@
|
||||
import * as React from 'react';
|
||||
import type { NoticeProps } from '@rc-component/notification/lib/Notice';
|
||||
import type { ArgsClassNamesType, ArgsStylesType, MessageSemanticClassNames, MessageSemanticStyles, NoticeType } from './interface';
|
||||
export declare const TypeIcon: {
|
||||
info: React.JSX.Element;
|
||||
success: React.JSX.Element;
|
||||
error: React.JSX.Element;
|
||||
warning: React.JSX.Element;
|
||||
loading: React.JSX.Element;
|
||||
};
|
||||
export interface PureContentProps {
|
||||
prefixCls: string;
|
||||
type?: NoticeType;
|
||||
icon?: React.ReactNode;
|
||||
classNames?: MessageSemanticClassNames;
|
||||
styles?: MessageSemanticStyles;
|
||||
}
|
||||
export declare const PureContent: React.FC<React.PropsWithChildren<PureContentProps>>;
|
||||
export interface PurePanelProps extends Omit<NoticeProps, 'prefixCls' | 'eventKey' | 'classNames' | 'styles'>, Omit<PureContentProps, 'prefixCls' | 'children' | 'classNames' | 'styles'> {
|
||||
prefixCls?: string;
|
||||
classNames?: ArgsClassNamesType;
|
||||
styles?: ArgsStylesType;
|
||||
}
|
||||
/** @private Internal Component. Do not use in your production. */
|
||||
declare const PurePanel: React.FC<PurePanelProps>;
|
||||
export default PurePanel;
|
||||
+96
@@ -0,0 +1,96 @@
|
||||
"use client";
|
||||
|
||||
import * as React from 'react';
|
||||
import CheckCircleFilled from "@ant-design/icons/es/icons/CheckCircleFilled";
|
||||
import CloseCircleFilled from "@ant-design/icons/es/icons/CloseCircleFilled";
|
||||
import ExclamationCircleFilled from "@ant-design/icons/es/icons/ExclamationCircleFilled";
|
||||
import InfoCircleFilled from "@ant-design/icons/es/icons/InfoCircleFilled";
|
||||
import LoadingOutlined from "@ant-design/icons/es/icons/LoadingOutlined";
|
||||
import { Notice } from '@rc-component/notification';
|
||||
import { clsx } from 'clsx';
|
||||
import { useMergeSemantic } from '../_util/hooks';
|
||||
import { cloneElement } from '../_util/reactNode';
|
||||
import { useComponentConfig } from '../config-provider/context';
|
||||
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
|
||||
import useStyle from './style';
|
||||
export const TypeIcon = {
|
||||
info: /*#__PURE__*/React.createElement(InfoCircleFilled, null),
|
||||
success: /*#__PURE__*/React.createElement(CheckCircleFilled, null),
|
||||
error: /*#__PURE__*/React.createElement(CloseCircleFilled, null),
|
||||
warning: /*#__PURE__*/React.createElement(ExclamationCircleFilled, null),
|
||||
loading: /*#__PURE__*/React.createElement(LoadingOutlined, null)
|
||||
};
|
||||
export const PureContent = props => {
|
||||
const {
|
||||
prefixCls,
|
||||
type,
|
||||
icon,
|
||||
children,
|
||||
classNames: pureContentClassNames,
|
||||
styles
|
||||
} = props;
|
||||
const iconElement = icon || type && TypeIcon[type];
|
||||
const iconNode = cloneElement(iconElement, currentProps => {
|
||||
const mergedStyle = {
|
||||
...currentProps?.style,
|
||||
...styles?.icon
|
||||
};
|
||||
return {
|
||||
className: clsx(currentProps.className, pureContentClassNames?.icon),
|
||||
style: mergedStyle
|
||||
};
|
||||
});
|
||||
return /*#__PURE__*/React.createElement("div", {
|
||||
className: clsx(`${prefixCls}-custom-content`, `${prefixCls}-${type}`)
|
||||
}, iconNode, /*#__PURE__*/React.createElement("span", {
|
||||
className: pureContentClassNames?.content,
|
||||
style: styles?.content
|
||||
}, children));
|
||||
};
|
||||
/** @private Internal Component. Do not use in your production. */
|
||||
const PurePanel = props => {
|
||||
const {
|
||||
prefixCls: staticPrefixCls,
|
||||
className,
|
||||
style,
|
||||
type,
|
||||
icon,
|
||||
content,
|
||||
classNames: messageClassNames,
|
||||
styles,
|
||||
...restProps
|
||||
} = props;
|
||||
const {
|
||||
getPrefixCls,
|
||||
className: contextClassName,
|
||||
style: contextStyle,
|
||||
classNames: contextClassNames,
|
||||
styles: contextStyles
|
||||
} = useComponentConfig('message');
|
||||
const prefixCls = staticPrefixCls || getPrefixCls('message');
|
||||
const rootCls = useCSSVarCls(prefixCls);
|
||||
const [hashId, cssVarCls] = useStyle(prefixCls, rootCls);
|
||||
const [mergedClassNames, mergedStyles] = useMergeSemantic([contextClassNames, messageClassNames], [contextStyles, styles], {
|
||||
props
|
||||
});
|
||||
return /*#__PURE__*/React.createElement(Notice, {
|
||||
...restProps,
|
||||
prefixCls: prefixCls,
|
||||
className: clsx(contextClassName, mergedClassNames.root, className, hashId, `${prefixCls}-notice-pure-panel`, cssVarCls, rootCls),
|
||||
style: {
|
||||
...mergedStyles.root,
|
||||
...contextStyle,
|
||||
...style
|
||||
},
|
||||
eventKey: "pure",
|
||||
duration: null,
|
||||
content: /*#__PURE__*/React.createElement(PureContent, {
|
||||
prefixCls: prefixCls,
|
||||
type: type,
|
||||
icon: icon,
|
||||
classNames: mergedClassNames,
|
||||
styles: mergedStyles
|
||||
}, content)
|
||||
});
|
||||
};
|
||||
export default PurePanel;
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
import React from 'react';
|
||||
import type { ArgsProps, ConfigOptions, MessageSemanticClassNames, MessageSemanticName, MessageSemanticStyles, MessageType, TypeOpen } from './interface';
|
||||
import PurePanel from './PurePanel';
|
||||
import useMessage from './useMessage';
|
||||
export type { ArgsProps, MessageSemanticClassNames, MessageSemanticName, MessageSemanticStyles };
|
||||
declare function setMessageGlobalConfig(config: ConfigOptions): void;
|
||||
interface BaseMethods {
|
||||
open: (config: ArgsProps) => MessageType;
|
||||
destroy: (key?: React.Key) => void;
|
||||
config: typeof setMessageGlobalConfig;
|
||||
useMessage: typeof useMessage;
|
||||
/** @private Internal Component. Do not use in your production. */
|
||||
_InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
|
||||
}
|
||||
interface MessageMethods {
|
||||
info: TypeOpen;
|
||||
success: TypeOpen;
|
||||
error: TypeOpen;
|
||||
warning: TypeOpen;
|
||||
loading: TypeOpen;
|
||||
}
|
||||
declare const staticMethods: MessageMethods & BaseMethods;
|
||||
declare const actWrapper: (wrapper: (fn: () => void) => void) => void;
|
||||
export { actWrapper };
|
||||
declare const actDestroy: () => void;
|
||||
export { actDestroy };
|
||||
export default staticMethods;
|
||||
+266
@@ -0,0 +1,266 @@
|
||||
"use client";
|
||||
|
||||
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
||||
import React, { useContext } from 'react';
|
||||
import { render } from "@rc-component/util/es/React/render";
|
||||
import { AppConfigContext } from '../app/context';
|
||||
import ConfigProvider, { ConfigContext, globalConfig, warnContext } from '../config-provider';
|
||||
import PurePanel from './PurePanel';
|
||||
import useMessage, { useInternalMessage } from './useMessage';
|
||||
import { wrapPromiseFn } from './util';
|
||||
let message = null;
|
||||
let act = callback => callback();
|
||||
let taskQueue = [];
|
||||
let defaultGlobalConfig = {};
|
||||
function getGlobalContext() {
|
||||
const {
|
||||
getContainer,
|
||||
duration,
|
||||
rtl,
|
||||
maxCount,
|
||||
top
|
||||
} = defaultGlobalConfig;
|
||||
const mergedContainer = getContainer?.() || document.body;
|
||||
return {
|
||||
getContainer: () => mergedContainer,
|
||||
duration,
|
||||
rtl,
|
||||
maxCount,
|
||||
top
|
||||
};
|
||||
}
|
||||
const GlobalHolder = /*#__PURE__*/React.forwardRef((props, ref) => {
|
||||
const {
|
||||
messageConfig,
|
||||
sync
|
||||
} = props;
|
||||
const {
|
||||
getPrefixCls
|
||||
} = useContext(ConfigContext);
|
||||
const prefixCls = defaultGlobalConfig.prefixCls || getPrefixCls('message');
|
||||
const appConfig = useContext(AppConfigContext);
|
||||
const [api, holder] = useInternalMessage({
|
||||
...messageConfig,
|
||||
prefixCls,
|
||||
...appConfig.message
|
||||
});
|
||||
React.useImperativeHandle(ref, () => {
|
||||
const instance = {
|
||||
...api
|
||||
};
|
||||
Object.keys(instance).forEach(method => {
|
||||
instance[method] = (...args) => {
|
||||
sync();
|
||||
return api[method].apply(api, args);
|
||||
};
|
||||
});
|
||||
return {
|
||||
instance,
|
||||
sync
|
||||
};
|
||||
});
|
||||
return holder;
|
||||
});
|
||||
const GlobalHolderWrapper = /*#__PURE__*/React.forwardRef((_, ref) => {
|
||||
const [messageConfig, setMessageConfig] = React.useState(getGlobalContext);
|
||||
const sync = () => {
|
||||
setMessageConfig(getGlobalContext);
|
||||
};
|
||||
React.useEffect(sync, []);
|
||||
const global = globalConfig();
|
||||
const rootPrefixCls = global.getRootPrefixCls();
|
||||
const rootIconPrefixCls = global.getIconPrefixCls();
|
||||
const theme = global.getTheme();
|
||||
const dom = /*#__PURE__*/React.createElement(GlobalHolder, {
|
||||
ref: ref,
|
||||
sync: sync,
|
||||
messageConfig: messageConfig
|
||||
});
|
||||
return /*#__PURE__*/React.createElement(ConfigProvider, {
|
||||
prefixCls: rootPrefixCls,
|
||||
iconPrefixCls: rootIconPrefixCls,
|
||||
theme: theme
|
||||
}, global.holderRender ? global.holderRender(dom) : dom);
|
||||
});
|
||||
const flushMessageQueue = () => {
|
||||
if (!message) {
|
||||
const holderFragment = document.createDocumentFragment();
|
||||
const newMessage = {
|
||||
fragment: holderFragment
|
||||
};
|
||||
message = newMessage;
|
||||
// Delay render to avoid sync issue
|
||||
act(() => {
|
||||
render(/*#__PURE__*/React.createElement(GlobalHolderWrapper, {
|
||||
ref: node => {
|
||||
const {
|
||||
instance,
|
||||
sync
|
||||
} = node || {};
|
||||
// React 18 test env will throw if call immediately in ref
|
||||
Promise.resolve().then(() => {
|
||||
if (!newMessage.instance && instance) {
|
||||
newMessage.instance = instance;
|
||||
newMessage.sync = sync;
|
||||
flushMessageQueue();
|
||||
}
|
||||
});
|
||||
}
|
||||
}), holderFragment);
|
||||
});
|
||||
return;
|
||||
}
|
||||
// Notification not ready
|
||||
if (!message.instance) {
|
||||
return;
|
||||
}
|
||||
// >>> Execute task
|
||||
taskQueue.forEach(task => {
|
||||
const {
|
||||
type,
|
||||
skipped
|
||||
} = task;
|
||||
// Only `skipped` when user call notice but cancel it immediately
|
||||
// and instance not ready
|
||||
if (!skipped) {
|
||||
switch (type) {
|
||||
case 'open':
|
||||
{
|
||||
act(() => {
|
||||
const closeFn = message.instance.open({
|
||||
...defaultGlobalConfig,
|
||||
...task.config
|
||||
});
|
||||
closeFn?.then(task.resolve);
|
||||
task.setCloseFn(closeFn);
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'destroy':
|
||||
act(() => {
|
||||
message?.instance.destroy(task.key);
|
||||
});
|
||||
break;
|
||||
// Other type open
|
||||
default:
|
||||
{
|
||||
act(() => {
|
||||
var _message$instance;
|
||||
const closeFn = (_message$instance = message.instance)[type].apply(_message$instance, _toConsumableArray(task.args));
|
||||
closeFn?.then(task.resolve);
|
||||
task.setCloseFn(closeFn);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
// Clean up
|
||||
taskQueue = [];
|
||||
};
|
||||
// ==============================================================================
|
||||
// == Export ==
|
||||
// ==============================================================================
|
||||
function setMessageGlobalConfig(config) {
|
||||
defaultGlobalConfig = {
|
||||
...defaultGlobalConfig,
|
||||
...config
|
||||
};
|
||||
// Trigger sync for it
|
||||
act(() => {
|
||||
message?.sync?.();
|
||||
});
|
||||
}
|
||||
function open(config) {
|
||||
const result = wrapPromiseFn(resolve => {
|
||||
let closeFn;
|
||||
const task = {
|
||||
type: 'open',
|
||||
config,
|
||||
resolve,
|
||||
setCloseFn: fn => {
|
||||
closeFn = fn;
|
||||
}
|
||||
};
|
||||
taskQueue.push(task);
|
||||
return () => {
|
||||
if (closeFn) {
|
||||
act(() => {
|
||||
closeFn();
|
||||
});
|
||||
} else {
|
||||
task.skipped = true;
|
||||
}
|
||||
};
|
||||
});
|
||||
flushMessageQueue();
|
||||
return result;
|
||||
}
|
||||
function typeOpen(type, args) {
|
||||
const global = globalConfig();
|
||||
if (process.env.NODE_ENV !== 'production' && !global.holderRender) {
|
||||
warnContext('message');
|
||||
}
|
||||
const result = wrapPromiseFn(resolve => {
|
||||
let closeFn;
|
||||
const task = {
|
||||
type,
|
||||
args,
|
||||
resolve,
|
||||
setCloseFn: fn => {
|
||||
closeFn = fn;
|
||||
}
|
||||
};
|
||||
taskQueue.push(task);
|
||||
return () => {
|
||||
if (closeFn) {
|
||||
act(() => {
|
||||
closeFn();
|
||||
});
|
||||
} else {
|
||||
task.skipped = true;
|
||||
}
|
||||
};
|
||||
});
|
||||
flushMessageQueue();
|
||||
return result;
|
||||
}
|
||||
const destroy = key => {
|
||||
taskQueue.push({
|
||||
type: 'destroy',
|
||||
key
|
||||
});
|
||||
flushMessageQueue();
|
||||
};
|
||||
const methods = ['success', 'info', 'warning', 'error', 'loading'];
|
||||
const baseStaticMethods = {
|
||||
open,
|
||||
destroy,
|
||||
config: setMessageGlobalConfig,
|
||||
useMessage,
|
||||
_InternalPanelDoNotUseOrYouWillBeFired: PurePanel
|
||||
};
|
||||
const staticMethods = baseStaticMethods;
|
||||
methods.forEach(type => {
|
||||
staticMethods[type] = (...args) => typeOpen(type, args);
|
||||
});
|
||||
// ==============================================================================
|
||||
// == Test ==
|
||||
// ==============================================================================
|
||||
const noop = () => {};
|
||||
let _actWrapper = noop;
|
||||
if (process.env.NODE_ENV === 'test') {
|
||||
_actWrapper = wrapper => {
|
||||
act = wrapper;
|
||||
};
|
||||
}
|
||||
const actWrapper = _actWrapper;
|
||||
export { actWrapper };
|
||||
let _actDestroy = noop;
|
||||
if (process.env.NODE_ENV === 'test') {
|
||||
_actDestroy = () => {
|
||||
message = null;
|
||||
};
|
||||
}
|
||||
const actDestroy = _actDestroy;
|
||||
export { actDestroy };
|
||||
export default staticMethods;
|
||||
+94
@@ -0,0 +1,94 @@
|
||||
import type * as React from 'react';
|
||||
import type { SemanticClassNamesType, SemanticStylesType } from '../_util/hooks';
|
||||
export type NoticeType = 'info' | 'success' | 'error' | 'warning' | 'loading';
|
||||
export type MessageSemanticName = keyof MessageSemanticClassNames & keyof MessageSemanticStyles;
|
||||
export type MessageSemanticClassNames = {
|
||||
root?: string;
|
||||
icon?: string;
|
||||
content?: string;
|
||||
};
|
||||
export type MessageSemanticStyles = {
|
||||
root?: React.CSSProperties;
|
||||
icon?: React.CSSProperties;
|
||||
content?: React.CSSProperties;
|
||||
};
|
||||
export type ArgsClassNamesType = SemanticClassNamesType<ArgsProps, MessageSemanticClassNames>;
|
||||
export type ArgsStylesType = SemanticStylesType<ArgsProps, MessageSemanticStyles>;
|
||||
export interface ConfigOptions {
|
||||
top?: string | number;
|
||||
duration?: number;
|
||||
prefixCls?: string;
|
||||
getContainer?: () => HTMLElement;
|
||||
transitionName?: string;
|
||||
maxCount?: number;
|
||||
rtl?: boolean;
|
||||
/**
|
||||
* @descCN 悬停时是否暂停计时器
|
||||
* @descEN keep the timer running or not on hover
|
||||
*/
|
||||
pauseOnHover?: boolean;
|
||||
classNames?: ArgsClassNamesType;
|
||||
styles?: ArgsStylesType;
|
||||
}
|
||||
export interface ArgsProps {
|
||||
/**
|
||||
* @descCN 消息通知的内容，接收组件或者字符串
|
||||
* @descEN The content of the message notification, receiving component or string
|
||||
*/
|
||||
content: React.ReactNode;
|
||||
/**
|
||||
* @descCN 消息通知持续显示的时间
|
||||
* @descEN How long the message notification remains displayed
|
||||
*/
|
||||
duration?: number;
|
||||
/**
|
||||
* @descCN 消息通知的类型，可以是 'info'、'success'、'error'、'warning' 或 'loading'
|
||||
* @descEN The type of message notification, which can be 'info', 'success', 'error', 'warning' or 'loading'
|
||||
*/
|
||||
type?: NoticeType;
|
||||
/**
|
||||
* @descCN 消息通知关闭时进行调用的回调函数
|
||||
* @descEN The callback function called when the message notification is closed
|
||||
*/
|
||||
onClose?: () => void;
|
||||
icon?: React.ReactNode;
|
||||
key?: string | number;
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
classNames?: ArgsClassNamesType;
|
||||
styles?: ArgsStylesType;
|
||||
/**
|
||||
* @descCN 消息通知点击时的回调函数
|
||||
* @descEN Callback function when message notification is clicked
|
||||
*/
|
||||
onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
||||
/**
|
||||
* @descCN 悬停时是否暂停计时器
|
||||
* @descEN keep the timer running or not on hover
|
||||
*/
|
||||
pauseOnHover?: boolean;
|
||||
}
|
||||
export type JointContent = React.ReactNode | ArgsProps;
|
||||
export interface MessageType extends PromiseLike<boolean> {
|
||||
(): void;
|
||||
}
|
||||
export type TypeOpen = (content: JointContent,
|
||||
/**
|
||||
* @descCN 消息通知持续显示的时间，也可以直接使用 onClose。
|
||||
* @descEN You can also use onClose directly to determine how long the message notification continues to be displayed.
|
||||
*/
|
||||
duration?: number | VoidFunction,
|
||||
/**
|
||||
* @descCN 消息通知关闭时进行调用的回调函数
|
||||
* @descEN The callback function called when the message notification is closed
|
||||
*/
|
||||
onClose?: VoidFunction) => MessageType;
|
||||
export interface MessageInstance {
|
||||
info: TypeOpen;
|
||||
success: TypeOpen;
|
||||
error: TypeOpen;
|
||||
warning: TypeOpen;
|
||||
loading: TypeOpen;
|
||||
open: (args: ArgsProps) => MessageType;
|
||||
destroy: (key?: React.Key) => void;
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
export {};
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
import type { CSSProperties } from 'react';
|
||||
import type { GetDefaultToken } from '../../theme/internal';
|
||||
/** Component only token. Which will handle additional calculation of alias token */
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 提示框 z-index
|
||||
* @descEN z-index of Message
|
||||
*/
|
||||
zIndexPopup: number;
|
||||
/**
|
||||
* @desc 提示框背景色
|
||||
* @descEN Background color of Message
|
||||
*/
|
||||
contentBg: string;
|
||||
/**
|
||||
* @desc 提示框内边距
|
||||
* @descEN Padding of Message
|
||||
*/
|
||||
contentPadding: CSSProperties['padding'];
|
||||
}
|
||||
export declare const prepareComponentToken: GetDefaultToken<'Message'>;
|
||||
declare const _default: (prefixCls: string, rootCls?: string) => readonly [string, string];
|
||||
export default _default;
|
||||
+160
@@ -0,0 +1,160 @@
|
||||
import { Keyframes } from '@ant-design/cssinjs';
|
||||
import { CONTAINER_MAX_OFFSET } from '../../_util/hooks';
|
||||
import { resetComponent } from '../../style';
|
||||
import { genStyleHooks, mergeToken } from '../../theme/internal';
|
||||
const genMessageStyle = token => {
|
||||
const {
|
||||
componentCls,
|
||||
iconCls,
|
||||
boxShadow,
|
||||
colorText,
|
||||
colorSuccess,
|
||||
colorError,
|
||||
colorWarning,
|
||||
colorInfo,
|
||||
fontSizeLG,
|
||||
motionEaseInOutCirc,
|
||||
motionDurationSlow,
|
||||
marginXS,
|
||||
paddingXS,
|
||||
borderRadiusLG,
|
||||
zIndexPopup,
|
||||
// Custom token
|
||||
contentPadding,
|
||||
contentBg
|
||||
} = token;
|
||||
const noticeCls = `${componentCls}-notice`;
|
||||
const messageMoveIn = new Keyframes('MessageMoveIn', {
|
||||
'0%': {
|
||||
padding: 0,
|
||||
transform: 'translateY(-100%)',
|
||||
opacity: 0
|
||||
},
|
||||
'100%': {
|
||||
padding: paddingXS,
|
||||
transform: 'translateY(0)',
|
||||
opacity: 1
|
||||
}
|
||||
});
|
||||
const messageMoveOut = new Keyframes('MessageMoveOut', {
|
||||
'0%': {
|
||||
maxHeight: token.height,
|
||||
padding: paddingXS,
|
||||
opacity: 1
|
||||
},
|
||||
'100%': {
|
||||
maxHeight: 0,
|
||||
padding: 0,
|
||||
opacity: 0
|
||||
}
|
||||
});
|
||||
const noticeStyle = {
|
||||
padding: paddingXS,
|
||||
textAlign: 'center',
|
||||
[`${componentCls}-custom-content`]: {
|
||||
display: 'flex',
|
||||
alignItems: 'center'
|
||||
},
|
||||
[`${componentCls}-custom-content > ${iconCls}`]: {
|
||||
marginInlineEnd: marginXS,
|
||||
// affected by ltr or rtl
|
||||
fontSize: fontSizeLG
|
||||
},
|
||||
[`${noticeCls}-content`]: {
|
||||
display: 'inline-block',
|
||||
padding: contentPadding,
|
||||
background: contentBg,
|
||||
borderRadius: borderRadiusLG,
|
||||
boxShadow,
|
||||
pointerEvents: 'all'
|
||||
},
|
||||
[`${componentCls}-success > ${iconCls}`]: {
|
||||
color: colorSuccess
|
||||
},
|
||||
[`${componentCls}-error > ${iconCls}`]: {
|
||||
color: colorError
|
||||
},
|
||||
[`${componentCls}-warning > ${iconCls}`]: {
|
||||
color: colorWarning
|
||||
},
|
||||
[`${componentCls}-info > ${iconCls},
|
||||
${componentCls}-loading > ${iconCls}`]: {
|
||||
color: colorInfo
|
||||
}
|
||||
};
|
||||
return [
|
||||
// ============================ Holder ============================
|
||||
{
|
||||
[componentCls]: {
|
||||
...resetComponent(token),
|
||||
color: colorText,
|
||||
position: 'fixed',
|
||||
top: marginXS,
|
||||
width: '100%',
|
||||
pointerEvents: 'none',
|
||||
zIndex: zIndexPopup,
|
||||
[`${componentCls}-move-up`]: {
|
||||
animationFillMode: 'forwards'
|
||||
},
|
||||
[`
|
||||
${componentCls}-move-up-appear,
|
||||
${componentCls}-move-up-enter
|
||||
`]: {
|
||||
animationName: messageMoveIn,
|
||||
animationDuration: motionDurationSlow,
|
||||
animationPlayState: 'paused',
|
||||
animationTimingFunction: motionEaseInOutCirc
|
||||
},
|
||||
[`
|
||||
${componentCls}-move-up-appear${componentCls}-move-up-appear-active,
|
||||
${componentCls}-move-up-enter${componentCls}-move-up-enter-active
|
||||
`]: {
|
||||
animationPlayState: 'running'
|
||||
},
|
||||
[`${componentCls}-move-up-leave`]: {
|
||||
animationName: messageMoveOut,
|
||||
animationDuration: motionDurationSlow,
|
||||
animationPlayState: 'paused',
|
||||
animationTimingFunction: motionEaseInOutCirc
|
||||
},
|
||||
[`${componentCls}-move-up-leave${componentCls}-move-up-leave-active`]: {
|
||||
animationPlayState: 'running'
|
||||
},
|
||||
'&-rtl': {
|
||||
direction: 'rtl',
|
||||
span: {
|
||||
direction: 'rtl'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// ============================ Notice ============================
|
||||
{
|
||||
[componentCls]: {
|
||||
[`${noticeCls}-wrapper`]: {
|
||||
...noticeStyle
|
||||
}
|
||||
}
|
||||
},
|
||||
// ============================= Pure =============================
|
||||
{
|
||||
[`${componentCls}-notice-pure-panel`]: {
|
||||
...noticeStyle,
|
||||
padding: 0,
|
||||
textAlign: 'start'
|
||||
}
|
||||
}];
|
||||
};
|
||||
export const prepareComponentToken = token => ({
|
||||
zIndexPopup: token.zIndexPopupBase + CONTAINER_MAX_OFFSET + 10,
|
||||
contentBg: token.colorBgElevated,
|
||||
contentPadding: `${(token.controlHeightLG - token.fontSize * token.lineHeight) / 2}px ${token.paddingSM}px`
|
||||
});
|
||||
// ============================== Export ==============================
|
||||
export default genStyleHooks('Message', token => {
|
||||
// Gen-style functions here
|
||||
const combinedToken = mergeToken(token, {
|
||||
height: 150
|
||||
});
|
||||
return genMessageStyle(combinedToken);
|
||||
}, prepareComponentToken);
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
import * as React from 'react';
|
||||
import type { ConfigOptions, MessageInstance } from './interface';
|
||||
type HolderProps = ConfigOptions & {
|
||||
onAllRemoved?: VoidFunction;
|
||||
};
|
||||
export declare function useInternalMessage(messageConfig?: HolderProps): readonly [MessageInstance, React.ReactElement];
|
||||
export default function useMessage(messageConfig?: ConfigOptions): readonly [MessageInstance, React.ReactElement<unknown, string | React.JSXElementConstructor<any>>];
|
||||
export {};
|
||||
+250
@@ -0,0 +1,250 @@
|
||||
"use client";
|
||||
|
||||
import * as React from 'react';
|
||||
import { NotificationProvider, useNotification as useRcNotification } from '@rc-component/notification';
|
||||
import { clsx } from 'clsx';
|
||||
import { mergeClassNames, mergeStyles, resolveStyleOrClass, useMergeSemantic } from '../_util/hooks';
|
||||
import { isNonNullable, isPlainObject } from '../_util/is';
|
||||
import { devUseWarning } from '../_util/warning';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import { useComponentConfig } from '../config-provider/context';
|
||||
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
|
||||
import { PureContent } from './PurePanel';
|
||||
import useStyle from './style';
|
||||
import { getMotion, wrapPromiseFn } from './util';
|
||||
const DEFAULT_OFFSET = 8;
|
||||
const DEFAULT_DURATION = 3;
|
||||
const Wrapper = ({
|
||||
children,
|
||||
prefixCls
|
||||
}) => {
|
||||
const rootCls = useCSSVarCls(prefixCls);
|
||||
const [hashId, cssVarCls] = useStyle(prefixCls, rootCls);
|
||||
return /*#__PURE__*/React.createElement(NotificationProvider, {
|
||||
classNames: {
|
||||
list: clsx(hashId, cssVarCls, rootCls)
|
||||
}
|
||||
}, children);
|
||||
};
|
||||
const renderNotifications = (node, {
|
||||
prefixCls,
|
||||
key
|
||||
}) => (/*#__PURE__*/React.createElement(Wrapper, {
|
||||
prefixCls: prefixCls,
|
||||
key: key
|
||||
}, node));
|
||||
const Holder = /*#__PURE__*/React.forwardRef((props, ref) => {
|
||||
const {
|
||||
top,
|
||||
prefixCls: staticPrefixCls,
|
||||
getContainer: staticGetContainer,
|
||||
maxCount,
|
||||
duration = DEFAULT_DURATION,
|
||||
rtl,
|
||||
transitionName,
|
||||
onAllRemoved,
|
||||
pauseOnHover = true
|
||||
} = props;
|
||||
const {
|
||||
getPrefixCls,
|
||||
direction,
|
||||
getPopupContainer
|
||||
} = useComponentConfig('message');
|
||||
const {
|
||||
message
|
||||
} = React.useContext(ConfigContext);
|
||||
const prefixCls = staticPrefixCls || getPrefixCls('message');
|
||||
// =============================== Style ===============================
|
||||
const getStyle = () => ({
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
top: top ?? DEFAULT_OFFSET
|
||||
});
|
||||
const getClassName = () => clsx({
|
||||
[`${prefixCls}-rtl`]: rtl ?? direction === 'rtl'
|
||||
});
|
||||
// ============================== Motion ===============================
|
||||
const getNotificationMotion = () => getMotion(prefixCls, transitionName);
|
||||
// Use useMergeSemantic to merge classNames and styles
|
||||
const [mergedClassNames, mergedStyles] = useMergeSemantic([props?.classNames, message?.classNames], [props?.styles, message?.styles], {
|
||||
props
|
||||
});
|
||||
// ============================== Origin ===============================
|
||||
const [api, holder] = useRcNotification({
|
||||
prefixCls,
|
||||
style: getStyle,
|
||||
className: getClassName,
|
||||
motion: getNotificationMotion,
|
||||
// closable=false requires-no closeIcon
|
||||
closable: false,
|
||||
duration,
|
||||
getContainer: () => staticGetContainer?.() || getPopupContainer?.() || document.body,
|
||||
maxCount,
|
||||
onAllRemoved,
|
||||
renderNotifications,
|
||||
pauseOnHover
|
||||
});
|
||||
// ================================ Ref ================================
|
||||
React.useImperativeHandle(ref, () => ({
|
||||
...api,
|
||||
prefixCls,
|
||||
message,
|
||||
classNames: mergedClassNames,
|
||||
styles: mergedStyles
|
||||
}));
|
||||
return holder;
|
||||
});
|
||||
// ==============================================================================
|
||||
// == Hook ==
|
||||
// ==============================================================================
|
||||
let keyIndex = 0;
|
||||
export function useInternalMessage(messageConfig) {
|
||||
const holderRef = React.useRef(null);
|
||||
const warning = devUseWarning('Message');
|
||||
// ================================ API ================================
|
||||
const wrapAPI = React.useMemo(() => {
|
||||
// Wrap with notification content
|
||||
// >>> close
|
||||
const close = key => {
|
||||
holderRef.current?.close(key);
|
||||
};
|
||||
// >>> Open
|
||||
const open = config => {
|
||||
if (!holderRef.current) {
|
||||
process.env.NODE_ENV !== "production" ? warning(false, 'usage', 'You are calling notice in render which will break in React 18 concurrent mode. Please trigger in effect instead.') : void 0;
|
||||
const fakeResult = () => {};
|
||||
fakeResult.then = () => {};
|
||||
return fakeResult;
|
||||
}
|
||||
const {
|
||||
open: originOpen,
|
||||
prefixCls,
|
||||
message,
|
||||
classNames: originClassNames,
|
||||
styles: originStyles
|
||||
} = holderRef.current;
|
||||
const contextClassName = message?.className || {};
|
||||
const contextStyle = message?.style || {};
|
||||
const rawContextClassNames = message?.classNames || {};
|
||||
const rawContextStyles = message?.styles || {};
|
||||
const noticePrefixCls = `${prefixCls}-notice`;
|
||||
const {
|
||||
content,
|
||||
icon,
|
||||
type,
|
||||
key,
|
||||
className,
|
||||
style,
|
||||
onClose,
|
||||
classNames: configClassNames = {},
|
||||
styles = {},
|
||||
...restConfig
|
||||
} = config;
|
||||
let mergedKey = key;
|
||||
if (!isNonNullable(mergedKey)) {
|
||||
keyIndex += 1;
|
||||
mergedKey = `antd-message-${keyIndex}`;
|
||||
}
|
||||
const contextConfig = {
|
||||
...messageConfig,
|
||||
...config
|
||||
};
|
||||
const contextClassNames = resolveStyleOrClass(rawContextClassNames, {
|
||||
props: contextConfig
|
||||
});
|
||||
const semanticClassNames = resolveStyleOrClass(configClassNames, {
|
||||
props: contextConfig
|
||||
});
|
||||
const contextStyles = resolveStyleOrClass(rawContextStyles, {
|
||||
props: contextConfig
|
||||
});
|
||||
const semanticStyles = resolveStyleOrClass(styles, {
|
||||
props: contextConfig
|
||||
});
|
||||
const mergedClassNames = mergeClassNames(undefined, contextClassNames, semanticClassNames, originClassNames);
|
||||
const mergedStyles = mergeStyles(contextStyles, semanticStyles, originStyles);
|
||||
return wrapPromiseFn(resolve => {
|
||||
originOpen({
|
||||
...restConfig,
|
||||
key: mergedKey,
|
||||
content: (/*#__PURE__*/React.createElement(PureContent, {
|
||||
prefixCls: prefixCls,
|
||||
type: type,
|
||||
icon: icon,
|
||||
classNames: mergedClassNames,
|
||||
styles: mergedStyles
|
||||
}, content)),
|
||||
placement: 'top',
|
||||
className: clsx({
|
||||
[`${noticePrefixCls}-${type}`]: type
|
||||
}, className, contextClassName, mergedClassNames.root),
|
||||
style: {
|
||||
...mergedStyles.root,
|
||||
...contextStyle,
|
||||
...style
|
||||
},
|
||||
onClose: () => {
|
||||
onClose?.();
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
// Return close function
|
||||
return () => {
|
||||
close(mergedKey);
|
||||
};
|
||||
});
|
||||
};
|
||||
// >>> destroy
|
||||
const destroy = key => {
|
||||
if (key !== undefined) {
|
||||
close(key);
|
||||
} else {
|
||||
holderRef.current?.destroy();
|
||||
}
|
||||
};
|
||||
const clone = {
|
||||
open,
|
||||
destroy
|
||||
};
|
||||
const keys = ['info', 'success', 'warning', 'error', 'loading'];
|
||||
keys.forEach(type => {
|
||||
const typeOpen = (jointContent, duration, onClose) => {
|
||||
let config;
|
||||
if (isPlainObject(jointContent) && 'content' in jointContent) {
|
||||
config = jointContent;
|
||||
} else {
|
||||
config = {
|
||||
content: jointContent
|
||||
};
|
||||
}
|
||||
// Params
|
||||
let mergedDuration;
|
||||
let mergedOnClose;
|
||||
if (typeof duration === 'function') {
|
||||
mergedOnClose = duration;
|
||||
} else {
|
||||
mergedDuration = duration;
|
||||
mergedOnClose = onClose;
|
||||
}
|
||||
const mergedConfig = {
|
||||
onClose: mergedOnClose,
|
||||
duration: mergedDuration,
|
||||
...config,
|
||||
type
|
||||
};
|
||||
return open(mergedConfig);
|
||||
};
|
||||
clone[type] = typeOpen;
|
||||
});
|
||||
return clone;
|
||||
}, []);
|
||||
// ============================== Return ===============================
|
||||
return [wrapAPI, /*#__PURE__*/React.createElement(Holder, {
|
||||
key: "message-holder",
|
||||
...messageConfig,
|
||||
ref: holderRef
|
||||
})];
|
||||
}
|
||||
export default function useMessage(messageConfig) {
|
||||
return useInternalMessage(messageConfig);
|
||||
}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import type { CSSMotionProps } from '@rc-component/motion';
|
||||
export declare function getMotion(prefixCls: string, transitionName?: string): CSSMotionProps;
|
||||
/** Wrap message open with promise like function */
|
||||
export declare function wrapPromiseFn(openFn: (resolve: VoidFunction) => VoidFunction): any;
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
export function getMotion(prefixCls, transitionName) {
|
||||
return {
|
||||
motionName: transitionName ?? `${prefixCls}-move-up`
|
||||
};
|
||||
}
|
||||
/** Wrap message open with promise like function */
|
||||
export function wrapPromiseFn(openFn) {
|
||||
let closeFn;
|
||||
const closePromise = new Promise(resolve => {
|
||||
closeFn = openFn(() => {
|
||||
resolve(true);
|
||||
});
|
||||
});
|
||||
const result = () => {
|
||||
closeFn?.();
|
||||
};
|
||||
result.then = (filled, rejected) => closePromise.then(filled, rejected);
|
||||
result.promise = closePromise;
|
||||
return result;
|
||||
}
|
||||
Reference in New Issue
Block a user