142 lines
3.6 KiB
TypeScript
142 lines
3.6 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { SessionHtmlRenderer } from '../basic/SessionHTMLRenderer';
|
|
import { updateConfirmModal } from '../../state/ducks/modalDialog';
|
|
import { SpacerLG } from '../basic/Text';
|
|
import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
|
|
import { SessionSpinner } from '../basic/SessionSpinner';
|
|
import { SessionIcon, SessionIconSize, SessionIconType } from '../icon';
|
|
import { SessionWrapperModal } from '../SessionWrapperModal';
|
|
|
|
export interface SessionConfirmDialogProps {
|
|
message?: string;
|
|
messageSub?: string;
|
|
title?: string;
|
|
onOk?: any;
|
|
onClose?: any;
|
|
closeAfterInput?: boolean;
|
|
|
|
/**
|
|
* function to run on ok click. Closes modal after execution by default
|
|
*/
|
|
onClickOk?: () => Promise<void> | void;
|
|
|
|
onClickClose?: () => any;
|
|
|
|
/**
|
|
* function to run on close click. Closes modal after execution by default
|
|
*/
|
|
onClickCancel?: () => any;
|
|
okText?: string;
|
|
cancelText?: string;
|
|
hideCancel?: boolean;
|
|
okTheme?: SessionButtonColor;
|
|
closeTheme?: SessionButtonColor;
|
|
sessionIcon?: SessionIconType;
|
|
iconSize?: SessionIconSize;
|
|
shouldShowConfirm?: boolean | undefined;
|
|
showExitIcon?: boolean | undefined;
|
|
}
|
|
|
|
export const SessionConfirm = (props: SessionConfirmDialogProps) => {
|
|
const {
|
|
title = '',
|
|
message = '',
|
|
messageSub = '',
|
|
okTheme = SessionButtonColor.Primary,
|
|
closeTheme = SessionButtonColor.Primary,
|
|
onClickOk,
|
|
onClickClose,
|
|
hideCancel = false,
|
|
sessionIcon,
|
|
iconSize,
|
|
shouldShowConfirm,
|
|
onClickCancel,
|
|
showExitIcon,
|
|
closeAfterInput = true,
|
|
} = props;
|
|
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const okText = props.okText || window.i18n('ok');
|
|
const cancelText = props.cancelText || window.i18n('cancel');
|
|
const showHeader = !!props.title;
|
|
|
|
const messageSubText = messageSub ? 'session-confirm-main-message' : 'subtle';
|
|
|
|
const onClickOkHandler = async () => {
|
|
if (onClickOk) {
|
|
setIsLoading(true);
|
|
try {
|
|
await onClickOk();
|
|
} catch (e) {
|
|
window.log.warn(e);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
|
|
if (closeAfterInput) {
|
|
window.inboxStore?.dispatch(updateConfirmModal(null));
|
|
}
|
|
};
|
|
|
|
if (shouldShowConfirm && !shouldShowConfirm) {
|
|
return null;
|
|
}
|
|
|
|
/**
|
|
* Performs specified on close action then removes the modal.
|
|
*/
|
|
const onClickCancelHandler = () => {
|
|
if (onClickCancel) {
|
|
onClickCancel();
|
|
}
|
|
|
|
if (onClickClose) {
|
|
onClickClose();
|
|
}
|
|
|
|
window.inboxStore?.dispatch(updateConfirmModal(null));
|
|
};
|
|
|
|
return (
|
|
<SessionWrapperModal
|
|
title={title}
|
|
onClose={onClickClose}
|
|
showExitIcon={showExitIcon}
|
|
showHeader={showHeader}
|
|
>
|
|
{!showHeader && <SpacerLG />}
|
|
|
|
<div className="session-modal__centered">
|
|
{sessionIcon && iconSize && (
|
|
<>
|
|
<SessionIcon iconType={sessionIcon} iconSize={iconSize} />
|
|
<SpacerLG />
|
|
</>
|
|
)}
|
|
|
|
<SessionHtmlRenderer tag="span" className={messageSubText} html={message} />
|
|
<SessionHtmlRenderer
|
|
tag="span"
|
|
className="session-confirm-sub-message subtle"
|
|
html={messageSub}
|
|
/>
|
|
|
|
<SessionSpinner loading={isLoading} />
|
|
</div>
|
|
|
|
<div className="session-modal__button-group">
|
|
{!hideCancel && (
|
|
<SessionButton
|
|
text={cancelText}
|
|
buttonColor={closeTheme}
|
|
onClick={onClickCancelHandler}
|
|
/>
|
|
)}
|
|
<SessionButton text={okText} buttonColor={okTheme} onClick={onClickOkHandler} />
|
|
</div>
|
|
</SessionWrapperModal>
|
|
);
|
|
};
|