66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
|
// Copyright 2021 Signal Messenger, LLC
|
||
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
||
|
|
|
||
|
|
import React, { ReactNode } from 'react';
|
||
|
|
|
||
|
|
import { LocalizerType } from '../../types/Util';
|
||
|
|
|
||
|
|
const CLASS_NAME = 'module-TimelineWarning';
|
||
|
|
const ICON_CONTAINER_CLASS_NAME = `${CLASS_NAME}__icon-container`;
|
||
|
|
const GENERIC_ICON_CLASS_NAME = `${CLASS_NAME}__generic-icon`;
|
||
|
|
const TEXT_CLASS_NAME = `${CLASS_NAME}__text`;
|
||
|
|
const LINK_CLASS_NAME = `${TEXT_CLASS_NAME}__link`;
|
||
|
|
const CLOSE_BUTTON_CLASS_NAME = `${CLASS_NAME}__close-button`;
|
||
|
|
|
||
|
|
type PropsType = {
|
||
|
|
children: ReactNode;
|
||
|
|
i18n: LocalizerType;
|
||
|
|
onClose: () => void;
|
||
|
|
};
|
||
|
|
|
||
|
|
export function TimelineWarning({
|
||
|
|
children,
|
||
|
|
i18n,
|
||
|
|
onClose,
|
||
|
|
}: Readonly<PropsType>): JSX.Element {
|
||
|
|
return (
|
||
|
|
<div className={CLASS_NAME}>
|
||
|
|
{children}
|
||
|
|
<button
|
||
|
|
aria-label={i18n('close')}
|
||
|
|
className={CLOSE_BUTTON_CLASS_NAME}
|
||
|
|
onClick={onClose}
|
||
|
|
type="button"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
TimelineWarning.IconContainer = ({
|
||
|
|
children,
|
||
|
|
}: Readonly<{ children: ReactNode }>): JSX.Element => (
|
||
|
|
<div className={ICON_CONTAINER_CLASS_NAME}>{children}</div>
|
||
|
|
);
|
||
|
|
|
||
|
|
TimelineWarning.GenericIcon = () => <div className={GENERIC_ICON_CLASS_NAME} />;
|
||
|
|
|
||
|
|
TimelineWarning.Text = ({
|
||
|
|
children,
|
||
|
|
}: Readonly<{ children: ReactNode }>): JSX.Element => (
|
||
|
|
<div className={TEXT_CLASS_NAME}>{children}</div>
|
||
|
|
);
|
||
|
|
|
||
|
|
type LinkProps = {
|
||
|
|
children: ReactNode;
|
||
|
|
onClick: () => void;
|
||
|
|
};
|
||
|
|
|
||
|
|
TimelineWarning.Link = ({
|
||
|
|
children,
|
||
|
|
onClick,
|
||
|
|
}: Readonly<LinkProps>): JSX.Element => (
|
||
|
|
<button className={LINK_CLASS_NAME} onClick={onClick} type="button">
|
||
|
|
{children}
|
||
|
|
</button>
|
||
|
|
);
|