chore: fix resize library error in react 19

Author: r0b1n

packages/customWidgets/signature-web/dependencies.json

@@ -1,5 +1 @@
-[
-    { "classnames": { "version": "2.5.1", "url": null } },
-    { "react-resize-detector": { "version": "9.1.1", "url": null } },
-    { "signature_pad": { "version": "4.0.0", "url": null } }
-]
+[{ "classnames": { "version": "2.5.1", "url": null } }, { "signature_pad": { "version": "4.0.0", "url": null } }]

packages/customWidgets/signature-web/dependencies.txt

@@ -33,41 +33,6 @@ SOFTWARE.
 
 ---
 
-Name: react-resize-detector
-Version: 9.1.1
-License: MIT
-Private: false
-Description: React resize detector
-Repository: git+https://github.com/maslianok/react-resize-detector.git
-Author: Vitalii Maslianok <maslianok@gmail.com> (https://github.com/maslianok)
-Homepage: https://github.com/maslianok/react-resize-detector
-License Copyright:
-===
-
-The MIT License (MIT)
-
-Copyright (c) 2023 Vitalii Maslianok
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
----
-
 Name: signature_pad
 Version: 4.0.0
 License: MIT

packages/customWidgets/signature-web/package.json

@@ -37,7 +37,6 @@
     },
     "dependencies": {
         "classnames": "^2.5.1",
-        "react-resize-detector": "^9.1.1",
         "signature_pad": "4.0.0"
     },
     "devDependencies": {

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

@@ -1,9 +1,6 @@
 import { PureComponent, ReactNode } from "react";
-
-// @ts-expect-error signature_pad has no types
-import SignaturePad, { IOptions } from "signature_pad";
+import SignaturePad, { Options } from "signature_pad";
 import classNames from "classnames";
-import ReactResizeDetector from "react-resize-detector";
 
 import { Alert } from "./Alert";
 import { Grid } from "./Grid";
@@ -31,8 +28,7 @@ export type penOptions = "fountain" | "ballpoint" | "marker";
 
 export class Signature extends PureComponent<SignatureProps> {
     private canvasNode: HTMLCanvasElement | null = null;
-    // @ts-expect-error signature_pad has no types
-    private signaturePad: SignaturePad;
+    private signaturePad: SignaturePad | undefined;
 
     render(): ReactNode {
         const { className, alertMessage, wrapperStyle } = this.props;
@@ -43,6 +39,7 @@ export class Signature extends PureComponent<SignatureProps> {
                 className={classNames("widget-signature", className)}
                 classNameInner="widget-signature-wrapper form-control mx-textarea-input mx-textarea"
                 style={wrapperStyle}
+                onResize={this.onResize}
             >
                 <Alert bootstrapStyle="danger">{alertMessage}</Alert>
                 <Grid {...this.props} />
@@ -52,7 +49,6 @@ export class Signature extends PureComponent<SignatureProps> {
                         this.canvasNode = node;
                     }}
                 />
-                <ReactResizeDetector handleWidth handleHeight onResize={this.onResize} />
             </SizeContainer>
         );
     }
@@ -61,6 +57,7 @@ export class Signature extends PureComponent<SignatureProps> {
         if (this.canvasNode) {
             this.signaturePad = new SignaturePad(this.canvasNode, {
                 penColor: this.props.penColor,
+                // @ts-expect-error // looks like this never worked, there is no onEnd in SignaturePad code
                 onEnd: this.handleSignEnd,
                 ...this.signaturePadOptions()
             });
@@ -87,7 +84,7 @@ export class Signature extends PureComponent<SignatureProps> {
     }
 
     private onResize = (): void => {
-        if (this.canvasNode) {
+        if (this.canvasNode && this.signaturePad) {
             const data = this.signaturePad.toData();
             this.canvasNode.width =
                 this.canvasNode && this.canvasNode.parentElement ? this.canvasNode.parentElement.offsetWidth : 0;
@@ -98,8 +95,8 @@ export class Signature extends PureComponent<SignatureProps> {
         }
     };
 
-    private signaturePadOptions(): IOptions {
-        let options: IOptions = {};
+    private signaturePadOptions(): Options {
+        let options: Options = {};
         if (this.props.penType === "fountain") {
             options = { minWidth: 0.6, maxWidth: 2.6, velocityFilterWeight: 0.6 };
         } else if (this.props.penType === "ballpoint") {
@@ -111,7 +108,7 @@ export class Signature extends PureComponent<SignatureProps> {
     }
 
     private handleSignEnd = (): void => {
-        if (this.props.onSignEndAction) {
+        if (this.props.onSignEndAction && this.signaturePad) {
             this.props.onSignEndAction(this.signaturePad.toDataURL());
         }
     };

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

@@ -1,5 +1,6 @@
 import { createElement, CSSProperties, FC, PropsWithChildren } from "react";
 import classNames from "classnames";
+import { useResizeObserver } from "../utils/useResizeObserver";
 
 export type HeightUnitType = "percentageOfWidth" | "percentageOfParent" | "pixels";
 
@@ -17,6 +18,7 @@ export interface SizeProps extends Dimensions, PropsWithChildren {
     classNameInner?: string;
     readOnly?: boolean;
     style?: CSSProperties;
+    onResize?: () => void;
 }
 
 export const SizeContainer: FC<SizeProps> = ({
@@ -28,12 +30,16 @@ export const SizeContainer: FC<SizeProps> = ({
     height,
     children,
     style,
-    readOnly = false
+    readOnly = false,
+    onResize
 }) => {
+    const ref = useResizeObserver(() => onResize?.());
+
     const styleWidth = widthUnit === "percentage" ? `${width}%` : `${width}px`;
     return createElement(
         "div",
         {
+            ref,
             className: classNames(className, "size-box"),
             style: {
                 position: "relative",

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

@@ -21,31 +21,7 @@ describe("Grid", () => {
     it("renders structure correctly", () => {
         const grid = renderGrid(defaultProps);
 
-        expect(grid.getElement()).toEqual(
-            createElement(
-                "div",
-                {
-                    className: "widget-signature size-box",
-                    style: {
-                        position: "relative",
-                        width: "500px",
-                        height: "300px"
-                    }
-                },
-                createElement("div", {
-                    className: "size-box-inner",
-                    readOnly: defaultProps.readOnly,
-                    disabled: defaultProps.readOnly,
-                    style: {
-                        position: "absolute",
-                        top: "0",
-                        right: "0",
-                        bottom: "0",
-                        left: "0"
-                    }
-                })
-            )
-        );
+        expect(grid.getElement()).toMatchSnapshot();
     });
 
     it("with percentage units renders the structure correctly", () => {
@@ -57,32 +33,7 @@ describe("Grid", () => {
             height: 50
         });
 
-        expect(grid.getElement()).toEqual(
-            createElement(
-                "div",
-                {
-                    className: "widget-signature size-box",
-                    style: {
-                        position: "relative",
-                        width: "80%",
-                        height: "auto",
-                        paddingBottom: "40%"
-                    }
-                },
-                createElement("div", {
-                    className: "size-box-inner",
-                    readOnly: defaultProps.readOnly,
-                    disabled: defaultProps.readOnly,
-                    style: {
-                        position: "absolute",
-                        top: "0",
-                        right: "0",
-                        bottom: "0",
-                        left: "0"
-                    }
-                })
-            )
-        );
+        expect(grid.getElement()).toMatchSnapshot();
     });
 
     it("with percentage of parent units renders the structure correctly", () => {
@@ -94,31 +45,7 @@ describe("Grid", () => {
             height: 50
         });
 
-        expect(grid.getElement()).toEqual(
-            createElement(
-                "div",
-                {
-                    className: "widget-signature size-box",
-                    style: {
-                        position: "relative",
-                        width: "80%",
-                        height: "50%"
-                    }
-                },
-                createElement("div", {
-                    className: "size-box-inner",
-                    readOnly: defaultProps.readOnly,
-                    disabled: defaultProps.readOnly,
-                    style: {
-                        position: "absolute",
-                        top: "0",
-                        right: "0",
-                        bottom: "0",
-                        left: "0"
-                    }
-                })
-            )
-        );
+        expect(grid.getElement()).toMatchSnapshot();
     });
 
     it("with percentage and pixel units renders the structure correctly", () => {
@@ -130,30 +57,6 @@ describe("Grid", () => {
             height: 50
         });
 
-        expect(grid.getElement()).toEqual(
-            createElement(
-                "div",
-                {
-                    className: "widget-signature size-box",
-                    style: {
-                        position: "relative",
-                        width: "80px",
-                        height: "40px"
-                    }
-                },
-                createElement("div", {
-                    className: "size-box-inner",
-                    readOnly: defaultProps.readOnly,
-                    disabled: defaultProps.readOnly,
-                    style: {
-                        position: "absolute",
-                        top: "0",
-                        right: "0",
-                        bottom: "0",
-                        left: "0"
-                    }
-                })
-            )
-        );
+        expect(grid.getElement()).toMatchSnapshot();
     });
 });

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

@@ -12,6 +12,7 @@ exports[`Signature renders the structure correctly 1`] = `
   gridCellWidth={50}
   height={50}
   heightUnit="percentageOfWidth"
+  onResize={[Function]}
   penColor="#000"
   penType="fountain"
   readOnly={false}
@@ -45,10 +46,5 @@ exports[`Signature renders the structure correctly 1`] = `
   <canvas
     className="widget-signature-canvas"
   />
-  <ResizeDetector
-    handleHeight={true}
-    handleWidth={true}
-    onResize={[Function]}
-  />
 </SizeContainer>
 `;