Actionable toasts

This commit is contained in:
Josh Perez 2021-10-06 17:00:51 -04:00 committed by GitHub
parent d542f450a1
commit b9134f8332
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 148 additions and 59 deletions

View file

@ -1,19 +1,23 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { KeyboardEvent, ReactNode, useEffect } from 'react';
import React, { KeyboardEvent, MouseEvent, ReactNode, useEffect } from 'react';
import classNames from 'classnames';
import { createPortal } from 'react-dom';
import { onTimeout, removeTimeout } from '../services/timers';
import { useRestoreFocus } from '../hooks/useRestoreFocus';
export type PropsType = {
autoDismissDisabled?: boolean;
children: ReactNode;
className?: string;
disableCloseOnClick?: boolean;
onClick?: () => unknown;
onClose: () => unknown;
timeout?: number;
toastAction?: {
label: string;
onClick: () => unknown;
};
};
export const Toast = ({
@ -21,11 +25,12 @@ export const Toast = ({
children,
className,
disableCloseOnClick = false,
onClick,
onClose,
timeout = 8000,
toastAction,
}: PropsType): JSX.Element | null => {
const [root, setRoot] = React.useState<HTMLElement | null>(null);
const [focusRef] = useRestoreFocus();
useEffect(() => {
const div = document.createElement('div');
@ -52,38 +57,49 @@ export const Toast = ({
};
}, [autoDismissDisabled, onClose, root, timeout]);
let interactivityProps = {};
if (onClick) {
interactivityProps = {
role: 'button',
onClick() {
onClick();
if (!disableCloseOnClick) {
onClose();
}
},
onKeyDown(ev: KeyboardEvent<HTMLDivElement>) {
if (ev.key === 'Enter' || ev.key === ' ') {
onClick();
if (!disableCloseOnClick) {
onClose();
}
}
},
};
}
return root
? createPortal(
<div
className={classNames(
'Toast',
onClick ? 'Toast--clickable' : null,
className
)}
{...interactivityProps}
aria-live="assertive"
className={classNames('Toast', className)}
onClick={() => {
if (!disableCloseOnClick) {
onClose();
}
}}
onKeyDown={(ev: KeyboardEvent<HTMLDivElement>) => {
if (ev.key === 'Enter' || ev.key === ' ') {
if (!disableCloseOnClick) {
onClose();
}
}
}}
role="button"
tabIndex={0}
>
{children}
<div className="Toast__content">{children}</div>
{toastAction && (
<div
className="Toast__button"
onClick={(ev: MouseEvent<HTMLDivElement>) => {
ev.stopPropagation();
ev.preventDefault();
toastAction.onClick();
}}
onKeyDown={(ev: KeyboardEvent<HTMLDivElement>) => {
if (ev.key === 'Enter' || ev.key === ' ') {
ev.stopPropagation();
ev.preventDefault();
toastAction.onClick();
}
}}
ref={focusRef}
role="button"
tabIndex={0}
>
{toastAction.label}
</div>
)}
</div>,
root
)