Added story preview and confirmation dialogs to send story

This commit is contained in:
Alvaro 2022-10-12 10:14:35 -06:00 committed by GitHub
parent e80d9d1f30
commit 820eaa50ad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 315 additions and 109 deletions

View file

@ -23,20 +23,29 @@ export type ContextMenuOptionType<T> = {
readonly value?: T;
};
export type PropsType<T> = {
readonly ariaLabel?: string;
readonly children?: ReactNode;
readonly i18n: LocalizerType;
readonly menuOptions: ReadonlyArray<ContextMenuOptionType<T>>;
readonly moduleClassName?: string;
readonly onClick?: () => unknown;
readonly onMenuShowingChanged?: (value: boolean) => unknown;
readonly popperOptions?: Pick<Options, 'placement' | 'strategy'>;
readonly theme?: Theme;
readonly title?: string;
readonly value?: T;
type RenderButtonProps = {
openMenu: (() => void) | ((ev: React.MouseEvent) => void);
onKeyDown: (ev: KeyboardEvent) => void;
isMenuShowing: boolean;
ref: React.Ref<HTMLButtonElement> | null;
};
export type PropsType<T> = Readonly<{
ariaLabel?: string;
// contents of the button OR a function that will render the whole button
children?: ReactNode | ((props: RenderButtonProps) => JSX.Element);
i18n: LocalizerType;
menuOptions: ReadonlyArray<ContextMenuOptionType<T>>;
moduleClassName?: string;
button?: () => JSX.Element;
onClick?: () => unknown;
onMenuShowingChanged?: (value: boolean) => unknown;
popperOptions?: Pick<Options, 'placement' | 'strategy'>;
theme?: Theme;
title?: string;
value?: T;
}>;
let closeCurrentOpenContextMenu: undefined | (() => unknown);
// https://popper.js.org/docs/v2/virtual-elements/
@ -167,13 +176,16 @@ export function ContextMenu<T>({
const getClassName = getClassNamesFor('ContextMenu', moduleClassName);
return (
<div
className={classNames(
getClassName('__container'),
theme ? themeClassName(theme) : undefined
)}
>
let buttonNode: ReactNode;
if (typeof children === 'function') {
buttonNode = (children as (props: RenderButtonProps) => JSX.Element)({
openMenu: onClick || handleClick,
onKeyDown: handleKeyDown,
isMenuShowing,
ref: setReferenceElement,
});
} else {
buttonNode = (
<button
aria-label={ariaLabel || i18n('ContextMenu--button')}
className={classNames(
@ -188,6 +200,17 @@ export function ContextMenu<T>({
>
{children}
</button>
);
}
return (
<div
className={classNames(
getClassName('__container'),
theme ? themeClassName(theme) : undefined
)}
>
{buttonNode}
{isMenuShowing && (
<FocusTrap
focusTrapOptions={{