@intuitionrobotics/thunderstorm
Version:
154 lines • 6.08 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.
*/
import * as React from "react";
// noinspection TypeScriptPreferShortImport
import { DialogButton_Builder, DialogModule } from "./DialogModule.js";
// noinspection TypeScriptPreferShortImport
import { BaseComponent } from "../../core/BaseComponent.js";
import { stopPropagation } from "../../utils/tools.js";
import {} from "../../components/types.js";
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"
};
export const DialogButton_Submit = (onSubmit, label) => new DialogButton_Builder()
.setStyle({ ...defaultSubmitStyle, ...defaultButtonStyle })
.setContent(label || "Submit")
.setAction(onSubmit);
export const DialogButton_Save = (onSave, label) => new DialogButton_Builder()
.setStyle({ ...defaultSubmitStyle, ...defaultButtonStyle })
.setContent(label || "Save")
.setAction(onSave);
export const DialogButton_Undo = (onSave, label) => new DialogButton_Builder()
.setStyle({ ...defaultSubmitStyle, ...defaultButtonStyle })
.setContent(label || "Undo")
.setAction(onSave);
export const DialogButton_Redo = (onSave, label) => new DialogButton_Builder()
.setStyle({ ...defaultSubmitStyle, ...defaultButtonStyle })
.setContent(label || "Redo")
.setAction(onSave);
export const DialogButton_Close = (onSubmit, label) => new DialogButton_Builder()
.setStyle({ ...defaultSubmitStyle, ...defaultButtonStyle })
.setContent(label || "Close")
.setAction(onSubmit || DialogModule.close);
export const DialogButton_Cancel = (onSubmit, label) => new DialogButton_Builder()
.setStyle({ ...defaultCancelStyle, ...defaultButtonStyle })
.setContent(label || "Cancel")
.setAction(onSubmit || DialogModule.close);
export class Dialog extends BaseComponent {
constructor(props) {
super(props);
this.state = {};
}
static closeWithEsc(e) {
if (e.keyCode === 27)
DialogModule.close();
}
__showDialog = (model) => {
if (model.allowIndirectClosing)
addEventListener("keydown", Dialog.closeWithEsc);
else
removeEventListener("keydown", Dialog.closeWithEsc);
this.setState({ model });
};
__hideDialog = (_id) => {
removeEventListener("keydown", Dialog.closeWithEsc);
this.setState({ model: undefined });
};
render() {
const dialogModel = this.state.model;
if (!dialogModel)
return null;
return (React.createElement("div", { id: "overlay", style: { ...modalOverlay, background: dialogModel.overlayColor, zIndex: dialogModel.zIndex }, onClick: this.onOverlayClicked },
React.createElement("div", { className: "ll_v_l", style: { ...defaultDialogStyle, ...(dialogModel.style || {}) }, onClick: stopPropagation },
dialogModel.title && this.renderTitle(dialogModel.title),
this.renderContent(dialogModel.content),
this.renderButtons(dialogModel))));
}
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);
};
renderContent = (content) => {
if (typeof content === "string")
return React.createElement("div", { style: defaultContentStyle },
React.createElement("div", { dangerouslySetInnerHTML: { __html: content } }));
return content;
};
renderButtons = (model) => {
if (!model)
return null;
if (model.buttons.length === 0)
return "";
const actionsStyle = { 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)));
};
onOverlayClicked = (e) => {
stopPropagation(e);
if (this.state.model && !this.state.model.allowIndirectClosing)
return;
DialogModule.close();
};
}
//# sourceMappingURL=Dialog.js.map