Merge branch 'develop' into joriks/appearance-advanced

src/components/views/elements/AccessibleButton.tsx

@@ -19,7 +19,7 @@ import React from 'react';
 import {Key} from '../../../Keyboard';
 import classnames from 'classnames';
 
-export type ButtonEvent = React.MouseEvent<Element> | React.KeyboardEvent<Element>
+export type ButtonEvent = React.MouseEvent<Element> | React.KeyboardEvent<Element>;
 
 /**
  * children: React's magic prop. Represents all children given to the element.
@@ -40,7 +40,7 @@ interface IProps extends React.InputHTMLAttributes<Element> {
     disabled?: boolean;
     className?: string;
     onClick?(e?: ButtonEvent): void;
-};
+}
 
 interface IAccessibleButtonProps extends React.InputHTMLAttributes<Element> {
     ref?: React.Ref<Element>;

src/components/views/elements/Draggable.tsx

@@ -17,20 +17,20 @@ limitations under the License.
 import React from 'react';
 
 interface IProps {
-    className: string,
-    dragFunc: (currentLocation: ILocationState, event: MouseEvent) => ILocationState,
-    onMouseUp: (event: MouseEvent) => void,
+    className: string;
+    dragFunc: (currentLocation: ILocationState, event: MouseEvent) => ILocationState;
+    onMouseUp: (event: MouseEvent) => void;
 }
 
 interface IState {
-    onMouseMove: (event: MouseEvent) => void,
-    onMouseUp: (event: MouseEvent) => void,
-    location: ILocationState,
+    onMouseMove: (event: MouseEvent) => void;
+    onMouseUp: (event: MouseEvent) => void;
+    location: ILocationState;
 }
 
 export interface ILocationState {
-    currentX: number,
-    currentY: number,
+    currentX: number;
+    currentY: number;
 }
 
 export default class Draggable extends React.Component<IProps, IState> {
@@ -58,13 +58,13 @@ export default class Draggable extends React.Component<IProps, IState> {
 
         document.addEventListener("mousemove", this.state.onMouseMove);
         document.addEventListener("mouseup", this.state.onMouseUp);
-    }
+    };
 
     private onMouseUp = (event: MouseEvent): void => {
         document.removeEventListener("mousemove", this.state.onMouseMove);
         document.removeEventListener("mouseup", this.state.onMouseUp);
         this.props.onMouseUp(event);
-    }
+    };
 
     private onMouseMove(event: MouseEvent): void {
         const newLocation = this.props.dragFunc(this.state.location, event);
@@ -75,7 +75,7 @@ export default class Draggable extends React.Component<IProps, IState> {
     }
 
     render() {
-        return <div className={this.props.className} onMouseDown={this.onMouseDown.bind(this)} />
+        return <div className={this.props.className} onMouseDown={this.onMouseDown.bind(this)} />;
     }
 
 }

src/components/views/elements/Field.tsx

@@ -87,20 +87,20 @@ interface ITextareaProps extends IProps, TextareaHTMLAttributes<HTMLTextAreaElem
 type PropShapes = IInputProps | ISelectProps | ITextareaProps;
 
 interface IState {
-    valid: boolean,
-    feedback: React.ReactNode,
-    feedbackVisible: boolean,
-    focused: boolean,
+    valid: boolean;
+    feedback: React.ReactNode;
+    feedbackVisible: boolean;
+    focused: boolean;
 }
 
 export default class Field extends React.PureComponent<PropShapes, IState> {
     private id: string;
     private input: HTMLInputElement;
 
-    private static defaultProps = {
+    public static readonly defaultProps = {
         element: "input",
         type: "text",
-    }
+    };
 
     /*
      * This was changed from throttle to debounce: this is more traditional for

src/components/views/elements/IRCTimelineProfileResizer.tsx

@@ -20,15 +20,15 @@ import Draggable, {ILocationState} from './Draggable';
 
 interface IProps {
     // Current room
-    roomId: string,
-    minWidth: number,
-    maxWidth: number,
-};
+    roomId: string;
+    minWidth: number;
+    maxWidth: number;
+}
 
 interface IState {
-    width: number,
-    IRCLayoutRoot: HTMLElement,
-};
+    width: number;
+    IRCLayoutRoot: HTMLElement;
+}
 
 export default class IRCTimelineProfileResizer extends React.Component<IProps, IState> {
     constructor(props: IProps) {
@@ -37,20 +37,19 @@ export default class IRCTimelineProfileResizer extends React.Component<IProps, I
         this.state = {
             width: SettingsStore.getValue("ircDisplayNameWidth", this.props.roomId),
             IRCLayoutRoot: null,
-        }
-    };
+        };
+    }
 
     componentDidMount() {
         this.setState({
             IRCLayoutRoot: document.querySelector(".mx_IRCLayout") as HTMLElement,
-        }, () => this.updateCSSWidth(this.state.width))
+        }, () => this.updateCSSWidth(this.state.width));
     }
 
     private dragFunc = (location: ILocationState, event: React.MouseEvent<Element, MouseEvent>): ILocationState => {
         const offset = event.clientX - location.currentX;
         const newWidth = this.state.width + offset;
 
-        console.log({offset})
         // If we're trying to go smaller than min width, don't.
         if (newWidth < this.props.minWidth) {
             return location;
@@ -69,8 +68,8 @@ export default class IRCTimelineProfileResizer extends React.Component<IProps, I
         return {
             currentX: event.clientX,
             currentY: location.currentY,
-        }
-    }
+        };
+    };
 
     private updateCSSWidth(newWidth: number) {
         this.state.IRCLayoutRoot.style.setProperty("--name-width", newWidth + "px");
@@ -83,6 +82,10 @@ export default class IRCTimelineProfileResizer extends React.Component<IProps, I
     }
 
     render() {
-        return <Draggable className="mx_ProfileResizer" dragFunc={this.dragFunc.bind(this)} onMouseUp={this.onMoueUp.bind(this)}/>
+        return <Draggable
+            className="mx_ProfileResizer"
+            dragFunc={this.dragFunc.bind(this)}
+            onMouseUp={this.onMoueUp.bind(this)}
+        />;
     }
-};
+}

src/components/views/elements/SettingsFlag.tsx

@@ -48,18 +48,18 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
                 this.props.roomId,
                 this.props.isExplicit,
             ),
-        }
+        };
     }
 
     private onChange = (checked: boolean): void => {
         this.save(checked);
         this.setState({ value: checked });
         if (this.props.onChange) this.props.onChange(checked);
-    }
+    };
 
     private checkBoxOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         this.onChange(e.target.checked);
-    }
+    };
 
     private save = (val?: boolean): void => {
         return SettingsStore.setValue(
@@ -68,7 +68,7 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
             this.props.level,
             val !== undefined ? val : this.state.value,
         );
-    }
+    };
 
     public render() {
         const canChange = SettingsStore.canSetValue(this.props.name, this.props.roomId, this.props.level);

src/components/views/elements/Slider.tsx

@@ -65,9 +65,9 @@ export default class Slider extends React.Component<IProps> {
 
         const intervalWidth = 1 / (values.length - 1);
 
-        const linearInterpolation = (value - closestLessValue) / (closestGreaterValue - closestLessValue)
+        const linearInterpolation = (value - closestLessValue) / (closestGreaterValue - closestLessValue);
 
-        return 100 * (closest - 1 + linearInterpolation) * intervalWidth
+        return 100 * (closest - 1 + linearInterpolation) * intervalWidth;
 
     }
 
@@ -87,7 +87,7 @@ export default class Slider extends React.Component<IProps> {
             selection = <div className="mx_Slider_selection">
                 <div className="mx_Slider_selectionDot" style={{left: "calc(-0.55em + " + offset + "%)"}} />
                 <hr style={{width: offset + "%"}} />
-            </div>
+            </div>;
         }
 
         return <div className="mx_Slider">
@@ -115,13 +115,13 @@ export default class Slider extends React.Component<IProps> {
 
 interface IDotProps {
     // Callback for behavior onclick
-    onClick: () => void,
+    onClick: () => void;
 
     // Whether the dot should appear active
-    active: boolean,
+    active: boolean;
 
     // The label on the dot
-    label: string,
+    label: string;
 
     // Whether the slider is disabled
     disabled: boolean;
@@ -129,7 +129,7 @@ interface IDotProps {
 
 class Dot extends React.PureComponent<IDotProps> {
     render(): React.ReactNode {
-        let className = "mx_Slider_dot"
+        let className = "mx_Slider_dot";
         if (!this.props.disabled && this.props.active) {
             className += " mx_Slider_dotActive";
         }

src/components/views/elements/StyledCheckbox.tsx

@@ -30,7 +30,7 @@ export default class StyledCheckbox extends React.PureComponent<IProps, IState>
 
     public static readonly defaultProps = {
         className: "",
-    }
+    };
 
     constructor(props: IProps) {
         super(props);
@@ -51,6 +51,6 @@ export default class StyledCheckbox extends React.PureComponent<IProps, IState>
                     { this.props.children }
                 </div>
             </label>
-        </span>
+        </span>;
     }
 }

src/components/views/elements/StyledRadioButton.tsx

@@ -26,7 +26,7 @@ interface IState {
 export default class StyledRadioButton extends React.PureComponent<IProps, IState> {
     public static readonly defaultProps = {
         className: '',
-    }
+    };
 
     public render() {
         const { children, className, disabled, ...otherProps } = this.props;
@@ -43,6 +43,6 @@ export default class StyledRadioButton extends React.PureComponent<IProps, IStat
             <div><div></div></div>
             <span>{children}</span>
             <div className="mx_RadioButton_spacer" />
-        </label>
+        </label>;
     }
 }

src/components/views/elements/ToggleSwitch.tsx

@@ -28,7 +28,7 @@ interface IProps {
 
     // 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
 export default ({checked, disabled = false, onChange, ...props}: IProps) => {

src/components/views/elements/Tooltip.tsx

@@ -29,15 +29,15 @@ const MIN_TOOLTIP_HEIGHT = 25;
 
 interface IProps {
         // Class applied to the element used to position the tooltip
-        className: string,
+        className: string;
         // Class applied to the tooltip itself
-        tooltipClassName?: string,
+        tooltipClassName?: string;
         // Whether the tooltip is visible or hidden.
         // The hidden state allows animating the tooltip away via CSS.
         // Defaults to visible if unset.
-        visible?: boolean,
+        visible?: boolean;
         // the react element to put into the tooltip
-        label: React.ReactNode,
+        label: React.ReactNode;
 }
 
 export default class Tooltip extends React.Component<IProps> {
@@ -126,7 +126,7 @@ export default class Tooltip extends React.Component<IProps> {
             tooltip: this.tooltip,
             parent: parent,
         });
-    }
+    };
 
     public render() {
         // Render a placeholder