From e8af30136abf049b13adb48e0a69400ec33b6423 Mon Sep 17 00:00:00 2001 From: haohao_peng Date: Wed, 27 Nov 2024 20:52:45 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20[message]=20=E4=BF=AE=E5=A4=8Dts?= =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E6=8A=A5=E9=94=99=20fix=20#971?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/index.tsx | 1 + components/message/demo/config.md | 71 ++++++++++++------- components/message/index.tsx | 43 +++++------ components/notification-base/notice.tsx | 6 +- components/notification-base/notification.tsx | 11 ++- 5 files changed, 79 insertions(+), 53 deletions(-) diff --git a/components/index.tsx b/components/index.tsx index f2804899..d7868317 100644 --- a/components/index.tsx +++ b/components/index.tsx @@ -61,6 +61,7 @@ export { default as Modal } from './modal' export { default as Menu } from './menu' export { default as Message } from './message' +export type { ArgsProps as IMessageProps } from './message' export { default as Notification } from './notification' diff --git a/components/message/demo/config.md b/components/message/demo/config.md index c77997cb..7402d798 100644 --- a/components/message/demo/config.md +++ b/components/message/demo/config.md @@ -9,51 +9,68 @@ order: 1 import React from 'react' import ReactDOM from 'react-dom' import { Button, Message, Icon } from '@kdcloudjs/kdesign' +import type { IMessageProps } from '@kdcloudjs/kdesign' const Demo: React.FC = () => { + const openConfig: IMessageProps = { + content: 'this is a base', + closable: true, + duration: 0 + } + const successConfig: IMessageProps = { + content:
this is a jsx success
, + closable: true, + icon: , + duration: 0 + } + const warningConfig: IMessageProps = { + content: 'this is a warning', + icon: '' + } + const errorConfig: IMessageProps = { + content: 'this is a error', + closable: true + } const base = () => { - Message.open({ - content: 'this is a base', - closable: true, - duration: 0, - }) + Message.open(openConfig) } - const success = () => { - Message.success({ - content:
this is a jsx success
, - closable: true, - icon: , - duration: 0, - }) + Message.success(successConfig) } - const warning = () => { - Message.warning({ - content: 'this is a warning', - icon: true, - }) + Message.warning(warningConfig) } - const error = () => { - Message.error({ - content: 'this is a error', - closable: true, - }) + Message.error(errorConfig) } - return (
- - - -
diff --git a/components/message/index.tsx b/components/message/index.tsx index bba19414..a199fef4 100644 --- a/components/message/index.tsx +++ b/components/message/index.tsx @@ -1,12 +1,10 @@ import React from 'react' - import { NotificationProps } from '../notification-base/notification' import NotificationApi from '../notification-base' import Content from './content' import { NotificationType } from '../notification-base/notice' export type ConfigContent = React.ReactNode | string - export type JointContent = ConfigContent | ArgsProps export interface ContentProps { @@ -31,16 +29,16 @@ const defaultClosable = false const defaultOffset = '40px' const defaultSuffixCls = 'message' const defaultPlacement = 'message' -const defaultType = 'info' +const defaultType: NotificationType = 'info' let messageKey = 1 const messageElement: HTMLElement | null = null -function isArgsProps(content: any): content is ArgsProps { +function isArgsProps(content: unknown): content is ArgsProps { return Object.prototype.toString.call(content) === '[object Object]' && !!(content as ArgsProps).content } -const getNotificationProps = (args: ArgsProps) => { +const getNotificationProps = (args: ArgsProps): Partial => { const { duration = defaultDuration, key, @@ -54,16 +52,20 @@ const getNotificationProps = (args: ArgsProps) => { closeNode, } = args - // const placeStyle = getPlacementStyle(placement) - - // const element = renderView(args) - const contentClose = () => { - onClose && onClose(key) + if (onClose) onClose(key) NotificationApi.destroy(key) } - const contentProps = { type, icon, closeNode, content, closable, suffixCls: defaultSuffixCls, contentClose } + const contentProps: ContentProps = { + type, + icon, + closeNode, + content, + closable, + suffixCls: defaultSuffixCls, + contentClose, + } return { duration, @@ -79,10 +81,10 @@ const getNotificationProps = (args: ArgsProps) => { } } -const getNotificationHTMLElement = () => { +const getNotificationHTMLElement = (): HTMLElement => { const prefixCls = 'kd' const suffix = `${prefixCls}-message` - let htmlElement: HTMLElement = document.querySelector(`#${suffix}`) as HTMLElement + let htmlElement = document.querySelector(`#${suffix}`) as HTMLElement if (!htmlElement) { htmlElement = document.createElement('div') htmlElement.id = suffix @@ -90,23 +92,22 @@ const getNotificationHTMLElement = () => { htmlElement.style.top = defaultOffset document.body.appendChild(htmlElement) } - return htmlElement } const notice = (args: ArgsProps) => { const key = args.key || messageKey++ const props = getNotificationProps({ ...args, key }) - let el: HTMLElement - if (messageElement) { - el = messageElement - } else { - el = getNotificationHTMLElement() - } + const el = messageElement || getNotificationHTMLElement() NotificationApi.add(props, el) } -const Message: any = { +type MessageTypeFn = (content: JointContent, duration?: number, onClose?: () => void) => void + +const Message: Record & { + open: (args: ArgsProps) => void + destroy: (key?: React.Key) => void +} = { open: notice, destroy: (key?: React.Key) => { NotificationApi.destroy(key) diff --git a/components/notification-base/notice.tsx b/components/notification-base/notice.tsx index 9b128d2b..0cf1dba5 100644 --- a/components/notification-base/notice.tsx +++ b/components/notification-base/notice.tsx @@ -12,7 +12,7 @@ export interface NoticeProps { content: React.ReactNode closable: boolean duration: number - onClose?: (key?: any) => void + onClose?: (key?: React.Key) => void type?: NotificationType suffixCls: string key: React.Key @@ -35,9 +35,9 @@ const Notice: FC = (props) => { key, } = noticeProps const noticePrefixCls = getPrefixCls!(prefixCls, suffixCls, customPrefixcls) - let timer: any = null + let timer: ReturnType | null = null let isTransition = false - const noticeRef = useRef() + const noticeRef = useRef(null) const noticeClasses = classNames(noticePrefixCls, className, { [`${noticePrefixCls}-${type}`]: type, diff --git a/components/notification-base/notification.tsx b/components/notification-base/notification.tsx index 7bf14faa..2c7b8564 100644 --- a/components/notification-base/notification.tsx +++ b/components/notification-base/notification.tsx @@ -5,6 +5,13 @@ export interface NotificationProps extends NoticeProps { placement: string } +export interface INotificationRef { + add: (props: NotificationProps) => void + remove: (key?: React.Key) => void + placement: string + notices: NotificationProps[] +} + let seed = 0 const now = Date.now() @@ -14,7 +21,7 @@ function getUuid() { return `msg_${now}_${id}` } -const Notification = React.forwardRef((props, ref) => { +const Notification = React.forwardRef((props, ref) => { const { placement } = props const [notices, setNotices] = useState([]) @@ -47,7 +54,7 @@ const Notification = React.forwardRef((props, ref) = } const remove = (key: React.Key) => { - setNotices((preNotices) => preNotices.filter((notice: any) => notice.key !== key)) + setNotices((preNotices) => preNotices.filter((notice: NotificationProps) => notice.key !== key)) } const onClose = (notice: NotificationProps) => {