refactor(notification): reduce the configuration parameter code (ant-…

…design#44372) * refactor(notification): reduce the configuration parameter code * chore: modify the return type definition * chore: delete the initialization function
ammar-knowledge · Aug 25, 2023 · d7d493e · d7d493e
1 parent 3405450
commit d7d493e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 51 deletions.
diff --git a/components/message/index.tsx b/components/message/index.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { render } from 'rc-util/lib/React/render';
 import * as React from 'react';
+import { render } from 'rc-util/lib/React/render';
+
 import ConfigProvider, { globalConfig, warnContext } from '../config-provider';
-import PurePanel from './PurePanel';
 import type {
   ArgsProps,
   ConfigOptions,
@@ -12,6 +12,7 @@ import type {
   NoticeType,
   TypeOpen,
 } from './interface';
+import PurePanel from './PurePanel';
 import useMessage, { useInternalMessage } from './useMessage';
 import { wrapPromiseFn } from './util';
 
@@ -70,7 +71,7 @@ function getGlobalContext() {
 
   return {
     prefixCls: mergedPrefixCls,
-    container: mergedContainer,
+    getContainer: () => mergedContainer!,
     duration,
     rtl,
     maxCount,
@@ -84,20 +85,7 @@ interface GlobalHolderRef {
 }
 
 const GlobalHolder = React.forwardRef<GlobalHolderRef, {}>((_, ref) => {
-  const initializeMessageConfig: () => ConfigOptions = () => {
-    const { prefixCls, container, maxCount, duration, rtl, top } = getGlobalContext();
-
-    return {
-      prefixCls,
-      getContainer: () => container!,
-      maxCount,
-      duration,
-      rtl,
-      top,
-    };
-  };
-
-  const [messageConfig, setMessageConfig] = React.useState<ConfigOptions>(initializeMessageConfig);
+  const [messageConfig, setMessageConfig] = React.useState<ConfigOptions>(getGlobalContext);
 
   const [api, holder] = useInternalMessage(messageConfig);
 
@@ -107,7 +95,7 @@ const GlobalHolder = React.forwardRef<GlobalHolderRef, {}>((_, ref) => {
   const theme = global.getTheme();
 
   const sync = () => {
-    setMessageConfig(initializeMessageConfig);
+    setMessageConfig(getGlobalContext);
   };
 
   React.useEffect(sync, []);

diff --git a/components/notification/index.tsx b/components/notification/index.tsx
@@ -1,10 +1,11 @@
 'use client';
 
-import { render } from 'rc-util/lib/React/render';
 import * as React from 'react';
+import { render } from 'rc-util/lib/React/render';
+
 import ConfigProvider, { globalConfig, warnContext } from '../config-provider';
-import PurePanel from './PurePanel';
 import type { ArgsProps, GlobalConfigProps, NotificationInstance } from './interface';
+import PurePanel from './PurePanel';
 import useNotification, { useInternalNotification } from './useNotification';
 
 let notification: GlobalNotification | null = null;
@@ -45,7 +46,7 @@ function getGlobalContext() {
 
   return {
     prefixCls: mergedPrefixCls,
-    container: mergedContainer,
+    getContainer: () => mergedContainer!,
     rtl,
     maxCount,
     top,
@@ -59,43 +60,18 @@ interface GlobalHolderRef {
 }
 
 const GlobalHolder = React.forwardRef<GlobalHolderRef, {}>((_, ref) => {
-  const [prefixCls, setPrefixCls] = React.useState<string>();
-  const [container, setContainer] = React.useState<HTMLElement | ShadowRoot>();
-  const [maxCount, setMaxCount] = React.useState<number>();
-  const [rtl, setRTL] = React.useState<boolean>();
-  const [top, setTop] = React.useState<number>();
-  const [bottom, setBottom] = React.useState<number>();
-
-  const [api, holder] = useInternalNotification({
-    prefixCls,
-    getContainer: () => container!,
-    maxCount,
-    rtl,
-    top,
-    bottom,
-  });
+  const [notificationConfig, setNotificationConfig] =
+    React.useState<GlobalConfigProps>(getGlobalContext);
+
+  const [api, holder] = useInternalNotification(notificationConfig);
 
   const global = globalConfig();
   const rootPrefixCls = global.getRootPrefixCls();
   const rootIconPrefixCls = global.getIconPrefixCls();
   const theme = global.getTheme();
 
   const sync = () => {
-    const {
-      prefixCls: nextGlobalPrefixCls,
-      container: nextGlobalContainer,
-      maxCount: nextGlobalMaxCount,
-      rtl: nextGlobalRTL,
-      top: nextTop,
-      bottom: nextBottom,
-    } = getGlobalContext();
-
-    setPrefixCls(nextGlobalPrefixCls);
-    setContainer(nextGlobalContainer);
-    setMaxCount(nextGlobalMaxCount);
-    setRTL(nextGlobalRTL);
-    setTop(nextTop);
-    setBottom(nextBottom);
+    setNotificationConfig(getGlobalContext);
   };
 
   React.useEffect(sync, []);