imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge upstream and resolve conflicts

Browse source
This commit is contained in:
Jaiwanth 2021-07-21 11:35:27 +05:30
commit 1ed316851a
317 changed files with 4628 additions and 3071 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/components/views/elements/AppPermission.js
View file

@ -94,15 +94,15 @@ export default class AppPermission extends React.Component {
const warningTooltipText = (
<div>
{_t("Any of the following data may be shared:")}
{ _t("Any of the following data may be shared:") }
<ul>
<li>{_t("Your display name")}</li>
<li>{_t("Your avatar URL")}</li>
<li>{_t("Your user ID")}</li>
<li>{_t("Your theme")}</li>
<li>{_t("%(brand)s URL", { brand })}</li>
<li>{_t("Room ID")}</li>
<li>{_t("Widget ID")}</li>
<li>{ _t("Your display name") }</li>
<li>{ _t("Your avatar URL") }</li>
<li>{ _t("Your user ID") }</li>
<li>{ _t("Your theme") }</li>
<li>{ _t("%(brand)s URL", { brand }) }</li>
<li>{ _t("Room ID") }</li>
<li>{ _t("Widget ID") }</li>
</ul>
</div>
);
@ -124,22 +124,22 @@ export default class AppPermission extends React.Component {
return (
<div className='mx_AppPermissionWarning'>
<div className='mx_AppPermissionWarning_row mx_AppPermissionWarning_bolder mx_AppPermissionWarning_smallText'>
{_t("Widget added by")}
{ _t("Widget added by") }
</div>
<div className='mx_AppPermissionWarning_row'>
{avatar}
<h4 className='mx_AppPermissionWarning_bolder'>{displayName}</h4>
<div className='mx_AppPermissionWarning_smallText'>{userId}</div>
{ avatar }
<h4 className='mx_AppPermissionWarning_bolder'>{ displayName }</h4>
<div className='mx_AppPermissionWarning_smallText'>{ userId }</div>
</div>
<div className='mx_AppPermissionWarning_row mx_AppPermissionWarning_smallText'>
{warning}
{ warning }
</div>
<div className='mx_AppPermissionWarning_row mx_AppPermissionWarning_smallText'>
{_t("This widget may use cookies.")}&nbsp;{encryptionWarning}
{ _t("This widget may use cookies.") }&nbsp;{ encryptionWarning }
</div>
<div className='mx_AppPermissionWarning_row'>
<AccessibleButton kind='primary_sm' onClick={this.props.onPermissionGranted}>
{_t("Continue")}
{ _t("Continue") }
</AccessibleButton>
</div>
</div>

6
src/components/views/elements/AppTile.js
View file

@ -408,7 +408,7 @@ export default class AppTile extends React.Component {
// AppTile's border is in the wrong place
appTileBody = <div className="mx_AppTile_persistedWrapper">
<PersistedElement persistKey={this._persistKey}>
{appTileBody}
{ appTileBody }
</PersistedElement>
</div>;
}
@ -453,13 +453,13 @@ export default class AppTile extends React.Component {
title={_t('Popout widget')}
onClick={this._onPopoutWidgetClick}
/> }
{ <ContextMenuButton
<ContextMenuButton
className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_menu"
label={_t("Options")}
isExpanded={this.state.menuDisplayed}
inputRef={this._contextMenuButton}
onClick={this._onContextMenuClick}
/> }
/>
</span>
</div> }
{ appTileBody }

2
src/components/views/elements/DNDTagTile.js
View file

@ -41,6 +41,6 @@ export default function DNDTagTile(props) {
menuDisplayed={menuDisplayed}
openMenu={openMenu}
/>
{contextMenu}
{ contextMenu }
</>;
}

14
src/components/views/elements/DesktopBuildsNotice.tsx
View file

@ -38,7 +38,7 @@ export default function DesktopBuildsNotice({ isRoomEncrypted, kind }: IProps) {
if (EventIndexPeg.error) {
return <>
{_t("Message search initialisation failed, check <a>your settings</a> for more information", {}, {
{ _t("Message search initialisation failed, check <a>your settings</a> for more information", {}, {
a: sub => (<a onClick={(evt) => {
evt.preventDefault();
dis.dispatch({
@ -46,9 +46,9 @@ export default function DesktopBuildsNotice({ isRoomEncrypted, kind }: IProps) {
initialTabId: UserTab.Security,
});
}}>
{sub}
{ sub }
</a>),
})}
}) }
</>;
}
@ -61,12 +61,12 @@ export default function DesktopBuildsNotice({ isRoomEncrypted, kind }: IProps) {
switch (kind) {
case WarningKind.Files:
text = _t("Use the <a>Desktop app</a> to see all encrypted files", {}, {
a: sub => (<a href={desktopBuilds.url} target="_blank" rel="noreferrer noopener">{sub}</a>),
a: sub => (<a href={desktopBuilds.url} target="_blank" rel="noreferrer noopener">{ sub }</a>),
});
break;
case WarningKind.Search:
text = _t("Use the <a>Desktop app</a> to search encrypted messages", {}, {
a: sub => (<a href={desktopBuilds.url} target="_blank" rel="noreferrer noopener">{sub}</a>),
a: sub => (<a href={desktopBuilds.url} target="_blank" rel="noreferrer noopener">{ sub }</a>),
});
break;
}
@ -89,8 +89,8 @@ export default function DesktopBuildsNotice({ isRoomEncrypted, kind }: IProps) {
return (
<div className="mx_DesktopBuildsNotice">
{logo}
<span>{text}</span>
{ logo }
<span>{ text }</span>
</div>
);
}

6
src/components/views/elements/DesktopCapturerSourcePicker.tsx
View file

@ -56,7 +56,7 @@ export class ExistingSource extends React.Component<DesktopCapturerSourceIProps>
className="mx_desktopCapturerSourcePicker_stream_thumbnail"
src={this.props.source.thumbnailURL}
/>
<span className="mx_desktopCapturerSourcePicker_stream_name">{this.props.source.name}</span>
<span className="mx_desktopCapturerSourcePicker_stream_name">{ this.props.source.name }</span>
</AccessibleButton>
);
}
@ -157,13 +157,13 @@ export default class DesktopCapturerSourcePicker extends React.Component<
className={screensButtonStyle}
onClick={this.onScreensClick}
>
{_t("Screens")}
{ _t("Screens") }
</AccessibleButton>
<AccessibleButton
className={windowsButtonStyle}
onClick={this.onWindowsClick}
>
{_t("Windows")}
{ _t("Windows") }
</AccessibleButton>
</div>
<div className="mx_desktopCapturerSourcePicker_panel">

2
src/components/views/elements/DialogButtons.js
View file

@ -92,7 +92,7 @@ export default class DialogButtons extends React.Component {
let additive = null;
if (this.props.additive) {
additive = <div className="mx_Dialog_buttons_additive">{this.props.additive}</div>;
additive = <div className="mx_Dialog_buttons_additive">{ this.props.additive }</div>;
}
return (

2
src/components/views/elements/DirectorySearchBox.js
View file

@ -88,7 +88,7 @@ export default class DirectorySearchBox extends React.Component {
if (this.props.showJoinButton) {
joinButton = <AccessibleButton className="mx_DirectorySearchBox_joinButton"
onClick={this._onJoinButtonClick}
>{_t("Join")}</AccessibleButton>;
>{ _t("Join") }</AccessibleButton>;
}
return <div className={`mx_DirectorySearchBox ${this.props.className} mx_textinput`}>

12
src/components/views/elements/EditableItemList.tsx
View file

@ -63,21 +63,21 @@ export class EditableItem extends React.Component<IItemProps, IItemState> {
return (
<div className="mx_EditableItem">
<span className="mx_EditableItem_promptText">
{_t("Are you sure?")}
{ _t("Are you sure?") }
</span>
<AccessibleButton
onClick={this.onActuallyRemove}
kind="primary_sm"
className="mx_EditableItem_confirmBtn"
>
{_t("Yes")}
{ _t("Yes") }
</AccessibleButton>
<AccessibleButton
onClick={this.onDontRemove}
kind="danger_sm"
className="mx_EditableItem_confirmBtn"
>
{_t("No")}
{ _t("No") }
</AccessibleButton>
</div>
);
@ -86,7 +86,7 @@ export class EditableItem extends React.Component<IItemProps, IItemState> {
return (
<div className="mx_EditableItem">
<div onClick={this.onRemove} className="mx_EditableItem_delete" title={_t("Remove")} role="button" />
<span className="mx_EditableItem_item">{this.props.value}</span>
<span className="mx_EditableItem_item">{ this.props.value }</span>
</div>
);
}
@ -155,7 +155,7 @@ export default class EditableItemList<P = {}> extends React.PureComponent<IProps
render() {
const editableItems = this.props.items.map((item, index) => {
if (!this.props.canRemove) {
return <li key={item}>{item}</li>;
return <li key={item}>{ item }</li>;
}
return <EditableItem
@ -166,7 +166,7 @@ export default class EditableItemList<P = {}> extends React.PureComponent<IProps
/>;
});
const editableItemsSection = this.props.canRemove ? editableItems : <ul>{editableItems}</ul>;
const editableItemsSection = this.props.canRemove ? editableItems : <ul>{ editableItems }</ul>;
const label = this.props.items.length > 0 ? this.props.itemsLabel : this.props.noItemsLabel;
return (

14
src/components/views/elements/ErrorBoundary.tsx
View file

@ -81,33 +81,33 @@ export default class ErrorBoundary extends React.PureComponent<{}, IState> {
let bugReportSection;
if (SdkConfig.get().bug_report_endpoint_url) {
bugReportSection = <React.Fragment>
<p>{_t(
<p>{ _t(
"Please <newIssueLink>create a new issue</newIssueLink> " +
"on GitHub so that we can investigate this bug.", {}, {
newIssueLink: (sub) => {
return <a target="_blank" rel="noreferrer noopener" href={newIssueUrl}>{ sub }</a>;
},
},
)}</p>
<p>{_t(
) }</p>
<p>{ _t(
"If you've submitted a bug via GitHub, debug logs can help " +
"us track down the problem. Debug logs contain application " +
"usage data including your username, the IDs or aliases of " +
"the rooms or groups you have visited and the usernames of " +
"other users. They do not contain messages.",
)}</p>
) }</p>
<AccessibleButton onClick={this.onBugReport} kind='primary'>
{_t("Submit debug logs")}
{ _t("Submit debug logs") }
</AccessibleButton>
</React.Fragment>;
}
return <div className="mx_ErrorBoundary">
<div className="mx_ErrorBoundary_body">
<h1>{_t("Something went wrong!")}</h1>
<h1>{ _t("Something went wrong!") }</h1>
{ bugReportSection }
<AccessibleButton onClick={this.onClearCacheAndReload} kind='danger'>
{_t("Clear cache and reload")}
{ _t("Clear cache and reload") }
</AccessibleButton>
</div>
</div>;

8
src/components/views/elements/EventListSummary.tsx
View file

@ -63,7 +63,7 @@ const EventListSummary: React.FC<IProps> = ({
// If we are only given few events then just pass them through
if (events.length < threshold) {
return (
<li className="mx_EventListSummary" data-scroll-tokens={eventIds}>
<li className="mx_EventListSummary" data-scroll-tokens={eventIds} data-expanded={true}>
{ children }
</li>
);
@ -93,7 +93,7 @@ const EventListSummary: React.FC<IProps> = ({
}
return (
<li className="mx_EventListSummary" data-scroll-tokens={eventIds}>
<li className="mx_EventListSummary" data-scroll-tokens={eventIds} data-expanded={expanded + ""}>
<AccessibleButton className="mx_EventListSummary_toggle" onClick={toggleExpanded} aria-expanded={expanded}>
{ expanded ? _t('collapse') : _t('expand') }
</AccessibleButton>
@ -102,4 +102,8 @@ const EventListSummary: React.FC<IProps> = ({
);
};
EventListSummary.defaultProps = {
startExpanded: false,
};
export default EventListSummary;

2
src/components/views/elements/FacePile.tsx
View file

@ -78,7 +78,7 @@ const FacePile = ({ room, onlyKnownUsers = true, numShown = DEFAULT_NUM_FACES, .
<TextWithTooltip class="mx_FacePile_faces" tooltip={tooltip} tooltipProps={{ yOffset: 32 }}>
{ members.length > numShown ? <span className="mx_FacePile_face mx_FacePile_more" /> : null }
{ shownMembers.map(m =>
<MemberAvatar key={m.userId} member={m} width={28} height={28} className="mx_FacePile_face" /> )}
<MemberAvatar key={m.userId} member={m} width={28} height={28} className="mx_FacePile_face" /> ) }
</TextWithTooltip>
{ onlyKnownUsers && <span className="mx_FacePile_summary">
{ _t("%(count)s people you know have already joined", { count: members.length }) }

14
src/components/views/elements/Field.tsx
View file

@ -240,11 +240,11 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
let prefixContainer = null;
if (prefixComponent) {
prefixContainer = <span className="mx_Field_prefix">{prefixComponent}</span>;
prefixContainer = <span className="mx_Field_prefix">{ prefixComponent }</span>;
}
let postfixContainer = null;
if (postfixComponent) {
postfixContainer = <span className="mx_Field_postfix">{postfixComponent}</span>;
postfixContainer = <span className="mx_Field_postfix">{ postfixComponent }</span>;
}
const hasValidationFlag = forceValidity !== null && forceValidity !== undefined;
@ -273,11 +273,11 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
}
return <div className={fieldClasses}>
{prefixContainer}
{fieldInput}
<label htmlFor={this.id}>{this.props.label}</label>
{postfixContainer}
{fieldTooltip}
{ prefixContainer }
{ fieldInput }
<label htmlFor={this.id}>{ this.props.label }</label>
{ postfixContainer }
{ fieldTooltip }
</div>;
}
}

6
src/components/views/elements/ImageView.tsx
View file

@ -457,7 +457,7 @@ export default class ImageView extends React.Component<IProps, IState> {
<AccessibleTooltipButton
className="mx_ImageView_button mx_ImageView_button_rotateCCW"
title={_t("Rotate Left")}
onClick={ this.onRotateCounterClockwiseClick }>
onClick={this.onRotateCounterClockwiseClick}>
</AccessibleTooltipButton>
<AccessibleTooltipButton
className="mx_ImageView_button mx_ImageView_button_rotateCW"
@ -467,13 +467,13 @@ export default class ImageView extends React.Component<IProps, IState> {
<AccessibleTooltipButton
className="mx_ImageView_button mx_ImageView_button_download"
title={_t("Download")}
onClick={ this.onDownloadClick }>
onClick={this.onDownloadClick}>
</AccessibleTooltipButton>
{ contextMenuButton }
<AccessibleTooltipButton
className="mx_ImageView_button mx_ImageView_button_close"
title={_t("Close")}
onClick={ this.props.onFinished }>
onClick={this.props.onFinished}>
</AccessibleTooltipButton>
{ this.renderContextMenu() }
</div>

25
src/components/views/elements/InfoTooltip.tsx
View file

@ -22,9 +22,16 @@ import Tooltip, { Alignment } from './Tooltip';
import { _t } from "../../../languageHandler";
import { replaceableComponent } from "../../../utils/replaceableComponent";
export enum InfoTooltipKind {
Info = "info",
Warning = "warning",
}
interface ITooltipProps {
tooltip?: React.ReactNode;
className?: string;
tooltipClassName?: string;
kind?: InfoTooltipKind;
}
interface IState {
@ -53,8 +60,12 @@ export default class InfoTooltip extends React.PureComponent<ITooltipProps, ISta
};
render() {
const { tooltip, children, tooltipClassName } = this.props;
const { tooltip, children, tooltipClassName, className, kind } = this.props;
const title = _t("Information");
const iconClassName = (
(kind !== InfoTooltipKind.Warning) ?
"mx_InfoTooltip_icon_info" : "mx_InfoTooltip_icon_warning"
);
// Tooltip are forced on the right for a more natural feel to them on info icons
const tip = this.state.hover ? <Tooltip
@ -64,10 +75,14 @@ export default class InfoTooltip extends React.PureComponent<ITooltipProps, ISta
alignment={Alignment.Right}
/> : <div />;
return (
<div onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} className="mx_InfoTooltip">
<span className="mx_InfoTooltip_icon" aria-label={title} />
{children}
{tip}
<div
onMouseOver={this.onMouseOver}
onMouseLeave={this.onMouseLeave}
className={classNames("mx_InfoTooltip", className)}
>
<span className={classNames("mx_InfoTooltip_icon", iconClassName)} aria-label={title} />
{ children }
{ tip }
</div>
);
}

2
src/components/views/elements/InlineSpinner.tsx
View file

@ -39,7 +39,7 @@ export default class InlineSpinner extends React.PureComponent<IProps> {
style={{ width: this.props.w, height: this.props.h }}
aria-label={_t("Loading...")}
>
{this.props.children}
{ this.props.children }
</div>
</div>
);

4
src/components/views/elements/InviteReason.tsx
View file

@ -51,11 +51,11 @@ export default class InviteReason extends React.PureComponent<IProps, IState> {
});
return <div className={classes}>
<div className="mx_InviteReason_reason">{this.props.reason}</div>
<div className="mx_InviteReason_reason">{ this.props.reason }</div>
<div className="mx_InviteReason_view"
onClick={this.onViewClick}
>
{_t("View message")}
{ _t("View message") }
</div>
</div>;
}

4
src/components/views/elements/LabelledToggleSwitch.tsx
View file

@ -57,8 +57,8 @@ export default class LabelledToggleSwitch extends React.PureComponent<IProps> {
const classes = `mx_SettingsFlag ${this.props.className || ""}`;
return (
<div className={classes}>
{firstPart}
{secondPart}
{ firstPart }
{ secondPart }
</div>
);
}

2
src/components/views/elements/PersistedElement.js
View file

@ -156,7 +156,7 @@ export default class PersistedElement extends React.Component {
renderApp() {
const content = <MatrixClientContext.Provider value={MatrixClientPeg.get()}>
<div ref={this.collectChild} style={this.props.style}>
{this.props.children}
{ this.props.children }
</div>
</MatrixClientContext.Provider>;

2
src/components/views/elements/PowerSelector.js
View file

@ -161,7 +161,7 @@ export default class PowerSelector extends React.Component {
label={label} onChange={this.onSelectChange}
value={String(this.state.selectValue)} disabled={this.props.disabled}
>
{options}
{ options }
</Field>
);
}

2
src/components/views/elements/RoomAliasField.tsx
View file

@ -55,7 +55,7 @@ export default class RoomAliasField extends React.PureComponent<IProps, IState>
render() {
const poundSign = (<span>#</span>);
const aliasPostfix = ":" + this.props.domain;
const domain = (<span title={aliasPostfix}>{aliasPostfix}</span>);
const domain = (<span title={aliasPostfix}>{ aliasPostfix }</span>);
const maxlength = 255 - this.props.domain.length - 2; // 2 for # and :
return (
<Field

10
src/components/views/elements/ServerPicker.tsx
View file

@ -63,28 +63,28 @@ const ServerPicker = ({ title, dialogTitle, serverConfig, onServerConfigChange }
});
};
editBtn = <AccessibleButton className="mx_ServerPicker_change" kind="link" onClick={onClick}>
{_t("Edit")}
{ _t("Edit") }
</AccessibleButton>;
}
let serverName: React.ReactNode = serverConfig.isNameResolvable ? serverConfig.hsName : serverConfig.hsUrl;
if (serverConfig.hsNameIsDifferent) {
serverName = <TextWithTooltip class="mx_Login_underlinedServerName" tooltip={serverConfig.hsUrl}>
{serverConfig.hsName}
{ serverConfig.hsName }
</TextWithTooltip>;
}
let desc;
if (serverConfig.hsName === "matrix.org") {
desc = <span className="mx_ServerPicker_desc">
{_t("Join millions for free on the largest public server")}
{ _t("Join millions for free on the largest public server") }
</span>;
}
return <div className="mx_ServerPicker">
<h3>{title || _t("Homeserver")}</h3>
<h3>{ title || _t("Homeserver") }</h3>
<AccessibleButton className="mx_ServerPicker_help" onClick={onHelpClick} />
<span className="mx_ServerPicker_server">{serverName}</span>
<span className="mx_ServerPicker_server">{ serverName }</span>
{ editBtn }
{ desc }
</div>;

4
src/components/views/elements/SettingsFlag.tsx
View file

@ -88,12 +88,12 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
onChange={this.checkBoxOnChange}
disabled={this.props.disabled || !canChange}
>
{label}
{ label }
</StyledCheckbox>;
} else {
return (
<div className="mx_SettingsFlag">
<span className="mx_SettingsFlag_label">{label}</span>
<span className="mx_SettingsFlag_label">{ label }</span>
<ToggleSwitch
checked={this.state.value}
onChange={this.onChange}

4
src/components/views/elements/Slider.tsx
View file

@ -98,7 +98,7 @@ export default class Slider extends React.Component<IProps> {
{ selection }
</div>
<div className="mx_Slider_dotContainer">
{dots}
{ dots }
</div>
</div>
</div>;
@ -139,7 +139,7 @@ class Dot extends React.PureComponent<IDotProps> {
<div className={className} />
<div className="mx_Slider_labelContainer">
<div className="mx_Slider_label">
{this.props.label}
{ this.props.label }
</div>
</div>
</span>;

10
src/components/views/elements/SpellCheckLanguagesDropdown.tsx
View file

@ -45,7 +45,7 @@ export default class SpellCheckLanguagesDropdown extends React.Component<SpellCh
SpellCheckLanguagesDropdownIState> {
constructor(props) {
super(props);
this._onSearchChange = this._onSearchChange.bind(this);
this.onSearchChange = this.onSearchChange.bind(this);
this.state = {
searchQuery: '',
@ -76,10 +76,8 @@ export default class SpellCheckLanguagesDropdown extends React.Component<SpellCh
}
}
_onSearchChange(search) {
this.setState({
searchQuery: search,
});
private onSearchChange(searchQuery: string) {
this.setState({ searchQuery });
}
render() {
@ -117,7 +115,7 @@ export default class SpellCheckLanguagesDropdown extends React.Component<SpellCh
id="mx_LanguageDropdown"
className={this.props.className}
onOptionChange={this.props.onOptionChange}
onSearchChange={this._onSearchChange}
onSearchChange={this.onSearchChange}
searchEnabled={true}
value={value}
label={_t("Language Dropdown")}>

2
src/components/views/elements/Spoiler.js
View file

@ -37,7 +37,7 @@ export default class Spoiler extends React.Component {
render() {
const reason = this.props.reason ? (
<span className="mx_EventTile_spoiler_reason">{"(" + this.props.reason + ")"}</span>
<span className="mx_EventTile_spoiler_reason">{ "(" + this.props.reason + ")" }</span>
) : null;
// react doesn't allow appending a DOM node as child.
// as such, we pass the this.props.contentHtml instead and then set the raw

2
src/components/views/elements/StyledCheckbox.tsx
View file

@ -44,7 +44,7 @@ export default class StyledCheckbox extends React.PureComponent<IProps, IState>
return <span className={"mx_Checkbox " + className}>
<input id={this.id} {...otherProps} type="checkbox" />
<label htmlFor={this.id}>
{/* Using the div to center the image */}
{ /* Using the div to center the image */ }
<div className="mx_Checkbox_background">
<img src={require("../../../../res/img/feather-customised/check.svg")} />
</div>

32
src/components/views/elements/StyledRadioButton.tsx
View file

@ -20,6 +20,10 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
outlined?: boolean;
// If true (default), the children will be contained within a <label> element
// If false, they'll be in a div. Putting interactive components that have labels
// themselves in labels can cause strange bugs like https://github.com/vector-im/element-web/issues/18031
childrenInLabel?: boolean;
}
interface IState {
@ -29,10 +33,11 @@ interface IState {
export default class StyledRadioButton extends React.PureComponent<IProps, IState> {
public static readonly defaultProps = {
className: '',
childrenInLabel: true,
};
public render() {
const { children, className, disabled, outlined, ...otherProps } = this.props;
const { children, className, disabled, outlined, childrenInLabel, ...otherProps } = this.props;
const _className = classnames(
'mx_RadioButton',
className,
@ -42,12 +47,27 @@ export default class StyledRadioButton extends React.PureComponent<IProps, IStat
"mx_RadioButton_checked": this.props.checked,
"mx_RadioButton_outlined": outlined,
});
return <label className={_className}>
const radioButton = <React.Fragment>
<input type='radio' disabled={disabled} {...otherProps} />
{/* Used to render the radio button circle */}
{ /* Used to render the radio button circle */ }
<div><div /></div>
<div className="mx_RadioButton_content">{children}</div>
<div className="mx_RadioButton_spacer" />
</label>;
</React.Fragment>;
if (childrenInLabel) {
return <label className={_className}>
{ radioButton }
<div className="mx_RadioButton_content">{ children }</div>
<div className="mx_RadioButton_spacer" />
</label>;
} else {
return <div className={_className}>
<label className="mx_RadioButton_innerLabel">
{ radioButton }
</label>
<div className="mx_RadioButton_content">{ children }</div>
<div className="mx_RadioButton_spacer" />
</div>;
}
}
}

4
src/components/views/elements/StyledRadioGroup.tsx
View file

@ -52,7 +52,7 @@ function StyledRadioGroup<T extends string>({
};
return <React.Fragment>
{definitions.map(d => <React.Fragment key={d.value}>
{ definitions.map(d => <React.Fragment key={d.value}>
<StyledRadioButton
className={classNames(className, d.className)}
onChange={_onChange}
@ -65,7 +65,7 @@ function StyledRadioGroup<T extends string>({
{ d.label }
</StyledRadioButton>
{ d.description ? <span>{ d.description }</span> : null }
</React.Fragment>)}
</React.Fragment>) }
</React.Fragment>;
}

8
src/components/views/elements/TagTile.js
View file

@ -152,7 +152,7 @@ export default class TagTile extends React.Component {
"mx_TagTile_badge": true,
"mx_TagTile_badgeHighlight": badge.highlight,
});
badgeElement = (<div className={badgeClasses}>{FormattingUtils.formatCount(badge.count)}</div>);
badgeElement = (<div className={badgeClasses}>{ FormattingUtils.formatCount(badge.count) }</div>);
}
const contextButton = this.state.hover || this.props.menuDisplayed ?
@ -161,7 +161,7 @@ export default class TagTile extends React.Component {
onClick={this.openMenu}
inputRef={this.props.contextMenuButtonRef}
>
{"\u00B7\u00B7\u00B7"}
{ "\u00B7\u00B7\u00B7" }
</AccessibleButton> : <div ref={this.props.contextMenuButtonRef} />;
const AccessibleTooltipButton = sdk.getComponent("elements.AccessibleTooltipButton");
@ -184,8 +184,8 @@ export default class TagTile extends React.Component {
width={avatarSize}
height={avatarSize}
/>
{contextButton}
{badgeElement}
{ contextButton }
{ badgeElement }
</div>
</AccessibleTooltipButton>;
}

6
src/components/views/elements/TextWithTooltip.js
View file

@ -51,12 +51,12 @@ export default class TextWithTooltip extends React.Component {
return (
<span {...props} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} className={className}>
{children}
{this.state.hover && <Tooltip
{ children }
{ this.state.hover && <Tooltip
{...tooltipProps}
label={tooltip}
tooltipClassName={tooltipClass}
className={"mx_TextWithTooltip_tooltip"}
className="mx_TextWithTooltip_tooltip"
/> }
</span>
);

12
src/components/views/elements/Validation.tsx
View file

@ -147,16 +147,16 @@ export default function withValidation<T = undefined, D = void>({
let details;
if (results && results.length) {
details = <ul className="mx_Validation_details">
{results.map(result => {
{ results.map(result => {
const classes = classNames({
"mx_Validation_detail": true,
"mx_Validation_valid": result.valid,
"mx_Validation_invalid": !result.valid,
});
return <li key={result.key} className={classes}>
{result.text}
{ result.text }
</li>;
})}
}) }
</ul>;
}
@ -165,14 +165,14 @@ export default function withValidation<T = undefined, D = void>({
// We're setting `this` to whichever component holds the validation
// function. That allows rules to access the state of the component.
const content = description.call(this, derivedData);
summary = <div className="mx_Validation_description">{content}</div>;
summary = <div className="mx_Validation_description">{ content }</div>;
}
let feedback;
if (summary || details) {
feedback = <div className="mx_Validation">
{summary}
{details}
{ summary }
{ details }
</div>;
}