@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
65 lines (64 loc) • 4.11 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AdaptablePopupConfirmation = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const UIHelper_1 = require("../../UIHelper");
const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
const PanelWithImage_1 = require("../Panels/PanelWithImage");
const rebass_1 = require("rebass");
const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
const CheckBox_1 = require("../../../components/CheckBox");
const InternalRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/InternalRedux"));
const react_redux_1 = require("react-redux");
const AdaptablePopupConfirmation = (props) => {
const dispatch = (0, react_redux_1.useDispatch)();
const [disableDeleteConfirmation, setDisableDeleteConfirmation] = React.useState(false);
const [promptText, setPromptText] = React.useState('');
const header = props.header;
const glyph = UIHelper_1.UIHelper.getGlyphByMessageType(props.messageType);
function onCancelForm() {
setPromptText('');
props.onCancel();
}
function onConfirmmForm() {
props.onConfirm(promptText);
setPromptText('');
if (disableDeleteConfirmation) {
dispatch(InternalRedux.DisableDeleteConfirmation());
}
}
function changeContent(e) {
setPromptText(e.target.value);
}
function canConfirm() {
if (props.showInputBox) {
return StringExtensions_1.StringExtensions.IsNotNullOrEmpty(promptText);
}
return true;
}
if (!props.showPopup) {
return React.createElement(React.Fragment, null);
}
return (React.createElement(Dialog_1.default, { modal: true, "data-name": `confirmation-popup confirmation-popup--${props.messageType.toLowerCase()}`, isOpen: props.showPopup, onDismiss: props.onCancel, showCloseButton: false, style: { minHeight: 'auto', maxWidth: '50%' } },
React.createElement(PanelWithImage_1.PanelWithImage, { header: header, icon: glyph, variant: "primary" },
React.createElement("div", null,
React.createElement("div", { style: { display: 'flex', alignItems: 'center' } }, props.messsage.split('\n').map(function (item, index) {
return (React.createElement(rebass_1.Text, { key: index, margin: 2 },
item,
React.createElement("br", null)));
})),
React.createElement(rebass_1.Box, { pl: 2 },
React.createElement(CheckBox_1.CheckBox, { checked: disableDeleteConfirmation, onChange: () => {
setDisableDeleteConfirmation(!disableDeleteConfirmation);
} }, "Do not show this again")),
props.showInputBox && (React.createElement(rebass_1.Box, { padding: 2, "data-name": "body" },
React.createElement("p", null, "Please enter a comment to confirm"),
React.createElement(Input_1.default, { marginTop: 2, width: '100%', value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }))),
React.createElement(rebass_1.Flex, { marginTop: 3, padding: 2, "data-name": "footer", justifyContent: "space-between" },
props.cancelButtonText != null ? (React.createElement(SimpleButton_1.default, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onCancelForm() }, props.cancelButtonText)) : (React.createElement("div", null)),
React.createElement(SimpleButton_1.default, { tone: "error", "data-name": "delete", variant: "raised", disabled: !canConfirm(), onClick: () => onConfirmmForm() }, props.confirmButtonText))))));
};
exports.AdaptablePopupConfirmation = AdaptablePopupConfirmation;