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

[Refactoring] Spoiler: Use BEM

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-01-28 02:11:05 +01:00
parent a71a13414a
commit c12b58a9f1
3 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/common/spoiler/Spoiler.scss
View File

@ -1,5 +1,5 @@
.Spoiler { .Spoiler {
&.concealed { &--concealed {
cursor: pointer; cursor: pointer;
background-image: url('../../../assets/spoiler-dots-black.png'); background-image: url('../../../assets/spoiler-dots-black.png');
background-size: auto min(100%, 1.125rem); background-size: auto min(100%, 1.125rem);
@ -17,16 +17,16 @@
} }
} }
&.animated { &--animated {
animation: pulse-opacity-light 1.75s linear infinite; animation: pulse-opacity-light 1.75s linear infinite;
} }
span { &__content {
opacity: 1; opacity: 1;
transition: opacity 250ms ease; transition: opacity 250ms ease;
} }
&.concealed span { &--concealed &__content {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
} }

8
src/components/common/spoiler/Spoiler.tsx
View File

@ -3,7 +3,7 @@ import React, {
FC, memo, useCallback, useEffect, FC, memo, useCallback, useEffect,
} from '../../../lib/teact/teact'; } from '../../../lib/teact/teact';
import buildClassName from '../../../util/buildClassName'; import { createClassNameBuilder } from '../../../util/buildClassName';
import useFlag from '../../../hooks/useFlag'; import useFlag from '../../../hooks/useFlag';
import './Spoiler.scss'; import './Spoiler.scss';
@ -15,6 +15,8 @@ type OwnProps = {
const spoilersByMessageId: Map<number, VoidFunction[]> = new Map(); const spoilersByMessageId: Map<number, VoidFunction[]> = new Map();
const buildClassName = createClassNameBuilder('Spoiler');
const Spoiler: FC<OwnProps> = ({ const Spoiler: FC<OwnProps> = ({
children, children,
messageId, messageId,
@ -47,13 +49,13 @@ const Spoiler: FC<OwnProps> = ({
return ( return (
<span <span
className={buildClassName( className={buildClassName(
'Spoiler', '&',
!isRevealed && 'concealed', !isRevealed && 'concealed',
!isRevealed && Boolean(messageId) && 'animated', !isRevealed && Boolean(messageId) && 'animated',
)} )}
onClick={messageId && !isRevealed ? handleClick : undefined} onClick={messageId && !isRevealed ? handleClick : undefined}
> >
<span> <span className={buildClassName('content')}>
{children} {children}
</span> </span>
</span> </span>

18
src/util/buildClassName.ts
View File

@ -1,5 +1,19 @@
type Parts = (string | false | undefined)[]; type Parts = (string | false | undefined)[];
export default (...parts: Parts) => { export default function buildClassName(...parts: Parts) {
return parts.filter(Boolean).join(' '); return parts.filter(Boolean).join(' ');
}; }
export function createClassNameBuilder(componentName: string) {
return (elementName: string, ...modifiers: Parts) => {
const baseName = elementName === '&' ? componentName : `${componentName}__${elementName}`;
return modifiers.reduce((acc, modifier) => {
if (modifier) {
acc.push(`${baseName}--${modifier}`);
}
return acc;
}, [baseName]).join(' ');
};
}