Move LayoutSwitcher into a separate component

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

src/components/views/settings/LayoutSwitcher.tsx

@@ -0,0 +1,129 @@
+/*
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+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 SettingsStore from "../../../settings/SettingsStore";
+import EventTilePreview from "../elements/EventTilePreview";
+import StyledRadioButton from "../elements/StyledRadioButton";
+import { _t } from "../../../languageHandler";
+import { Layout } from "../../../settings/Layout";
+import { SettingLevel } from "../../../settings/SettingLevel";
+
+interface IProps {
+    userId: string;
+    displayName: string;
+    avatarUrl: string;
+    messagePreviewText: string;
+    onLayoutChanged?: (layout: Layout) => void;
+}
+
+interface IState {
+    layout: Layout;
+}
+
+export default class LayoutSwitcher extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            layout: SettingsStore.getValue("layout"),
+        };
+    }
+
+    private onLayoutChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+        const layout = e.target.value as Layout;
+
+        this.setState({ layout: layout });
+        SettingsStore.setValue("layout", null, SettingLevel.DEVICE, layout);
+        this.props.onLayoutChanged(layout);
+    };
+
+    public render(): JSX.Element {
+        const ircClasses = classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
+            mx_AppearanceUserSettingsTab_Layout_RadioButton_selected: this.state.layout == Layout.IRC,
+        });
+        const groupClasses = classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
+            mx_AppearanceUserSettingsTab_Layout_RadioButton_selected: this.state.layout == Layout.Group,
+        });
+        const bubbleClasses = classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
+            mx_AppearanceUserSettingsTab_Layout_RadioButton_selected: this.state.layout === Layout.Bubble,
+        });
+
+        return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_Layout">
+            <span className="mx_SettingsTab_subheading">
+                { _t("Message layout") }
+            </span>
+
+            <div className="mx_AppearanceUserSettingsTab_Layout_RadioButtons">
+                <label className={ircClasses}>
+                    <EventTilePreview
+                        className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
+                        message={this.props.messagePreviewText}
+                        layout={Layout.IRC}
+                        userId={this.props.userId}
+                        displayName={this.props.displayName}
+                        avatarUrl={this.props.avatarUrl}
+                    />
+                    <StyledRadioButton
+                        name="layout"
+                        value={Layout.IRC}
+                        checked={this.state.layout === Layout.IRC}
+                        onChange={this.onLayoutChange}
+                    >
+                        { _t("IRC") }
+                    </StyledRadioButton>
+                </label>
+                <label className={groupClasses}>
+                    <EventTilePreview
+                        className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
+                        message={this.props.messagePreviewText}
+                        layout={Layout.Group}
+                        userId={this.props.userId}
+                        displayName={this.props.displayName}
+                        avatarUrl={this.props.avatarUrl}
+                    />
+                    <StyledRadioButton
+                        name="layout"
+                        value={Layout.Group}
+                        checked={this.state.layout == Layout.Group}
+                        onChange={this.onLayoutChange}
+                    >
+                        { _t("Modern") }
+                    </StyledRadioButton>
+                </label>
+                <label className={bubbleClasses}>
+                    <EventTilePreview
+                        className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
+                        message={this.props.messagePreviewText}
+                        layout={Layout.Bubble}
+                        userId={this.props.userId}
+                        displayName={this.props.displayName}
+                        avatarUrl={this.props.avatarUrl}
+                    />
+                    <StyledRadioButton
+                        name="layout"
+                        value={Layout.Bubble}
+                        checked={this.state.layout == Layout.Bubble}
+                        onChange={this.onLayoutChange}
+                    >
+                        { _t("Message bubbles") }
+                    </StyledRadioButton>
+                </label>
+            </div>
+        </div>;
+    }
+}

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

@@ -37,10 +37,9 @@ import StyledRadioGroup from "../../../elements/StyledRadioGroup";
 import { SettingLevel } from "../../../../../settings/SettingLevel";
 import { UIFeature } from "../../../../../settings/UIFeature";
 import { Layout } from "../../../../../settings/Layout";
-import classNames from 'classnames';
-import StyledRadioButton from '../../../elements/StyledRadioButton';
 import { replaceableComponent } from "../../../../../utils/replaceableComponent";
 import { compare } from "../../../../../utils/strings";
+import LayoutSwitcher from "../../LayoutSwitcher";
 
 interface IProps {
 }
@@ -243,17 +242,8 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         this.setState({ customThemeUrl: e.target.value });
     };
 
-    private onLayoutChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    private onLayoutChanged = (layout: Layout): void => {
-        let layout;
-        switch (e.target.value) {
-            case "irc": layout = Layout.IRC; break;
-            case "group": layout = Layout.Group; break;
-            case "bubble": layout = Layout.Bubble; break;
-        }
-
         this.setState({ layout: layout });
-
-        SettingsStore.setValue("layout", null, SettingLevel.DEVICE, layout);
     };
 
     private onIRCLayoutChange = (enabled: boolean) => {
@@ -391,75 +381,6 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         </div>;
     }
 
-    private renderLayoutSection = () => {
-        return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_Layout">
-            <span className="mx_SettingsTab_subheading">{ _t("Message layout") }</span>
-
-            <div className="mx_AppearanceUserSettingsTab_Layout_RadioButtons">
-                <label className={classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
-                    mx_AppearanceUserSettingsTab_Layout_RadioButton_selected: this.state.layout == Layout.IRC,
-                })}>
-                    <EventTilePreview
-                        className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
-                        message={this.MESSAGE_PREVIEW_TEXT}
-                        layout={Layout.IRC}
-                        userId={this.state.userId}
-                        displayName={this.state.displayName}
-                        avatarUrl={this.state.avatarUrl}
-                    />
-                    <StyledRadioButton
-                        name="layout"
-                        value="irc"
-                        checked={this.state.layout === Layout.IRC}
-                        onChange={this.onLayoutChange}
-                    >
-                        { _t("IRC") }
-                    </StyledRadioButton>
-                </label>
-                <label className={classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
-                    mx_AppearanceUserSettingsTab_Layout_RadioButton_selected: this.state.layout == Layout.Group,
-                })}>
-                    <EventTilePreview
-                        className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
-                        message={this.MESSAGE_PREVIEW_TEXT}
-                        layout={Layout.Group}
-                        userId={this.state.userId}
-                        displayName={this.state.displayName}
-                        avatarUrl={this.state.avatarUrl}
-                    />
-                    <StyledRadioButton
-                        name="layout"
-                        value="group"
-                        checked={this.state.layout == Layout.Group}
-                        onChange={this.onLayoutChange}
-                    >
-                        { _t("Modern") }
-                    </StyledRadioButton>
-                </label>
-                <label className={classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
-                    mx_AppearanceUserSettingsTab_Layout_RadioButton_selected: this.state.layout === Layout.Bubble,
-                })}>
-                    <EventTilePreview
-                        className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
-                        message={this.MESSAGE_PREVIEW_TEXT}
-                        layout={Layout.Bubble}
-                        userId={this.state.userId}
-                        displayName={this.state.displayName}
-                        avatarUrl={this.state.avatarUrl}
-                    />
-                    <StyledRadioButton
-                        name="layout"
-                        value="bubble"
-                        checked={this.state.layout == Layout.Bubble}
-                        onChange={this.onLayoutChange}
-                    >
-                        { _t("Message bubbles") }
-                    </StyledRadioButton>
-                </label>
-            </div>
-        </div>;
-    };
-
     private renderAdvancedSection() {
         if (!SettingsStore.getValue(UIFeature.AdvancedSettings)) return null;
 
@@ -527,6 +448,19 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
     render() {
         const brand = SdkConfig.get().brand;
 
+        let layoutSection;
+        if (SettingsStore.getValue("feature_new_layout_switcher")) {
+            layoutSection = (
+                <LayoutSwitcher
+                    userId={this.state.userId}
+                    displayName={this.state.displayName}
+                    avatarUrl={this.state.avatarUrl}
+                    messagePreviewText={this.MESSAGE_PREVIEW_TEXT}
+                    onLayoutChanged={this.onLayoutChanged}
+                />
+            );
+        }
+
         return (
             <div className="mx_SettingsTab mx_AppearanceUserSettingsTab">
                 <div className="mx_SettingsTab_heading">{ _t("Customise your appearance") }</div>
@@ -534,7 +468,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                     { _t("Appearance Settings only affect this %(brand)s session.", { brand }) }
                 </div>
                 { this.renderThemeSection() }
-                { SettingsStore.getValue("feature_new_layout_switcher") ? this.renderLayoutSection() : null }
+                { layoutSection }
                 { this.renderFontSection() }
                 { this.renderAdvancedSection() }
             </div>