5.x - FIO-8426: changes required for eSignature

src/Webform.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import moment from 'moment';
 import { compareVersions } from 'compare-versions';
 import { Component } from '@formio/core';
 import EventEmitter from './EventEmitter';
 import i18nDefaults from './i18n';
 import { Formio } from './Formio';
@@ -811,6 +811,19 @@
     this.setSubmission(submission);
   }
 
+  /**
+   * Sets the submission value
+   * @param {object|null|undefined} submission - The submission to set.
+   * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
+   * @return {void}
+   */
+  onSetSubmission(submission, flags = {}) {
+    this.submissionSet = true;
+    this.triggerChange(flags);
+    this.emit('beforeSetSubmission', submission);
+    this.setValue(submission, flags);
+  }
+
   /**
    * Sets a submission and returns the promise when it is ready.
    * @param submission
@@ -830,10 +843,7 @@
             ...resolveFlags
           };
         }
-        this.submissionSet = true;
-        this.triggerChange(flags);
-        this.emit('beforeSetSubmission', submission);
-        this.setValue(submission, flags);
+        this.onSetSubmission(submission, flags);
         return this.submissionReadyResolve(submission);
       },
       (err) => this.submissionReadyReject(err)

src/components/_classes/component/Component.js

@@ -1176,6 +1176,15 @@ export default class Component extends Element {
     this.componentModal.setOpenModalElement(template || this.getModalPreviewTemplate());
   }
 
+  /**
+   * Renders a modal preview template and returns the markup as a string
+   * @param {object|null|undefined} ctx - The rendering context
+   * @return {string} - The modal preview markup
+   */
+  renderModalPreview(ctx) {
+    return this.renderTemplate('modalPreview', ctx || {});
+  }
+
   getModalPreviewTemplate() {
     const dataValue = this.component.type === 'password' ? this.dataValue.replace(/./g, '•') : this.dataValue;
     let modalLabel;
@@ -1184,7 +1193,7 @@ export default class Component extends Element {
       modalLabel = { className: 'field-required' };
     }
 
-    return this.renderTemplate('modalPreview', {
+    return this.renderModalPreview({
       previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('Click to set value'),
       messages: '',
       labelInfo: modalLabel,
@@ -1227,22 +1236,33 @@ export default class Component extends Element {
     }
   }
 
+  /**
+   * Creates the tooltip instance using tippy.js and returns it
+   * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip
+   * @param {object|null|undefined} settings - tippy.js options
+   * @return {import('tippy.js').Tippy} - tippy.js instance
+   */
+  createTooltip(tooltipEl, settings = {}) {
+    const tooltipAttribute = tooltipEl.getAttribute('data-tooltip');
+    const tooltipDataTitle = tooltipEl.getAttribute('data-title');
+    const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)
+                            .replace(/(?:\r\n|\r|\n)/g, '<br />');
+
+    return tippy(tooltipEl, {
+      allowHTML: true,
+      trigger: 'mouseenter click focus',
+      placement: 'right',
+      zIndex: 10000,
+      interactive: true,
+      ...settings,
+      content: this.t(this.sanitize(tooltipText), { _userInput: true }),
+    });
+  }
+
   attachTooltips(toolTipsRefs) {
     toolTipsRefs?.forEach((tooltip, index) => {
       if (tooltip) {
-        const tooltipAttribute = tooltip.getAttribute('data-tooltip');
-        const tooltipDataTitle = tooltip.getAttribute('data-title');
-        const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)
-                                .replace(/(?:\r\n|\r|\n)/g, '<br />');
-
-        this.tooltips[index] = tippy(tooltip, {
-          allowHTML: true,
-          trigger: 'mouseenter click focus',
-          placement: 'right',
-          zIndex: 10000,
-          interactive: true,
-          content: this.t(this.sanitize(tooltipText), { _userInput: true }),
-        });
+        this.tooltips[index] = this.createTooltip(tooltip);
       }
     });
   }

src/components/form/Form.js

@@ -722,9 +722,18 @@ export default class FormComponent extends Component {
       });
     }
     else {
-      this.subForm.setValue(submission, flags);
+      this.onSetSubFormValue(submission, flags);
     }
   }
+  /**
+   * Sets the subform value
+   * @param {object|null|undefined} submission - The submission to set.
+   * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
+   * @return {void}
+   */
+  onSetSubFormValue(submission, flags) {
+    this.subForm.setValue(submission, flags);
+  }
 
   isEmpty(value = this.dataValue) {
     return value === null || _.isEqual(value, this.emptyValue) || (this.areAllComponentsEmpty(value?.data) && !value?._id);

src/components/signature/Signature.js

@@ -196,7 +196,7 @@ export default class SignatureComponent extends Input {
   }
 
   getModalPreviewTemplate() {
-    return this.renderTemplate('modalPreview', {
+    return this.renderModalPreview({
       previewText: this.dataValue ?
         `<img src=${this.dataValue} ${this._referenceAttributeName}='openModal' style="width: 100%;height: 100%;" />` :
         this.t('Click to Sign')