File index.tsx has 868 lines of code (exceeds 250 allowed). Consider refactoring.

Open

import * as React from 'react';
import { flushSync } from 'react-dom';

import { Resizer, Direction } from './resizer';

Function onMouseMove has a Cognitive Complexity of 33 (exceeds 5 allowed). Consider refactoring.

Open

  onMouseMove(event: MouseEvent | TouchEvent) {
    if (!this.state.isResizing || !this.resizable || !this.window) {
      return;
    }
    if (this.window.TouchEvent && isTouchEvent(event)) {

• Read up
  Read up

Function calculateNewMaxFromBoundary has a Cognitive Complexity of 30 (exceeds 5 allowed). Consider refactoring.

Open

  calculateNewMaxFromBoundary(maxWidth?: number, maxHeight?: number) {
    const { boundsByDirection } = this.props;
    const { direction } = this.state;
    const widthByDirection = boundsByDirection && hasDirection('left', direction);
    const heightByDirection = boundsByDirection && hasDirection('top', direction);

• Read up
  Read up

Function onMouseMove has 104 lines of code (exceeds 25 allowed). Consider refactoring.

Open

  onMouseMove(event: MouseEvent | TouchEvent) {
    if (!this.state.isResizing || !this.resizable || !this.window) {
      return;
    }
    if (this.window.TouchEvent && isTouchEvent(event)) {

Function onResizeStart has a Cognitive Complexity of 24 (exceeds 5 allowed). Consider refactoring.

Open

  onResizeStart(event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>, direction: Direction) {
    if (!this.resizable || !this.window) {
      return;
    }
    let clientX = 0;

• Read up
  Read up

Resizable has 24 functions (exceeds 20 allowed). Consider refactoring.

Open

export class Resizable extends React.PureComponent<ResizableProps, State> {
  flexDir?: 'row' | 'column';

  get parentNode(): HTMLElement | null {
    if (!this.resizable) {

Function onResizeStart has 58 lines of code (exceeds 25 allowed). Consider refactoring.

Open

  onResizeStart(event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>, direction: Direction) {
    if (!this.resizable || !this.window) {
      return;
    }
    let clientX = 0;

Function calculateNewSizeFromDirection has a Cognitive Complexity of 13 (exceeds 5 allowed). Consider refactoring.

Open

  calculateNewSizeFromDirection(clientX: number, clientY: number) {
    const scale = this.props.scale || 1;
    const [resizeRatioX, resizeRatioY] = normalizeToPair(this.props.resizeRatio || 1);
    const { direction, original } = this.state;
    const { lockAspectRatio, lockAspectRatioExtraHeight, lockAspectRatioExtraWidth } = this.props;

• Read up
  Read up

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

Open

  render() {
    const extendsProps = Object.keys(this.props).reduce((acc, key) => {
      if (definedProps.indexOf(key) !== -1) {
        return acc;
      }

Function calculateNewMaxFromBoundary has 36 lines of code (exceeds 25 allowed). Consider refactoring.

Open

  calculateNewMaxFromBoundary(maxWidth?: number, maxHeight?: number) {
    const { boundsByDirection } = this.props;
    const { direction } = this.state;
    const widthByDirection = boundsByDirection && hasDirection('left', direction);
    const heightByDirection = boundsByDirection && hasDirection('top', direction);

Function calculateNewSizeFromDirection has 33 lines of code (exceeds 25 allowed). Consider refactoring.

Open

  calculateNewSizeFromDirection(clientX: number, clientY: number) {
    const scale = this.props.scale || 1;
    const [resizeRatioX, resizeRatioY] = normalizeToPair(this.props.resizeRatio || 1);
    const { direction, original } = this.state;
    const { lockAspectRatio, lockAspectRatioExtraHeight, lockAspectRatioExtraWidth } = this.props;

Function sizeStyle has a Cognitive Complexity of 11 (exceeds 5 allowed). Consider refactoring.

Open

  get sizeStyle(): { width: string; height: string } {
    const { size } = this.props;
    const getSize = (key: 'width' | 'height'): string => {
      if (typeof this.state[key] === 'undefined' || this.state[key] === 'auto') {
        return 'auto';

• Read up
  Read up

Function constructor has 30 lines of code (exceeds 25 allowed). Consider refactoring.

Open

  constructor(props: ResizableProps) {
    super(props);
    this.state = {
      isResizing: false,
      width: this.propsSize?.width ?? 'auto',

Function getParentSize has 28 lines of code (exceeds 25 allowed). Consider refactoring.

Open

  getParentSize(): { width: number; height: number } {
    if (!this.parentNode) {
      if (!this.window) {
        return { width: 0, height: 0 };
      }

Function getPixelSize has a Cognitive Complexity of 10 (exceeds 5 allowed). Consider refactoring.

Open

const getPixelSize = (
  size: undefined | string | number,
  parentSize: number,
  innerWidth: number,
  innerHeight: number,

• Read up
  Read up

Function size has a Cognitive Complexity of 8 (exceeds 5 allowed). Consider refactoring.

Open

  get size(): NumberSize {
    let width = 0;
    let height = 0;
    if (this.resizable && this.window) {
      const orgWidth = this.resizable.offsetWidth;

• Read up
  Read up

Function renderResizer has a Cognitive Complexity of 7 (exceeds 5 allowed). Consider refactoring.

Open

  renderResizer() {
    const { enable, handleStyles, handleClasses, handleWrapperStyle, handleWrapperClass, handleComponent } = this.props;
    if (!enable) {
      return null;
    }

• Read up
  Read up

Function getStringSize has a Cognitive Complexity of 7 (exceeds 5 allowed). Consider refactoring.

Open

const getStringSize = (n: number | string): string => {
  n = n.toString();
  if (n === 'auto') {
    return n;
  }

• Read up
  Read up

Avoid too many return statements within this function.

Open

    return n;

Avoid too many return statements within this function.

Open

  return `${n}px`;