ui-soxo-bootstrap-core 2.6.55-dev.0 → 2.6.55-dev.1

package/core/lib/components/consent/signature-pad.js

@@ -1,5 +1,5 @@
 // src/components/SignatureCanvas.js
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import SignatureCanvas from 'react-signature-canvas';
 import { Button, message } from 'antd';
 import { useTranslation } from '../../../lib';
@@ -8,12 +8,22 @@ import './signature-pad.scss';
 
 
 
-const SignatureCanvasComponent = ({ onClear, onSaveAndAddSignature, btnloading }) => {
+const SignatureCanvasComponent = ({
+    onClear,
+    onSaveAndAddSignature,
+    btnloading,
+    showUpload = true,
+    accept = 'image/png',
+    maxSizeMB = 5,
+}) => {
     const sigCanvas = useRef({});
+    const fileInput = useRef(null);
+    const [uploadedName, setUploadedName] = useState(null);
     const { t, i18n } = useTranslation(); // To Translate to another language
 
     const clear = () => {
         sigCanvas.current.clear()
+        setUploadedName(null);
         if (onClear) onClear();
     };
 
@@ -34,6 +44,102 @@ const SignatureCanvasComponent = ({ onClear, onSaveAndAddSignature, btnloading }
         }
     };
 
+    /**
+     * Open the (hidden) file picker
+     */
+    const selectImage = () => {
+        if (fileInput.current) fileInput.current.click();
+    };
+
+    /**
+     * Draw the picked image on the pad, scaled to fit and centered,
+     * so that Save / Clear keep working exactly as with a drawn signature
+     *
+     * @param {string} dataUrl 
+     */
+    const drawImageOnPad = (dataUrl) => {
+        const image = new Image();
+
+        image.onerror = () => message.error(t('Unable to load the selected image'));
+
+        image.onload = () => {
+            const canvas = sigCanvas.current.getCanvas();
+
+            if (!canvas || !image.naturalWidth || !image.naturalHeight) {
+                message.error(t('Unable to load the selected image'));
+                return;
+            }
+
+            // Size the canvas is drawn with, and its actual (device pixel) resolution
+            const drawWidth = canvas.offsetWidth || canvas.width;
+            const drawHeight = canvas.offsetHeight || canvas.height;
+            const ratio = canvas.width / drawWidth;
+
+            // Fit inside the pad without distorting the image
+            const scale = Math.min(
+                canvas.width / image.naturalWidth,
+                canvas.height / image.naturalHeight
+            );
+            const imageWidth = image.naturalWidth * scale;
+            const imageHeight = image.naturalHeight * scale;
+
+            const offscreen = document.createElement('canvas');
+            offscreen.width = canvas.width;
+            offscreen.height = canvas.height;
+            offscreen.getContext('2d').drawImage(
+                image,
+                (canvas.width - imageWidth) / 2,
+                (canvas.height - imageHeight) / 2,
+                imageWidth,
+                imageHeight
+            );
+
+            sigCanvas.current.clear();
+            sigCanvas.current.fromDataURL(offscreen.toDataURL('image/png'), {
+                width: drawWidth,
+                height: drawHeight,
+                ratio,
+            });
+        };
+
+        image.src = dataUrl;
+    };
+
+    /**
+     * Validate and read the picked image
+     *
+     * @param {Event} event 
+     */
+    const onFileSelect = (event) => {
+        const file = event.target.files && event.target.files[0];
+
+        // Reset so that picking the same file again still fires a change
+        event.target.value = '';
+
+        if (!file) return;
+
+        // Only the types listed in `accept` are allowed, whatever the file dialog let through
+        const allowed = accept.split(',').map((type) => type.trim()).filter(Boolean);
+
+        if (!file.type || allowed.indexOf(file.type) < 0) {
+            message.error(`${t('Please select a valid image file')} (${allowed.join(', ')})`);
+            return;
+        }
+
+        if (file.size > maxSizeMB * 1024 * 1024) {
+            message.error(`${t('Image should be smaller than')} ${maxSizeMB}MB`);
+            return;
+        }
+
+        const reader = new FileReader();
+        reader.onerror = () => message.error(t('Unable to read the selected image'));
+        reader.onload = () => {
+            drawImageOnPad(reader.result);
+            setUploadedName(file.name);
+        };
+        reader.readAsDataURL(file);
+    };
+
     return (
         <div className='signature-pad'>
             <SignatureCanvas
@@ -47,9 +153,19 @@ const SignatureCanvasComponent = ({ onClear, onSaveAndAddSignature, btnloading }
             />
 
             <p>
-                <small>Click<strong> Save </strong>to add signature and save the document</small>
+                <small>
+                    {showUpload
+                        ? <>Draw the signature or <strong>Upload Image</strong>, then click<strong> Save </strong>to add signature and save the document</>
+                        : <>Click<strong> Save </strong>to add signature and save the document</>}
+                </small>
             </p>
 
+            {showUpload && uploadedName && (
+                <p className='signature-file-name'>
+                    <small>{uploadedName}</small>
+                </p>
+            )}
+
             <div className='signature-actions'>
                 <div className='left'>
                     <Button
@@ -61,6 +177,16 @@ const SignatureCanvasComponent = ({ onClear, onSaveAndAddSignature, btnloading }
                     >
                         {t('Save')}
                     </Button>
+                    {showUpload && (
+                        <Button
+                            style={{ borderRadius: '2px' }}
+                            type="secondary"
+                            size="medium"
+                            onClick={selectImage}
+                        >
+                            {t('Upload Image')}
+                        </Button>
+                    )}
                     <Button
                         style={{ borderRadius: '2px' }}
                         type="secondary"
@@ -82,6 +208,17 @@ const SignatureCanvasComponent = ({ onClear, onSaveAndAddSignature, btnloading }
                     {t('Add Signature')}
                 </Button> */}
             </div>
+
+            {showUpload && (
+                <input
+                    ref={fileInput}
+                    type="file"
+                    accept={accept}
+                    className='signature-file-input'
+                    style={{ display: 'none' }}
+                    onChange={onFileSelect}
+                />
+            )}
         </div>
 
     );

package/core/lib/components/consent/signature-pad.scss

@@ -1,6 +1,15 @@
 .signature-pad {
     padding: 20px;
 
+    .signature-file-input {
+        display: none;
+    }
+
+    .signature-file-name {
+        margin-bottom: 4px;
+        color: rgba(0, 0, 0, 0.45);
+    }
+
     .signature-actions {
         display: flex;
         justify-content: space-between;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.6.55-dev.0",
+  "version": "2.6.55-dev.1",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"