Username Education

Co-authored-by: Jamie Kyle <jamie@signal.org>
This commit is contained in:
Fedor Indutny 2024-01-29 12:09:54 -08:00 committed by GitHub
parent c6a7637513
commit 7dc11c1928
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
100 changed files with 1443 additions and 1269 deletions

View file

@ -4,10 +4,8 @@
import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
import React, { memo, useEffect } from 'react';
import classNames from 'classnames';
import { createPortal } from 'react-dom';
import { useRestoreFocus } from '../hooks/useRestoreFocus';
import { clearTimeoutIfNecessary } from '../util/clearTimeoutIfNecessary';
import * as log from '../logging/log';
export type PropsType = {
autoDismissDisabled?: boolean;
@ -33,51 +31,10 @@ export const Toast = memo(function ToastInner({
timeout = 8000,
toastAction,
}: PropsType): JSX.Element | null {
const [root, setRoot] = React.useState<HTMLElement | null>(null);
const [focusRef] = useRestoreFocus();
const [align, setAlign] = React.useState<'left' | 'center'>('left');
useEffect(() => {
function updateAlign() {
const leftPane = document.querySelector('.module-left-pane');
const composer = document.querySelector(
'.ConversationView__composition-area'
);
if (
leftPane != null &&
composer != null &&
leftPane.classList.contains('module-left-pane--width-narrow')
) {
setAlign('center');
return;
}
setAlign('left');
}
updateAlign();
if (window.reduxStore == null) {
log.warn('Toast: No redux store');
return;
}
return window.reduxStore.subscribe(updateAlign);
}, []);
useEffect(() => {
const div = document.createElement('div');
document.body.appendChild(div);
setRoot(div);
return () => {
document.body.removeChild(div);
setRoot(null);
};
}, []);
useEffect(() => {
if (!root || autoDismissDisabled) {
if (autoDismissDisabled) {
return;
}
@ -86,56 +43,53 @@ export const Toast = memo(function ToastInner({
return () => {
clearTimeoutIfNecessary(timeoutId);
};
}, [autoDismissDisabled, onClose, root, timeout]);
}, [autoDismissDisabled, onClose, timeout]);
return root
? createPortal(
return (
<div
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}
style={style}
>
<div className="Toast__content">{children}</div>
{toastAction && (
<div
aria-live="assertive"
className={classNames('Toast', `Toast--align-${align}`, className)}
onClick={() => {
if (!disableCloseOnClick) {
onClose();
}
className="Toast__button"
onClick={(ev: MouseEvent<HTMLDivElement>) => {
ev.stopPropagation();
ev.preventDefault();
toastAction.onClick();
onClose();
}}
onKeyDown={(ev: KeyboardEvent<HTMLDivElement>) => {
if (ev.key === 'Enter' || ev.key === ' ') {
if (!disableCloseOnClick) {
onClose();
}
ev.stopPropagation();
ev.preventDefault();
toastAction.onClick();
onClose();
}
}}
ref={focusRef}
role="button"
tabIndex={0}
style={style}
>
<div className="Toast__content">{children}</div>
{toastAction && (
<div
className="Toast__button"
onClick={(ev: MouseEvent<HTMLDivElement>) => {
ev.stopPropagation();
ev.preventDefault();
toastAction.onClick();
onClose();
}}
onKeyDown={(ev: KeyboardEvent<HTMLDivElement>) => {
if (ev.key === 'Enter' || ev.key === ' ') {
ev.stopPropagation();
ev.preventDefault();
toastAction.onClick();
onClose();
}
}}
ref={focusRef}
role="button"
tabIndex={0}
>
{toastAction.label}
</div>
)}
</div>,
root
)
: null;
{toastAction.label}
</div>
)}
</div>
);
});