@activecollab/components
Version:
ActiveCollab Components
61 lines • 2.13 kB
JavaScript
import React, { forwardRef, useEffect } from "react";
import classnames from "classnames";
import { Button } from "../Button/Button";
import { Dialog } from "../Dialog";
import { Body2 } from "../Typography/Variants/Body2";
export const ConfirmDialog = /*#__PURE__*/forwardRef((_ref, ref) => {
let {
open = false,
onCancel,
onConfirm,
className,
dialogTitle = "Discard changes?",
dialogContent = "All unsaved changes will be lost.",
confirmBtnText = "OK",
cancelBtnText = "Cancel",
shouldShowCancelButton = true,
isLoading = false,
fullWidth = false
} = _ref;
useEffect(() => {
const handleKeyDown = event => {
if (event.key === "Enter" && onConfirm) {
event.preventDefault();
onConfirm();
}
};
if (open) {
window.addEventListener("keydown", handleKeyDown);
}
return () => {
window.removeEventListener("keydown", handleKeyDown);
};
}, [open, onConfirm]);
return /*#__PURE__*/React.createElement(Dialog, {
ref: ref,
open: open,
onClose: onCancel,
className: classnames("c-confirm-dialog", className),
disableCloseOnEsc: isLoading,
fullWidth: fullWidth
}, /*#__PURE__*/React.createElement(Dialog.Title, null, dialogTitle), /*#__PURE__*/React.createElement(Dialog.ContentDivider, null), /*#__PURE__*/React.createElement(Dialog.Content, null, /*#__PURE__*/React.createElement(Body2, {
lineHeight: "loose",
color: "secondary",
whitespace: "pre-line"
}, dialogContent)), /*#__PURE__*/React.createElement(Dialog.ContentDivider, null), /*#__PURE__*/React.createElement(Dialog.Actions, null, /*#__PURE__*/React.createElement(Button, {
variant: "primary",
style: {
marginRight: "12px"
},
onClick: onConfirm,
disabled: isLoading
}, confirmBtnText), shouldShowCancelButton ? /*#__PURE__*/React.createElement(Button, {
variant: "secondary",
"data-action": "cancel",
onClick: onCancel,
type: "button",
disabled: isLoading
}, cancelBtnText) : null));
});
ConfirmDialog.displayName = "ConfirmDialog";
//# sourceMappingURL=ConfirmDialog.js.map