5.x - FIO-8426: changes required for eSignature (#5633)

* 5.x - FIO-8426: changes required for eSignature * added types and description * refactored types * added description for renderModalPreview returned value
formio · Jul 2, 2024 · 12a035b · 12a035b
1 parent ea880fb
commit 12a035b
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 21 deletions.
diff --git a/src/Webform.js b/src/Webform.js
@@ -782,6 +782,19 @@ export default class Webform extends NestedDataComponent {
         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 {any} submission - The submission to set.
@@ -802,10 +815,7 @@ export default class Webform extends NestedDataComponent {
                             ...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)
@@ -1253,7 +1263,6 @@ export default class Webform extends NestedDataComponent {
         // Mark any components as invalid if in a custom message.
         errors.forEach((err) => {
             const { components = [] } = err;
-
             if (err.component) {
                 components.push(err.component);
             }

diff --git a/src/components/_classes/component/Component.js b/src/components/_classes/component/Component.js
@@ -1193,6 +1193,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 || {});
+  }
+
   /**
    * Returns the modal preview template.
    * @returns {string} - The modal preview template.
@@ -1205,7 +1214,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,
@@ -1259,6 +1268,29 @@ 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 }),
+    });
+  }
+
   /**
    * Attaches all the tooltips provided the refs object.
    * @param {object} toolTipsRefs - The refs for the tooltips within your template.
@@ -1267,19 +1299,7 @@ export default class Component extends Element {
   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);
       }
     });
   }

diff --git a/src/components/form/Form.js b/src/components/form/Form.js
@@ -726,9 +726,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);

diff --git a/src/components/signature/Signature.js b/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')