@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
48 lines (47 loc) • 3.4 kB
JavaScript
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { UIHelper } from '../../UIHelper';
import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
import { PanelWithImage } from '../Panels/PanelWithImage';
import SimpleButton from '../../../components/SimpleButton';
import Input from '../../../components/Input';
import Dialog from '../../../components/Dialog';
import { CheckBox } from '../../../components/CheckBox';
import * as InternalRedux from '../../../Redux/ActionsReducers/InternalRedux';
import { useDispatch } from 'react-redux';
import { Box, Flex } from '../../../components/Flex';
export const AdaptablePopupConfirmation = (props) => {
const dispatch = useDispatch();
const [disableDeleteConfirmation, setDisableDeleteConfirmation] = React.useState(false);
const [promptText, setPromptText] = React.useState('');
const header = props.header;
const glyph = 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.IsNotNullOrEmpty(promptText);
}
return true;
}
if (!props.showPopup) {
return _jsx(_Fragment, {});
}
return (_jsx(Dialog, { modal: true, "data-name": `confirmation-popup confirmation-popup--${props.messageType.toLowerCase()}`, isOpen: props.showPopup, onDismiss: props.onCancel, showCloseButton: false, style: { minHeight: 'auto', maxWidth: '50%' }, children: _jsx(PanelWithImage, { header: header, icon: glyph, variant: "primary", children: _jsxs("div", { children: [_jsx("div", { style: { display: 'flex', alignItems: 'center' }, children: props.messsage.split('\n').map(function (item, index) {
return (_jsxs(Box, { className: "twa:m-2", children: [item, _jsx("br", {})] }, index));
}) }), _jsx(Box, { className: "twa:pl-2", children: _jsx(CheckBox, { checked: disableDeleteConfirmation, onChange: () => {
setDisableDeleteConfirmation(!disableDeleteConfirmation);
}, children: "Do not show this again" }) }), props.showInputBox && (_jsxs(Box, { className: "twa:p-2", "data-name": "body", children: [_jsx("p", { children: "Please enter a comment to confirm." }), _jsx(Input, { className: "twa:mt-2 twa:w-full", value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) })] })), _jsxs(Flex, { className: "twa:mt-3 twa:p-2", "data-name": "footer", justifyContent: "space-between", children: [props.cancelButtonText != null ? (_jsx(SimpleButton, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onCancelForm(), children: props.cancelButtonText })) : (_jsx("div", {})), _jsx(SimpleButton, { tone: "error", "data-name": "delete", variant: "raised", disabled: !canConfirm(), onClick: () => onConfirmmForm(), children: props.confirmButtonText })] })] }) }) }));
};