From e9ba37917b6a24acc79ba2d8e3c15c3938a7ed60 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 29 Sep 2022 21:38:14 +0800 Subject: [PATCH] type: strong type (#37799) --- components/avatar/avatar.tsx | 40 ++++++++++++++---------------------- components/avatar/index.tsx | 8 +++++--- 2 files changed, 20 insertions(+), 28 deletions(-) diff --git a/components/avatar/avatar.tsx b/components/avatar/avatar.tsx index b5de3cd49e..dde4c7eb6b 100644 --- a/components/avatar/avatar.tsx +++ b/components/avatar/avatar.tsx @@ -38,17 +38,19 @@ export interface AvatarProps { onError?: () => boolean; } -const InternalAvatar: React.ForwardRefRenderFunction = (props, ref) => { +const InternalAvatar: React.ForwardRefRenderFunction = ( + props, + ref, +) => { const groupSize = React.useContext(SizeContext); const [scale, setScale] = React.useState(1); const [mounted, setMounted] = React.useState(false); const [isImgExist, setIsImgExist] = React.useState(true); - const avatarNodeRef = React.useRef(); - const avatarChildrenRef = React.useRef(); - - const avatarNodeMergeRef = composeRef(ref, avatarNodeRef); + const avatarNodeRef = React.useRef(null); + const avatarChildrenRef = React.useRef(null); + const avatarNodeMergeRef = composeRef(ref, avatarNodeRef); const { getPrefixCls } = React.useContext(ConfigContext); @@ -90,8 +92,8 @@ const InternalAvatar: React.ForwardRefRenderFunction = (pr const { prefixCls: customizePrefixCls, - shape, - size: customSize, + shape = 'circle', + size: customSize = 'default', src, srcSet, icon, @@ -163,7 +165,7 @@ const InternalAvatar: React.ForwardRefRenderFunction = (pr } : {}; - let childrenToRender; + let childrenToRender: React.ReactNode; if (typeof src === 'string' && isImgExist) { childrenToRender = ( = (pr { - avatarChildrenRef.current = node; - }} + ref={avatarChildrenRef} style={{ ...sizeChildrenStyle, ...childrenStyle }} > {children} @@ -209,13 +209,7 @@ const InternalAvatar: React.ForwardRefRenderFunction = (pr ); } else { childrenToRender = ( - { - avatarChildrenRef.current = node; - }} - > + {children} ); @@ -231,21 +225,17 @@ const InternalAvatar: React.ForwardRefRenderFunction = (pr {...others} style={{ ...sizeStyle, ...responsiveSizeStyle, ...others.style }} className={classString} - ref={avatarNodeMergeRef as any} + ref={avatarNodeMergeRef} > {childrenToRender} ); }; -const Avatar = React.forwardRef(InternalAvatar); +const Avatar = React.forwardRef(InternalAvatar); + if (process.env.NODE_ENV !== 'production') { Avatar.displayName = 'Avatar'; } -Avatar.defaultProps = { - shape: 'circle' as AvatarProps['shape'], - size: 'default' as AvatarProps['size'], -}; - export default Avatar; diff --git a/components/avatar/index.tsx b/components/avatar/index.tsx index 45fc804491..1f577c93ab 100644 --- a/components/avatar/index.tsx +++ b/components/avatar/index.tsx @@ -7,12 +7,14 @@ export { AvatarProps } from './avatar'; export { GroupProps } from './group'; export { Group }; -interface CompoundedComponent - extends ForwardRefExoticComponent> { +type CompoundedComponent = ForwardRefExoticComponent< + AvatarProps & RefAttributes +> & { Group: typeof Group; -} +}; const Avatar = InternalAvatar as CompoundedComponent; + Avatar.Group = Group; export default Avatar;