@gpa-gemstone/react-interactive
Version:
Interactive UI Components for GPA products
111 lines (110 loc) • 8.79 kB
JavaScript
;
// ******************************************************************************************************
// Modal.tsx - Gbtc
//
// Copyright © 2020, Grid Protection Alliance. All Rights Reserved.
//
// Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
// the NOTICE file distributed with this work for additional information regarding copyright ownership.
// The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
// file except in compliance with the License. You may obtain a copy of the License at:
//
// http://opensource.org/licenses/MIT
//
// Unless agreed to in writing, the subject software distributed under the License is distributed on an
// "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
// License for the specific language governing permissions and limitations.
//
// Code Modification History:
// ----------------------------------------------------------------------------------------------------
// 12/29/2020 - Christoph Lackner
// Generated original version of source code.
// ******************************************************************************************************
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var react_forms_1 = require("@gpa-gemstone/react-forms");
var helper_functions_1 = require("@gpa-gemstone/helper-functions");
var react_portal_1 = require("react-portal");
// Props Description:
// Title => Title of The Modal
// ShowX => show or hide the X button (default true)
// CallBack => Function to be called when closing the Modal either through Cancel (confirmed=false) or Accept Button (confirmed=true)
// Show => Whether to show the modal
// Size => Size of the modal
// ShowCancel => Whether to show the cancel button
// ShowConfirm => Whether to show the confirm button
// DisableConfirm => Disables the Confirm button
// CancelText => Text on Cancel Button
// Confirm text => Text on Confirm button
// ConfirmBtnClass => Class of the Confirm Button
// CancelBtnClass =>> Class of the Cancel Button
var Modal = function (props) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
var _t = React.useState('none'), hover = _t[0], setHover = _t[1];
var _u = React.useState(''), guid = _u[0], setGuid = _u[1];
React.useEffect(function () {
setGuid((0, helper_functions_1.CreateGuid)());
}, []);
return (React.createElement(react_portal_1.Portal, null,
React.createElement("div", { className: "modal" + (props.Show ? " show" : ''), style: props.Show ? { display: 'block', zIndex: (_a = props.ZIndex) !== null && _a !== void 0 ? _a : 9990 } : {} },
React.createElement("div", { className: "modal-dialog" + (props.Size === undefined ? '' : props.Size === 'xlg' ? '' : (" modal-" + props.Size)), style: props.Size === 'xlg' ? { maxWidth: window.innerWidth - 100 } : {} },
React.createElement("div", { className: "modal-content" },
React.createElement("div", { className: "modal-header", style: ((_b = props.HeaderStyle) !== null && _b !== void 0 ? _b : {}) },
React.createElement("h4", { className: "modal-title" }, props.Title),
((_c = props.ShowX) !== null && _c !== void 0 ? _c : false) ? React.createElement("button", { type: "button", className: "close", onClick: function () { return props.CallBack(false, false, false); } }, "\u00D7") : null),
React.createElement("div", { className: "modal-body", style: (_d = props.BodyStyle) !== null && _d !== void 0 ? _d : { maxHeight: 'calc(100vh - 210px)', overflowY: 'auto' } }, props.Show ? props.children : null),
(props.ShowConfirm != undefined && !(props.ShowConfirm))
&& (props.ShowCancel != undefined && !(props.ShowCancel))
&& (props.ShowTertiary != undefined && !(props.ShowTertiary)) ?
null
: React.createElement("div", { className: "modal-footer" },
props.ShowConfirm === undefined || props.ShowConfirm ?
React.createElement("button", { type: "button", className: "btn ".concat(((_e = props.ConfirmBtnClass) !== null && _e !== void 0 ? _e : 'btn-primary'), " ").concat((((_f = props.DisableConfirm) !== null && _f !== void 0 ? _f : false) ? 'disabled' : '')), "data-tooltip": guid + '-confirm', onClick: function () { if (!(props.DisableConfirm === undefined || !props.DisableConfirm))
return; props.CallBack(true, true, false); }, onMouseEnter: function () { return setHover('confirm'); }, onMouseLeave: function () { return setHover('none'); } }, ((_g = props.ConfirmText) !== null && _g !== void 0 ? _g : 'Save'))
: null,
((_h = props.ShowTertiary) !== null && _h !== void 0 ? _h : false) ?
React.createElement("button", { type: "button", className: "btn ".concat(((_j = props.TertiaryBtnClass) !== null && _j !== void 0 ? _j : 'btn-secondary'), " ").concat((((_k = props.DisableTertiary) !== null && _k !== void 0 ? _k : false) ? 'disabled' : '')), "data-tooltip": guid + '-tertiary', onClick: function () { var _a; if ((_a = props.DisableTertiary) !== null && _a !== void 0 ? _a : false)
return; props.CallBack(false, true, true); }, onMouseEnter: function () { return setHover('tertiary'); }, onMouseLeave: function () { return setHover('none'); } }, ((_l = props.TertiaryText) !== null && _l !== void 0 ? _l : 'Action'))
: null,
props.ShowCancel === undefined || props.ShowCancel ?
React.createElement("button", { type: "button", className: "btn ".concat(((_m = props.CancelBtnClass) !== null && _m !== void 0 ? _m : 'btn-danger'), " ").concat((((_o = props.DisableCancel) !== null && _o !== void 0 ? _o : false) ? 'disabled' : '')), "data-tooltip": guid + '-cancel', onClick: function () { if (!(props.DisableCancel === undefined || !props.DisableCancel))
return; props.CallBack(false, true, false); }, onMouseEnter: function () { return setHover('cancel'); }, onMouseLeave: function () { return setHover('none'); } }, ((_p = props.CancelText) !== null && _p !== void 0 ? _p : 'Cancel'))
: null)))),
React.createElement(react_forms_1.ToolTip, { Show: ((_q = props.ConfirmShowToolTip) !== null && _q !== void 0 ? _q : false) && hover === 'confirm', Position: 'top', Target: guid + '-confirm', Zindex: 9999 }, props.ConfirmToolTipContent),
React.createElement(react_forms_1.ToolTip, { Show: ((_r = props.TertiaryShowToolTip) !== null && _r !== void 0 ? _r : false) && hover === 'tertiary', Position: 'top', Target: guid + '-tertiary', Zindex: 9999 }, props.TertiaryToolTipContent),
React.createElement(react_forms_1.ToolTip, { Show: ((_s = props.CancelShowToolTip) !== null && _s !== void 0 ? _s : false) && hover === 'cancel', Position: 'top', Target: guid + '-cancel', Zindex: 9999 }, props.CancelToolTipContent),
props.Show ? React.createElement("div", { style: {
width: '100%',
height: '100%',
position: 'fixed',
top: 0,
left: 0,
opacity: 0.5,
backgroundColor: '#ffffff',
zIndex: 9980,
} }) : null));
};
exports.default = Modal;