69 lines
1.6 KiB
TypeScript
69 lines
1.6 KiB
TypeScript
// Copyright 2019 Signal Messenger, LLC
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
import classNames from 'classnames';
|
|
import React from 'react';
|
|
|
|
import type { LocalizerType } from '../../types/Util';
|
|
import { getClassNamesFor } from '../../util/getClassNamesFor';
|
|
|
|
export enum ScrollDownButtonVariant {
|
|
UNREAD_MESSAGES = 'unread-messages',
|
|
UNREAD_MENTIONS = 'unread-mentions',
|
|
}
|
|
|
|
export type ScrollDownButtonPropsType = {
|
|
variant: ScrollDownButtonVariant;
|
|
count?: number;
|
|
onClick: VoidFunction;
|
|
i18n: LocalizerType;
|
|
};
|
|
|
|
export function ScrollDownButton({
|
|
variant,
|
|
count,
|
|
onClick,
|
|
i18n,
|
|
}: ScrollDownButtonPropsType): JSX.Element {
|
|
const getClassName = getClassNamesFor('ScrollDownButton');
|
|
|
|
let badgeText: string | undefined;
|
|
if (count) {
|
|
if (count < 100) {
|
|
badgeText = count.toString();
|
|
} else {
|
|
badgeText = '99+';
|
|
}
|
|
}
|
|
|
|
let altText: string;
|
|
switch (variant) {
|
|
case ScrollDownButtonVariant.UNREAD_MESSAGES:
|
|
altText = count ? i18n('icu:messagesBelow') : i18n('icu:scrollDown');
|
|
break;
|
|
case ScrollDownButtonVariant.UNREAD_MENTIONS:
|
|
altText = i18n('icu:mentionsBelow');
|
|
break;
|
|
default:
|
|
throw new Error(`Unexpected variant: ${variant}`);
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
className={classNames(getClassName(''), getClassName(`__${variant}`))}
|
|
onClick={onClick}
|
|
title={altText}
|
|
>
|
|
{badgeText ? (
|
|
<div className={getClassName('__badge')}>{badgeText}</div>
|
|
) : null}
|
|
<div
|
|
className={classNames(
|
|
getClassName('__icon'),
|
|
getClassName(`__icon--${variant}`)
|
|
)}
|
|
/>
|
|
</button>
|
|
);
|
|
}
|