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

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-06-25 16:35:40 +01:00
parent 61618d5162
commit ed634a2bde
2 changed files with 75 additions and 15 deletions

View file

@ -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;

View file

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