2021-05-04 01:46:04 +02:00
|
|
|
/**
|
|
|
|
* Basic button for popup dialog boxes
|
|
|
|
* It creates an event handler such that pressing Esc will perform the click handler.
|
|
|
|
*
|
|
|
|
* Should only be used in other React components, otherwise it may not be properly
|
|
|
|
* unmounted
|
|
|
|
*/
|
|
|
|
import * as React from "react";
|
|
|
|
import * as ReactDOM from "react-dom";
|
|
|
|
|
|
|
|
import { KEY } from "../../../utils/helpers/keyCodes";
|
|
|
|
import { removeElement } from "../../../utils/uiHelpers/removeElement";
|
|
|
|
|
|
|
|
export interface IPopupButtonProps {
|
|
|
|
class?: string;
|
|
|
|
popup: HTMLElement | string;
|
2021-05-29 20:48:56 +02:00
|
|
|
style?: any;
|
2021-05-04 01:46:04 +02:00
|
|
|
text: string;
|
|
|
|
onClose?: () => void;
|
|
|
|
}
|
|
|
|
|
|
|
|
export class PopupButton extends React.Component<IPopupButtonProps, any> {
|
|
|
|
constructor(props: IPopupButtonProps) {
|
|
|
|
super(props);
|
|
|
|
this.handleClick = this.handleClick.bind(this);
|
|
|
|
this.keyListener = this.keyListener.bind(this);
|
|
|
|
}
|
|
|
|
|
2021-05-29 20:48:56 +02:00
|
|
|
componentDidMount(): void {
|
2021-05-04 01:46:04 +02:00
|
|
|
document.addEventListener("keydown", this.keyListener);
|
|
|
|
}
|
|
|
|
|
2021-05-29 20:48:56 +02:00
|
|
|
componentWillUnmount(): void {
|
2021-05-04 01:46:04 +02:00
|
|
|
document.removeEventListener("keydown", this.keyListener);
|
|
|
|
}
|
|
|
|
|
2021-05-29 20:48:56 +02:00
|
|
|
handleClick(): void {
|
2021-05-04 01:46:04 +02:00
|
|
|
if(this.props.onClose)
|
|
|
|
this.props.onClose();
|
|
|
|
//We might be able to remove this?
|
|
|
|
//Clickhandler from the props will override this anyhow.
|
|
|
|
let popup: HTMLElement | null;
|
|
|
|
if (typeof this.props.popup === "string") {
|
|
|
|
popup = document.getElementById(this.props.popup);
|
|
|
|
} else {
|
|
|
|
popup = this.props.popup;
|
|
|
|
}
|
|
|
|
// TODO Check if this is okay? This is essentially calling to unmount a parent component
|
|
|
|
if (popup instanceof HTMLElement) {
|
|
|
|
ReactDOM.unmountComponentAtNode(popup); // Removes everything inside the wrapper container
|
|
|
|
removeElement(popup); // Removes the wrapper container
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-05-29 20:48:56 +02:00
|
|
|
keyListener(e: KeyboardEvent): void {
|
2021-05-04 01:46:04 +02:00
|
|
|
//This doesn't really make sense, a button doesnt have to listen to escape IMO
|
|
|
|
//Too affraid to remove it since im not sure what it will break.. But yuck..
|
|
|
|
if (e.keyCode === KEY.ESC) {
|
|
|
|
this.handleClick();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
render(): React.ReactNode {
|
|
|
|
const className = this.props.class ? this.props.class : "std-button";
|
|
|
|
|
|
|
|
return (
|
|
|
|
<button className={className} onClick={this.handleClick} style={this.props.style}>
|
|
|
|
{this.props.text}
|
|
|
|
</button>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|