|
1 | 1 | import clsx from 'clsx'; |
2 | | -import React, { useEffect, useState } from 'react'; |
3 | | -import type { UserResponse } from 'stream-chat'; |
4 | | - |
5 | | -import { Icon } from '../Threads/icons'; |
6 | | -import { getWholeChar } from '../../utils'; |
| 2 | +import React, { |
| 3 | + type ComponentPropsWithoutRef, |
| 4 | + useEffect, |
| 5 | + useMemo, |
| 6 | + useState, |
| 7 | +} from 'react'; |
7 | 8 |
|
8 | 9 | export type AvatarProps = { |
9 | | - /** Custom root element class that will be merged with the default class */ |
10 | | - className?: string; |
11 | 10 | /** Image URL or default is an image of the first initial of the name if there is one */ |
12 | | - image?: string | null; |
13 | | - /** Name of the image, used for title tag fallback */ |
14 | | - name?: string; |
15 | | - /** click event handler attached to the component root element */ |
16 | | - onClick?: (event: React.BaseSyntheticEvent) => void; |
17 | | - /** mouseOver event handler attached to the component root element */ |
18 | | - onMouseOver?: (event: React.BaseSyntheticEvent) => void; |
19 | | - /** The entire user object for the chat user displayed in the component */ |
20 | | - user?: UserResponse; |
| 11 | + imageUrl?: string | null; |
| 12 | + // /** Name of the image, used for title tag fallback */ |
| 13 | + userName?: string; |
| 14 | + /** Online status indicator, not rendered if not of type boolean */ |
| 15 | + isOnline?: boolean; |
| 16 | + |
| 17 | + size: 'xl' | 'lg' | 'md' | 'sm' | 'xs' | null; |
| 18 | +} & ComponentPropsWithoutRef<'div'>; |
| 19 | + |
| 20 | +const getInitials = (name?: string) => { |
| 21 | + const regex = /(\p{L}{1})\p{L}+/gu; |
| 22 | + |
| 23 | + if (!name || name.trim().length === 0) { |
| 24 | + return ''; |
| 25 | + } |
| 26 | + |
| 27 | + const initials = Array.from(name?.matchAll(regex) || []); |
| 28 | + |
| 29 | + if (!initials.length) { |
| 30 | + return ''; |
| 31 | + } |
| 32 | + |
| 33 | + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion |
| 34 | + const startInitial = initials.at(0)![1]; |
| 35 | + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion |
| 36 | + const endInitial = initials.length > 1 ? initials.at(-1)![1] : ''; |
| 37 | + |
| 38 | + return `${startInitial}${endInitial}`; |
21 | 39 | }; |
22 | 40 |
|
23 | 41 | /** |
24 | 42 | * A round avatar image with fallback to username's first letter |
25 | 43 | */ |
26 | | -export const Avatar = (props: AvatarProps) => { |
27 | | - const { |
28 | | - className, |
29 | | - image, |
30 | | - name, |
31 | | - onClick = () => undefined, |
32 | | - onMouseOver = () => undefined, |
33 | | - } = props; |
34 | | - |
| 44 | +export const Avatar = ({ |
| 45 | + className, |
| 46 | + imageUrl, |
| 47 | + isOnline, |
| 48 | + size, |
| 49 | + userName, |
| 50 | + ...rest |
| 51 | +}: AvatarProps) => { |
35 | 52 | const [error, setError] = useState(false); |
36 | 53 |
|
37 | | - useEffect(() => { |
38 | | - setError(false); |
39 | | - }, [image]); |
| 54 | + useEffect(() => () => setError(false), [imageUrl]); |
| 55 | + |
| 56 | + const nameString = userName?.toString() || ''; |
| 57 | + |
| 58 | + const sizeAwareInitials = useMemo(() => { |
| 59 | + const initials = getInitials(nameString); |
| 60 | + |
| 61 | + if (size === 'sm' || size === 'xs') { |
| 62 | + return getInitials(nameString).charAt(0); |
| 63 | + } |
40 | 64 |
|
41 | | - const nameStr = name?.toString() || ''; |
42 | | - const initials = getWholeChar(nameStr, 0); |
43 | | - const showImage = image && !error; |
| 65 | + return initials; |
| 66 | + }, [nameString, size]); |
| 67 | + |
| 68 | + const showImage = typeof imageUrl === 'string' && !error; |
44 | 69 |
|
45 | 70 | return ( |
46 | 71 | <div |
47 | | - className={clsx(`str-chat__avatar str-chat__message-sender-avatar`, className, { |
48 | | - ['str-chat__avatar--multiple-letters']: initials.length > 1, |
49 | | - ['str-chat__avatar--no-letters']: !initials.length, |
50 | | - ['str-chat__avatar--one-letter']: initials.length === 1, |
| 72 | + className={clsx(`str-chat__avatar`, className, { |
| 73 | + 'str-chat__avatar--multiple-letters': sizeAwareInitials.length > 1, |
| 74 | + 'str-chat__avatar--no-letters': !sizeAwareInitials.length, |
| 75 | + 'str-chat__avatar--one-letter': sizeAwareInitials.length === 1, |
| 76 | + 'str-chat__avatar--online': typeof isOnline === 'boolean' && isOnline, |
| 77 | + // eslint-disable-next-line sort-keys |
| 78 | + 'str-chat__avatar--offline': typeof isOnline === 'boolean' && !isOnline, |
| 79 | + [`str-chat__avatar--size-${size}`]: typeof size === 'string', |
51 | 80 | })} |
52 | 81 | data-testid='avatar' |
53 | | - onClick={onClick} |
54 | | - onMouseOver={onMouseOver} |
55 | 82 | role='button' |
56 | | - title={name} |
| 83 | + title={userName} |
| 84 | + {...rest} |
57 | 85 | > |
58 | 86 | {showImage ? ( |
59 | 87 | <img |
60 | | - alt={initials} |
| 88 | + alt={sizeAwareInitials} |
61 | 89 | className='str-chat__avatar-image' |
62 | 90 | data-testid='avatar-img' |
63 | 91 | onError={() => setError(true)} |
64 | | - src={image} |
| 92 | + src={imageUrl} |
65 | 93 | /> |
66 | 94 | ) : ( |
67 | 95 | <> |
68 | | - {!!initials.length && ( |
| 96 | + {!!sizeAwareInitials.length && ( |
69 | 97 | <div |
70 | | - className={clsx('str-chat__avatar-fallback')} |
| 98 | + className={clsx('str-chat__avatar-initials')} |
71 | 99 | data-testid='avatar-fallback' |
72 | 100 | > |
73 | | - {initials} |
| 101 | + {sizeAwareInitials} |
74 | 102 | </div> |
75 | 103 | )} |
76 | | - {!initials.length && <Icon.User />} |
| 104 | + {!sizeAwareInitials.length && ( |
| 105 | + <svg |
| 106 | + className='str-chat__avatar-icon' |
| 107 | + fill='none' |
| 108 | + height='32' |
| 109 | + viewBox='0 0 32 32' |
| 110 | + width='32' |
| 111 | + xmlns='http://www.w3.org/2000/svg' |
| 112 | + > |
| 113 | + <path |
| 114 | + d='M21 8.66666C21 11.4281 18.7615 13.6667 16 13.6667C13.2386 13.6667 11 11.4281 11 8.66666C11 5.90523 13.2386 3.66666 16 3.66666C18.7615 3.66666 21 5.90523 21 8.66666Z' |
| 115 | + stroke='#142F63' |
| 116 | + strokeLinejoin='round' |
| 117 | + strokeWidth='2' |
| 118 | + /> |
| 119 | + <path |
| 120 | + d='M16.0015 17.6667C11.48 17.6667 8.04948 20.3524 6.6448 24.1505C6.09973 25.6243 7.35925 27 8.93061 27H23.0724C24.6437 27 25.9032 25.6243 25.3581 24.1505C23.9535 20.3524 20.5231 17.6667 16.0015 17.6667Z' |
| 121 | + stroke='#142F63' |
| 122 | + strokeLinejoin='round' |
| 123 | + strokeWidth='2' |
| 124 | + /> |
| 125 | + </svg> |
| 126 | + )} |
77 | 127 | </> |
78 | 128 | )} |
79 | 129 | </div> |
|
0 commit comments