fix: type definition optimization & add key for useModal (#39701)

* fix: add key for useModal * fix * fix * fix lint * revert
ant-design · Dec 21, 2022 · b35fbcf · b35fbcf
1 parent e5c60c8
commit b35fbcf
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/components/message/useMessage.tsx b/components/message/useMessage.tsx
@@ -98,7 +98,7 @@ let keyIndex = 0;
 
 export function useInternalMessage(
   notificationConfig?: HolderProps,
-): [MessageInstance, React.ReactElement] {
+): readonly [MessageInstance, React.ReactElement] {
   const holderRef = React.useRef<HolderRef>(null);
 
   // ================================ API ================================
@@ -212,7 +212,10 @@ export function useInternalMessage(
   }, []);
 
   // ============================== Return ===============================
-  return [wrapAPI, <Holder key="message-holder" {...notificationConfig} ref={holderRef} />];
+  return [
+    wrapAPI,
+    <Holder key="message-holder" {...notificationConfig} ref={holderRef} />,
+  ] as const;
 }
 
 export default function useMessage(notificationConfig?: ConfigOptions) {

diff --git a/components/modal/useModal/index.tsx b/components/modal/useModal/index.tsx
@@ -27,7 +27,7 @@ const ElementsHolder = React.memo(
   }),
 );
 
-export default function useModal(): [Omit<ModalStaticFunctions, 'warn'>, React.ReactElement] {
+function useModal(): readonly [Omit<ModalStaticFunctions, 'warn'>, React.ReactElement] {
   const holderRef = React.useRef<ElementsHolderRef>(null);
 
   // ========================== Effect ==========================
@@ -94,7 +94,7 @@ export default function useModal(): [Omit<ModalStaticFunctions, 'warn'>, React.R
     [],
   );
 
-  const fns = React.useMemo(
+  const fns = React.useMemo<Omit<ModalStaticFunctions, 'warn'>>(
     () => ({
       info: getConfirmFunc(withInfo),
       success: getConfirmFunc(withSuccess),
@@ -105,6 +105,7 @@ export default function useModal(): [Omit<ModalStaticFunctions, 'warn'>, React.R
     [],
   );
 
-  // eslint-disable-next-line react/jsx-key
-  return [fns, <ElementsHolder ref={holderRef} />];
+  return [fns, <ElementsHolder key="modal-holder" ref={holderRef} />] as const;
 }
+
+export default useModal;
diff --git a/components/notification/useNotification.tsx b/components/notification/useNotification.tsx
@@ -84,7 +84,7 @@ const Holder = React.forwardRef<HolderRef, HolderProps>((props, ref) => {
 // ==============================================================================
 export function useInternalNotification(
   notificationConfig?: HolderProps,
-): [NotificationInstance, React.ReactElement] {
+): readonly [NotificationInstance, React.ReactElement] {
   const holderRef = React.useRef<HolderRef>(null);
 
   // ================================ API ================================
@@ -160,7 +160,10 @@ export function useInternalNotification(
   }, []);
 
   // ============================== Return ===============================
-  return [wrapAPI, <Holder key="notification-holder" {...notificationConfig} ref={holderRef} />];
+  return [
+    wrapAPI,
+    <Holder key="notification-holder" {...notificationConfig} ref={holderRef} />,
+  ] as const;
 }
 
 export default function useNotification(notificationConfig?: NotificationConfig) {