mirror of https://github.com/msgbyte/tailchat
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
932 B
TypeScript
41 lines
932 B
TypeScript
import React, { useState } from 'react';
|
|
import { Avatar, AvatarProps } from '../Avatar';
|
|
import { Image } 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: String(props.src),
|
|
onVisibleChange: (value) => {
|
|
setVisible(value);
|
|
},
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
});
|
|
AvatarWithPreview.displayName = 'AvatarWithPreview';
|