59 lines
1.8 KiB
JavaScript
59 lines
1.8 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import './ConfirmDialog.scss';
|
|
|
|
import { openReusableDialog } from '../../../client/action/navigation';
|
|
|
|
import Text from '../../atoms/text/Text';
|
|
import Button from '../../atoms/button/Button';
|
|
|
|
function ConfirmDialog({
|
|
desc, actionTitle, actionType, onComplete,
|
|
}) {
|
|
return (
|
|
<div className="confirm-dialog">
|
|
<Text>{desc}</Text>
|
|
<div className="confirm-dialog__btn">
|
|
<Button variant={actionType} onClick={() => onComplete(true)}>{actionTitle}</Button>
|
|
<Button onClick={() => onComplete(false)}>Cancel</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
ConfirmDialog.propTypes = {
|
|
desc: PropTypes.string.isRequired,
|
|
actionTitle: PropTypes.string.isRequired,
|
|
actionType: PropTypes.oneOf(['primary', 'positive', 'danger', 'caution']).isRequired,
|
|
onComplete: PropTypes.func.isRequired,
|
|
};
|
|
|
|
/**
|
|
* @param {string} title title of confirm dialog
|
|
* @param {string} desc description of confirm dialog
|
|
* @param {string} actionTitle title of main action to take
|
|
* @param {'primary' | 'positive' | 'danger' | 'caution'} actionType type of action. default=primary
|
|
* @return {Promise<boolean>} does it get's confirmed or not
|
|
*/
|
|
// eslint-disable-next-line import/prefer-default-export
|
|
export const confirmDialog = (title, desc, actionTitle, actionType = 'primary') => new Promise((resolve) => {
|
|
let isCompleted = false;
|
|
openReusableDialog(
|
|
<Text variant="s1" weight="medium">{title}</Text>,
|
|
(requestClose) => (
|
|
<ConfirmDialog
|
|
desc={desc}
|
|
actionTitle={actionTitle}
|
|
actionType={actionType}
|
|
onComplete={(isConfirmed) => {
|
|
isCompleted = true;
|
|
resolve(isConfirmed);
|
|
requestClose();
|
|
}}
|
|
/>
|
|
),
|
|
() => {
|
|
if (!isCompleted) resolve(false);
|
|
},
|
|
);
|
|
});
|