feat: notification 组件，plugin 逻辑下实例 close 的逻辑通过 context 实现

Tencent · Feb 22, 2022 · 9cd0a08 · 9cd0a08
1 parent 496ed83
commit 9cd0a08
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 33 deletions.
diff --git a/src/notification/Notification.tsx b/src/notification/Notification.tsx
@@ -1,17 +1,17 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { CheckCircleFilledIcon, CloseIcon, InfoCircleFilledIcon } from 'tdesign-icons-react';
+import { NotificationRemoveContext } from 'tdesign-react/notification/NotificationList';
 import noop from '../_util/noop';
 import useConfig from '../_util/useConfig';
 
 import { NotificationInstance, TdNotificationProps } from './type';
 import { Styles } from '../common';
 
 const blockName = 'notification';
-export const notificationPluginCloseHandlerName = Symbol('notificationPluginCloseHandlerName');
 
 export interface NotificationProps extends TdNotificationProps {
   style?: Styles;
-  [notificationPluginCloseHandlerName]: () => void
+  id?: string;
 }
 
 export const NotificationComponent = forwardRef<any, NotificationProps>((props, ref) => {
@@ -26,7 +26,7 @@ export const NotificationComponent = forwardRef<any, NotificationProps>((props,
     onCloseBtnClick = noop,
     onDurationEnd = noop,
     style,
-    [notificationPluginCloseHandlerName]: close = noop,
+    id = '',
   } = props;
 
   const { classPrefix } = useConfig();
@@ -49,7 +49,8 @@ export const NotificationComponent = forwardRef<any, NotificationProps>((props,
     [classPrefix],
   );
 
-  React.useImperativeHandle(ref as React.Ref<NotificationInstance>, () => ({ close }));
+  const remove = useContext(NotificationRemoveContext);
+  React.useImperativeHandle(ref as React.Ref<NotificationInstance>, () => ({ close: () => remove(id) }));
 
   /* eslint-disable react-hooks/exhaustive-deps */
   React.useEffect(() => {

diff --git a/src/notification/NotificationList.tsx b/src/notification/NotificationList.tsx
@@ -19,6 +19,7 @@ interface NotificationListInstance extends TdNotificationProps {
 }
 
 interface NotificationListOpenOption extends NotificationInfoOptions {
+  id: string;
   key: string;
   theme: NotificationThemeList;
   style: Styles;
@@ -35,6 +36,8 @@ let seed = 0;
 
 export const listMap: Map<NotificationPlacementList, NotificationListInstance> = new Map();
 
+export const NotificationRemoveContext = React.createContext<(key: string) => void>(noop);
+
 const NotificationList = forwardRef<NotificationListInstance, NotificationListProps>((props, ref) => {
   const { placement, zIndex } = props;
   const { classPrefix } = useConfig();
@@ -43,7 +46,6 @@ const NotificationList = forwardRef<NotificationListInstance, NotificationListPr
   const remove = (key: string) => {
     setList((oldList) => {
       const index = oldList.findIndex((item) => item.key === key);
-
       if (index !== -1) {
         const tempList = [...oldList];
         tempList.splice(index, 1);
@@ -83,6 +85,7 @@ const NotificationList = forwardRef<NotificationListInstance, NotificationListPr
       theme,
       style,
       ref,
+      id: key,
     }]);
 
     return Promise.resolve(ref.current);
@@ -97,35 +100,31 @@ const NotificationList = forwardRef<NotificationListInstance, NotificationListPr
     remove,
     removeAll,
   }));
+
   return (
-    <div className={`${classPrefix}-notification__show--${placement}`} style={{ zIndex }}>
-      {list.map((props) => {
-        const { onDurationEnd = noop, onCloseBtnClick = noop } = props;
-        return (
-          <NotificationComponent
-            ref={props.ref}
-            key={props.key}
-            {
-              ...props
-            }
-            {...{
-              [notificationPluginCloseHandlerName]: () => {
+    <NotificationRemoveContext.Provider value={remove}>
+      <div className={`${classPrefix}-notification__show--${placement}`} style={{ zIndex }}>
+        {list.map((props) => {
+          const { onDurationEnd = noop, onCloseBtnClick = noop } = props;
+          return (
+            <NotificationComponent
+              ref={props.ref}
+              key={props.key}
+              {...props}
+              onDurationEnd={() => {
+                remove(props.key);
+                onDurationEnd();
+              }}
+              onCloseBtnClick={(e) => {
                 remove(props.key);
-              },
-            }}
-            onDurationEnd={() => {
-              remove(props.key);
-              onDurationEnd();
-            }}
-            onCloseBtnClick={(e) => {
-              remove(props.key);
-              onCloseBtnClick(e);
-            }}
-
-          />
-        );
-      })}
-    </div>
+                onCloseBtnClick(e);
+              }}
+
+            />
+          );
+        })}
+      </div>
+    </NotificationRemoveContext.Provider>
   );
 });