@etsoo/materialui 1.6.77 → 1.6.78

package/lib/cjs/SignaturePadComponent.d.ts

@@ -19,7 +19,7 @@ export type SignaturePadComponentProps = {
     /**
      * Width of the canvas
      */
-    width: number;
+    width: number | string;
     /**
      * Height of the canvas
      */

package/lib/cjs/SignaturePadComponent.js

@@ -16,6 +16,7 @@ const Save_1 = __importDefault(require("@mui/icons-material/Save"));
 const CanvasUtils_1 = require("./utils/CanvasUtils");
 const Stack_1 = __importDefault(require("@mui/material/Stack"));
 const ButtonGroup_1 = __importDefault(require("@mui/material/ButtonGroup"));
+const ReactApp_1 = require("./app/ReactApp");
 /**
  * Extended SignaturePad class with trim method
  */
@@ -49,8 +50,15 @@ function SignaturePadComponent(props) {
         if (!canvas)
             return;
         ref.current = new SignaturePadEx(canvas, options);
+        const observer = new ResizeObserver((entries) => {
+            const { width, height } = entries[0].contentRect;
+            canvas.width = width;
+            canvas.height = height;
+        });
+        observer.observe(canvas.parentElement);
         return () => {
             ref.current?.off();
+            observer.disconnect();
         };
     }, [options, ref]);
     return (0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, width: width, height: height });
@@ -62,8 +70,11 @@ function SignaturePadComponent(props) {
  * @returns Component
  */
 function SignaturePadFull(props) {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
+    const { clear, save } = app?.getLabels("clear", "save") ?? {};
     // Destruct
-    const { clearLabel = "Clear", saveLabel = "Save", width = 600, height = 300, mRef, onSave, options, placement = ["right", "flex-start"], spacing = 0.5 } = props;
+    const { clearLabel = clear || "Clear", saveLabel = save || "Save", width = "100%", height = 300, mRef, onSave, options, placement = ["right", "flex-start"], spacing = 0.5 } = props;
     // Ref
     const signaturePadRef = react_1.default.useRef(null);
     react_1.default.useImperativeHandle(mRef, () => ({

package/lib/mjs/SignaturePadComponent.d.ts

@@ -19,7 +19,7 @@ export type SignaturePadComponentProps = {
     /**
      * Width of the canvas
      */
-    width: number;
+    width: number | string;
     /**
      * Height of the canvas
      */

package/lib/mjs/SignaturePadComponent.js

@@ -8,6 +8,7 @@ import SaveIcon from "@mui/icons-material/Save";
 import { CanvasUtils } from "./utils/CanvasUtils";
 import Stack from "@mui/material/Stack";
 import ButtonGroup from "@mui/material/ButtonGroup";
+import { useAppContext } from "./app/ReactApp";
 /**
  * Extended SignaturePad class with trim method
  */
@@ -40,8 +41,15 @@ export function SignaturePadComponent(props) {
         if (!canvas)
             return;
         ref.current = new SignaturePadEx(canvas, options);
+        const observer = new ResizeObserver((entries) => {
+            const { width, height } = entries[0].contentRect;
+            canvas.width = width;
+            canvas.height = height;
+        });
+        observer.observe(canvas.parentElement);
         return () => {
             ref.current?.off();
+            observer.disconnect();
         };
     }, [options, ref]);
     return _jsx("canvas", { ref: canvasRef, width: width, height: height });
@@ -53,8 +61,11 @@ export function SignaturePadComponent(props) {
  * @returns Component
  */
 export function SignaturePadFull(props) {
+    // Global app
+    const app = useAppContext();
+    const { clear, save } = app?.getLabels("clear", "save") ?? {};
     // Destruct
-    const { clearLabel = "Clear", saveLabel = "Save", width = 600, height = 300, mRef, onSave, options, placement = ["right", "flex-start"], spacing = 0.5 } = props;
+    const { clearLabel = clear || "Clear", saveLabel = save || "Save", width = "100%", height = 300, mRef, onSave, options, placement = ["right", "flex-start"], spacing = 0.5 } = props;
     // Ref
     const signaturePadRef = React.useRef(null);
     React.useImperativeHandle(mRef, () => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.77",
+  "version": "1.6.78",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",

package/src/SignaturePadComponent.tsx

@@ -8,6 +8,7 @@ import { ResponsiveStyleValue } from "@mui/system";
 import { CanvasUtils } from "./utils/CanvasUtils";
 import Stack from "@mui/material/Stack";
 import ButtonGroup from "@mui/material/ButtonGroup";
+import { useAppContext } from "./app/ReactApp";
 
 /**
  * Extended SignaturePad class with trim method
@@ -36,7 +37,7 @@ export type SignaturePadComponentProps = {
   /**
    * Width of the canvas
    */
-  width: number;
+  width: number | string;
 
   /**
    * Height of the canvas
@@ -72,8 +73,18 @@ export function SignaturePadComponent(props: SignaturePadComponentProps) {
 
     ref.current = new SignaturePadEx(canvas, options);
 
+    const observer = new ResizeObserver((entries) => {
+      const { width, height } = entries[0].contentRect;
+
+      canvas.width = width;
+      canvas.height = height;
+    });
+
+    observer.observe(canvas.parentElement!);
+
     return () => {
       ref.current?.off();
+      observer.disconnect();
     };
   }, [options, ref]);
 
@@ -140,11 +151,15 @@ export type SignaturePadFullProps = Partial<
  * @returns Component
  */
 export function SignaturePadFull(props: SignaturePadFullProps) {
+  // Global app
+  const app = useAppContext();
+  const { clear, save } = app?.getLabels("clear", "save") ?? {};
+
   // Destruct
   const {
-    clearLabel = "Clear",
-    saveLabel = "Save",
-    width = 600,
+    clearLabel = clear || "Clear",
+    saveLabel = save || "Save",
+    width = "100%",
     height = 300,
     mRef,
     onSave,