Username Education
Co-authored-by: Jamie Kyle <jamie@signal.org>
This commit is contained in:
parent
c6a7637513
commit
7dc11c1928
100 changed files with 1443 additions and 1269 deletions
|
@ -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>
|
||||
);
|
||||
});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue