@intuitionrobotics/thunderstorm
Version:
163 lines • 7.13 kB
JavaScript
;
/*
* Thunderstorm is a full web app framework!
*
* Typescript & Express backend infrastructure that natively runs on firebase function
* Typescript & React frontend infrastructure
*
* Copyright (C) 2020 Intuition Robotics
*
* 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.
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.Dialog = exports.DialogButton_Cancel = exports.DialogButton_Close = exports.DialogButton_Redo = exports.DialogButton_Undo = exports.DialogButton_Save = exports.DialogButton_Submit = void 0;
const React = require("react");
// noinspection TypeScriptPreferShortImport
const DialogModule_1 = require("./DialogModule");
// noinspection TypeScriptPreferShortImport
const BaseComponent_1 = require("../../core/BaseComponent");
const tools_1 = require("../../utils/tools");
const modalOverlay = {
position: "fixed",
top: 0,
left: 0,
width: "100%",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center"
};
const defaultDialogStyle = {
borderRadius: "4px",
boxShadow: "0px 2px 5px 0 rgba(0, 0, 0, 0.28)",
backgroundColor: "#ffffff",
margin: 0,
minWidth: "200px",
alignItems: "unset"
// position: "absolute",
// top: "50%",
// left: "50%",
// msTransform: "translate(-50%, -50%)",
// transform: "translate(-50%, -50%)"
};
const defaultContentStyle = {
// display: "inline-block",
padding: "24px 18px 0",
};
const defaultButtonStyle = {
borderRadius: "4px",
color: "white",
fontSize: "11px",
letterSpacing: "-0.18px",
outline: "none",
margin: "0px 6px",
height: "23px",
width: "68px"
};
const defaultSubmitStyle = {
backgroundColor: '#00b5ff'
};
const defaultCancelStyle = {
backgroundColor: "#d9d9d9"
};
const DialogButton_Submit = (onSubmit, label) => new DialogModule_1.DialogButton_Builder()
.setStyle(Object.assign(Object.assign({}, defaultSubmitStyle), defaultButtonStyle))
.setContent(label || "Submit")
.setAction(onSubmit);
exports.DialogButton_Submit = DialogButton_Submit;
const DialogButton_Save = (onSave, label) => new DialogModule_1.DialogButton_Builder()
.setStyle(Object.assign(Object.assign({}, defaultSubmitStyle), defaultButtonStyle))
.setContent(label || "Save")
.setAction(onSave);
exports.DialogButton_Save = DialogButton_Save;
const DialogButton_Undo = (onSave, label) => new DialogModule_1.DialogButton_Builder()
.setStyle(Object.assign(Object.assign({}, defaultSubmitStyle), defaultButtonStyle))
.setContent(label || "Undo")
.setAction(onSave);
exports.DialogButton_Undo = DialogButton_Undo;
const DialogButton_Redo = (onSave, label) => new DialogModule_1.DialogButton_Builder()
.setStyle(Object.assign(Object.assign({}, defaultSubmitStyle), defaultButtonStyle))
.setContent(label || "Redo")
.setAction(onSave);
exports.DialogButton_Redo = DialogButton_Redo;
const DialogButton_Close = (onSubmit, label) => new DialogModule_1.DialogButton_Builder()
.setStyle(Object.assign(Object.assign({}, defaultSubmitStyle), defaultButtonStyle))
.setContent(label || "Close")
.setAction(onSubmit || DialogModule_1.DialogModule.close);
exports.DialogButton_Close = DialogButton_Close;
const DialogButton_Cancel = (onSubmit, label) => new DialogModule_1.DialogButton_Builder()
.setStyle(Object.assign(Object.assign({}, defaultCancelStyle), defaultButtonStyle))
.setContent(label || "Cancel")
.setAction(onSubmit || DialogModule_1.DialogModule.close);
exports.DialogButton_Cancel = DialogButton_Cancel;
class Dialog extends BaseComponent_1.BaseComponent {
constructor(props) {
super(props);
this.__showDialog = (model) => {
if (model.allowIndirectClosing)
addEventListener("keydown", Dialog.closeWithEsc);
else
removeEventListener("keydown", Dialog.closeWithEsc);
this.setState({ model });
};
this.__hideDialog = (id) => {
removeEventListener("keydown", Dialog.closeWithEsc);
this.setState({ model: undefined });
};
this.renderTitle = (title) => {
if (!title)
return "";
if (typeof title === "string")
return React.createElement("div", { style: { marginBottom: "12px" } },
React.createElement("div", { dangerouslySetInnerHTML: { __html: title } }));
return React.createElement("div", { className: "match_width" }, title);
};
this.renderContent = (content) => {
if (typeof content === "string")
return React.createElement("div", { style: defaultContentStyle },
React.createElement("div", { dangerouslySetInnerHTML: { __html: content } }));
return content;
};
this.renderButtons = (model) => {
if (!model)
return null;
if (model.buttons.length === 0)
return "";
const actionsStyle = Object.assign({ justifyContent: model.buttons.length > 1 ? "flex-end" : "center" }, (model.actionsStyle ? model.actionsStyle : {}));
return React.createElement("div", { className: `ll_h_c`, style: actionsStyle }, model.buttons.map((button, idx) => React.createElement("div", { key: idx, className: button.className, style: button.style, onClick: button.action }, button.content)));
};
this.onOverlayClicked = (e) => {
(0, tools_1.stopPropagation)(e);
if (this.state.model && !this.state.model.allowIndirectClosing)
return;
DialogModule_1.DialogModule.close();
};
this.state = {};
}
static closeWithEsc(e) {
if (e.keyCode === 27)
DialogModule_1.DialogModule.close();
}
render() {
const dialogModel = this.state.model;
if (!dialogModel)
return null;
return (React.createElement("div", { id: "overlay", style: Object.assign(Object.assign({}, modalOverlay), { background: dialogModel.overlayColor, zIndex: dialogModel.zIndex }), onClick: this.onOverlayClicked },
React.createElement("div", { className: "ll_v_l", style: Object.assign(Object.assign({}, defaultDialogStyle), (dialogModel.style || {})), onClick: tools_1.stopPropagation },
dialogModel.title && this.renderTitle(dialogModel.title),
this.renderContent(dialogModel.content),
this.renderButtons(dialogModel))));
}
}
exports.Dialog = Dialog;
//# sourceMappingURL=Dialog.js.map