commit: d8ae3efec39cc0d05410629a267b07295b93c59b parent: cd81a1c52a43e6bed17ba86cef343086a44cd5e9 Author: Yamagishi Kazutoshi <ykzts@desire.sh> Date: Tue, 6 Jun 2017 20:20:07 +0900 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 ruleDiffstat:
25 files changed, 65 insertions(+), 43 deletions(-)
diff --git a/.eslintrc.yml b/.eslintrc.yml @@ -64,9 +64,24 @@ rules: strict: off valid-typeof: error + react/jsx-boolean-value: error + react/jsx-closing-bracket-location: + - error + - line-aligned + react/jsx-curly-spacing: error + react/jsx-equals-spacing: error + react/jsx-first-prop-new-line: + - error + - multiline-multiprop + react/jsx-indent: + - error + - 2 react/jsx-no-bind: error + react/jsx-no-duplicate-props: error + react/jsx-tag-spacing: error react/jsx-wrap-multilines: error react/no-multi-comp: off + react/no-string-refs: error react/prop-types: error react/self-closing-comp: error diff --git a/app/javascript/mastodon/components/account.js b/app/javascript/mastodon/components/account.js @@ -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} />; } diff --git a/app/javascript/mastodon/components/autosuggest_textarea.js b/app/javascript/mastodon/components/autosuggest_textarea.js @@ -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> ))} diff --git a/app/javascript/mastodon/components/column_back_button.js b/app/javascript/mastodon/components/column_back_button.js @@ -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> ); diff --git a/app/javascript/mastodon/components/dropdown_menu.js b/app/javascript/mastodon/components/dropdown_menu.js @@ -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}> diff --git a/app/javascript/mastodon/components/icon_button.js b/app/javascript/mastodon/components/icon_button.js @@ -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> } diff --git a/app/javascript/mastodon/components/media_gallery.js b/app/javascript/mastodon/components/media_gallery.js @@ -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> diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js @@ -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')} />; } diff --git a/app/javascript/mastodon/components/status_action_bar.js b/app/javascript/mastodon/components/status_action_bar.js @@ -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> ); diff --git a/app/javascript/mastodon/components/video_player.js b/app/javascript/mastodon/components/video_player.js @@ -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} /> diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js @@ -104,7 +104,7 @@ class Header extends ImmutablePureComponent { if (account.getIn(['relationship', 'requested'])) { actionBtn = ( <div className='account--action-button'> - <IconButton size={26} disabled={true} icon='hourglass' title={intl.formatMessage(messages.requested)} /> + <IconButton size={26} disabled icon='hourglass' title={intl.formatMessage(messages.requested)} /> </div> ); } else if (!account.getIn(['relationship', 'blocking'])) { diff --git a/app/javascript/mastodon/features/account_gallery/components/media_item.js b/app/javascript/mastodon/features/account_gallery/components/media_item.js @@ -28,7 +28,8 @@ class MediaItem extends ImmutablePureComponent { <Permalink to={`/statuses/${status.get('id')}`} href={status.get('url')} - style={style}> + style={style} + > {content} </Permalink> </div> diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js @@ -152,7 +152,7 @@ class ComposeForm extends ImmutablePureComponent { <div className='compose-form'> <Collapsable isVisible={this.props.spoiler} fullHeight={50}> <div className='spoiler-input'> - <input placeholder={intl.formatMessage(messages.spoiler_placeholder)} value={this.props.spoiler_text} onChange={this.handleChangeSpoilerText} onKeyDown={this.handleKeyDown} type='text' className='spoiler-input__input' id='cw-spoiler-input'/> + <input placeholder={intl.formatMessage(messages.spoiler_placeholder)} value={this.props.spoiler_text} onChange={this.handleChangeSpoilerText} onKeyDown={this.handleKeyDown} type='text' className='spoiler-input__input' id='cw-spoiler-input' /> </div> </Collapsable> diff --git a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js @@ -106,14 +106,16 @@ class EmojiPickerDropdown extends React.PureComponent { return ( <Dropdown ref={this.setRef} className='emoji-picker__dropdown' onShow={this.onShowDropdown} onHide={this.onHideDropdown}> <DropdownTrigger className='emoji-button' title={intl.formatMessage(messages.emoji)}> - <img draggable='false' - className={`emojione ${active && loading ? 'pulse-loading' : ''}`} - alt='🙂' src='/emoji/1f602.svg' /> + <img + draggable='false' + className={`emojione ${active && loading ? 'pulse-loading' : ''}`} + alt='🙂' src='/emoji/1f602.svg' + /> </DropdownTrigger> <DropdownContent className='dropdown__left'> { this.state.active && !this.state.loading && - (<EmojiPicker emojione={settings} onChange={this.handleChange} searchPlaceholder={intl.formatMessage(messages.emoji_search)} categories={categories} search={true} />) + (<EmojiPicker emojione={settings} onChange={this.handleChange} searchPlaceholder={intl.formatMessage(messages.emoji_search)} categories={categories} search />) } </DropdownContent> </Dropdown> diff --git a/app/javascript/mastodon/features/compose/components/privacy_dropdown.js b/app/javascript/mastodon/features/compose/components/privacy_dropdown.js @@ -78,7 +78,7 @@ class PrivacyDropdown extends React.PureComponent { return ( <div ref={this.setRef} className={`privacy-dropdown ${open ? 'active' : ''}`}> - <div className='privacy-dropdown__value'><IconButton className='privacy-dropdown__value-icon' icon={valueOption.icon} title={intl.formatMessage(messages.change_privacy)} size={18} active={open} inverted onClick={this.handleToggle} style={iconStyle}/></div> + <div className='privacy-dropdown__value'><IconButton className='privacy-dropdown__value-icon' icon={valueOption.icon} title={intl.formatMessage(messages.change_privacy)} size={18} active={open} inverted onClick={this.handleToggle} style={iconStyle} /></div> <div className='privacy-dropdown__dropdown'> {open && options.map(item => <div role='button' tabIndex='0' key={item.value} data-index={item.value} onClick={this.handleClick} className={`privacy-dropdown__option ${item.value === value ? 'active' : ''}`}> diff --git a/app/javascript/mastodon/features/compose/components/upload_button.js b/app/javascript/mastodon/features/compose/components/upload_button.js @@ -54,13 +54,13 @@ class UploadButton extends ImmutablePureComponent { return ( <div className='compose-form__upload-button'> - <IconButton icon='camera' title={intl.formatMessage(messages.upload)} disabled={disabled} onClick={this.handleClick} className='compose-form__upload-button-icon' size={18} inverted style={iconStyle}/> + <IconButton icon='camera' title={intl.formatMessage(messages.upload)} disabled={disabled} onClick={this.handleClick} className='compose-form__upload-button-icon' size={18} inverted style={iconStyle} /> <input key={resetFileKey} ref={this.setRef} type='file' multiple={false} - accept={ acceptContentTypes.toArray().join(',')} + accept={acceptContentTypes.toArray().join(',')} onChange={this.handleChange} disabled={disabled} style={{ display: 'none' }} diff --git a/app/javascript/mastodon/features/getting_started/index.js b/app/javascript/mastodon/features/getting_started/index.js @@ -77,11 +77,11 @@ class GettingStarted extends ImmutablePureComponent { ]); return ( - <Column icon='asterisk' heading={intl.formatMessage(messages.heading)} hideHeadingOnMobile={true}> + <Column icon='asterisk' heading={intl.formatMessage(messages.heading)} hideHeadingOnMobile> <div className='getting-started__wrapper'> - <ColumnSubheading text={intl.formatMessage(messages.navigation_subheading)}/> + <ColumnSubheading text={intl.formatMessage(messages.navigation_subheading)} /> {navItems} - <ColumnSubheading text={intl.formatMessage(messages.settings_subheading)}/> + <ColumnSubheading text={intl.formatMessage(messages.settings_subheading)} /> <ColumnLink icon='book' text={intl.formatMessage(messages.info)} href='/about/more' /> <ColumnLink icon='cog' text={intl.formatMessage(messages.preferences)} href='/settings/preferences' /> <ColumnLink icon='sign-out' text={intl.formatMessage(messages.sign_out)} href='/auth/sign_out' method='delete' /> diff --git a/app/javascript/mastodon/features/hashtag_timeline/index.js b/app/javascript/mastodon/features/hashtag_timeline/index.js @@ -117,7 +117,7 @@ class HashtagTimeline extends React.PureComponent { onClick={this.handleHeaderClick} pinned={pinned} multiColumn={multiColumn} - showBackButton={true} + showBackButton /> <StatusListContainer diff --git a/app/javascript/mastodon/features/notifications/components/notification.js b/app/javascript/mastodon/features/notifications/components/notification.js @@ -40,12 +40,12 @@ class Notification extends ImmutablePureComponent { <div className='notification notification-favourite'> <div className='notification__message'> <div className='notification__favourite-icon-wrapper'> - <i className='fa fa-fw fa-star star-icon'/> + <i className='fa fa-fw fa-star star-icon' /> </div> <FormattedMessage id='notification.favourite' defaultMessage='{name} favourited your status' values={{ name: link }} /> </div> - <StatusContainer id={notification.get('status')} account={notification.get('account')} muted={true} withDismiss /> + <StatusContainer id={notification.get('status')} account={notification.get('account')} muted withDismiss /> </div> ); } @@ -60,7 +60,7 @@ class Notification extends ImmutablePureComponent { <FormattedMessage id='notification.reblog' defaultMessage='{name} boosted your status' values={{ name: link }} /> </div> - <StatusContainer id={notification.get('status')} account={notification.get('account')} muted={true} withDismiss /> + <StatusContainer id={notification.get('status')} account={notification.get('account')} muted withDismiss /> </div> ); } diff --git a/app/javascript/mastodon/features/status/components/action_bar.js b/app/javascript/mastodon/features/status/components/action_bar.js @@ -81,7 +81,7 @@ class ActionBar extends React.PureComponent { <div className='detailed-status__action-bar'> <div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_id', null) === null ? 'reply' : 'reply-all'} onClick={this.handleReplyClick} /></div> <div className='detailed-status__button'><IconButton disabled={reblog_disabled} active={status.get('reblogged')} title={reblog_disabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /></div> - <div className='detailed-status__button'><IconButton animate={true} active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} activeStyle={{ color: '#ca8f04' }} /></div> + <div className='detailed-status__button'><IconButton animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} activeStyle={{ color: '#ca8f04' }} /></div> <div className='detailed-status__action-bar-dropdown'> <DropdownMenu size={18} icon='ellipsis-h' items={menu} direction='left' ariaLabel='More' /> diff --git a/app/javascript/mastodon/features/ui/components/column.js b/app/javascript/mastodon/features/ui/components/column.js @@ -42,7 +42,7 @@ class Column extends React.PureComponent { if (heading) { columnHeaderId = heading.replace(/ /g, '-'); - header = <ColumnHeader icon={icon} active={active} type={heading} onClick={this.handleHeaderClick} hideOnMobile={hideHeadingOnMobile} columnHeaderId={columnHeaderId}/>; + header = <ColumnHeader icon={icon} active={active} type={heading} onClick={this.handleHeaderClick} hideOnMobile={hideHeadingOnMobile} columnHeaderId={columnHeaderId} />; } return ( <div @@ -50,7 +50,8 @@ class Column extends React.PureComponent { role='region' aria-labelledby={columnHeaderId} className='column' - onScroll={this.handleScroll}> + onScroll={this.handleScroll} + > {header} {children} </div> diff --git a/app/javascript/mastodon/features/ui/components/media_modal.js b/app/javascript/mastodon/features/ui/components/media_modal.js @@ -75,7 +75,7 @@ class MediaModal extends ImmutablePureComponent { if (attachment.get('type') === 'image') { content = <ImageLoader src={url} />; } else if (attachment.get('type') === 'gifv') { - content = <ExtendedVideoPlayer src={url} muted={true} controls={false} />; + content = <ExtendedVideoPlayer src={url} muted controls={false} />; } return ( diff --git a/app/javascript/mastodon/features/ui/components/modal_root.js b/app/javascript/mastodon/features/ui/components/modal_root.js @@ -64,7 +64,8 @@ class ModalRoot extends React.PureComponent { <TransitionMotion styles={items} willEnter={this.willEnter} - willLeave={this.willLeave}> + willLeave={this.willLeave} + > {interpolatedStyles => <div className='modal-root'> {interpolatedStyles.map(({ key, data: { type, props }, style }) => { diff --git a/app/javascript/mastodon/features/ui/components/onboarding_modal.js b/app/javascript/mastodon/features/ui/components/onboarding_modal.js @@ -31,7 +31,7 @@ const PageOne = ({ acct, domain }) => ( <div> <h1><FormattedMessage id='onboarding.page_one.welcome' defaultMessage='Welcome to Mastodon!' /></h1> <p><FormattedMessage id='onboarding.page_one.federation' defaultMessage='Mastodon is a network of independent servers joining up to make one larger social network. We call these servers instances.' /></p> - <p><FormattedMessage id='onboarding.page_one.handle' defaultMessage='You are on {domain}, so your full handle is {handle}' values={{ domain, handle: <strong>{acct}@{domain}</strong> }}/></p> + <p><FormattedMessage id='onboarding.page_one.handle' defaultMessage='You are on {domain}, so your full handle is {handle}' values={{ domain, handle: <strong>{acct}@{domain}</strong> }} /></p> </div> </div> ); @@ -88,7 +88,7 @@ const PageThree = ({ me, domain }) => ( </div> </div> - <p><FormattedMessage id='onboarding.page_three.search' defaultMessage='Use the search bar to find people and look at hashtags, such as {illustration} and {introductions}. To look for a person who is not on this instance, use their full handle.' values={{ illustration: <Permalink to='/timelines/tag/illustration' href='/tags/illustration'>#illustration</Permalink>, introductions: <Permalink to='/timelines/tag/introductions' href='/tags/introductions'>#introductions</Permalink> }}/></p> + <p><FormattedMessage id='onboarding.page_three.search' defaultMessage='Use the search bar to find people and look at hashtags, such as {illustration} and {introductions}. To look for a person who is not on this instance, use their full handle.' values={{ illustration: <Permalink to='/timelines/tag/illustration' href='/tags/illustration'>#illustration</Permalink>, introductions: <Permalink to='/timelines/tag/introductions' href='/tags/introductions'>#introductions</Permalink> }} /></p> <p><FormattedMessage id='onboarding.page_three.profile' defaultMessage='Edit your profile to change your avatar, bio, and display name. There, you will also find other preferences.' /></p> </div> ); @@ -104,7 +104,7 @@ const PageFour = ({ domain, intl }) => ( <div className='row'> <div> <div className='figure non-interactive'><ColumnHeader icon='home' type={intl.formatMessage(messages.home_title)} /></div> - <p><FormattedMessage id='onboarding.page_four.home' defaultMessage='The home timeline shows posts from people you follow.'/></p> + <p><FormattedMessage id='onboarding.page_four.home' defaultMessage='The home timeline shows posts from people you follow.' /></p> </div> <div> @@ -141,7 +141,7 @@ const PageSix = ({ admin, domain }) => { <p> <FormattedMessage id='onboarding.page_six.admin' defaultMessage="Your instance's admin is {admin}." values={{ admin: <Permalink href={admin.get('url')} to={`/accounts/${admin.get('id')}`}>@{admin.get('acct')}</Permalink> }} /> <br /> - <FormattedMessage id='onboarding.page_six.read_guidelines' defaultMessage="Please read {domain}'s {guidelines}!" values={{ domain, guidelines: <a href='/about/more' target='_blank'><FormattedMessage id='onboarding.page_six.guidelines' defaultMessage='community guidelines' /></a> }}/> + <FormattedMessage id='onboarding.page_six.read_guidelines' defaultMessage="Please read {domain}'s {guidelines}!" values={{ domain, guidelines: <a href='/about/more' target='_blank'><FormattedMessage id='onboarding.page_six.guidelines' defaultMessage='community guidelines' /></a> }} /> </p> ); } diff --git a/app/javascript/mastodon/features/ui/components/video_modal.js b/app/javascript/mastodon/features/ui/components/video_modal.js @@ -29,7 +29,7 @@ class VideoModal extends ImmutablePureComponent { <div className='modal-root__modal media-modal'> <div> <div className='media-modal__close'><IconButton title={intl.formatMessage(messages.close)} icon='times' overlay onClick={onClose} /></div> - <ExtendedVideoPlayer src={url} muted={false} controls={true} time={time} /> + <ExtendedVideoPlayer src={url} muted={false} controls time={time} /> </div> </div> );