Improve ESLint rules for JSX (#3608)
* Add react/no-string-refs ESLint rule * Add react/jsx-boolean-value ESLint rule * Add react/jsx-closing-bracket-location ESLint rule * Add react/jsx-indent ESLint rule * Add react/jsx-curly-spacing ESLint rule * Add react/jsx-equals-spacing ESLint rule * Add react/jsx-first-prop-new-line ESLint rule * Add react/jsx-no-duplicate-props ESLint rule * Add react/jsx-tag-spacing ESLint rule
This commit is contained in:
Yamagishi Kazutoshi
Eugen Rochko
parent
cd81a1c52a
commit
d8ae3efec3
25 changed files with 65 additions and 43 deletions
|
|
@ -55,11 +55,11 @@ class Account extends ImmutablePureComponent {
|
|||
const muting = account.getIn(['relationship', 'muting']);
|
||||
|
||||
if (requested) {
|
||||
buttons = <IconButton disabled={true} icon='hourglass' title={intl.formatMessage(messages.requested)} />;
|
||||
buttons = <IconButton disabled icon='hourglass' title={intl.formatMessage(messages.requested)} />;
|
||||
} else if (blocking) {
|
||||
buttons = <IconButton active={true} icon='unlock-alt' title={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.handleBlock} />;
|
||||
buttons = <IconButton active icon='unlock-alt' title={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.handleBlock} />;
|
||||
} else if (muting) {
|
||||
buttons = <IconButton active={true} icon='volume-up' title={intl.formatMessage(messages.unmute, { name: account.get('username') })} onClick={this.handleMute} />;
|
||||
buttons = <IconButton active icon='volume-up' title={intl.formatMessage(messages.unmute, { name: account.get('username') })} onClick={this.handleMute} />;
|
||||
} else {
|
||||
buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -191,7 +191,8 @@ class AutosuggestTextarea extends ImmutablePureComponent {
|
|||
key={suggestion}
|
||||
data-index={suggestion}
|
||||
className={`autosuggest-textarea__suggestions__item ${i === selectedSuggestion ? 'selected' : ''}`}
|
||||
onClick={this.onSuggestionClick}>
|
||||
onClick={this.onSuggestionClick}
|
||||
>
|
||||
<AutosuggestAccountContainer id={suggestion} />
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ class ColumnBackButton extends React.PureComponent {
|
|||
render () {
|
||||
return (
|
||||
<div role='button' tabIndex='0' onClick={this.handleClick} className='column-back-button'>
|
||||
<i className='fa fa-fw fa-chevron-left column-back-button__icon'/>
|
||||
<i className='fa fa-fw fa-chevron-left column-back-button__icon' />
|
||||
<FormattedMessage id='column_back_button.label' defaultMessage='Back' />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -53,13 +53,13 @@ class DropdownMenu extends React.PureComponent {
|
|||
|
||||
renderItem = (item, i) => {
|
||||
if (item === null) {
|
||||
return <li key={ 'sep' + i } className='dropdown__sep' />;
|
||||
return <li key={`sep-${i}`} className='dropdown__sep' />;
|
||||
}
|
||||
|
||||
const { text, action, href = '#' } = item;
|
||||
|
||||
return (
|
||||
<li className='dropdown__content-list-item' key={ text + i }>
|
||||
<li className='dropdown__content-list-item' key={`${text}-${i}`}>
|
||||
<a href={href} target='_blank' rel='noopener' onClick={this.handleClick} data-index={i} className='dropdown__content-list-link'>
|
||||
{text}
|
||||
</a>
|
||||
|
|
@ -81,7 +81,7 @@ class DropdownMenu extends React.PureComponent {
|
|||
return (
|
||||
<Dropdown ref={this.setRef} onShow={this.handleShow} onHide={this.handleHide}>
|
||||
<DropdownTrigger className='icon-button' style={{ fontSize: `${size}px`, width: `${size}px`, lineHeight: `${size}px` }} aria-label={ariaLabel}>
|
||||
<i className={ `fa fa-fw fa-${icon} dropdown__icon` } aria-hidden={true} />
|
||||
<i className={`fa fa-fw fa-${icon} dropdown__icon`} aria-hidden />
|
||||
</DropdownTrigger>
|
||||
|
||||
<DropdownContent className={directionClass}>
|
||||
|
|
|
|||
|
|
@ -76,7 +76,8 @@ class IconButton extends React.PureComponent {
|
|||
title={this.props.title}
|
||||
className={classes.join(' ')}
|
||||
onClick={this.handleClick}
|
||||
style={style}>
|
||||
style={style}
|
||||
>
|
||||
<i style={{ transform: `rotate(${rotate}deg)` }} className={`fa fa-fw fa-${this.props.icon}`} aria-hidden='true' />
|
||||
</button>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -105,8 +105,8 @@ class Item extends React.PureComponent {
|
|||
src={attachment.get('url')}
|
||||
onClick={this.handleClick}
|
||||
autoPlay={autoPlay}
|
||||
loop={true}
|
||||
muted={true}
|
||||
loop
|
||||
muted
|
||||
/>
|
||||
|
||||
<span className='media-gallery__gifv__label'>GIF</span>
|
||||
|
|
|
|||
|
|
@ -168,7 +168,7 @@ class Status extends ImmutablePureComponent {
|
|||
<FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name: <a onClick={this.handleAccountClick} data-id={status.getIn(['account', 'id'])} href={status.getIn(['account', 'url'])} className='status__display-name muted'><strong dangerouslySetInnerHTML={displayNameHTML} /></a> }} />
|
||||
</div>
|
||||
|
||||
<Status {...other} wrapped={true} status={status.get('reblog')} account={status.get('account')} />
|
||||
<Status {...other} wrapped status={status.get('reblog')} account={status.get('account')} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -184,7 +184,7 @@ class Status extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
if (account === undefined || account === null) {
|
||||
statusAvatar = <Avatar src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} size={48}/>;
|
||||
statusAvatar = <Avatar src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} size={48} />;
|
||||
}else{
|
||||
statusAvatar = <AvatarOverlay staticSrc={status.getIn(['account', 'avatar_static'])} overlaySrc={account.get('avatar_static')} />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -139,10 +139,10 @@ class StatusActionBar extends ImmutablePureComponent {
|
|||
<div className='status__action-bar'>
|
||||
<IconButton className='status__action-bar-button' title={replyTitle} icon={replyIcon} onClick={this.handleReplyClick} />
|
||||
<IconButton className='status__action-bar-button' disabled={reblogDisabled} active={status.get('reblogged')} title={reblogDisabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
|
||||
<IconButton className='status__action-bar-button star-icon' animate={true} active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
|
||||
<IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
|
||||
|
||||
<div className='status__action-bar-dropdown'>
|
||||
<DropdownMenu items={menu} icon='ellipsis-h' size={18} direction='right' ariaLabel='More'/>
|
||||
<DropdownMenu items={menu} icon='ellipsis-h' size={18} direction='right' ariaLabel='More' />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -184,7 +184,7 @@ class VideoPlayer extends React.PureComponent {
|
|||
ref={this.setRef}
|
||||
src={media.get('url')}
|
||||
autoPlay={!isIOS()}
|
||||
loop={true}
|
||||
loop
|
||||
muted={this.state.muted}
|
||||
onClick={this.handleVideoClick}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue