Merge pull request #4729 from matrix-org/joriks/appearance-tab

Move Settings flag to ts

res/css/views/elements/_StyledCheckbox.scss

@@ -48,6 +48,8 @@ limitations under the License.
             border-radius: $border-radius;
 
             img {
+                display: none;
+
                 height: 100%;
                 width: 100%;
                 filter: invert(100%);
@@ -57,6 +59,10 @@ limitations under the License.
         &:checked + label > .mx_Checkbox_background {
             background: $accent-color;
             border-color: $accent-color;
+
+            img {
+                display: block;
+            }
         }
 
         & + label > *:not(.mx_Checkbox_background) {

src/components/views/elements/AccessibleButton.tsx

@@ -15,9 +15,34 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import {Key} from '../../../Keyboard';
+import classnames from 'classnames';
+
+/**
+ * children: React's magic prop. Represents all children given to the element.
+ * element:  (optional) The base element type. "div" by default.
+ * onClick:  (required) Event handler for button activation. Should be
+ *           implemented exactly like a normal onClick handler.
+ */
+interface IProps extends React.InputHTMLAttributes<Element> {
+    inputRef?: React.Ref<Element>;
+    element?: string;
+    // The kind of button, similar to how Bootstrap works.
+    // See available classes for AccessibleButton for options.
+    kind?: string;
+    // The ARIA role
+    role?: string;
+    // The tabIndex
+    tabIndex?: number;
+    disabled?: boolean;
+    className?: string;
+    onClick?(e?: React.MouseEvent<Element> | React.KeyboardEvent<Element>): void;
+};
+
+interface IAccessibleButtonProps extends React.InputHTMLAttributes<Element> {
+    ref?: React.Ref<Element>;
+}
 
 /**
  * AccessibleButton is a generic wrapper for any element that should be treated
@@ -27,11 +52,20 @@ import {Key} from '../../../Keyboard';
  * @param {Object} props  react element properties
  * @returns {Object} rendered react
  */
-export default function AccessibleButton(props) {
+export default function AccessibleButton({
-    const {element, onClick, children, kind, disabled, ...restProps} = props;
+    element,
+    onClick,
+    children,
+    kind,
+    disabled,
+    inputRef,
+    className,
+    ...restProps
+}: IProps) {
 
+    const newProps: IAccessibleButtonProps = restProps;
     if (!disabled) {
-        restProps.onClick = onClick;
+        newProps.onClick = onClick;
         // We need to consume enter onKeyDown and space onKeyUp
         // otherwise we are risking also activating other keyboard focusable elements
         // that might receive focus as a result of the AccessibleButtonClick action
@@ -39,7 +73,7 @@ export default function AccessibleButton(props) {
         // And divs which we report as role button to assistive technologies.
         // Browsers handle space and enter keypresses differently and we are only adjusting to the
         // inconsistencies here
-        restProps.onKeyDown = function(e) {
+        newProps.onKeyDown = (e) => {
             if (e.key === Key.ENTER) {
                 e.stopPropagation();
                 e.preventDefault();
@@ -50,7 +84,7 @@ export default function AccessibleButton(props) {
                 e.preventDefault();
             }
         };
-        restProps.onKeyUp = function(e) {
+        newProps.onKeyUp = (e) => {
             if (e.key === Key.SPACE) {
                 e.stopPropagation();
                 e.preventDefault();
@@ -64,53 +98,22 @@ export default function AccessibleButton(props) {
     }
 
     // Pass through the ref - used for keyboard shortcut access to some buttons
-    restProps.ref = restProps.inputRef;
+    newProps.ref = inputRef;
-    delete restProps.inputRef;
 
-    restProps.className = (restProps.className ? restProps.className + " " : "") + "mx_AccessibleButton";
+    newProps.className = classnames(
-
+        "mx_AccessibleButton",
-    if (kind) {
+        className,
-        // We apply a hasKind class to maintain backwards compatibility with
+        {
-        // buttons which might not know about kind and break
+            "mx_AccessibleButton_hasKind": kind,
-        restProps.className += " mx_AccessibleButton_hasKind mx_AccessibleButton_kind_" + kind;
+            [`mx_AccessibleButton_kind_${kind}`]: kind,
-    }
+            "mx_AccessibleButton_disabled": disabled,
-
+        },
-    if (disabled) {
+    );
-        restProps.className += " mx_AccessibleButton_disabled";
-        restProps["aria-disabled"] = true;
-    }
 
+    // React.createElement expects InputHTMLAttributes
     return React.createElement(element, restProps, children);
 }
 
-/**
- * children: React's magic prop. Represents all children given to the element.
- * element:  (optional) The base element type. "div" by default.
- * onClick:  (required) Event handler for button activation. Should be
- *           implemented exactly like a normal onClick handler.
- */
-AccessibleButton.propTypes = {
-    children: PropTypes.node,
-    inputRef: PropTypes.oneOfType([
-        // Either a function
-        PropTypes.func,
-        // Or the instance of a DOM native element
-        PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
-    ]),
-    element: PropTypes.string,
-    onClick: PropTypes.func.isRequired,
-
-    // The kind of button, similar to how Bootstrap works.
-    // See available classes for AccessibleButton for options.
-    kind: PropTypes.string,
-    // The ARIA role
-    role: PropTypes.string,
-    // The tabIndex
-    tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-    disabled: PropTypes.bool,
-};
-
 AccessibleButton.defaultProps = {
     element: 'div',
     role: 'button',

src/components/views/elements/SettingsFlag.tsx

@@ -16,63 +16,78 @@ limitations under the License.
 */
 
 import React from "react";
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import SettingsStore from "../../../settings/SettingsStore";
 import { _t } from '../../../languageHandler';
 import ToggleSwitch from "./ToggleSwitch";
+import StyledCheckbox from "./StyledCheckbox";
 
-export default createReactClass({
+interface IProps {
-    displayName: 'SettingsFlag',
+    // The setting must be a boolean
-    propTypes: {
+    name: string;
-        name: PropTypes.string.isRequired,
+    level: string;
-        level: PropTypes.string.isRequired,
+    roomId?: string; // for per-room settings
-        roomId: PropTypes.string, // for per-room settings
+    label?: string; // untranslated
-        label: PropTypes.string, // untranslated
+    isExplicit?: boolean;
-        onChange: PropTypes.func,
+    // XXX: once design replaces all toggles make this the default
-        isExplicit: PropTypes.bool,
+    useCheckbox?: boolean;
-    },
+    onChange?(checked: boolean): void;
+}
 
-    getInitialState: function() {
+interface IState {
-        return {
+    value: boolean;
+}
+
+export default class SettingsFlag extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
             value: SettingsStore.getValueAt(
                 this.props.level,
                 this.props.name,
                 this.props.roomId,
                 this.props.isExplicit,
             ),
-        };
+        }
-    },
+    }
-
-    onChange: function(checked) {
-        if (this.props.group && !checked) return;
 
+    private onChange = (checked: boolean): void => {
         this.save(checked);
         this.setState({ value: checked });
         if (this.props.onChange) this.props.onChange(checked);
-    },
+    }
 
-    save: function(val = undefined) {
+    private checkBoxOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this.onChange(e.target.checked);
+    }
+
+    private save = (val?: boolean): void => {
         return SettingsStore.setValue(
             this.props.name,
             this.props.roomId,
             this.props.level,
             val !== undefined ? val : this.state.value,
         );
-    },
+    }
 
-    render: function() {
+    public render() {
         const canChange = SettingsStore.canSetValue(this.props.name, this.props.roomId, this.props.level);
 
         let label = this.props.label;
         if (!label) label = SettingsStore.getDisplayName(this.props.name, this.props.level);
         else label = _t(label);
 
-        return (
+        if (this.props.useCheckbox) {
-            <div className="mx_SettingsFlag">
+            return <StyledCheckbox checked={this.state.value} onChange={this.checkBoxOnChange} disabled={!canChange} >
-                <span className="mx_SettingsFlag_label">{label}</span>
+                {label}
-                <ToggleSwitch checked={this.state.value} onChange={this.onChange} disabled={!canChange} aria-label={label} />
+            </StyledCheckbox>;
-            </div>
+        } else {
-        );
+            return (
-    },
+                <div className="mx_SettingsFlag">
-});
+                    <span className="mx_SettingsFlag_label">{label}</span>
+                    <ToggleSwitch checked={this.state.value} onChange={this.onChange} disabled={!canChange} aria-label={label} />
+                </div>
+            );
+        }
+    }
+}

src/components/views/elements/ToggleSwitch.tsx

@@ -16,13 +16,23 @@ limitations under the License.
 */
 
 import React from "react";
-import PropTypes from "prop-types";
 import classNames from "classnames";
 import * as sdk from "../../../index";
 
+interface IProps {
+    // Whether or not this toggle is in the 'on' position.
+    checked: boolean;
+
+    // Whether or not the user can interact with the switch
+    disabled: boolean;
+
+    // Called when the checked state changes. First argument will be the new state.
+    onChange(checked: boolean): void;
+};
+
 // Controlled Toggle Switch element, written with Accessibility in mind
-const ToggleSwitch = ({checked, disabled=false, onChange, ...props}) => {
+export default ({checked, disabled = false, onChange, ...props}: IProps) => {
-    const _onClick = (e) => {
+    const _onClick = () => {
         if (disabled) return;
         onChange(!checked);
     };
@@ -46,16 +56,3 @@ const ToggleSwitch = ({checked, disabled=false, onChange, ...props}) => {
         </AccessibleButton>
     );
 };
-
-ToggleSwitch.propTypes = {
-    // Whether or not this toggle is in the 'on' position.
-    checked: PropTypes.bool.isRequired,
-
-    // Whether or not the user can interact with the switch
-    disabled: PropTypes.bool,
-
-    // Called when the checked state changes. First argument will be the new state.
-    onChange: PropTypes.func.isRequired,
-};
-
-export default ToggleSwitch;

src/components/views/rooms/RoomSublist2.tsx

@@ -233,7 +233,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                                 tabIndex={tabIndex}
                                 className={"mx_RoomSublist2_headerText"}
                                 role="treeitem"
-                                aria-level="1"
+                                aria-level={1}
                             >
                                 <span>{this.props.label}</span>
                             </AccessibleButton>