refactor: remove react/input event types

Author: Oskar Widmark

src/App.tsx

@@ -1,6 +1,6 @@
-import React, { MouseEvent } from 'react';
+import React from 'react';
 import './App.css';
-import { SelectChangeEvent, Stack, Tab, Tabs } from '@mui/material';
+import { Stack, Tab, Tabs } from '@mui/material';
 import {
   SortValue,
   SortName,
@@ -127,10 +127,10 @@ class App extends React.Component<Props> {
     window.removeEventListener('resize', this.resizeCanvas);
   }
 
-  drawOnCanvas = (event: MouseEvent<HTMLCanvasElement>) => {
+  drawOnCanvas = (mouseX: number, mouseY: number) => {
     if (!this.canvasController.isDrawing) return;
 
-    const drawData = this.canvasController.getDrawData(event);
+    const drawData = this.canvasController.getDrawData(mouseX, mouseY);
     for (const data of drawData) {
       this.arr[data.index].value = data.value;
     }
@@ -316,10 +316,10 @@ class App extends React.Component<Props> {
     this.setState({ areSettingsOpen: !this.state.areSettingsOpen });
   };
 
-  chooseSortAlg = (event: SelectChangeEvent<string>) => {
+  chooseSortAlg = (chosenSortAlg: SortName) => {
     this.stopSorting();
 
-    this.setSettings({ chosenSortAlg: event.target.value as SortName });
+    this.setSettings({ chosenSortAlg });
   };
 
   changeColumnNbr = (_: unknown, value: number | number[]) => {
@@ -348,12 +348,12 @@ class App extends React.Component<Props> {
     this.canvasController.redraw(this.arr);
   };
 
-  startDrawOnCanvas = (event: MouseEvent<HTMLCanvasElement>) => {
+  startDrawOnCanvas = (mouseX: number, mouseY: number) => {
     if (!this.state.canDraw) return;
 
     this.stopSorting();
     this.canvasController.isDrawing = true;
-    this.drawOnCanvas(event);
+    this.drawOnCanvas(mouseX, mouseY);
   };
 
   toggleCanDraw = () => {
@@ -457,8 +457,12 @@ class App extends React.Component<Props> {
             <canvas
               className="App-canvas"
               ref={this.canvasController.canvasRef}
-              onMouseDown={this.startDrawOnCanvas}
-              onMouseMove={this.drawOnCanvas}
+              onMouseDown={(event) =>
+                this.startDrawOnCanvas(event.clientX, event.clientY)
+              }
+              onMouseMove={(event) =>
+                this.drawOnCanvas(event.clientX, event.clientY)
+              }
               onMouseUp={this.canvasController.endDraw}
               onMouseLeave={this.canvasController.endDraw}
             />
@@ -481,7 +485,7 @@ class App extends React.Component<Props> {
               <TitledSelect
                 title="Sorting Algorithm"
                 value={this.state.settings.chosenSortAlg}
-                onChange={this.chooseSortAlg}
+                onSelect={(value) => this.chooseSortAlg(value as SortName)}
                 options={Object.values(SortName)}
               />
               <Options
@@ -519,9 +523,9 @@ class App extends React.Component<Props> {
               <TitledSelect
                 title="Reset Preset"
                 value={this.state.settings.resetPreset}
-                onChange={(event) => {
+                onSelect={(value) => {
                   this.setSettings({
-                    resetPreset: event.target.value as ResetPreset,
+                    resetPreset: value as ResetPreset,
                   });
                 }}
                 options={Object.values(ResetPreset)}

src/ColorTab.tsx

@@ -34,7 +34,7 @@ export function ColorTab(props: {
         <TitledSelect
           title="Preset"
           value={colorPreset}
-          onChange={(e) => setColorPreset(e.target.value as ColorPreset)}
+          onSelect={(value) => setColorPreset(value as ColorPreset)}
           options={Object.values(ColorPreset)}
         />
         {(colorPreset === ColorPreset.Custom ||

src/Options.tsx

@@ -27,7 +27,10 @@ const getAlgorithmOptionFields = (
   }
 };
 
-const isValidOption = (field: keyof AlgorithmOptions, value: unknown) => {
+const isValidOption = (
+  field: keyof AlgorithmOptions,
+  value: unknown,
+): value is AlgorithmOptions[typeof field] => {
   switch (field) {
     case 'base':
       return Number(value) >= 2 && Number.isInteger(Number(value));
@@ -93,20 +96,14 @@ export function Options({
     useState<AlgorithmOptions>({ ...algorithmOptions });
 
   const handleOptionChange = useCallback(
-    (
-      field: keyof AlgorithmOptions,
-      event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-    ) => {
+    (field: keyof AlgorithmOptions, value: unknown) => {
       setNonValidatedOptions({
         ...nonValidatedOptions,
-        [field]: event.target.value,
+        [field]: value,
       });
 
-      if (isValidOption(field, event.target.value)) {
-        setAlgorithmOption(
-          field,
-          event.target.value as AlgorithmOptions[typeof field],
-        );
+      if (isValidOption(field, value)) {
+        setAlgorithmOption(field, value);
       }
     },
     [nonValidatedOptions, setAlgorithmOption],
@@ -135,7 +132,9 @@ export function Options({
               select={ALGORITHM_OPTION_TEXT_FIELD_TYPES[field] === 'select'}
               label={ALGORITHM_OPTION_LABELS[field]}
               value={nonValidatedOptions[field]}
-              onChange={(event) => handleOptionChange(field, event)}
+              onChange={(event) =>
+                handleOptionChange(field, event.target.value)
+              }
               error={!isValidOption(field, nonValidatedOptions[field])}
               size="small"
               sx={{ width: 120 }}

src/SoundTab.tsx

@@ -44,9 +44,7 @@ export const SoundTab = ({
     <TitledSelect
       title="Sound type"
       value={soundType}
-      onChange={(event) =>
-        setSoundType(event.target.value as NonCustomOscillatorType)
-      }
+      onSelect={(value) => setSoundType(value as NonCustomOscillatorType)}
       options={SOUND_TYPE_OPTIONS}
     />
     <TitledSlider

src/TitledSelect.tsx

@@ -1,20 +1,14 @@
-import {
-  FormControl,
-  Typography,
-  Select,
-  MenuItem,
-  SelectChangeEvent,
-} from '@mui/material';
+import { FormControl, Typography, Select, MenuItem } from '@mui/material';
 
 export const TitledSelect = ({
   title,
   value,
-  onChange,
+  onSelect,
   options,
 }: {
   title: string;
   value: string;
-  onChange: (event: SelectChangeEvent<string>) => void;
+  onSelect: (value: string) => void;
   options: string[];
 }) => {
   return (
@@ -28,7 +22,11 @@ export const TitledSelect = ({
         >
           {title}
         </Typography>
-        <Select value={value} onChange={onChange} size="small">
+        <Select
+          value={value}
+          onChange={(event) => onSelect(event.target.value)}
+          size="small"
+        >
           {options.map((v) => (
             <MenuItem value={v} key={v}>
               <Typography align="left" variant="body2" color="textSecondary">

src/canvas-controller.ts

@@ -1,4 +1,3 @@
-import { MouseEvent } from 'react';
 import { ColorPreset, DrawData, SortValue } from './types';
 import { hsvToRgbHex, rgbHexToHsv } from './utils';
 
@@ -159,7 +158,7 @@ export class CanvasController {
     this.drawAll(arr);
   };
 
-  getDrawData = (event: MouseEvent<HTMLCanvasElement>): DrawData[] => {
+  getDrawData = (mouseX: number, mouseY: number): DrawData[] => {
     if (!this.isDrawing) return [];
 
     const drawData = [];
@@ -176,10 +175,10 @@ export class CanvasController {
     const rect = canvas.getBoundingClientRect();
 
     const colIndex = Math.floor(
-      ((event.clientX - rect.left) / canvas.width) * this.context.columnNbr,
+      ((mouseX - rect.left) / canvas.width) * this.context.columnNbr,
     );
     const colHeight = Math.floor(
-      ((canvas.height - (event.clientY - rect.top)) / canvas.height) *
+      ((canvas.height - (mouseY - rect.top)) / canvas.height) *
         this.context.columnNbr,
     );