@formio/js 5.4.0 → 5.4.2

package/lib/mjs/components/editgrid/EditGrid.js

@@ -4,7 +4,7 @@ import { editgrid as templates } from '@formio/bootstrap/components';
 import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';
 import Component from '../_classes/component/Component';
 import Alert from '../alert/Alert';
-import { fastCloneDeep, Evaluator, getArrayFromComponentPath, eachComponent, screenReaderSpeech } from '../../utils';
+import { fastCloneDeep, Evaluator, getArrayFromComponentPath, eachComponent, screenReaderSpeech, } from '../../utils';
 const EditRowState = {
     New: 'new',
     Editing: 'editing',
@@ -115,10 +115,10 @@ export default class EditGridComponent extends NestedArrayComponent {
     }
     get defaultDialogTemplate() {
         return `
-    <h3 ${this._referenceAttributeName}="dialogHeader">${this.t('Do you want to clear data?')}</h3>
+    <h3 ${this._referenceAttributeName}="dialogHeader">${this.t('wantToClearData')}</h3>
     <div style="display:flex; justify-content: flex-end;">
-      <button ${this._referenceAttributeName}="dialogCancelButton" class="btn btn-secondary" aria-label="${this.t('Cancel')}">${this.t('Cancel')}</button>
-      <button ${this._referenceAttributeName}="dialogYesButton" class="btn btn-danger" aria-label="${this.t('Yes, delete it')}">${this.t('Yes, delete it')}</button>
+      <button ${this._referenceAttributeName}="dialogCancelButton" class="btn btn-secondary" aria-label="${this.t('cancel')}">${this.t('cancel')}</button>
+      <button ${this._referenceAttributeName}="dialogYesButton" class="btn btn-danger" aria-label="${this.t('yesDelete')}">${this.t('yesDelete')}</button>
     </div>
   `;
     }
@@ -253,6 +253,12 @@ export default class EditGridComponent extends NestedArrayComponent {
             this.fullMode &&
             this.dataValue.length > _.get(this.component, 'validate.minLength', 0));
     }
+    checkData(data, flags, row) {
+        super.checkData(data, flags, row);
+        if (this.type === 'editgrid' && flags?.fromSubmission) {
+            return this.redraw();
+        }
+    }
     init() {
         if (this.builderMode) {
             this.editRows = [];
@@ -302,19 +308,11 @@ export default class EditGridComponent extends NestedArrayComponent {
         });
     }
     isOpen(editRow) {
-        return [
-            EditRowState.New,
-            EditRowState.Editing,
-            EditRowState.Viewing,
-        ].includes(editRow.state);
+        return [EditRowState.New, EditRowState.Editing, EditRowState.Viewing].includes(editRow.state);
     }
     isComponentVisibleInSomeRow(component) {
         const rows = this.editRows;
-        const savedStates = [
-            EditRowState.Saved,
-            EditRowState.Editing,
-            EditRowState.Draft,
-        ];
+        const savedStates = [EditRowState.Saved, EditRowState.Editing, EditRowState.Draft];
         const savedRows = rows.filter((row) => _.includes(savedStates, row.state));
         this.visibleInHeader = this.visibleInHeader || [];
         const changeVisibleInHeader = (component, isVisible) => {
@@ -335,9 +333,7 @@ export default class EditGridComponent extends NestedArrayComponent {
                 comp.checkConditions();
             });
             const isVisible = checkComponent ? checkComponent.visible : true;
-            [
-                ...this.components,
-            ].forEach((comp) => this.removeComponent(comp, this.components));
+            [...this.components].forEach((comp) => this.removeComponent(comp, this.components));
             changeVisibleInHeader(component, isVisible);
             return isVisible;
         }
