Extract shared logic between KeyValue and Text to KeyValueGeneric

src/css/KeyValue.scss

@@ -13,6 +13,10 @@
     line-height: $two-row-line-height;
   }
 
+  &.key-value-center .key-value-key {
+    text-align: center;
+  }
+
   table {
     width: 100%;
   }

src/css/Text.scss

@@ -1,23 +0,0 @@
-@import 'variables';
-
-.text-component {
-  height: $default-component-height;
-  line-height: $default-component-line-height;
-  padding: 0px 6px;
-  overflow: hidden;
-
-  .text-component-text {
-    width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  .center-text {
-    text-align: -webkit-center;
-    text-align: center;
-  }
-  
-  > table {
-    width: 100%;
-  }
-}

src/layout/KeyValue.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import * as LiveSplit from "../livesplit-core";
-import { colorToCss, gradientToCss } from "../util/ColorUtil";
-import { map } from "../util/OptionUtil";
+import KeyValueGeneric, { KeyValueDisplay } from "./KeyValueGeneric";
 
 import "../css/KeyValue.scss";
 
@@ -9,54 +8,16 @@ export interface Props { state: LiveSplit.KeyValueComponentStateJson }
 
 export default class KeyValue extends React.Component<Props> {
     public render() {
-        const keyCell = <td
-            className="key-value-key"
-            style={{
-                color: map(this.props.state.key_color, colorToCss),
-            }}
-        >
-            {this.props.state.key}
-        </td>;
-
-        const valueCell = <td
-            className="key-value-value time"
-            style={{
-                color: map(this.props.state.value_color, colorToCss),
-            }}
-        >
-            {this.props.state.value}
-        </td>;
-
-        let keyValueRows;
-        if (this.props.state.display_two_rows) {
-            keyValueRows = <>
-                <tr>
-                    {keyCell}
-                </tr>
-                <tr>
-                    {valueCell}
-                </tr>
-            </>;
-        } else {
-            keyValueRows = <tr>
-                {keyCell}
-                {valueCell}
-            </tr>;
-        }
-
-        return (
-            <div
-                className={`key-value ${this.props.state.display_two_rows ? " key-value-two-rows" : ""}`}
-                style={{
-                    background: gradientToCss(this.props.state.background),
-                }}
-            >
-                <table>
-                    <tbody>
-                        {keyValueRows}
-                    </tbody>
-                </table>
-            </div>
-        );
+        return <KeyValueGeneric
+            display={this.props.state.display_two_rows ?
+                KeyValueDisplay.SplitTwoRows :
+                KeyValueDisplay.SplitOneRow
+            }
+            keyText={this.props.state.key}
+            keyColor={this.props.state.key_color}
+            valueText={this.props.state.value}
+            valueColor={this.props.state.value_color}
+            wrapperBackground={this.props.state.background}
+        />;
     }
 }

src/layout/KeyValueGeneric.tsx

@@ -0,0 +1,82 @@
+import * as React from "react";
+import * as LiveSplit from "../livesplit-core";
+
+import { colorToCss, gradientToCss } from "../util/ColorUtil";
+import { map } from "../util/OptionUtil";
+
+import "../css/KeyValue.scss";
+
+export enum KeyValueDisplay {
+    Center,
+    SplitOneRow,
+    SplitTwoRows,
+}
+
+export interface Props {
+  display: KeyValueDisplay,
+  keyColor: LiveSplit.Color | null,
+  keyText: string,
+  valueColor: LiveSplit.Color | null,
+  valueText: string | null,
+  wrapperBackground: LiveSplit.Gradient,
+}
+
+export default class KeyValueGeneric extends React.Component<Props> {
+    public render() {
+        const keyCell = <td
+            className="key-value-key"
+            style={{
+                color: map(this.props.keyColor, colorToCss),
+            }}
+        >
+            {this.props.keyText}
+        </td>;
+
+        const valueCell = <td
+            className="key-value-value time"
+            style={{
+                color: map(this.props.valueColor, colorToCss),
+            }}
+        >
+            {this.props.valueText}
+        </td>;
+
+        let keyValueRows, wrapperClassName;
+        if (this.props.display == KeyValueDisplay.Center) {
+            keyValueRows = <tr>{keyCell}</tr>;
+            wrapperClassName = "key-value-center";
+        }
+        else if (this.props.display == KeyValueDisplay.SplitTwoRows) {
+            keyValueRows = <>
+                <tr>
+                    {keyCell}
+                </tr>
+                <tr>
+                    {valueCell}
+                </tr>
+            </>;
+            wrapperClassName = "key-value-two-rows";
+        } else {
+            keyValueRows = <tr>
+                {keyCell}
+                {valueCell}
+            </tr>;
+            wrapperClassName = "";
+        }
+
+        return (
+            <div
+                className={`key-value ${wrapperClassName}`}
+                style={{
+                    background: gradientToCss(this.props.wrapperBackground),
+                }}
+            >
+                <table>
+                    <tbody>
+                        {keyValueRows}
+                    </tbody>
+                </table>
+            </div>
+        );
+    }
+}

src/layout/Text.tsx

@@ -1,9 +1,7 @@
 import * as React from "react";
 import * as LiveSplit from "../livesplit-core";
-import { gradientToCss, colorToCss } from "../util/ColorUtil";
-import { map } from "../util/OptionUtil";
+import KeyValueGeneric, { KeyValueDisplay } from "./KeyValueGeneric";
 
-import "../css/Text.scss";
 import "../css/KeyValue.scss";
 
 export interface Props { state: LiveSplit.TextComponentStateJson }
@@ -14,53 +12,29 @@ export default class Text extends React.Component<Props> {
     }
 
     public render() {
-        const { background, text } = this.props.state;
+        const { text } = this.props.state;
 
-        const rendered = "Center" in text ? (
-            <tr>
-                <td
-                    className="text-component-text center-text"
-                    style={{
-                        color: map(this.props.state.left_center_color, colorToCss),
-                    }}
-                >
-                    {text.Center}
-                </td>
-            </tr>
-        ) : (
-                <tr>
-                    <td
-                        className="key-value-key"
-                        style={{
-                            color: map(this.props.state.left_center_color, colorToCss),
-                        }}
-                    >
-                        {text.Split[0]}
-                    </td>
-                    <td
-                        className="key-value-value time"
-                        style={{
-                            color: map(this.props.state.right_color, colorToCss),
-                        }}
-                    >
-                        {text.Split[1]}
-                    </td>
-                </tr>
-            );
+        if ("Center" in text) {
+            return <KeyValueGeneric
+                display={KeyValueDisplay.Center}
+                keyColor={this.props.state.left_center_color}
+                keyText={text.Center}
+                valueColor={null}
+                valueText={null}
+                wrapperBackground={this.props.state.background}
+            />;
+        }
 
-        return (
-            <div
-                className={"Center" in text ? "text-component" : "key-value"}
-                style={{
-                    background: gradientToCss(background),
-                }}
-            >
-                <table>
-                    <tbody>
-                        {rendered}
-                    </tbody>
-                </table>
-            </div>
-        );
+        return <KeyValueGeneric
+            display={this.props.state.display_two_rows ?
+                KeyValueDisplay.SplitTwoRows :
+                KeyValueDisplay.SplitOneRow
+            }
+            keyColor={this.props.state.left_center_color}
+            keyText={text.Split[0]}
+            valueColor={this.props.state.right_color}
+            valueText={text.Split[1]}
+            wrapperBackground={this.props.state.background}
+        />;
     }
 }