diff --git a/src/ui/React/ParagraphWithTooltip.tsx b/src/ui/React/ParagraphWithTooltip.tsx new file mode 100644 index 000000000..ac0a675a3 --- /dev/null +++ b/src/ui/React/ParagraphWithTooltip.tsx @@ -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 { + render() { + return ( +

+ {this.props.text} + + {this.props.tooltip} + +

+ ) + } +} diff --git a/src/ui/React/PopupCloseButton.tsx b/src/ui/React/PopupCloseButton.tsx new file mode 100644 index 000000000..7749db4f2 --- /dev/null +++ b/src/ui/React/PopupCloseButton.tsx @@ -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 { + 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 ( + + ) + } +} diff --git a/src/ui/React/StdButton.tsx b/src/ui/React/StdButton.tsx new file mode 100644 index 000000000..21f8ab180 --- /dev/null +++ b/src/ui/React/StdButton.tsx @@ -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) => any; + style?: object; + text: string; +} + +export class StdButton extends React.Component { + render() { + const className = this.props.disabled ? "std-button-disabled" : "std-button"; + + return ( + + ) + } +} diff --git a/utils/uiHelpers/createPopupCloseButton.ts b/utils/uiHelpers/createPopupCloseButton.ts index 8fb185bcc..22c34bcd7 100644 --- a/utils/uiHelpers/createPopupCloseButton.ts +++ b/utils/uiHelpers/createPopupCloseButton.ts @@ -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";