@@ -477,10 +473,7 @@ export default class EditGridComponent extends NestedArrayComponent {
                     const elements = row.getElementsByClassName(className);
                     Array.prototype.forEach.call(elements, (element) => {
                         if (this.options.pdf &&
-                            _.intersection(element.classList, [
-                                'editRow',
-                                'removeRow',
-                            ]).length) {
+                            _.intersection(element.classList, ['editRow', 'removeRow']).length) {
                             element.style.display = 'none';
                         }
                         else {
@@ -536,7 +529,7 @@ export default class EditGridComponent extends NestedArrayComponent {
                 flattenedComponents,
                 displayValue: (component) => this.displayComponentValue(component),
                 isVisibleInRow: (component) => this.isComponentVisibleInRow(component, flattenedComponents),
-                getView: (component, data) => {
+                getView: (component, _data) => {
                     const instance = flattenedComponents[component.key];
                     const view = instance ? instance.getView(instance.dataValue) : '';
                     // If there is an html tag in view, don't allow it to be injected in template
@@ -1047,10 +1040,7 @@ export default class EditGridComponent extends NestedArrayComponent {
             editRow.errors =
                 this.component.modal || this.component.rowDrafts
                     ? errors
-                    : errors.filter((err) => _.find(this.visibleErrors, [
-                        'component.id',
-                        err.component.id,
-                    ]));
+                    : errors.filter((err) => _.find(this.visibleErrors, ['component.id', err.component.id]));
         }
         // TODO: this is essentially running its own custom validation and should be moved into a validation rule
         if (this.component.validate && this.component.validate.row) {
@@ -1068,7 +1058,7 @@ export default class EditGridComponent extends NestedArrayComponent {
             if (valid === null) {
                 editRow.errors.push({
                     type: 'error',
-                    message: `Invalid row validation for ${this.key}`,
+                    message: this.t('componentInvalidRowValidation', { componentKey: this.key })
                 });
             }
         }
@@ -1145,20 +1135,6 @@ export default class EditGridComponent extends NestedArrayComponent {
             errors.push(...this._errors);
             return false;
         }
-        // TODO: this is the only place invalidMessage gets called, and it's not clear why it's needed - we already validate the editGrid
-        // component above with super.checkComponentValidity
-        const message = this.invalid || this.invalidMessage(data, dirty, false, row, options);
-        if (allRowErrors.length && this.root?.submitted && !message) {
-            this._errors = this.setCustomValidity(message, dirty);
-            errors.push(...this._errors);
-            this.root?.showErrors([
-                message,
-            ]);
-        }
-        else {
-            this._errors = this.setCustomValidity(message, dirty);
-            errors.push(...this._errors);
-        }
         return superValid;
     }
     setRowInvalid(ref, index) {
@@ -1186,9 +1162,7 @@ export default class EditGridComponent extends NestedArrayComponent {
         }
         if (!Array.isArray(value)) {
             if (typeof value === 'object') {
-                value = [
-                    value,
-                ];
+                value = [value];
             }
             else {
                 return false;

package/lib/mjs/components/editgrid/editForm/EditGrid.edit.display.js

@@ -13,10 +13,7 @@ export default [
         input: true,
         conditional: {
             json: {
-                '!==': [
-                    { var: 'data.modal' },
-                    true,
-                ],
+                '!==': [{ var: 'data.modal' }, true],
             },
         },
     },

package/lib/mjs/components/file/File.js

@@ -23,9 +23,7 @@ if (htmlCanvasElement && !htmlCanvasElement.prototype.toBlob) {
                 for (var i = 0; i < len; i++) {
                     arr[i] = binStr.charCodeAt(i);
                 }
-                callback(new Blob([
-                    arr,
-                ], { type: type || 'image/png' }));
+                callback(new Blob([arr], { type: type || 'image/png' }));
             });
         },
     });
@@ -62,17 +60,12 @@ export default class FileComponent extends Field {
     static get conditionOperatorsSettings() {
         return {
             ...super.conditionOperatorsSettings,
-            operators: [
-                'isEmpty',
-                'isNotEmpty',
-            ],
+            operators: ['isEmpty', 'isNotEmpty'],
         };
     }
     static savedValueTypes(schema) {
         schema = schema || {};
-        return (getComponentSavedTypes(schema) || [
-            componentValueTypes.object,
-        ]);
+        return getComponentSavedTypes(schema) || [componentValueTypes.object];
     }
     init() {
         super.init();
@@ -213,7 +206,7 @@ export default class FileComponent extends Field {
             this.videoStream = stream;
             const { videoPlayer } = this.refs;
             if (!videoPlayer) {
-                console.warn('Video player not found in template.');
+                console.warn(this.t('videoPlayerNotFound'));
                 this.cameraMode = false;
                 this.redraw();
                 return;
@@ -238,16 +231,14 @@ export default class FileComponent extends Field {
     takePicture() {
         const { videoPlayer } = this.refs;
         if (!videoPlayer) {
-            console.warn('Video player not found in template.');
+            console.warn(this.t('videoPlayerNotFound'));
             this.cameraMode = false;
             this.redraw();
             return;
         }
         this.getFrame(videoPlayer).then((frame) => {
             frame.name = `photo-${Date.now()}.png`;
-            this.handleFilesToUpload([
-                frame,
-            ]);
+            this.handleFilesToUpload([frame]);
             this.cameraMode = false;
             this.redraw();
         });
@@ -426,13 +417,9 @@ export default class FileComponent extends Field {
                         fileEntry.file((file) => {
                             const reader = new FileReader();
                             reader.onloadend = (evt) => {
-                                const blob = new Blob([
-                                    new Uint8Array(evt.target.result),
-                                ], { type: file.type });
+                                const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });
                                 blob.name = file.name;
-                                this.handleFilesToUpload([
-                                    blob,
-                                ]);
+                                this.handleFilesToUpload([blob]);
                             };
                             reader.readAsArrayBuffer(file);
                         });
@@ -452,13 +439,9 @@ export default class FileComponent extends Field {
                         fileEntry.file((file) => {
                             const reader = new FileReader();
                             reader.onloadend = (evt) => {
-                                const blob = new Blob([
-                                    new Uint8Array(evt.target.result),
-                                ], { type: file.type });
+                                const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });
                                 blob.name = file.name;
-                                this.handleFilesToUpload([
-                                    blob,
-                                ]);
+                                this.handleFilesToUpload([blob]);
                             };
                             reader.readAsArrayBuffer(file);
                         });
@@ -629,7 +612,7 @@ export default class FileComponent extends Field {
         if (!target.id) {
             return;
         }
-        const [action, id,] = target.id.split('-');
+        const [action, id] = target.id.split('-');
         if (!action || !id || !this.actions[action]) {
             return;
         }
@@ -654,7 +637,7 @@ export default class FileComponent extends Field {
             file,
             size: file.size,
             status: 'info',
-            message: this.t('Processing file. Please wait...'),
+            message: this.t('waitFileProcessing'),
             hash: '',
         };
     }
@@ -682,7 +665,7 @@ export default class FileComponent extends Field {
         return fileWithSameNameUploaded || fileWithSameNameUploading
             ? {
                 status: 'error',
-                message: this.t(`File with the same name is already ${fileWithSameNameUploading ? 'being ' : ''}uploaded`),
+                message: this.t(fileWithSameNameUploading ? 'fileWithDuplicatedNameInProgress' : 'fileWithDuplicatedNameLoaded'),
             }
             : {};
     }
@@ -691,7 +674,7 @@ export default class FileComponent extends Field {
         if (this.component.filePattern && !this.validatePattern(file, this.component.filePattern)) {
             return {
                 status: 'error',
-                message: this.t('File is the wrong type; it must be {{ pattern }}', {
+                message: this.t('wrongFileType', {
                     pattern: this.component.filePattern,
                 }),
             };
@@ -704,7 +687,7 @@ export default class FileComponent extends Field {
             if (!interpolatedMinSize) {
                 return {
                     status: 'error',
-                    message: 'Please, check the entered parameters',
+                    message: this.t('checkEnteredParameters'),
                 };
             }
             if (!this.validateMinSize(file, interpolatedMinSize)) {
@@ -722,7 +705,7 @@ export default class FileComponent extends Field {
             if (!interpolatedMaxSize) {
                 return {
                     status: 'error',
-                    message: 'Please, check the entered parameters',
+                    message: this.t('checkEnteredParameters'),
                 };
             }
             if (!this.validateMaxSize(file, interpolatedMaxSize)) {
@@ -741,7 +724,7 @@ export default class FileComponent extends Field {
         return !fileService
             ? {
                 status: 'error',
-                message: this.t('File Service not provided.'),
+                message: this.t('noFileService'),
             }
             : {};
     }
@@ -771,11 +754,7 @@ export default class FileComponent extends Field {
                     ]
                     : element.component.submissionAccess;
                 groupPermissions.forEach((permission) => {
-                    groupKey = [
-                        'admin',
-                        'write',
-                        'create',
-                    ].includes(permission.type)
+                    groupKey = ['admin', 'write', 'create'].includes(permission.type)
                         ? element.component.key
                         : null;
                 });
@@ -797,7 +776,7 @@ export default class FileComponent extends Field {
                 this.fileDropHidden = false;
                 return {
                     status: 'error',
-                    message: this.t('File processing has been failed.'),
+                    message: this.t('fileProcessingFailed'),
                 };
             }
             finally {
@@ -831,7 +810,7 @@ export default class FileComponent extends Field {
             return this.filesToSync.filesToUpload.push(fileToSync);
         }
         if (this.autoSync) {
-            fileToSync.message = this.t('Ready to be uploaded into storage');
+            fileToSync.message = this.t('readyForUpload');
         }
         this.filesToSync.filesToUpload.push({
             ...fileToSync,
@@ -849,9 +828,7 @@ export default class FileComponent extends Field {
         }
         if (this.component.storage && files && files.length) {
             this.fileDropHidden = true;
-            return Promise.all([
-                ...files,
-            ].map(async (file) => {
+            return Promise.all([...files].map(async (file) => {
                 await this.prepareFileToUpload(file);
                 this.redraw();
             }));
@@ -871,8 +848,8 @@ export default class FileComponent extends Field {
             ...fileInfo,
             status: 'info',
             message: this.autoSync
-                ? this.t('Ready to be removed from storage')
-                : this.t('Preparing file to remove'),
+                ? this.t('readyForRemovingFromStorage')
+                : this.t('preparingFileToRemove'),
         });
         const index = this.dataValue.findIndex((file) => file.name === fileInfo.name);
         this.splice(index);
@@ -887,13 +864,7 @@ export default class FileComponent extends Field {
     async deleteFile(fileInfo) {
         const { options = {} } = this.component;
         if (fileInfo &&
-            [
-                'url',
-                'indexeddb',
-                's3',
-                'azure',
-                'googledrive',
-            ].includes(this.component.storage)) {
+            ['url', 'indexeddb', 's3', 'azure', 'googledrive'].includes(this.component.storage)) {
             const { fileService } = this;
             if (fileService && typeof fileService.deleteFile === 'function') {
                 return await fileService.deleteFile(fileInfo, options);
@@ -917,7 +888,7 @@ export default class FileComponent extends Field {
                 }
                 await this.deleteFile(fileToSync);
                 fileToSync.status = 'success';
-                fileToSync.message = this.t('Succefully removed');
+                fileToSync.message = this.t('succefullyRemoved');
             }
             catch (response) {
                 fileToSync.status = 'error';
@@ -988,14 +959,14 @@ export default class FileComponent extends Field {
                         fileInfo,
                     };
                 }
-                if (fileToSync.status === "success") {
-                    const uploadedFile = this.resolvedFiles.find(x => x.fileToSync.originalName === fileToSync.originalName);
+                if (fileToSync.status === 'success') {
+                    const uploadedFile = this.resolvedFiles.find((x) => x.fileToSync.originalName === fileToSync.originalName);
                     return {
                         fileToSync: uploadedFile.fileToSync,
                         fileInfo: uploadedFile.fileInfo,
                     };
                 }
-                const pendingFile = this.pendingfiles.find(x => x.name === fileToSync.name);
+                const pendingFile = this.pendingfiles.find((x) => x.name === fileToSync.name);
                 if (pendingFile) {
                     fileInfo = await pendingFile.fileInfoProm;
                 }
@@ -1004,9 +975,9 @@ export default class FileComponent extends Field {
                     this.pendingfiles.push({ name: fileToSync.name, fileInfoProm: promInfo });
                     fileInfo = await promInfo;
                 }
-                this.pendingfiles = this.pendingfiles.filter(x => x.name !== fileToSync.name);
+                this.pendingfiles = this.pendingfiles.filter((x) => x.name !== fileToSync.name);
                 fileToSync.status = 'success';
-                fileToSync.message = this.t('Succefully uploaded');
+                fileToSync.message = this.t('succefullyUploaded');
                 fileInfo.originalName = fileToSync.originalName;
                 fileInfo.hash = fileToSync.hash;
                 this.emit('fileUploadingEnd', Promise.resolve(fileInfo));
@@ -1018,7 +989,7 @@ export default class FileComponent extends Field {
                     typeof response === 'string'
                         ? response
                         : response.type === 'abort'
-                            ? this.t('Request was aborted')
+                            ? this.t('requestAborted')
                             : response.toString();
                 this.emit('fileUploadingEnd', Promise.reject(response));
                 this.emit(_.get(response, 'type') === 'abort' ? 'fileUploadCanceled' : 'fileUploadError', {
@@ -1029,9 +1000,11 @@ export default class FileComponent extends Field {
             finally {
                 delete fileToSync.progress;
                 this.redraw();
-                const fileExists = this.resolvedFiles.find(x => x.fileInfo.originalName === fileToSync.originalName);
-                if (!fileExists && fileToSync.status !== 'error') {
-                    this.resolvedFiles.push({ fileToSync, fileInfo });
+                if (fileInfo) {
+                    const fileExists = this.resolvedFiles.find(x => x.fileInfo.originalName === fileToSync.originalName);
+                    if (!fileExists && fileToSync.status !== 'error') {
+                        this.resolvedFiles.push({ fileToSync, fileInfo });
+                    }
                 }
             }
             return {
@@ -1045,7 +1018,7 @@ export default class FileComponent extends Field {
         this.fileDropHidden = true;
         this.redraw();
         try {
-            const [filesToDelete = [], filesToUpload = [],] = await Promise.all([
+            const [filesToDelete = [], filesToUpload = []] = await Promise.all([
                 this.delete(),
                 this.upload(),
             ]);
@@ -1084,7 +1057,7 @@ export default class FileComponent extends Field {
         const { options = {} } = this.component;
         const { fileService } = this;
         if (!fileService) {
-            return alert('File Service not provided');
+            return alert(this.t('noFileService'));
         }
         if (this.component.privateDownload) {
             fileInfo.private = true;
@@ -1093,10 +1066,7 @@ export default class FileComponent extends Field {
             .downloadFile(fileInfo, options)
             .then((file) => {
             if (file) {
-                if ([
-                    'base64',
-                    'indexeddb',
-                ].includes(file.storage)) {
+                if (['base64', 'indexeddb'].includes(file.storage)) {
                     download(file.url, file.originalName || file.name, file.type);
                 }
                 else {
@@ -1124,7 +1094,7 @@ export default class FileComponent extends Field {
                 return Promise.resolve();
             }
             await this.syncFiles();
-            return this.shouldSyncFiles ? Promise.reject('Synchronization is failed') : Promise.resolve();
+            return this.shouldSyncFiles ? Promise.reject(this.t('synchronizationFailed')) : Promise.resolve();
         }
         catch (error) {
             return Promise.reject(error.message);

package/lib/mjs/components/file/editForm/File.edit.display.js

@@ -15,11 +15,7 @@ export default [
                     {
                         var: 'data.storage',
                     },
-                    [
-                        's3',
-                        'azure',
-                        'googledrive',
-                    ],
+                    ['s3', 'azure', 'googledrive'],
                 ],
             },
         },

package/lib/mjs/components/file/editForm/File.edit.file.js

@@ -28,10 +28,7 @@ export default [
         tooltip: "The <a href='https://docs.aws.amazon.com/AmazonS3/latest/userguide/mpuoverview.html'>S3 Multipart Upload API</a> is designed to improve the upload experience for larger objects (> 5GB).",
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.storage' },
-                    's3',
-                ],
+                '===': [{ var: 'data.storage' }, 's3'],
             },
         },
     },
@@ -63,10 +60,7 @@ export default [
         ],
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.useMultipartUpload' },
-                    true,
-                ],
+                '===': [{ var: 'data.useMultipartUpload' }, true],
             },
         },
     },
@@ -80,10 +74,7 @@ export default [
         tooltip: "See <a href='https://github.com/danialfarid/ng-file-upload#server-side' target='_blank'>https://github.com/danialfarid/ng-file-upload#server-side</a> for how to set up the server.",
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.storage' },
-                    'url',
-                ],
+                '===': [{ var: 'data.storage' }, 'url'],
             },
         },
     },
@@ -100,9 +91,7 @@ export default [
                     {
                         var: 'data.storage',
                     },
-                    [
-                        'indexeddb',
-                    ],
+                    ['indexeddb'],
                 ],
             },
         },
@@ -120,9 +109,7 @@ export default [
                     {
                         var: 'data.storage',
                     },
-                    [
-                        'indexeddb',
-                    ],
+                    ['indexeddb'],
                 ],
             },
         },
@@ -296,10 +283,7 @@ export default [
         weight: 31,
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.storage' },
-                    'url',
-                ],
+                '===': [{ var: 'data.storage' }, 'url'],
             },
         },
     },
@@ -313,10 +297,7 @@ export default [
         weight: 40,
         conditional: {
             json: {
-                '==': [
-                    { var: 'data.image' },
-                    true,
-                ],
+                '==': [{ var: 'data.image' }, true],
             },
         },
     },
@@ -338,10 +319,7 @@ export default [
         weight: 38,
         conditional: {
             json: {
-                '==': [
-                    { var: 'data.webcam' },
-                    true,
-                ],
+                '==': [{ var: 'data.webcam' }, true],
             },
         },
     },

package/lib/mjs/components/form/Form.js

@@ -29,9 +29,7 @@ export default class FormComponent extends Component {
         };
     }
     static savedValueTypes() {
-        return [
-            componentValueTypes.object,
-        ];
+        return [componentValueTypes.object];
     }
     init() {
         super.init();
@@ -215,7 +213,7 @@ export default class FormComponent extends Component {
     }
     render() {
         if (this.builderMode) {
-            return super.render(this.component.label || 'Nested form');
+            return super.render(this.t(this.component.label || 'nestedForm'));
         }
         const subform = this.subForm ? this.subForm.render() : this.renderTemplate('loading');
         return super.render(subform);
@@ -228,13 +226,13 @@ export default class FormComponent extends Component {
      */
     getValueAsString(value, options) {
         if (!value) {
-            return 'No data provided';
+            return this.t('noDataProvided');
         }
         if (!value.data && value._id) {
             return value._id;
         }
         if (!value.data || !Object.keys(value.data).length) {
-            return 'No data provided';
+            return this.t('noDataProvided');
         }
         if (options?.email) {
             let result = `
@@ -696,7 +694,7 @@ export default class FormComponent extends Component {
                 : {};
             this.subForm.setUrl(submissionUrl, { ...this.options, ...options });
             this.subForm.loadSubmission().catch((err) => {
-                console.error(`Unable to load subform submission ${submission._id}:`, err);
+                console.error(this.t('subformSubmissionLoadingError', { submissionId: submission._id }), err);
             });
         }
         else {

package/lib/mjs/components/html/HTML.js

@@ -49,11 +49,7 @@ export default class HTMLComponent extends Component {
         return content;
     }
     get singleTags() {
-        return [
-            'br',
-            'img',
-            'hr',
-        ];
+        return ['br', 'img', 'hr'];
     }
     checkRefreshOn(changed) {
         super.checkRefreshOn(changed);

package/lib/mjs/components/number/Number.js

@@ -47,9 +47,7 @@ export default class NumberComponent extends Input {
     }
     static savedValueTypes(schema) {
         schema = schema || {};
-        return (getComponentSavedTypes(schema) || [
-            componentValueTypes.number,
-        ]);
+        return getComponentSavedTypes(schema) || [componentValueTypes.number];
     }
     constructor(...args) {
         super(...args);
@@ -70,7 +68,7 @@ export default class NumberComponent extends Input {
             if (this.component.thousandsSeparator ||
                 this.options.properties?.thousandsSeparator ||
                 this.options.thousandsSeparator) {
-                console.warn('In order for thousands separator to work properly, you must set the delimiter to true in the component json');
+                console.warn(this.t('noDelimiterSet'));
             }
             this.delimiter = '';
         }