mashirozx/mastodon

File language_dropdown.js has 256 lines of code (exceeds 250 allowed). Consider refactoring.

Open

import React from 'react';
import PropTypes from 'prop-types';
import { injectIntl, defineMessages } from 'react-intl';
import TextIconButton from './text_icon_button';
import Overlay from 'react-overlays/lib/Overlay';

Similar blocks of code found in 2 locations. Consider refactoring.

Open

            <div className='emoji-mart-search'>
              <input type='search' value={searchValue} onChange={this.handleSearchChange} onKeyDown={this.handleSearchKeyDown} placeholder={intl.formatMessage(messages.search)} autoFocus />
              <button className='emoji-mart-search-icon' disabled={!isSearching} aria-label={intl.formatMessage(messages.clear)} onClick={this.handleClear}>{!isSearching ? loupeIcon : deleteIcon}</button>
            </div>

• Read up
  Read up

Identical blocks of code found in 7 locations. Consider refactoring.

Open

      <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
        {({ opacity, scaleX, scaleY }) => (
          // It should not be transformed when mounting because the resulting
          // size will be used to determine the coordinate of the menu by
          // react-overlays

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

          <div className={`language-dropdown__dropdown ${placement}`} style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : null }} ref={this.setRef}>
            <div className='emoji-mart-search'>
              <input type='search' value={searchValue} onChange={this.handleSearchChange} onKeyDown={this.handleSearchKeyDown} placeholder={intl.formatMessage(messages.search)} autoFocus />
              <button className='emoji-mart-search-icon' disabled={!isSearching} aria-label={intl.formatMessage(messages.clear)} onClick={this.handleClear}>{!isSearching ? loupeIcon : deleteIcon}</button>
            </div>

• Read up
  Read up

Identical blocks of code found in 3 locations. Consider refactoring.

Open

  handleClick = e => {
    const value = e.currentTarget.getAttribute('data-index');

    e.preventDefault();

• Read up
  Read up

Similar blocks of code found in 10 locations. Consider refactoring.

Open

const messages = defineMessages({
  changeLanguage: { id: 'compose.language.change', defaultMessage: 'Change language' },
  search: { id: 'compose.language.search', defaultMessage: 'Search languages...' },
  clear: { id: 'emoji_button.clear', defaultMessage: 'Clear' },
});

• Read up
  Read up

Identical blocks of code found in 7 locations. Consider refactoring.

Open

  handleDocumentClick = e => {
    if (this.node && !this.node.contains(e.target)) {
      this.props.onClose();
    }
  }

• Read up
  Read up

Identical blocks of code found in 2 locations. Consider refactoring.

Open

    case 'ArrowDown':
      element = this.listNode.firstChild;

      if (element) {
        element.focus();

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

          <LanguageDropdownMenu
            value={value}
            frequentlyUsedLanguages={frequentlyUsedLanguages}
            onClose={this.handleClose}
            onChange={this.handleChange}

• Read up
  Read up