-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: update avatar api * refactor: add avatar status, migrate avatar api * fix: eslint erro * fix: test error * fix: migrate avatar api on rebase * fix: add outline small src * fix: add changeset
- Loading branch information
1 parent
62b7ad9
commit 3641b29
Showing
18 changed files
with
290 additions
and
150 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| --- | ||
| '@mochi-ui/profile-badge': minor | ||
| '@mochi-ui/avatar': minor | ||
| '@mochi-ui/input': minor | ||
| '@mochi-ui/theme': minor | ||
| '@mochi-ui/core': minor | ||
| --- | ||
|
|
||
| update avatar api |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,70 +1,98 @@ | ||
| import * as RadixAvatar from '@radix-ui/react-avatar' | ||
| import { useId } from 'react' | ||
| import { avatar, AvatarStylesProps } from '@mochi-ui/theme' | ||
| import { | ||
| HTMLAttributes, | ||
| ImgHTMLAttributes, | ||
| PropsWithChildren, | ||
| ReactNode, | ||
| } from 'react' | ||
| import { | ||
| avatar, | ||
| AvatarStylesProps, | ||
| AvatarSmallImgStyleProps, | ||
| AvatarStatusStyleProps, | ||
| } from '@mochi-ui/theme' | ||
| import { boringAvatar } from './util' | ||
|
|
||
| const { avatarCva, avatarImgClsx } = avatar | ||
| const { avatarCva, avatarImgClsx, avatarSmallImgCva, avatarStatusWrapperCva } = | ||
| avatar | ||
|
|
||
| interface AvatarProps extends AvatarStylesProps { | ||
| type AvatarProps = PropsWithChildren<AvatarStylesProps> & { | ||
| src: string | ||
| smallSrc?: string | ||
| fallback?: string | ||
| className?: string | ||
| } | ||
| onLoadingStatusChange?: RadixAvatar.AvatarImageProps['onLoadingStatusChange'] | ||
| delayMs?: RadixAvatar.AvatarFallbackProps['delayMs'] | ||
| } & HTMLAttributes<HTMLDivElement> | ||
|
|
||
| export default function Avatar({ | ||
| size, | ||
| src, | ||
| smallSrc, | ||
| fallback = '', | ||
| onLoadingStatusChange, | ||
| delayMs, | ||
| className, | ||
| children, | ||
| ...props | ||
| }: AvatarProps) { | ||
| const id = useId() | ||
| const fallbackUrl = boringAvatar(fallback) | ||
|
|
||
| if (smallSrc) { | ||
| return ( | ||
| <div className={avatarCva({ size, className })}> | ||
| <svg height="100%" role="none" viewBox="0 0 100 100" width="100%"> | ||
| <mask id={`circle-mask-${id}`}> | ||
| <circle cx="50%" cy="50%" fill="white" r="50%" /> | ||
| <circle cx="80%" cy="80%" fill="black" r="24%" /> | ||
| </mask> | ||
| <image | ||
| height="100%" | ||
| mask={`url(#circle-mask-${id})`} | ||
| onError={(e) => { | ||
| ;(e.target as SVGImageElement).setAttribute( | ||
| 'xlink:href', | ||
| fallbackUrl, | ||
| ) | ||
| }} | ||
| width="100%" | ||
| xlinkHref={src} | ||
| className="overflow-hidden" | ||
| /> | ||
| <image | ||
| height="40%" | ||
| width="40%" | ||
| x="60%" | ||
| xlinkHref={smallSrc} | ||
| y="60%" | ||
| /> | ||
| </svg> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| return ( | ||
| <RadixAvatar.Root | ||
| className={avatarCva({ size, className: `${className} overflow-hidden` })} | ||
| > | ||
| <RadixAvatar.Image src={src} className={avatarImgClsx} /> | ||
| <RadixAvatar.Fallback> | ||
| <RadixAvatar.Root className={avatarCva({ size, className })} {...props}> | ||
| <RadixAvatar.Image | ||
| className={avatarImgClsx} | ||
| onLoadingStatusChange={onLoadingStatusChange} | ||
| src={src} | ||
| /> | ||
| {children} | ||
| <RadixAvatar.Fallback delayMs={delayMs}> | ||
| <img alt="fallback" src={fallbackUrl} /> | ||
| </RadixAvatar.Fallback> | ||
| </RadixAvatar.Root> | ||
| ) | ||
| } | ||
|
|
||
| export type AvatarSmallImageProps = AvatarSmallImgStyleProps & { | ||
| src?: string | ||
| className?: string | ||
| } & ImgHTMLAttributes<HTMLImageElement> | ||
|
|
||
| export const AvatarSmallImage = (props: AvatarSmallImageProps) => { | ||
| const { src, position = 'bottom-right', className, alt, ...restProps } = props | ||
| return ( | ||
| <img | ||
| className={avatarSmallImgCva({ position, className })} | ||
| src={src} | ||
| alt={alt} | ||
| {...restProps} | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| export type AvatarStatusProps = AvatarStatusStyleProps & { | ||
| className?: string | ||
| children?: ReactNode | ||
| } & HTMLAttributes<HTMLDivElement> | ||
|
|
||
| export const AvatarStatus = (props: AvatarStatusProps) => { | ||
| const { | ||
| position = 'bottom-right', | ||
| color = 'success', | ||
| className, | ||
| children, | ||
| ...restProps | ||
| } = props | ||
| return ( | ||
| <div | ||
| className={avatarStatusWrapperCva({ color, className, position })} | ||
| {...restProps} | ||
| > | ||
| {children || ( | ||
| <svg height="100%" width="100%"> | ||
| <circle r="50%" cx="50%" cy="50%" fill="currentColor" /> | ||
| </svg> | ||
| )} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export { type AvatarProps } |
Oops, something went wrong.
3641b29There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
websites-mochi – ./apps/mochi-web
websites-mochi-git-main-consolelabs.vercel.app
websites-mochi-consolelabs.vercel.app
beta.mochi.gg
websites-mochi.vercel.app