瀏覽代碼

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

tags/1.8.0
crazywoola 2 月之前
父節點
當前提交
aa71f88e1b
No account linked to committer's email address
共有 2 個文件被更改,包括 22 次插入8 次删除
  1. 18
    8
      web/app/account/account-page/AvatarWithEdit.tsx
  2. 4
    0
      web/app/components/base/avatar/index.tsx

+ 18
- 8
web/app/account/account-page/AvatarWithEdit.tsx 查看文件

@@ -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>

+ 4
- 0
web/app/components/base/avatar/index.tsx 查看文件

@@ -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)}
/>
)
}

Loading…
取消
儲存