From 98c3d0af845354c969ff01feb35ec2ab3a46b091 Mon Sep 17 00:00:00 2001 From: kenzyyang <827506072@qq.com> Date: Tue, 7 Dec 2021 21:57:00 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20notification=20=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E6=8F=92=E4=BB=B6=E5=8C=96=E4=BD=BF=E7=94=A8=E6=96=B9=E5=BC=8F?= =?UTF-8?q?=E7=A0=B4=E5=9D=8F=E6=80=A7=E4=BF=AE=E6=94=B9=EF=BC=8C=E6=94=AF?= =?UTF-8?q?=E6=8C=81=20NotificationPlugin,notification=20=E7=9A=84?= =?UTF-8?q?=E8=B0=83=E7=94=A8=EF=BC=8C=E5=BA=9F=E5=BC=83=20Notification.in?= =?UTF-8?q?fo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/notification/Notification.tsx | 85 ++----------------------- src/notification/NotificationPlugin.ts | 75 ++++++++++++++++++++++ src/notification/_example/close-all.jsx | 12 ++-- src/notification/_example/placement.jsx | 4 +- src/notification/_example/plugin.jsx | 10 +-- src/notification/_example/toggle.jsx | 6 +- src/notification/index.ts | 3 + 7 files changed, 98 insertions(+), 97 deletions(-) create mode 100644 src/notification/NotificationPlugin.ts diff --git a/src/notification/Notification.tsx b/src/notification/Notification.tsx index 05083e6cd..d89340f17 100644 --- a/src/notification/Notification.tsx +++ b/src/notification/Notification.tsx @@ -1,37 +1,14 @@ import * as React from 'react'; -import { CloseIcon, InfoCircleFilledIcon, CheckCircleFilledIcon } from 'tdesign-icons-react'; +import { CheckCircleFilledIcon, CloseIcon, InfoCircleFilledIcon } from 'tdesign-icons-react'; import noop from '../_util/noop'; import useConfig from '../_util/useConfig'; -import { - NotificationCloseMethod, - NotificationErrorMethod, - NotificationInfoMethod, - NotificationSuccessMethod, - NotificationWarningMethod, - TdNotificationProps, - NotificationThemeList, - NotificationInfoOptions, - NotificationInstance, - NotificationPlacementList, - NotificationCloseAllMethod, -} from './type'; +import { NotificationInstance, TdNotificationProps } from './type'; import { Styles } from '../common'; -import { fetchListInstance, listMap } from './NotificationList'; const blockName = 'notification'; -// 扩展接口声明的结构，用户使用时可得到 .info 的 ts 提示 -interface Notification extends React.FC { - info: NotificationInfoMethod; - success: NotificationSuccessMethod; - warning: NotificationWarningMethod; - error: NotificationErrorMethod; - closeAll: NotificationCloseAllMethod; - close: NotificationCloseMethod; -} - -interface NotificationProps extends TdNotificationProps { +export interface NotificationProps extends TdNotificationProps { style?: Styles; } @@ -150,58 +127,4 @@ export const NotificationComponent = React.forwardRef((p ); }); -/** - * @author kenzyyang - * @date 2021-05-30 22:54:39 - * @desc 函数调用时的渲染函数 - * @param theme 主题类型 - * @param options 通知的参数 - */ -const renderNotification = (theme: NotificationThemeList, options: NotificationInfoOptions) => { - if (typeof options !== 'object') return; - - const placement: NotificationPlacementList = (() => { - if (['top-left', 'top-right', 'bottom-left', 'bottom-right'].indexOf(options.placement) >= 0) { - return options.placement; - } - return 'top-right'; - })(); - - const attach: HTMLElement = (() => { - if (options.attach && typeof options.attach === 'string') { - const element: Element = document.querySelector(options.attach); - if (element instanceof HTMLElement) return element; - } - - if (options.attach instanceof HTMLElement) return options.attach; - - const containerId = `tdesign-notification-${placement}`; - const container = document.querySelector(`#${containerId}`); - if (container && container instanceof HTMLElement) { - return container; - } - - const element: HTMLDivElement = document.createElement('div'); - element.setAttribute('id', containerId); - document.body.appendChild(element); - return element; - })(); - - const zIndex = options.zIndex || 6000; - - return fetchListInstance(placement, attach, zIndex).then((listInstance) => listInstance.push(theme, options)); -}; - -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore -const Notification: Notification = NotificationComponent; - -['info', 'success', 'warning', 'error'].forEach((theme: NotificationThemeList) => { - Notification[theme] = (options) => renderNotification(theme, options); -}); - -Notification.close = (promise) => promise.then((instance) => instance.close()); - -Notification.closeAll = () => listMap.forEach((list) => list.removeAll()); - -export default Notification; +export default NotificationComponent; diff --git a/src/notification/NotificationPlugin.ts b/src/notification/NotificationPlugin.ts new file mode 100644 index 000000000..9bc088002 --- /dev/null +++ b/src/notification/NotificationPlugin.ts @@ -0,0 +1,75 @@ +import { fetchListInstance, listMap } from 'tdesign-react/notification/NotificationList'; +import { + NotificationCloseAllMethod, + NotificationCloseMethod, + NotificationErrorMethod, + NotificationInfoMethod, + NotificationInfoOptions, + NotificationInstance, + NotificationOptions, + NotificationPlacementList, + NotificationSuccessMethod, + NotificationThemeList, + NotificationWarningMethod, +} from 'tdesign-react'; + +// 扩展接口声明的结构，用户使用时可得到 .info 的 ts 提示 +interface Notification { + (theme: NotificationThemeList, options: NotificationOptions): Promise; + info: NotificationInfoMethod; + success: NotificationSuccessMethod; + warning: NotificationWarningMethod; + error: NotificationErrorMethod; + closeAll: NotificationCloseAllMethod; + close: NotificationCloseMethod; +} + +/** + * @desc 函数调用时的渲染函数 + * @param theme 主题类型 + * @param options 通知的参数 + */ +const renderNotification = (theme: NotificationThemeList, options: NotificationInfoOptions) => { + if (typeof options !== 'object') return; + + const placement: NotificationPlacementList = (() => { + if (['top-left', 'top-right', 'bottom-left', 'bottom-right'].indexOf(options.placement) >= 0) { + return options.placement; + } + return 'top-right'; + })(); + + const attach: HTMLElement = (() => { + if (options.attach && typeof options.attach === 'string') { + const element: Element = document.querySelector(options.attach); + if (element instanceof HTMLElement) return element; + } + + if (options.attach instanceof HTMLElement) return options.attach; + + const containerId = `tdesign-notification-${placement}`; + const container = document.querySelector(`#${containerId}`); + if (container && container instanceof HTMLElement) { + return container; + } + + const element: HTMLDivElement = document.createElement('div'); + element.setAttribute('id', containerId); + document.body.appendChild(element); + return element; + })(); + + const zIndex = options.zIndex || 6000; + + return fetchListInstance(placement, attach, zIndex).then((listInstance) => listInstance.push(theme, options)); +}; + +export const NotificationPlugin: Notification = (theme, props) => renderNotification(theme, props); +NotificationPlugin.info = (options) => renderNotification('info', options); +NotificationPlugin.success = (options) => renderNotification('success', options); +NotificationPlugin.warning = (options) => renderNotification('warning', options); +NotificationPlugin.error = (options) => renderNotification('error', options); +NotificationPlugin.close = (promise) => promise.then((instance) => instance.close()); +NotificationPlugin.closeAll = () => listMap.forEach((list) => list.removeAll()); + +export const notification = NotificationPlugin; diff --git a/src/notification/_example/close-all.jsx b/src/notification/_example/close-all.jsx index 7066cdc19..c3c08729e 100644 --- a/src/notification/_example/close-all.jsx +++ b/src/notification/_example/close-all.jsx @@ -1,19 +1,19 @@ import React from 'react'; -import { Notification, Button } from 'tdesign-react'; +import { NotificationPlugin, Button } from 'tdesign-react'; export default function NotificationExample() { const openMore = React.useCallback(() => { - Notification.info({ + NotificationPlugin.info({ title: '标题名称', content: '这是一条需要手动关闭的消息通知', duration: 0, }); - Notification.warning({ + NotificationPlugin.warning({ title: '标题名称', content: '这是第二条通知', duration: 0, }); - Notification.error({ + NotificationPlugin.error({ title: '标题名称', content: '这是第三条通知', duration: 0, @@ -21,11 +21,11 @@ export default function NotificationExample() { }, []); const closeAll = React.useCallback(() => { - Notification.closeAll(); + NotificationPlugin.closeAll(); }, []); return ( -
+
diff --git a/src/notification/_example/placement.jsx b/src/notification/_example/placement.jsx index b2a158ee6..55aa863c4 100644 --- a/src/notification/_example/placement.jsx +++ b/src/notification/_example/placement.jsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Notification, Button, Input } from 'tdesign-react'; +import { NotificationPlugin, Button, Input } from 'tdesign-react'; export default function NotificationExample() { const [offsetY, setOffsetY] = useState(''); @@ -7,7 +7,7 @@ export default function NotificationExample() { const openNotification = React.useCallback( (placement) => { - Notification.info({ + NotificationPlugin.info({ title: '标题名称', content: '这是一条可以自动关闭的消息通知', placement, diff --git a/src/notification/_example/plugin.jsx b/src/notification/_example/plugin.jsx index 90d31dff9..dafd83dab 100644 --- a/src/notification/_example/plugin.jsx +++ b/src/notification/_example/plugin.jsx @@ -1,9 +1,9 @@ import React from 'react'; -import { Notification, Button } from 'tdesign-react'; +import { NotificationPlugin, Button } from 'tdesign-react'; export default function NotificationExample() { const openInfoNotification = React.useCallback(() => { - Notification.info({ + NotificationPlugin.info({ title: '信息', content: '这是一条可以自动关闭的消息通知', duration: 3000, @@ -11,7 +11,7 @@ export default function NotificationExample() { }, []); const openSuccessNotification = React.useCallback(() => { - Notification.success({ + NotificationPlugin.success({ title: '信息', content: '这是一条可以自动关闭的消息通知', duration: 3000, @@ -19,7 +19,7 @@ export default function NotificationExample() { }, []); const openWarningNotification = React.useCallback(() => { - Notification.warning({ + NotificationPlugin.warning({ title: '信息', content: '这是一条可以自动关闭的消息通知', duration: 3000, @@ -27,7 +27,7 @@ export default function NotificationExample() { }, []); const openErrorNotification = React.useCallback(() => { - Notification.error({ + NotificationPlugin.error({ title: '信息', content: '这是一条可以自动关闭的消息通知', duration: 3000, diff --git a/src/notification/_example/toggle.jsx b/src/notification/_example/toggle.jsx index fb5110fa6..15c9e7c23 100644 --- a/src/notification/_example/toggle.jsx +++ b/src/notification/_example/toggle.jsx @@ -1,14 +1,14 @@ import React from 'react'; -import { Notification, Button } from 'tdesign-react'; +import { NotificationPlugin, Button } from 'tdesign-react'; export default function NotificationExample() { const openNotification = React.useCallback(() => { - const notification = Notification.info({ + const notification = NotificationPlugin.info({ title: '信息', content: '这是一条可以自动关闭的消息通知', onCloseBtnClick: () => { notification.then((instance) => instance.close()); - Notification.close(notification); + NotificationPlugin.close(notification); }, }); }, []); diff --git a/src/notification/index.ts b/src/notification/index.ts index f60fc8d5f..4afc6f109 100644 --- a/src/notification/index.ts +++ b/src/notification/index.ts @@ -5,4 +5,7 @@ import './style/index.js'; export * from './type'; export const Notification = _Notification; + +export { NotificationPlugin, notification } from './NotificationPlugin'; + export default Notification;