test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 11:08:45 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

type: strong type (#37799)

Browse Source
This commit is contained in:
lijianan 2022-09-29 21:38:14 +08:00 committed by GitHub
parent cfdadbf7b5
commit e9ba37917b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
components/avatar/avatar.tsx
View File

@ -38,17 +38,19 @@ export interface AvatarProps {
onError?: () => boolean; onError?: () => boolean;
} }
const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (props, ref) => { const InternalAvatar: React.ForwardRefRenderFunction<HTMLSpanElement, AvatarProps> = (
props,
ref,
) => {
const groupSize = React.useContext(SizeContext); const groupSize = React.useContext(SizeContext);
const [scale, setScale] = React.useState(1); const [scale, setScale] = React.useState(1);
const [mounted, setMounted] = React.useState(false); const [mounted, setMounted] = React.useState(false);
const [isImgExist, setIsImgExist] = React.useState(true); const [isImgExist, setIsImgExist] = React.useState(true);
const avatarNodeRef = React.useRef<HTMLElement>(); const avatarNodeRef = React.useRef<HTMLSpanElement>(null);
const avatarChildrenRef = React.useRef<HTMLElement>(); const avatarChildrenRef = React.useRef<HTMLSpanElement>(null);
const avatarNodeMergeRef = composeRef<HTMLSpanElement>(ref, avatarNodeRef);
const avatarNodeMergeRef = composeRef(ref, avatarNodeRef);
const { getPrefixCls } = React.useContext(ConfigContext); const { getPrefixCls } = React.useContext(ConfigContext);
@ -90,8 +92,8 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr
const { const {
prefixCls: customizePrefixCls, prefixCls: customizePrefixCls,
shape, shape = 'circle',
size: customSize, size: customSize = 'default',
src, src,
srcSet, srcSet,
icon, icon,
@ -163,7 +165,7 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr
} }
: {}; : {};
let childrenToRender; let childrenToRender: React.ReactNode;
if (typeof src === 'string' && isImgExist) { if (typeof src === 'string' && isImgExist) {
childrenToRender = ( childrenToRender = (
<img <img
@ -198,9 +200,7 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr
<ResizeObserver onResize={setScaleParam}> <ResizeObserver onResize={setScaleParam}>
<span <span
className={`${prefixCls}-string`} className={`${prefixCls}-string`}
ref={(node: HTMLElement) => { ref={avatarChildrenRef}
avatarChildrenRef.current = node;
}}
style={{ ...sizeChildrenStyle, ...childrenStyle }} style={{ ...sizeChildrenStyle, ...childrenStyle }}
> >
{children} {children}
@ -209,13 +209,7 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr
); );
} else { } else {
childrenToRender = ( childrenToRender = (
<span <span className={`${prefixCls}-string`} style={{ opacity: 0 }} ref={avatarChildrenRef}>
className={`${prefixCls}-string`}
style={{ opacity: 0 }}
ref={(node: HTMLElement) => {
avatarChildrenRef.current = node;
}}
>
{children} {children}
</span> </span>
); );
@ -231,21 +225,17 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr
{...others} {...others}
style={{ ...sizeStyle, ...responsiveSizeStyle, ...others.style }} style={{ ...sizeStyle, ...responsiveSizeStyle, ...others.style }}
className={classString} className={classString}
ref={avatarNodeMergeRef as any} ref={avatarNodeMergeRef}
> >
{childrenToRender} {childrenToRender}
</span> </span>
); );
}; };
const Avatar = React.forwardRef<unknown, AvatarProps>(InternalAvatar); const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(InternalAvatar);
if (process.env.NODE_ENV !== 'production') { if (process.env.NODE_ENV !== 'production') {
Avatar.displayName = 'Avatar'; Avatar.displayName = 'Avatar';
} }
Avatar.defaultProps = {
shape: 'circle' as AvatarProps['shape'],
size: 'default' as AvatarProps['size'],
};
export default Avatar; export default Avatar;

8
components/avatar/index.tsx
View File

@ -7,12 +7,14 @@ export { AvatarProps } from './avatar';
export { GroupProps } from './group'; export { GroupProps } from './group';
export { Group }; export { Group };
interface CompoundedComponent type CompoundedComponent = ForwardRefExoticComponent<
extends ForwardRefExoticComponent<AvatarProps & RefAttributes<HTMLElement>> { AvatarProps & RefAttributes<HTMLSpanElement>
> & {
Group: typeof Group; Group: typeof Group;
} };
const Avatar = InternalAvatar as CompoundedComponent; const Avatar = InternalAvatar as CompoundedComponent;
Avatar.Group = Group; Avatar.Group = Group;
export default Avatar; export default Avatar;