OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Clean up interfaces and classname

pull/21833/head
Jorik Schellekens 2020-06-10 15:57:28 +01:00
parent 8a0e4a4954
commit 52c7577972
3 changed files with 26 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/views/elements/AccessibleButton.tsx
View File

@ -26,22 +26,22 @@ import classnames from 'classnames';
* implemented exactly like a normal onClick handler. * implemented exactly like a normal onClick handler.
*/ */
interface IProps extends React.InputHTMLAttributes<Element> { interface IProps extends React.InputHTMLAttributes<Element> {
inputRef?: React.Ref<Element>, inputRef?: React.Ref<Element>;
element?: string; element?: string;
// The kind of button, similar to how Bootstrap works. // The kind of button, similar to how Bootstrap works.
// See available classes for AccessibleButton for options. // See available classes for AccessibleButton for options.
kind?: string, kind?: string;
// The ARIA role // The ARIA role
role?: string, role?: string;
// The tabIndex // The tabIndex
tabIndex?: number, tabIndex?: number;
disabled?: boolean, disabled?: boolean;
className?: string, className?: string;
onClick?(e?: React.MouseEvent<Element> | React.KeyboardEvent<Element>): void; onClick?(e?: React.MouseEvent<Element> | React.KeyboardEvent<Element>): void;
}; };
interface IAccessibleButtonProps extends React.InputHTMLAttributes<Element> { interface IAccessibleButtonProps extends React.InputHTMLAttributes<Element> {
ref?: React.Ref<Element>, ref?: React.Ref<Element>;
} }
/** /**
@ -100,18 +100,16 @@ export default function AccessibleButton({
// Pass through the ref - used for keyboard shortcut access to some buttons // Pass through the ref - used for keyboard shortcut access to some buttons
newProps.ref = inputRef; newProps.ref = inputRef;
newProps.className = classnames("mx_AccessibleButton", className); let classNameBooleans = {
"mx_AccessibleButton_hasKind": kind,
if (kind) { "mx_AccessibleButton_disabled": disabled,
// We apply a hasKind class to maintain backwards compatibility with
// buttons which might not know about kind and break
newProps.className += " mx_AccessibleButton_hasKind mx_AccessibleButton_kind_" + kind;
}
if (disabled) {
newProps.className += " mx_AccessibleButton_disabled";
newProps["aria-disabled"] = true;
} }
classNameBooleans["mx_AccessibleButton_kind_" + kind] = kind;
newProps.className = classnames(
"mx_AccessibleButton",
className,
classNameBooleans,
);
// React.createElement expects InputHTMLAttributes // React.createElement expects InputHTMLAttributes
return React.createElement(element, restProps, children); return React.createElement(element, restProps, children);

14
src/components/views/elements/SettingsFlag.tsx
View File

@ -23,14 +23,14 @@ import StyledCheckbox from "./StyledCheckbox";
interface IProps { interface IProps {
// The setting must be a boolean // The setting must be a boolean
name: string, name: string;
level: string, level: string;
roomId?: string, // for per-room settings roomId?: string; // for per-room settings
label?: string, // untranslated label?: string; // untranslated
isExplicit?: boolean, isExplicit?: boolean;
// XXX: once design replaces all toggles make this the default // XXX: once design replaces all toggles make this the default
useCheckbox?: boolean, useCheckbox?: boolean;
onChange?(checked: boolean): void, onChange?(checked: boolean): void;
} }
interface IState { interface IState {

6
src/components/views/elements/ToggleSwitch.tsx
View File

@ -21,13 +21,13 @@ import * as sdk from "../../../index";
interface IProps { interface IProps {
// Whether or not this toggle is in the 'on' position. // Whether or not this toggle is in the 'on' position.
checked: boolean, checked: boolean;
// Whether or not the user can interact with the switch // Whether or not the user can interact with the switch
disabled: boolean, disabled: boolean;
// Called when the checked state changes. First argument will be the new state. // Called when the checked state changes. First argument will be the new state.
onChange(checked: boolean): void, onChange(checked: boolean): void;
}; };
// Controlled Toggle Switch element, written with Accessibility in mind // Controlled Toggle Switch element, written with Accessibility in mind