2019-12-30 07:38:28 +01:00
|
|
|
import React from 'react';
|
|
|
|
import { SessionModal } from './SessionModal';
|
2020-01-08 07:21:39 +01:00
|
|
|
import { SessionButton, SessionButtonColor } from './SessionButton';
|
2019-12-30 07:38:28 +01:00
|
|
|
|
|
|
|
interface Props {
|
|
|
|
message: string;
|
2020-01-08 07:21:39 +01:00
|
|
|
messageSub: string;
|
2019-12-30 07:38:28 +01:00
|
|
|
title: string;
|
|
|
|
onOk?: any;
|
|
|
|
onClose?: any;
|
2020-01-03 01:48:55 +01:00
|
|
|
onClickOk: any;
|
|
|
|
onClickClose: any;
|
2019-12-30 07:38:28 +01:00
|
|
|
okText?: string;
|
|
|
|
cancelText?: string;
|
|
|
|
hideCancel: boolean;
|
2020-01-08 07:21:39 +01:00
|
|
|
okTheme: SessionButtonColor;
|
|
|
|
closeTheme: SessionButtonColor;
|
2019-12-30 07:38:28 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
export class SessionConfirm extends React.Component<Props> {
|
|
|
|
public static defaultProps = {
|
|
|
|
title: '',
|
2020-01-08 07:21:39 +01:00
|
|
|
messageSub: '',
|
|
|
|
okTheme: SessionButtonColor.Primary,
|
|
|
|
closeTheme: SessionButtonColor.Primary,
|
2019-12-30 07:38:28 +01:00
|
|
|
hideCancel: false,
|
2020-01-03 01:48:55 +01:00
|
|
|
};
|
2019-12-30 07:38:28 +01:00
|
|
|
|
|
|
|
constructor(props: any) {
|
|
|
|
super(props);
|
|
|
|
}
|
|
|
|
|
|
|
|
public render() {
|
2020-01-09 07:44:34 +01:00
|
|
|
const {
|
|
|
|
title,
|
|
|
|
message,
|
|
|
|
messageSub,
|
|
|
|
okTheme,
|
|
|
|
closeTheme,
|
|
|
|
onClickOk,
|
|
|
|
onClickClose,
|
|
|
|
hideCancel,
|
|
|
|
} = this.props;
|
2019-12-30 07:38:28 +01:00
|
|
|
|
|
|
|
const okText = this.props.okText || window.i18n('ok');
|
|
|
|
const cancelText = this.props.cancelText || window.i18n('cancel');
|
2020-01-03 01:48:55 +01:00
|
|
|
const showHeader = !!this.props.title;
|
2019-12-30 07:38:28 +01:00
|
|
|
|
2020-01-15 03:49:07 +01:00
|
|
|
const messageSubText = messageSub
|
|
|
|
? 'session-confirm-main-message'
|
2020-03-31 05:30:53 +02:00
|
|
|
: 'subtle';
|
2020-01-15 03:49:07 +01:00
|
|
|
|
2019-12-30 07:38:28 +01:00
|
|
|
return (
|
2020-01-03 01:48:55 +01:00
|
|
|
<SessionModal
|
|
|
|
title={title}
|
2020-02-25 02:26:11 +01:00
|
|
|
onClose={onClickClose}
|
2020-01-03 01:48:55 +01:00
|
|
|
onOk={() => null}
|
|
|
|
showExitIcon={false}
|
|
|
|
showHeader={showHeader}
|
|
|
|
>
|
2020-01-03 06:54:27 +01:00
|
|
|
{!showHeader && <div className="spacer-lg" />}
|
2020-01-03 01:48:55 +01:00
|
|
|
|
|
|
|
<div className="session-modal__centered">
|
2020-01-15 03:49:07 +01:00
|
|
|
<span className={messageSubText}>{message}</span>
|
2020-01-09 07:44:34 +01:00
|
|
|
{messageSub && (
|
2020-03-31 05:30:53 +02:00
|
|
|
<span className="session-confirm-sub-message subtle">
|
2020-01-09 07:44:34 +01:00
|
|
|
{messageSub}
|
|
|
|
</span>
|
2020-01-08 07:21:39 +01:00
|
|
|
)}
|
2020-01-03 01:48:55 +01:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className="session-modal__button-group">
|
2020-01-08 07:21:39 +01:00
|
|
|
<SessionButton
|
|
|
|
text={okText}
|
|
|
|
buttonColor={okTheme}
|
|
|
|
onClick={onClickOk}
|
|
|
|
/>
|
2020-01-03 01:48:55 +01:00
|
|
|
|
2020-01-03 06:54:27 +01:00
|
|
|
{!hideCancel && (
|
2020-01-08 07:21:39 +01:00
|
|
|
<SessionButton
|
|
|
|
text={cancelText}
|
|
|
|
buttonColor={closeTheme}
|
|
|
|
onClick={onClickClose}
|
|
|
|
/>
|
2019-12-30 07:38:28 +01:00
|
|
|
)}
|
2020-01-03 01:48:55 +01:00
|
|
|
</div>
|
|
|
|
</SessionModal>
|
2019-12-30 07:38:28 +01:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|