signal-desktop/ts/components/conversation/ScrollDownButton.tsx
2022-06-13 16:37:29 -07:00

51 lines
1.1 KiB
TypeScript

// Copyright 2019-2020 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import type { LocalizerType } from '../../types/Util';
export type Props = {
unreadCount?: number;
conversationId: string;
scrollDown: (conversationId: string) => void;
i18n: LocalizerType;
};
export const ScrollDownButton = ({
conversationId,
unreadCount,
i18n,
scrollDown,
}: Props): JSX.Element => {
const altText = unreadCount ? i18n('messagesBelow') : i18n('scrollDown');
let badgeText: string | undefined;
if (unreadCount) {
if (unreadCount < 100) {
badgeText = unreadCount.toString();
} else {
badgeText = '99+';
}
}
return (
<div className="ScrollDownButton">
<button
type="button"
className="ScrollDownButton__button"
onClick={() => {
scrollDown(conversationId);
}}
title={altText}
>
{badgeText ? (
<div className="ScrollDownButton__button__badge">{badgeText}</div>
) : null}
<div className="ScrollDownButton__button__icon" />
</button>
</div>
);
};