Add StyledRadioGroup to simplify use of StyledRadioButton and use in Appearance Tab

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/elements/StyledRadioGroup.tsx

@@ -0,0 +1,61 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import classNames from "classnames";
+
+import StyledRadioButton from "./StyledRadioButton";
+
+interface IDefinition<T extends string> {
+    value: T;
+    className?: string;
+    disabled?: boolean;
+    label: React.ReactChild;
+    description?: React.ReactChild;
+}
+
+interface IProps<T extends string> {
+    name: string;
+    className?: string;
+    definitions: IDefinition<T>[];
+    value?: T; // if not provided no options will be selected
+    onChange(newValue: T);
+}
+
+function StyledRadioGroup<T extends string>({name, definitions, value, className, onChange}: IProps<T>) {
+    const _onChange = e => {
+        onChange(e.target.value);
+    };
+
+    return <React.Fragment>
+        {definitions.map(d => <React.Fragment>
+            <StyledRadioButton
+                key={d.value}
+                className={classNames(className, d.className)}
+                onChange={_onChange}
+                checked={d.value === value}
+                name={name}
+                value={d.value}
+                disabled={d.disabled}
+            >
+                {d.label}
+            </StyledRadioButton>
+            {d.description}
+        </React.Fragment>)}
+    </React.Fragment>;
+}
+
+export default StyledRadioGroup;

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx

@@ -33,6 +33,7 @@ import StyledCheckbox from '../../../elements/StyledCheckbox';
 import SettingsFlag from '../../../elements/SettingsFlag';
 import Field from '../../../elements/Field';
 import EventTilePreview from '../../../elements/EventTilePreview';
+import StyledRadioGroup from "../../../elements/StyledRadioGroup";
 
 interface IProps {
 }
@@ -116,8 +117,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         };
     }
 
-    private onThemeChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-        const newTheme = e.target.value;
+    private onThemeChange = (newTheme: string): void => {
         if (this.state.theme === newTheme) return;
 
         // doing getValue in the .catch will still return the value we failed to set,
@@ -277,19 +277,18 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
             <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_themeSection">
                 <span className="mx_SettingsTab_subheading">{_t("Theme")}</span>
                 {systemThemeSection}
-                <div className="mx_ThemeSelectors" onChange={this.onThemeChange}>
-                    {orderedThemes.map(theme => {
-                        return <StyledRadioButton
-                            key={theme.id}
-                            value={theme.id}
-                            name="theme"
-                            disabled={this.state.useSystemTheme}
-                            checked={!this.state.useSystemTheme && theme.id === this.state.theme}
-                            className={"mx_ThemeSelector_" + theme.id}
-                        >
-                            {theme.name}
-                        </StyledRadioButton>;
-                    })}
+                <div className="mx_ThemeSelectors">
+                    <StyledRadioGroup
+                        name="theme"
+                        definitions={orderedThemes.map(t => ({
+                            value: t.id,
+                            label: t.name,
+                            disabled: this.state.useSystemTheme,
+                            className: "mx_ThemeSelector_" + t.id,
+                        }))}
+                        onChange={this.onThemeChange}
+                        value={this.state.useSystemTheme ? undefined : this.state.theme}
+                    />
                 </div>
                 {customThemeForm}
                 <SettingsFlag name="useCompactLayout" level={SettingLevel.ACCOUNT} useCheckbox={true} />