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

Open

/* tslint:disable */

import test from "ava";
import * as React from "react";
import { spy } from "sinon";

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

Open

import * as React from "react";
import { DraggableEventHandler, default as DraggableRoot } from "react-draggable";
import { Enable, Resizable, ResizeDirection } from "re-resizable";

// FIXME: https://github.com/mzabriskie/react-draggable/issues/381

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

Open

  onResizeStart(
    e: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>,
    dir: ResizeDirection,
    elementRef: HTMLElement,
  ) {

• Read up
  Read up

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

Open

  render() {
    const {
      disableDragging,
      style,
      dragHandleClassName,

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

Open

  onResizeStart(
    e: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>,
    dir: ResizeDirection,
    elementRef: HTMLElement,
  ) {

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

Open

  onDragStart(e: RndDragEvent, data: DraggableData) {
    if (this.props.onDragStart) {
      this.props.onDragStart(e, data);
    }
    const pos = this.getDraggablePosition();

Rnd has 21 functions (exceeds 20 allowed). Consider refactoring.

Open

export class Rnd extends React.PureComponent<Props, State> {
  public static defaultProps: DefaultProps = {
    maxWidth: Number.MAX_SAFE_INTEGER,
    maxHeight: Number.MAX_SAFE_INTEGER,
    scale: 1,

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

Open

  render() {
    return (
      <div
        style={{
          width: "100%",

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

Open

  render() {
    return (
      <>
        {[0, 1, 2].map((i) => (
          <Rnd

Function onDragStart has a Cognitive Complexity of 12 (exceeds 5 allowed). Consider refactoring.

Open

  onDragStart(e: RndDragEvent, data: DraggableData) {
    if (this.props.onDragStart) {
      this.props.onDragStart(e, data);
    }
    const pos = this.getDraggablePosition();

• Read up
  Read up

Function Example has 35 lines of code (exceeds 25 allowed). Consider refactoring.

Open

const Example: React.FC = () => {
  const [state, setState] = React.useState<State>({
    width: 200,
    height: 200,
    x: 0,

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

Open

  render() {
    return (
      <div>
        <div style={{ marginLeft: "30px" }}>
          <Rnd

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

Open

  render() {
    return (
      <div className="boundary" style={{ ...selectorBoundary, transform: "scale(0.6)" }}>
        <div style={parentBoundary}>
          <Rnd

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

Open

  render() {
    return (
      <div className="boundary" style={selectorBoundary}>
        <div style={parentBoundary}>
          <Rnd

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

Open

  render() {
    return (
      <div style={parentBoundary}>
        <Rnd
          style={style}

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

Open

  render() {
    return (
      <div style={parentBoundary}>
        <Rnd
          style={style}

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

Open

  render() {
    const {
      disableDragging,
      style,
      dragHandleClassName,

• Read up
  Read up

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

Open

  onResize(
    e: MouseEvent | TouchEvent,
    direction: ResizeDirection,
    elementRef: HTMLElement,
    delta: { height: number; width: number },

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

Open

  onResize(
    e: MouseEvent | TouchEvent,
    direction: ResizeDirection,
    elementRef: HTMLElement,
    delta: { height: number; width: number },

• Read up
  Read up

Avoid too many return statements within this function.

Open

    if (!this.resizable) return;