Stickers
Co-authored-by: scott@signal.org Co-authored-by: ken@signal.org
This commit is contained in:
parent
8c8856785b
commit
29de50c12a
100 changed files with 7572 additions and 693 deletions
117
ts/components/ConfirmationDialog.tsx
Normal file
117
ts/components/ConfirmationDialog.tsx
Normal file
|
@ -0,0 +1,117 @@
|
|||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { LocalizerType } from '../types/Util';
|
||||
|
||||
export type OwnProps = {
|
||||
readonly i18n: LocalizerType;
|
||||
readonly children: React.ReactNode;
|
||||
readonly affirmativeText?: string;
|
||||
readonly onAffirmative?: () => unknown;
|
||||
readonly onClose: () => unknown;
|
||||
readonly negativeText?: string;
|
||||
readonly onNegative?: () => unknown;
|
||||
};
|
||||
|
||||
export type Props = OwnProps;
|
||||
|
||||
function focusRef(el: HTMLElement | null) {
|
||||
if (el) {
|
||||
el.focus();
|
||||
}
|
||||
}
|
||||
|
||||
export const ConfirmationDialog = React.memo(
|
||||
({
|
||||
i18n,
|
||||
onClose,
|
||||
children,
|
||||
onAffirmative,
|
||||
onNegative,
|
||||
affirmativeText,
|
||||
negativeText,
|
||||
}: Props) => {
|
||||
React.useEffect(
|
||||
() => {
|
||||
const handler = ({ key }: KeyboardEvent) => {
|
||||
if (key === 'Escape') {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
document.addEventListener('keyup', handler);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keyup', handler);
|
||||
};
|
||||
},
|
||||
[onClose]
|
||||
);
|
||||
|
||||
const handleCancel = React.useCallback(
|
||||
(e: React.MouseEvent) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
onClose();
|
||||
}
|
||||
},
|
||||
[onClose]
|
||||
);
|
||||
|
||||
const handleNegative = React.useCallback(
|
||||
() => {
|
||||
onClose();
|
||||
if (onNegative) {
|
||||
onNegative();
|
||||
}
|
||||
},
|
||||
[onClose, onNegative]
|
||||
);
|
||||
|
||||
const handleAffirmative = React.useCallback(
|
||||
() => {
|
||||
onClose();
|
||||
if (onAffirmative) {
|
||||
onAffirmative();
|
||||
}
|
||||
},
|
||||
[onClose, onAffirmative]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="module-confirmation-dialog__container">
|
||||
<div className="module-confirmation-dialog__container__content">
|
||||
{children}
|
||||
</div>
|
||||
<div className="module-confirmation-dialog__container__buttons">
|
||||
<button
|
||||
onClick={handleCancel}
|
||||
ref={focusRef}
|
||||
className="module-confirmation-dialog__container__buttons__button"
|
||||
>
|
||||
{i18n('confirmation-dialog--Cancel')}
|
||||
</button>
|
||||
{onNegative && negativeText ? (
|
||||
<button
|
||||
onClick={handleNegative}
|
||||
className={classNames(
|
||||
'module-confirmation-dialog__container__buttons__button',
|
||||
'module-confirmation-dialog__container__buttons__button--negative'
|
||||
)}
|
||||
>
|
||||
{negativeText}
|
||||
</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