57 lines
1.5 KiB
JavaScript
57 lines
1.5 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { Button, Card } from '@openedx/paragon';
|
|
|
|
const ConfirmationPopup = ({
|
|
label,
|
|
bodyText,
|
|
onConfirm,
|
|
confirmLabel,
|
|
onCancel,
|
|
cancelLabel,
|
|
confirmVariant,
|
|
confirmButtonClass,
|
|
cancelButtonClass,
|
|
sectionClasses,
|
|
}) => (
|
|
<Card className="rounded px-1 mt-4">
|
|
<Card.Header
|
|
className="text-primary-500"
|
|
title={label}
|
|
size="sm"
|
|
/>
|
|
<Card.Body>
|
|
<Card.Section className={`text-justify text-muted pt-2 pb-3 ${sectionClasses}`}>{bodyText}</Card.Section>
|
|
<Card.Footer>
|
|
<Button variant="tertiary" className={cancelButtonClass} onClick={onCancel}>
|
|
{cancelLabel}
|
|
</Button>
|
|
<Button variant={confirmVariant} className={`ml-2 ${confirmButtonClass}`} onClick={onConfirm}>
|
|
{confirmLabel}
|
|
</Button>
|
|
</Card.Footer>
|
|
</Card.Body>
|
|
</Card>
|
|
);
|
|
|
|
ConfirmationPopup.propTypes = {
|
|
label: PropTypes.string.isRequired,
|
|
bodyText: PropTypes.string.isRequired,
|
|
onConfirm: PropTypes.func.isRequired,
|
|
onCancel: PropTypes.func.isRequired,
|
|
confirmLabel: PropTypes.string.isRequired,
|
|
cancelLabel: PropTypes.string.isRequired,
|
|
confirmButtonClass: PropTypes.string,
|
|
cancelButtonClass: PropTypes.string,
|
|
confirmVariant: PropTypes.string,
|
|
sectionClasses: PropTypes.string,
|
|
};
|
|
ConfirmationPopup.defaultProps = {
|
|
confirmVariant: 'outline-brand',
|
|
confirmButtonClass: '',
|
|
cancelButtonClass: '',
|
|
sectionClasses: '',
|
|
};
|
|
|
|
export default React.memo(ConfirmationPopup);
|