@nu-art/thunder
Version:
Thunder - React & Typescript based frontend framework
199 lines • 8.23 kB
JavaScript
;
/*
* Thunder is a typescript & react frontend foundation that natively
* runs on firebase function and is a part of the Thunderstorm larger project
*
* Copyright (C) 2018 Adam van der Kruk aka TacB0sS
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
// noinspection TypeScriptPreferShortImport
var dialog_module_1 = require("../modules/dialog-module");
// noinspection TypeScriptPreferShortImport
var BaseComponent_1 = require("../core/BaseComponent");
var modalOverlay = {
position: "fixed",
top: 0,
left: 0,
width: "100%",
height: "100%"
};
var defaultDialogStyle = {
borderRadius: "4px",
boxShadow: "0px 2px 5px 0 rgba(0, 0, 0, 0.28)",
backgroundColor: "#ffffff",
margin: 0,
minWidth: "200px",
minHeight: "200px",
alignItems: "unset"
// position: "absolute",
// top: "50%",
// left: "50%",
// msTransform: "translate(-50%, -50%)",
// transform: "translate(-50%, -50%)"
};
var defaultTitleStyle = {
// display: "inline-block",
fontSize: "1.25rem",
fontWeight: 500,
lineHeight: 1.6,
letterSpacing: "0.0075em",
padding: "5px 14px 0px",
};
var defaultContentStyle = {
// display: "inline-block",
padding: "24px 18px 0",
};
var defaultButtonStyle = {
borderRadius: "4px",
color: "white",
fontSize: "11px",
letterSpacing: "-0.18px",
outline: "none",
margin: "0px 6px",
height: "23px",
width: "68px"
};
var defaultSubmitStyle = {
backgroundColor: '#00b5ff'
};
var defaultCancelStyle = {
backgroundColor: "#d9d9d9"
};
exports.DialogButton_Submit = function (onSubmit, label) {
return new dialog_module_1.DialogButton_Builder()
.setStyle(__assign(__assign({}, defaultSubmitStyle), defaultButtonStyle))
.setContent(label || "Submit")
.setAction(onSubmit);
};
exports.DialogButton_Save = function (onSave, label) {
return new dialog_module_1.DialogButton_Builder()
.setStyle(__assign(__assign({}, defaultSubmitStyle), defaultButtonStyle))
.setContent(label || "Save")
.setAction(onSave);
};
exports.DialogButton_Undo = function (onSave, label) {
return new dialog_module_1.DialogButton_Builder()
.setStyle(__assign(__assign({}, defaultSubmitStyle), defaultButtonStyle))
.setContent(label || "Undo")
.setAction(onSave);
};
exports.DialogButton_Redo = function (onSave, label) {
return new dialog_module_1.DialogButton_Builder()
.setStyle(__assign(__assign({}, defaultSubmitStyle), defaultButtonStyle))
.setContent(label || "Redo")
.setAction(onSave);
};
exports.DialogButton_Close = function (onSubmit, label) {
return new dialog_module_1.DialogButton_Builder()
.setStyle(__assign(__assign({}, defaultSubmitStyle), defaultButtonStyle))
.setContent(label || "Close")
.setAction(onSubmit || dialog_module_1.DialogModule.close);
};
exports.DialogButton_Cancel = function (onSubmit, label) {
return new dialog_module_1.DialogButton_Builder()
.setStyle(__assign(__assign({}, defaultCancelStyle), defaultButtonStyle))
.setContent(label || "Cancel")
.setAction(onSubmit || dialog_module_1.DialogModule.close);
};
var Dialog = /** @class */ (function (_super) {
__extends(Dialog, _super);
function Dialog(props) {
var _this = _super.call(this, props) || this;
_this.showDialog = function (model) {
if (model && model.allowIndirectClosing)
addEventListener("keydown", Dialog.closeWithEsc);
_this.setState({ model: model });
};
_this.stopPropagation = function (e) {
e.preventDefault();
e.stopPropagation();
};
_this.renderTitle = function (title) {
if (!title)
return "";
if (typeof title === "string")
return React.createElement("div", { style: defaultTitleStyle },
React.createElement("div", { dangerouslySetInnerHTML: { __html: title } }));
return React.createElement("div", { className: "match_width" }, title);
};
_this.renderContent = function (content) {
if (typeof content === "string")
return React.createElement("div", { style: defaultContentStyle },
React.createElement("div", { dangerouslySetInnerHTML: { __html: content } }));
return content;
};
_this.renderButtons = function (model) {
if (!model)
return null;
return React.createElement("div", { className: "ll_h_c", style: __assign({ marginTop: "auto", justifyContent: model.buttons.length > 1 ? "flex-end" : "center", padding: "12px 0" }, (model.actionsStyle ? model.actionsStyle : {})) }, model.buttons.map(function (button, idx) { return React.createElement("div", { key: idx },
React.createElement("button", { className: button.className, style: button.style, onClick: button.action }, button.content)); }));
};
_this.onOverlayClicked = function (e) {
_this.stopPropagation(e);
if (_this.state.model && !_this.state.model.allowIndirectClosing)
return;
dialog_module_1.DialogModule.close();
};
_this.state = {};
return _this;
}
Dialog.closeWithEsc = function (e) {
if (e.keyCode === 27)
dialog_module_1.DialogModule.close();
};
Dialog.prototype.render = function () {
var _this = this;
if (!this.state.model) {
removeEventListener("keydown", Dialog.closeWithEsc);
return null;
}
var dialogModel = this.state.model;
return (React.createElement("div", { style: __assign(__assign({}, modalOverlay), { background: dialogModel.overlayColor, zIndex: dialogModel.zIndex }), onClick: this.onOverlayClicked },
React.createElement("div", { className: dialogModel.className + " ll_h_c match_height match_width", onClick: function (e) { return _this.stopPropagation(e); } },
React.createElement("div", { className: "ll_v_c match_width" },
React.createElement("div", { className: "ll_v_l", style: __assign(__assign({}, defaultDialogStyle), (dialogModel.style || {})) },
dialogModel.title && this.renderTitle(dialogModel.title),
this.renderContent(dialogModel.content),
this.renderButtons(dialogModel))))));
};
return Dialog;
}(BaseComponent_1.BaseComponent));
exports.Dialog = Dialog;
//# sourceMappingURL=Dialog.js.map