This commit is contained in:
danielyxie 2019-03-25 21:48:18 -07:00
commit 83fc4d81b2
4 changed files with 115 additions and 1 deletions

@ -0,0 +1,23 @@
/**
* Text (p Element) with Tooltip
*/
import * as React from "react";
export interface IParagraphWithTooltipProps {
style?: object;
text: string;
tooltip: string;
}
export class ParagraphWithTooltip extends React.Component<IParagraphWithTooltipProps, any> {
render() {
return (
<p className={"tooltip"}>
{this.props.text}
<span className={"tooltiptext"}>
{this.props.tooltip}
</span>
</p>
)
}
}

@ -0,0 +1,65 @@
/**
* Close button for popup dialog boxes
* It creates an event handler such that pressing Esc will close the binded popup
*
* 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";
export interface IPopupCloseButtonProps {
class?: string;
popup: HTMLElement | string;
style?: object;
text: string;
}
export class PopupCloseButton extends React.Component<IPopupCloseButtonProps, any> {
constructor(props: IPopupCloseButtonProps) {
super(props);
this.closePopup = this.closePopup.bind(this);
this.keyListener = this.keyListener.bind(this);
}
componentDidMount() {
document.addEventListener("keydown", this.keyListener);
}
componentWillUnmount() {
document.removeEventListener("keydown", this.keyListener);
}
closePopup() {
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);
}
}
keyListener(e: KeyboardEvent) {
if (e.keyCode === KEY.ESC) {
this.closePopup();
}
}
render() {
const className = this.props.class ? this.props.class : "std-button";
return (
<button className={className} onClick={this.closePopup} style={this.props.style}>
{this.props.text};
</button>
)
}
}

@ -0,0 +1,24 @@
/**
* Basic stateless button
* Uses the 'std-button' css class
*/
import * as React from "react";
export interface IStdButtonProps {
disabled?: boolean;
onClick?: (e: React.MouseEvent<HTMLElement>) => any;
style?: object;
text: string;
}
export class StdButton extends React.Component<IStdButtonProps, any> {
render() {
const className = this.props.disabled ? "std-button-disabled" : "std-button";
return (
<button className={className} onClick={this.props.onClick} style={this.props.style}>
{this.props.text};
</button>
)
}
}

@ -1,4 +1,6 @@
/* Creates a Close/Cancel button that is used for removing popups */
/**
* Creates a Close/Cancel button that is used for removing popups
*/
import { createElement } from "./createElement";
import { removeElement } from "./removeElement";