ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Refactoring] Avatar: Get rid of tag selectors

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-03-19 21:19:43 +01:00
parent 3af50d1516
commit a0679c31c3
4 changed files with 23 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/common/Avatar.scss
View File

@ -13,7 +13,7 @@
white-space: nowrap; white-space: nowrap;
user-select: none; user-select: none;
img:not(.emoji) { &__img {
border-radius: 50%; border-radius: 50%;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -24,7 +24,7 @@
height: 1rem; height: 1rem;
} }
i { &__icon {
font-size: 2.5rem; font-size: 2.5rem;
&.icon-reply-filled { &.icon-reply-filled {
@ -94,7 +94,7 @@
height: 7.5rem; height: 7.5rem;
font-size: 3.5rem; font-size: 3.5rem;
i { &__i {
font-size: 6rem; font-size: 6rem;
} }

19
src/components/common/Avatar.tsx
View File

@ -17,7 +17,7 @@ import {
isUserOnline, isUserOnline,
} from '../../global/helpers'; } from '../../global/helpers';
import { getFirstLetters } from '../../util/textFormat'; import { getFirstLetters } from '../../util/textFormat';
import buildClassName from '../../util/buildClassName'; import buildClassName, { createClassNameBuilder } from '../../util/buildClassName';
import renderText from './helpers/renderText'; import renderText from './helpers/renderText';
import useMedia from '../../hooks/useMedia'; import useMedia from '../../hooks/useMedia';
import useShowTransition from '../../hooks/useShowTransition'; import useShowTransition from '../../hooks/useShowTransition';
@ -25,6 +25,10 @@ import useLang from '../../hooks/useLang';
import './Avatar.scss'; import './Avatar.scss';
const cn = createClassNameBuilder('Avatar');
cn.img = cn('img');
cn.icon = cn('icon');
type OwnProps = { type OwnProps = {
className?: string; className?: string;
size?: 'micro' | 'tiny' | 'small' | 'medium' | 'large' | 'jumbo'; size?: 'micro' | 'tiny' | 'small' | 'medium' | 'large' | 'jumbo';
@ -73,14 +77,19 @@ const Avatar: FC<OwnProps> = ({
let content: string | undefined = ''; let content: string | undefined = '';
if (isSavedMessages) { if (isSavedMessages) {
content = <i className="icon-avatar-saved-messages" />; content = <i className={buildClassName(cn.icon, 'icon-avatar-saved-messages')} />;
} else if (isDeleted) { } else if (isDeleted) {
content = <i className="icon-avatar-deleted-account" />; content = <i className={buildClassName(cn.icon, 'icon-avatar-deleted-account')} />;
} else if (isReplies) { } else if (isReplies) {
content = <i className="icon-reply-filled" />; content = <i className={buildClassName(cn.icon, 'icon-reply-filled')} />;
} else if (blobUrl) { } else if (blobUrl) {
content = ( content = (
<img src={blobUrl} className={buildClassName('avatar-media', transitionClassNames)} alt="" decoding="async" /> <img
src={blobUrl}
className={buildClassName(cn.img, 'avatar-media', transitionClassNames)}
alt=""
decoding="async"
/>
); );
} else if (user) { } else if (user) {
const userFullName = getUserFullName(user); const userFullName = getUserFullName(user);

2
src/components/common/PickerSelectedItem.scss
View File

@ -68,7 +68,7 @@
flex-shrink: 0; flex-shrink: 0;
transition: opacity 0.15s ease; transition: opacity 0.15s ease;
i { .Avatar__icon, i {
font-size: 2rem; font-size: 2rem;
} }
} }

7
src/util/buildClassName.ts
View File

@ -1,12 +1,15 @@
type Parts = (string | false | undefined)[]; type Parts = (string | false | undefined)[];
type PartsWithGlobals = (string | false | undefined | string[])[]; type PartsWithGlobals = (string | false | undefined | string[])[];
type ClassNameBuilder =
((elementName: string, ...modifiers: PartsWithGlobals) => string)
& Record<string, string>;
export default function buildClassName(...parts: Parts) { export default function buildClassName(...parts: Parts) {
return parts.filter(Boolean).join(' '); return parts.filter(Boolean).join(' ');
} }
export function createClassNameBuilder(componentName: string) { export function createClassNameBuilder(componentName: string) {
return (elementName: string, ...modifiers: PartsWithGlobals) => { return ((elementName: string, ...modifiers: PartsWithGlobals) => {
const baseName = elementName === '&' ? componentName : `${componentName}__${elementName}`; const baseName = elementName === '&' ? componentName : `${componentName}__${elementName}`;
return modifiers.reduce<string[]>((acc, modifier) => { return modifiers.reduce<string[]>((acc, modifier) => {
@ -21,5 +24,5 @@ export function createClassNameBuilder(componentName: string) {
return acc; return acc;
}, [baseName]).join(' '); }, [baseName]).join(' ');
}; }) as ClassNameBuilder;
} }