Message Requests
This commit is contained in:
parent
4d4b7a26a5
commit
83574eb067
60 changed files with 2566 additions and 216 deletions
|
@ -2,14 +2,18 @@ import * as React from 'react';
|
|||
import classNames from 'classnames';
|
||||
import { LocalizerType } from '../types/Util';
|
||||
|
||||
export type ActionSpec = {
|
||||
text: string;
|
||||
action: () => unknown;
|
||||
style?: 'affirmative' | 'negative';
|
||||
};
|
||||
|
||||
export type OwnProps = {
|
||||
readonly i18n: LocalizerType;
|
||||
readonly children: React.ReactNode;
|
||||
readonly affirmativeText?: string;
|
||||
readonly onAffirmative?: () => unknown;
|
||||
readonly title?: string | React.ReactNode;
|
||||
readonly actions: Array<ActionSpec>;
|
||||
readonly onClose: () => unknown;
|
||||
readonly negativeText?: string;
|
||||
readonly onNegative?: () => unknown;
|
||||
};
|
||||
|
||||
export type Props = OwnProps;
|
||||
|
@ -21,15 +25,7 @@ function focusRef(el: HTMLElement | null) {
|
|||
}
|
||||
|
||||
export const ConfirmationDialog = React.memo(
|
||||
({
|
||||
i18n,
|
||||
onClose,
|
||||
children,
|
||||
onAffirmative,
|
||||
onNegative,
|
||||
affirmativeText,
|
||||
negativeText,
|
||||
}: Props) => {
|
||||
({ i18n, onClose, children, title, actions }: Props) => {
|
||||
React.useEffect(() => {
|
||||
const handler = ({ key }: KeyboardEvent) => {
|
||||
if (key === 'Escape') {
|
||||
|
@ -52,22 +48,25 @@ export const ConfirmationDialog = React.memo(
|
|||
[onClose]
|
||||
);
|
||||
|
||||
const handleNegative = React.useCallback(() => {
|
||||
onClose();
|
||||
if (onNegative) {
|
||||
onNegative();
|
||||
}
|
||||
}, [onClose, onNegative]);
|
||||
|
||||
const handleAffirmative = React.useCallback(() => {
|
||||
onClose();
|
||||
if (onAffirmative) {
|
||||
onAffirmative();
|
||||
}
|
||||
}, [onClose, onAffirmative]);
|
||||
const handleAction = React.useCallback(
|
||||
(e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
onClose();
|
||||
if (e.currentTarget.dataset.action) {
|
||||
const actionIndex = parseInt(e.currentTarget.dataset.action, 10);
|
||||
const { action } = actions[actionIndex];
|
||||
action();
|
||||
}
|
||||
},
|
||||
[onClose, actions]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="module-confirmation-dialog__container">
|
||||
{title ? (
|
||||
<h1 className="module-confirmation-dialog__container__title">
|
||||
{title}
|
||||
</h1>
|
||||
) : null}
|
||||
<div className="module-confirmation-dialog__container__content">
|
||||
{children}
|
||||
</div>
|
||||
|
@ -79,28 +78,24 @@ export const ConfirmationDialog = React.memo(
|
|||
>
|
||||
{i18n('confirmation-dialog--Cancel')}
|
||||
</button>
|
||||
{onNegative && negativeText ? (
|
||||
{actions.map((action, i) => (
|
||||
<button
|
||||
onClick={handleNegative}
|
||||
key={i}
|
||||
onClick={handleAction}
|
||||
data-action={i}
|
||||
className={classNames(
|
||||
'module-confirmation-dialog__container__buttons__button',
|
||||
'module-confirmation-dialog__container__buttons__button--negative'
|
||||
action.style === 'affirmative'
|
||||
? 'module-confirmation-dialog__container__buttons__button--affirmative'
|
||||
: null,
|
||||
action.style === 'negative'
|
||||
? 'module-confirmation-dialog__container__buttons__button--negative'
|
||||
: null
|
||||
)}
|
||||
>
|
||||
{negativeText}
|
||||
{action.text}
|
||||
</button>
|
||||
) : null}
|
||||
{onAffirmative && affirmativeText ? (
|
||||
<button
|
||||
onClick={handleAffirmative}
|
||||
className={classNames(
|
||||
'module-confirmation-dialog__container__buttons__button',
|
||||
'module-confirmation-dialog__container__buttons__button--affirmative'
|
||||
)}
|
||||
>
|
||||
{affirmativeText}
|
||||
</button>
|
||||
) : null}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue