anyone-oslo/pages

import { useRef, useState } from "react";
 
import useImageCropperContext from "./useImageCropperContext";
import * as Crop from "../../types/Crop";
 
type Props = {
  width: number;
  height: number;
};
 
function clamp(val: number, min: number, max: number): number {
  if (val < min) {
    return min;
  } else if (val > max) {
    return max;
  } else {
    return val;
  }
}
 
Function `FocalPoint` has 57 lines of code (exceeds 25 allowed). Consider refactoring.
Function `FocalPoint` has a Cognitive Complexity of 14 (exceeds 5 allowed). Consider refactoring.
export default function FocalPoint(props: Props) {
  const { width, height } = props;
  const { state, dispatch } = useImageCropperContext();
 
  const [dragging, setDragging] = useState(false);
  const [position, setPosition] = useState<Crop.Position>(state.focalPoint);
 
  const containerRef = useRef<HTMLDivElement>();
  const pointRef = useRef<HTMLDivElement>();
 
  const dragStart = (evt: React.MouseEvent | React.TouchEvent) => {
    evt.preventDefault();
    evt.stopPropagation();
    if (evt.target == pointRef.current) {
      setDragging(true);
    }
  };
 
  const dragEnd = () => {
    if (dragging) {
      setDragging(false);
      dispatch({ type: "setFocal", payload: position });
    }
  };
 
  const drag = (evt: React.MouseEvent | React.TouchEvent) => {
    if (dragging) {
      let x: number, y: number;
      const containerSize = containerRef.current.getBoundingClientRect();
      evt.preventDefault();
 
      if ("touches" in evt && evt.type == "touchmove") {
        x = evt.touches[0].clientX - (containerSize.x || containerSize.left);
        y = evt.touches[0].clientY - (containerSize.y || containerSize.top);
      } else if ("clientX" in evt) {
        x = evt.clientX - (containerSize.x || containerSize.left);
        y = evt.clientY - (containerSize.y || containerSize.top);
      }
 
      x = clamp(x, 0, width);
      y = clamp(y, 0, height);
 
      setPosition({
        x: (x / width) * 100,
        y: (y / height) * 100
      });
    }
  };
 
  const x = width * (position.x / 100);
  const y = height * (position.y / 100);
  const pointStyle = {
    transform: `translate3d(${x}px, ${y}px, 0)`
  };
 
  return (
    <div
      className="focal-editor"
      ref={containerRef}
      onTouchStart={dragStart}
      onTouchEnd={dragEnd}
      onTouchMove={drag}
      onMouseDown={dragStart}
      onMouseUp={dragEnd}
      onMouseMove={drag}>
      <div className="focal-point" style={pointStyle} ref={pointRef} />
    </div>
  );
}