92 lines
2.6 KiB
TypeScript
92 lines
2.6 KiB
TypeScript
import React, {
|
|
FC, memo,
|
|
} from '../../../lib/teact/teact';
|
|
import { ApiSticker, ApiStickerSet } from '../../../api/types';
|
|
|
|
import { STICKER_SIZE_GENERAL_SETTINGS } from '../../../config';
|
|
import { ObserveFn } from '../../../hooks/useIntersectionObserver';
|
|
import useLang from '../../../hooks/useLang';
|
|
|
|
import ListItem from '../../ui/ListItem';
|
|
import Button from '../../ui/Button';
|
|
import StickerSetCoverAnimated from '../../middle/composer/StickerSetCoverAnimated';
|
|
import StickerSetCover from '../../middle/composer/StickerSetCover';
|
|
import StickerButton from '../../common/StickerButton';
|
|
|
|
import './SettingsStickerSet.scss';
|
|
|
|
type OwnProps = {
|
|
stickerSet?: ApiStickerSet;
|
|
observeIntersection: ObserveFn;
|
|
onClick: (value: ApiSticker) => void;
|
|
};
|
|
|
|
const SettingsStickerSet: FC<OwnProps> = ({
|
|
stickerSet,
|
|
observeIntersection,
|
|
onClick,
|
|
}) => {
|
|
const lang = useLang();
|
|
|
|
if (!stickerSet || !stickerSet.stickers) {
|
|
return undefined;
|
|
}
|
|
|
|
const firstSticker = stickerSet.stickers?.[0];
|
|
|
|
if (stickerSet.hasThumbnail || !firstSticker) {
|
|
return (
|
|
<ListItem
|
|
narrow
|
|
className="SettingsStickerSet"
|
|
inactive={!firstSticker}
|
|
onClick={() => firstSticker && onClick(firstSticker)}
|
|
>
|
|
<Button
|
|
ariaLabel={stickerSet.title}
|
|
color="translucent"
|
|
isRtl={lang.isRtl}
|
|
>
|
|
{stickerSet.isAnimated ? (
|
|
<StickerSetCoverAnimated
|
|
size={STICKER_SIZE_GENERAL_SETTINGS}
|
|
stickerSet={stickerSet}
|
|
observeIntersection={observeIntersection}
|
|
/>
|
|
) : (
|
|
<StickerSetCover
|
|
stickerSet={stickerSet}
|
|
observeIntersection={observeIntersection}
|
|
/>
|
|
)}
|
|
</Button>
|
|
<div className="multiline-menu-item">
|
|
<div className="title">{stickerSet.title}</div>
|
|
<div className="subtitle">{lang('StickerPack.StickerCount', stickerSet.count, 'i')}</div>
|
|
</div>
|
|
</ListItem>
|
|
);
|
|
} else {
|
|
return (
|
|
<ListItem
|
|
narrow
|
|
className="SettingsStickerSet"
|
|
onClick={() => onClick(firstSticker)}
|
|
>
|
|
<StickerButton
|
|
sticker={firstSticker}
|
|
size={STICKER_SIZE_GENERAL_SETTINGS}
|
|
title={stickerSet.title}
|
|
observeIntersection={observeIntersection}
|
|
/>
|
|
<div className="multiline-menu-item">
|
|
<div className="title">{stickerSet.title}</div>
|
|
<div className="subtitle">{lang('StickerPack.StickerCount', stickerSet.count, 'i')}</div>
|
|
</div>
|
|
</ListItem>
|
|
);
|
|
}
|
|
};
|
|
|
|
export default memo(SettingsStickerSet);
|