Refactored SourceFile-related code to TypeScript

src/ui/React/AugmentationAccordion.tsx

@@ -0,0 +1,33 @@
+/**
+ * React Component for displaying a single Augmentation as an accordion.
+ *
+ * The header of the accordion contains the Augmentation's name (and level, if
+ * applicable), and the accordion's panel contains the Augmentation's level.
+ */
+import * as React from "react";
+
+import { Accordion } from "./Accordion";
+
+import { Augmentation } from "../../Augmentation/Augmentation";
+import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
+
+type IProps = {
+    aug: Augmentation,
+    level?: number | string | null,
+}
+
+export function AugmentationAccordion(props: IProps): React.ReactElement {
+    let displayName = props.aug.name;
+    if (props.level != null) {
+        if (props.aug.name === AugmentationNames.NeuroFluxGovernor) {
+            displayName += (` - Level ${props.level}`)
+        }
+    }
+
+    return (
+        <Accordion
+            headerContent={<p>{displayName}</p>}
+            panelContent={<p>{props.aug.info}</p>}
+        />
+    )
+}

src/ui/React/Popup.tsx

@@ -13,12 +13,10 @@ interface IProps {
     props: object;
 }
 
-export class Popup extends React.Component<IProps, any> {
-    render() {
-        return (
-            <div className={"popup-box-content"} id={`${this.props.id}-content`}>
-                {React.createElement(this.props.content, this.props.props)}
-            </div>
-        )
-    }
+export function Popup(props: IProps): React.ReactElement {
+    return (
+        <div className={"popup-box-content"} id={`${props.id}-content`}>
+            {React.createElement(props.content, props.props)}
+        </div>
+    )
 }

src/ui/React/StdButton.tsx

@@ -5,6 +5,7 @@
 import * as React from "react";
 
 interface IStdButtonProps {
+    addClasses?: string;
     disabled?: boolean;
     id?: string;
     onClick?: (e: React.MouseEvent<HTMLElement>) => any;
@@ -17,30 +18,32 @@ type IInnerHTMLMarkup = {
     __html: string;
 }
 
-export class StdButton extends React.Component<IStdButtonProps, any> {
-    render() {
-        const hasTooltip = this.props.tooltip != null && this.props.tooltip !== "";
-        let className = this.props.disabled ? "std-button-disabled" : "std-button";
-        if (hasTooltip) {
-            className += " tooltip";
-        }
-
-        // Tooltip will be set using inner HTML
-        let tooltipMarkup: IInnerHTMLMarkup | null;
-        if (hasTooltip) {
-            tooltipMarkup = {
-                __html: this.props.tooltip!
-            }
-        }
-
-        return (
-            <button className={className} id={this.props.id} onClick={this.props.onClick} style={this.props.style}>
-                {this.props.text}
-                {
-                    hasTooltip &&
-                    <span className={"tooltiptext"} dangerouslySetInnerHTML={tooltipMarkup!}></span>
-                }
-            </button>
-        )
+export function StdButton(props: IStdButtonProps): React.ReactElement {
+    const hasTooltip = props.tooltip != null && props.tooltip !== "";
+    let className = props.disabled ? "std-button-disabled" : "std-button";
+    if (hasTooltip) {
+        className += " tooltip";
     }
+
+    if (typeof props.addClasses === "string") {
+        className += ` ${props.addClasses}`;
+    }
+
+    // Tooltip will be set using inner HTML
+    let tooltipMarkup: IInnerHTMLMarkup | null;
+    if (hasTooltip) {
+        tooltipMarkup = {
+            __html: props.tooltip!
+        }
+    }
+
+    return (
+        <button className={className} id={props.id} onClick={props.onClick} style={props.style}>
+            {props.text}
+            {
+                hasTooltip &&
+                <span className={"tooltiptext"} dangerouslySetInnerHTML={tooltipMarkup!}></span>
+            }
+        </button>
+    )
 }