fix(signature-web): update react imports and fix eslint warnings

Author: samuelreichert

packages/customWidgets/signature-web/src/components/Alert.tsx

@@ -1,13 +1,12 @@
-import { createElement, FC, PropsWithChildren } from "react";
+import { FC, PropsWithChildren } from "react";
 import classNames from "classnames";
 
 export interface AlertProps extends PropsWithChildren {
     bootstrapStyle?: "default" | "primary" | "success" | "info" | "warning" | "danger";
     className?: string;
 }
 
-export const Alert: FC<AlertProps> = ({ bootstrapStyle, className, children }) =>
+export const Alert: FC<AlertProps> = ({ bootstrapStyle = "danger", className, children }) =>
     children ? <div className={classNames(`alert alert-${bootstrapStyle}`, className)}>{children}</div> : null;
 
 Alert.displayName = "Alert";
-Alert.defaultProps = { bootstrapStyle: "danger" };

packages/customWidgets/signature-web/src/components/Grid.tsx

@@ -1,4 +1,4 @@
-import { createElement, FC } from "react";
+import { FC } from "react";
 
 export interface GridBackgroundProps {
     gridCellWidth: number;
@@ -12,7 +12,7 @@ export const Grid: FC<GridBackgroundProps> = ({
     gridCellHeight,
     gridBorderColor,
     gridBorderWidth,
-    showGrid
+    showGrid = true
 }) => {
     const id = `grid${Math.floor(Math.random() * 1000000)}`;
     return showGrid ? (
@@ -43,4 +43,3 @@ export const Grid: FC<GridBackgroundProps> = ({
 };
 
 Grid.displayName = "Grid";
-Grid.defaultProps = { showGrid: true };

packages/customWidgets/signature-web/src/components/Signature.tsx

@@ -1,6 +1,6 @@
-import { createElement, PureComponent, ReactNode } from "react";
+import { PureComponent, ReactNode } from "react";
 
-// @ts-ignore
+// @ts-expect-error signature_pad has no types
 import SignaturePad, { IOptions } from "signature_pad";
 import classNames from "classnames";
 import ReactResizeDetector from "react-resize-detector";
@@ -31,7 +31,7 @@ export type penOptions = "fountain" | "ballpoint" | "marker";
 
 export class Signature extends PureComponent<SignatureProps> {
     private canvasNode: HTMLCanvasElement | null = null;
-    // @ts-expect-error
+    // @ts-expect-error signature_pad has no types
     private signaturePad: SignaturePad;
 
     render(): ReactNode {
@@ -48,7 +48,9 @@ export class Signature extends PureComponent<SignatureProps> {
                 <Grid {...this.props} />
                 <canvas
                     className="widget-signature-canvas"
-                    ref={(node: HTMLCanvasElement) => (this.canvasNode = node)}
+                    ref={(node: HTMLCanvasElement | null): void => {
+                        this.canvasNode = node;
+                    }}
                 />
                 <ReactResizeDetector handleWidth handleHeight onResize={this.onResize} />
             </SizeContainer>

packages/customWidgets/signature-web/src/components/SizeContainer.ts

@@ -28,7 +28,7 @@ export const SizeContainer: FC<SizeProps> = ({
     height,
     children,
     style,
-    readOnly
+    readOnly = false
 }) => {
     const styleWidth = widthUnit === "percentage" ? `${width}%` : `${width}px`;
     return createElement(
@@ -62,7 +62,6 @@ export const SizeContainer: FC<SizeProps> = ({
 };
 
 SizeContainer.displayName = "SizeContainer";
-SizeContainer.defaultProps = { readOnly: false };
 
 const getHeight = (
     heightUnit: HeightUnitType,

packages/customWidgets/signature-web/src/components/__tests__/Alert.spec.ts

@@ -1,10 +1,10 @@
 import { shallow, ShallowWrapper } from "enzyme";
-import { createElement, ReactChild } from "react";
+import { createElement, ReactNode } from "react";
 
 import { Alert, AlertProps } from "../Alert";
 
 describe("Alert", () => {
-    const renderAlert = (props: AlertProps, message: ReactChild): ShallowWrapper<AlertProps, any> =>
+    const renderAlert = (props: AlertProps, message: ReactNode): ShallowWrapper<AlertProps, any> =>
         shallow(createElement(Alert, props, message));
     const alertMessage = "This is an error";
 

packages/customWidgets/signature-web/src/components/__tests__/Signature.spec.ts

@@ -41,7 +41,7 @@ describe("Signature", () => {
         });
         const canvasInstance: any = canvas.instance();
         canvasInstance.canvasNode = document.createElement("canvas");
-        const signaturePadOptions = spyOn(canvasInstance, "signaturePadOptions").and.callThrough();
+        const signaturePadOptions = jest.spyOn(canvasInstance, "signaturePadOptions");
         canvasInstance.componentDidMount();
         expect(signaturePadOptions).toHaveBeenCalled();
     });

packages/customWidgets/signature-web/tsconfig.json

@@ -20,8 +20,7 @@
         "noUnusedParameters": true,
         "allowSyntheticDefaultImports": true,
         "esModuleInterop": true,
-        "jsx": "react",
-        "jsxFactory": "createElement"
+        "jsx": "react-jsx"
     },
     "files": ["./node_modules/mendix-client/index.d.ts"],
     "include": ["./src", "./typings"],