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) => {