mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-11-22 23:53:48 +01:00
Added several resuable React components for commonly-used elements
This commit is contained in:
parent
ea7f0752cb
commit
3cf18f100a
23
src/ui/React/ParagraphWithTooltip.tsx
Normal file
23
src/ui/React/ParagraphWithTooltip.tsx
Normal file
@ -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>
|
||||
)
|
||||
}
|
||||
}
|
65
src/ui/React/PopupCloseButton.tsx
Normal file
65
src/ui/React/PopupCloseButton.tsx
Normal file
@ -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>
|
||||
)
|
||||
}
|
||||
}
|
24
src/ui/React/StdButton.tsx
Normal file
24
src/ui/React/StdButton.tsx
Normal file
@ -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";
|
||||
|
Loading…
Reference in New Issue
Block a user