chore: hide delete action when avatar is none (#24512)
This commit is contained in:
@@ -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>
|
||||
|
@@ -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)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
Reference in New Issue
Block a user