mashirozx/mastodon

File dropdown_menu.js has 303 lines of code (exceeds 250 allowed). Consider refactoring.

Open

import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import IconButton from './icon_button';
import Overlay from 'react-overlays/lib/Overlay';

Function render has 53 lines of code (exceeds 25 allowed). Consider refactoring.

Open

  render () {
    const {
      icon,
      items,
      size,

Function render has 27 lines of code (exceeds 25 allowed). Consider refactoring.

Open

  render () {
    const { items, style, placement, arrowOffsetLeft, arrowOffsetTop, scrollable, renderHeader, loading } = this.props;
    const { mounted } = this.state;

    let renderItem = this.props.renderItem || this.renderItem;

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

    const {
      icon,
      items,
      size,
      title,

• Read up
  Read up

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

Open

          <div className={`dropdown-menu ${placement}`} style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : null }} ref={this.setRef}>
            <div className={`dropdown-menu__arrow ${placement}`} style={{ left: arrowOffsetLeft, top: arrowOffsetTop }} />

            <div className={classNames('dropdown-menu__container', { 'dropdown-menu__container--loading': loading })}>
              {loading && (

• Read up
  Read up

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

Open

      if (e.shiftKey) {
        element = items[index-1] || items[items.length-1];
      } else {
        element = items[index+1] || items[0];
      }

• 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

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

Open

    const { items, style, placement, arrowOffsetLeft, arrowOffsetTop, scrollable, renderHeader, loading } = this.props;

• Read up
  Read up

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

Open

  handleItemKeyPress = e => {
    if (e.key === 'Enter' || e.key === ' ') {
      this.handleClick(e);
    }
  }

• Read up
  Read up

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

Open

    const button = children ? React.cloneElement(React.Children.only(children), {
      ref: this.setTargetRef,
      onClick: this.handleClick,
      onMouseDown: this.handleMouseDown,
      onKeyDown: this.handleButtonKeyDown,

• Read up
  Read up