fix(drawer/modal): fix banner ts error in drawer/modal (#602)

fix #601

Author: LuckyFBB

src/drawer/index.tsx

@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import { omit } from 'lodash-es';
 import RcDrawer, { DrawerProps as AntdDrawerProps } from 'rc-drawer';
 
+import { isAlertObjectProps } from '../utils';
 import motionProps from './motion';
 import './style.scss';
 
@@ -67,11 +68,6 @@ const getWidthFromSize = (size: DrawerProps['size']) => {
     return `${(DrawerSize.Default / 1440) * 100}%`;
 };
 
-const isValidBanner = (banner: DrawerProps['banner']): banner is AlertProps['message'] => {
-    if (typeof banner === 'object') return React.isValidElement(banner);
-    return true;
-};
-
 const Drawer = <T extends readOnlyTab>(props: DrawerProps<T>) => {
     const drawerPrefixCls = 'dtc-drawer';
 
@@ -148,9 +144,9 @@ const Drawer = <T extends readOnlyTab>(props: DrawerProps<T>) => {
                 )}
                 {banner && (
                     <Alert
-                        message={isValidBanner(banner) ? banner : (banner as any).message}
+                        message={isAlertObjectProps(banner) ? banner.message : banner}
                         banner
-                        {...(isValidBanner(banner) ? {} : omit(banner, 'message'))}
+                        {...(isAlertObjectProps(banner) ? omit(banner, 'message') : {})}
                     />
                 )}
                 {isTabMode(props) && (

src/modal/modal.tsx

@@ -6,6 +6,7 @@ import { omit } from 'lodash-es';
 
 import Float, { type IFloatProps } from '../float';
 import useMergeOption, { type MergeOption } from '../useMergeOption';
+import { isAlertObjectProps } from '../utils';
 import Handler from './handle';
 import './index.scss';
 
@@ -29,11 +30,6 @@ const getWidthFromSize = (size: IModalProps['size']) => {
     return 520;
 };
 
-const isValidBanner = (banner: IModalProps['banner']): banner is AlertProps['message'] => {
-    if (typeof banner === 'object') return React.isValidElement(banner);
-    return true;
-};
-
 export default function InternalModal({
     bodyStyle,
     banner,
@@ -138,9 +134,9 @@ export default function InternalModal({
             {banner && (
                 <Alert
                     className="dtc-modal-alert"
-                    message={isValidBanner(banner) ? banner : banner.message}
+                    message={isAlertObjectProps(banner) ? banner.message : banner}
                     banner
-                    {...(isValidBanner(banner) ? {} : omit(banner, 'message'))}
+                    {...(isAlertObjectProps(banner) ? omit(banner, 'message') : {})}
                 />
             )}
             <section className="dtc-modal-body">{children}</section>

src/utils/index.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TooltipProps } from 'antd';
+import { AlertProps, TooltipProps } from 'antd';
 
 export type LabelTooltipType = TooltipProps | TooltipProps['title'];
 
@@ -11,3 +11,14 @@ export function toTooltipProps(tooltip: LabelTooltipType): TooltipProps | null {
         title: tooltip,
     };
 }
+
+type BannerPropType = AlertProps['message'] | Omit<AlertProps, 'banner'>;
+
+export function isAlertObjectProps(banner: BannerPropType): banner is Omit<AlertProps, 'banner'> {
+    return (
+        typeof banner === 'object' &&
+        banner !== null &&
+        !React.isValidElement(banner) &&
+        'message' in banner
+    );
+}