From c7d6db494d93ff2aed56c2d929a98e15f854f086 Mon Sep 17 00:00:00 2001
From: Daniel Lehr <daniellehr@gmx.de>
Date: Mon, 27 Nov 2023 14:00:42 +0100
Subject: [PATCH] Remove unnecessary passing of excessive props

---
 packages/lib/src/index.ts | 56 ++++++++++-----------------------------
 1 file changed, 14 insertions(+), 42 deletions(-)

diff --git a/packages/lib/src/index.ts b/packages/lib/src/index.ts
index 71f74f4..d6b3fdf 100644
--- a/packages/lib/src/index.ts
+++ b/packages/lib/src/index.ts
@@ -2,6 +2,7 @@ import React, {
   type TouchEventHandler,
   type CSSProperties,
   type MouseEventHandler,
+  type AllHTMLAttributes,
 } from 'react'
 
 import { loadImageURL } from './utils/loadImageURL'
@@ -126,6 +127,8 @@ export interface Props {
   disableBoundaryChecks?: boolean
   disableHiDPIScaling?: boolean
   disableCanvasRotation?: boolean
+  showGrid?: boolean
+  gridColor?: string
 }
 
 export interface Position {
@@ -688,54 +691,23 @@ class AvatarEditor extends React.Component<PropsWithDefaults, State> {
   }
 
   render() {
-    const {
-      scale,
-      rotate,
-      image,
-      border,
-      borderRadius,
-      width,
-      height,
-      position,
-      color,
-      backgroundColor,
-      style,
-      crossOrigin,
-      onLoadFailure,
-      onLoadSuccess,
-      onImageReady,
-      onImageChange,
-      onMouseUp,
-      onMouseMove,
-      onPositionChange,
-      disableBoundaryChecks,
-      disableHiDPIScaling,
-      disableCanvasRotation,
-      ...rest
-    } = this.props
-
     const dimensions = this.getDimensions()
 
-    const defaultStyle: CSSProperties = {
-      width: dimensions.canvas.width,
-      height: dimensions.canvas.height,
-      cursor: this.state.drag ? 'grabbing' : 'grab',
-      touchAction: 'none',
-    }
-
-    const attributes: JSX.IntrinsicElements['canvas'] = {
+    const attributes = {
       width: dimensions.canvas.width * this.pixelRatio,
       height: dimensions.canvas.height * this.pixelRatio,
       onMouseDown: this.handleMouseDown,
       onTouchStart: this.handleTouchStart,
-      style: { ...defaultStyle, ...style },
-    }
-
-    return React.createElement('canvas', {
-      ...attributes,
-      ...rest,
-      ref: this.canvas,
-    })
+      style: {
+        width: dimensions.canvas.width,
+        height: dimensions.canvas.height,
+        cursor: this.state.drag ? 'grabbing' : 'grab',
+        touchAction: 'none',
+        ...this.props.style,
+      },
+    } satisfies AllHTMLAttributes<HTMLCanvasElement>
+
+    return React.createElement('canvas', { ...attributes, ref: this.canvas })
   }
 }