import React, { useState } from 'react'; import { Avatar, AvatarProps } from '../Avatar'; import { Image, imageUrlParser } from '../Image'; export const AvatarWithPreview: React.FC<AvatarProps> = React.memo((props) => { const [visible, setVisible] = useState(false); const hasImage = typeof props.src === 'string'; return ( <> <div style={{ cursor: hasImage ? 'pointer' : 'auto', }} onClick={() => setVisible(!visible)} > <Avatar {...props} /> </div> {hasImage && ( <div style={{ display: 'none', }} > <Image preview={{ visible, src: imageUrlParser(String(props.src)), onVisibleChange: (value) => { setVisible(value); }, }} /> </div> )} </> ); }); AvatarWithPreview.displayName = 'AvatarWithPreview';