chore: hide delete action when avatar is none (#24512)

This commit is contained in:
crazywoola
2025-08-25 19:25:55 -07:00
committed by GitHub
parent cfb8d224da
commit aa71f88e1b
2 changed files with 22 additions and 8 deletions

View File

@@ -30,6 +30,8 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
const [isShowDeleteConfirm, setIsShowDeleteConfirm] = useState(false)
const [hoverArea, setHoverArea] = useState<string>('left')
const [onAvatarError, setOnAvatarError] = useState(false)
const handleImageInput: OnImageInput = useCallback(async (isCropped: boolean, fileOrTempUrl: string | File, croppedAreaPixels?: Area, fileName?: string) => {
setInputImageInfo(
isCropped
@@ -98,10 +100,15 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
<>
<div>
<div className="group relative">
<Avatar {...props} />
<Avatar {...props} onError={(x: boolean) => setOnAvatarError(x)} />
<div
className="absolute inset-0 flex cursor-pointer items-center justify-center rounded-full bg-black/50 opacity-0 transition-opacity group-hover:opacity-100"
onClick={() => hoverArea === 'right' ? setIsShowDeleteConfirm(true) : setIsShowAvatarPicker(true)}
onClick={() => {
if (hoverArea === 'right' && !onAvatarError)
setIsShowDeleteConfirm(true)
else
setIsShowAvatarPicker(true)
}}
onMouseMove={(e) => {
const rect = e.currentTarget.getBoundingClientRect()
const x = e.clientX - rect.left
@@ -109,12 +116,15 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
setHoverArea(isRight ? 'right' : 'left')
}}
>
{hoverArea === 'right' ? <span className="text-xs text-white">
<RiDeleteBin5Line />
</span> : <span className="text-xs text-white">
<RiPencilLine />
</span>}
{hoverArea === 'right' && !onAvatarError ? (
<span className="text-xs text-white">
<RiDeleteBin5Line />
</span>
) : (
<span className="text-xs text-white">
<RiPencilLine />
</span>
)}
</div>
</div>
</div>

View File

@@ -8,6 +8,7 @@ export type AvatarProps = {
size?: number
className?: string
textClassName?: string
onError?: (x: boolean) => void
}
const Avatar = ({
name,
@@ -15,6 +16,7 @@ const Avatar = ({
size = 30,
className,
textClassName,
onError,
}: AvatarProps) => {
const avatarClassName = 'shrink-0 flex items-center rounded-full bg-primary-600'
const style = { width: `${size}px`, height: `${size}px`, fontSize: `${size}px`, lineHeight: `${size}px` }
@@ -22,6 +24,7 @@ const Avatar = ({
const handleError = () => {
setImgError(true)
onError?.(true)
}
if (avatar && !imgError) {
@@ -32,6 +35,7 @@ const Avatar = ({
alt={name}
src={avatar}
onError={handleError}
onLoad={() => onError?.(false)}
/>
)
}