Merge branch 'master' of https://github.com/formio/formio.js into added-upload-only

Author: travist

Changelog.md

@@ -45,6 +45,14 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
    - "row" always points to the "data" context object for that instance (typically row in DataGrid)
    - "data" always refers to the global data of the submission.
 
+## [UNRELEASED]
+### Added
+ - Possibility to override i18n settings.
+ - `focus` and `blur` events.
+
+### Fixed
+  - Nested forms validation.
+  
 ## 3.0.0-rc.14
 ### Fixed
  - Bad build from previous release.
@@ -62,13 +70,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
  - Problem with the PDF Builder where you would not see the builder elemements.
  - Fix default value on checkboxes.
  - Fix multiple required file fields not requiring uploading a file.
- 
+
 ### Added
  - Make rowIndex available on editgrids and datagrids.
  - Add custom class name to table component.
  - Add the ability for events to trigger field logic.
  - Add option to trigger validations when button is pressed.
- 
+
 ### Changed
  - Upgrade i18next@11.3.3
 

src/Formio.js

@@ -8,7 +8,7 @@ import 'whatwg-fetch';
 import { EventEmitter2 as EventEmitter } from 'eventemitter2';
 import cookies from 'browser-cookies';
 import copy from 'shallow-copy';
-import providers from './providers';
+import * as providers from './providers';
 import _get from 'lodash/get';
 
 const isBoolean = (val) => typeof val === typeof true;
@@ -462,9 +462,9 @@ export default class Formio {
     const requestArgs = {
       provider: storage,
       method: 'upload',
-      file: file,
-      fileName: fileName,
-      dir: dir
+      file,
+      fileName,
+      dir
     };
     const request = Formio.pluginWait('preRequest', requestArgs)
       .then(() => {

src/Webform.js

@@ -20,7 +20,7 @@ Formio.registerComponent = Components.setComponent;
 function getOptions(options) {
   options = _.defaults(options, {
     submitOnEnter: false,
-    i18next: i18next
+    i18next,
   });
   if (!options.events) {
     options.events = new EventEmitter({
@@ -68,7 +68,10 @@ export default class Webform extends NestedComponent {
       }
       else {
         _.each(options.i18n, (lang, code) => {
-          if (!i18n.resources[code]) {
+          if (code === 'options') {
+            _.merge(i18n, lang);
+          }
+          else if (!i18n.resources[code]) {
             i18n.resources[code] = { translation: lang };
           }
           else {
@@ -779,6 +782,9 @@ export default class Webform extends NestedComponent {
    * @param {string} message - The message to show in the alert.
    */
   setAlert(type, message) {
+    if (!type && this.submitted) {
+      return;
+    }
     if (this.options.noAlerts) {
       if (!message) {
         this.emit('error', false);

src/components/Components.js

@@ -1,5 +1,6 @@
 import UnknownComponent from './unknown/Unknown';
 import _ from 'lodash';
+
 export default class Components {
   static get components() {
     if (!Components._components) {

src/components/base/Base.js

@@ -1886,11 +1886,37 @@ export default class BaseComponent {
     }
     this.inputs.push(input);
     this.hook('input', input, container);
+    this.addFocusBlurEvents(input);
     this.addInputEventListener(input);
     this.addInputSubmitListener(input);
     return input;
   }
 
+  addFocusBlurEvents(element) {
+    this.addEventListener(element, 'focus', () => {
+      if (this.root.focusedComponent !== this) {
+        if (this.root.pendingBlur) {
+          this.root.pendingBlur();
+        }
+
+        this.root.focusedComponent = this;
+
+        this.emit('focus', this);
+      }
+      else if (this.root.focusedComponent === this && this.root.pendingBlur) {
+        this.root.pendingBlur.cancel();
+        this.root.pendingBlur = null;
+      }
+    });
+    this.addEventListener(element, 'blur', () => {
+      this.root.pendingBlur = FormioUtils.delay(() => {
+        this.emit('blur', this);
+        this.root.focusedComponent = null;
+        this.root.pendingBlur = null;
+      });
+    });
+  }
+
   get wysiwygDefault() {
     return {
       theme: 'snow',

src/components/builder.js

@@ -1,74 +1,75 @@
 import Components from '.';
+
 import AddressForm from './address/Address.form';
-import ContentForm from './content/Content.form';
+import ButtonForm from './button/Button.form';
+import CheckboxForm from './checkbox/Checkbox.form';
+import ColumnsForm from './columns/Columns.form';
 import ContainerForm from './container/Container.form';
+import ContentForm from './content/Content.form';
+import CurrencyForm from './currency/Currency.form';
 import DataGridForm from './datagrid/DataGrid.form';
 import DateTimeForm from './datetime/DateTime.form';
 import DayForm from './day/Day.form';
-import HtmlElementForm from './html/HTML.form';
-import HiddenForm from './hidden/Hidden.form';
 import EditGridForm from './editgrid/EditGrid.form';
-import FormForm from './form/Form.form';
-import TextfieldForm from './textfield/TextField.form';
-import PhoneNumberForm from './phonenumber/PhoneNumber.form';
-import LocationForm from './location/Location.form';
 import EmailForm from './email/Email.form';
-import TimeForm from './time/Time.form';
-import CheckboxForm from './checkbox/Checkbox.form';
-import CurrencyForm from './currency/Currency.form';
 import FieldsetForm from './fieldset/Fieldset.form';
-import SignatureForm from './signature/Signature.form';
-import SelectForm from './select/Select.form';
-import ResourceForm from './resource/Resource.form';
-import TextAreaForm from './textarea/TextArea.form';
-import TagsForm from './tags/Tags.form';
-import ButtonForm from './button/Button.form';
+import FileForm from './file/File.form';
+import FormForm from './form/Form.form';
+import HiddenForm from './hidden/Hidden.form';
+import HtmlElementForm from './html/HTML.form';
+import LocationForm from './location/Location.form';
 import NumberForm from './number/Number.form';
-import PasswordForm from './password/Password.form';
 import PanelForm from './panel/Panel.form';
-import TabsForm from './tabs/Tabs.form';
-import ColumnsForm from './columns/Columns.form';
-import TableForm from './table/Table.form';
+import PasswordForm from './password/Password.form';
+import PhoneNumberForm from './phonenumber/PhoneNumber.form';
 import RadioForm from './radio/Radio.form';
+import ResourceForm from './resource/Resource.form';
+import SelectForm from './select/Select.form';
 import SelectboxesForm from './selectboxes/SelectBoxes.form';
+import SignatureForm from './signature/Signature.form';
 import SurveyForm from './survey/Survey.form';
+import TableForm from './table/Table.form';
+import TabsForm from './tabs/Tabs.form';
+import TagsForm from './tags/Tags.form';
+import TextAreaForm from './textarea/TextArea.form';
+import TextFieldForm from './textfield/TextField.form';
+import TimeForm from './time/Time.form';
 import WellForm from './well/Well.form';
-import FileForm from './file/File.form';
 
 Components.address.editForm = AddressForm;
-Components.content.editForm = ContentForm;
+Components.button.editForm = ButtonForm;
+Components.checkbox.editForm = CheckboxForm;
+Components.columns.editForm = ColumnsForm;
 Components.container.editForm = ContainerForm;
+Components.content.editForm = ContentForm;
+Components.currency.editForm = CurrencyForm;
 Components.datagrid.editForm = DataGridForm;
 Components.datetime.editForm = DateTimeForm;
 Components.day.editForm = DayForm;
-Components.htmlelement.editForm = HtmlElementForm;
-Components.hidden.editForm = HiddenForm;
 Components.editgrid.editForm = EditGridForm;
-Components.form.editForm = FormForm;
-Components.textfield.editForm = TextfieldForm;
-Components.phoneNumber.editForm = PhoneNumberForm;
-Components.location.editForm = LocationForm;
 Components.email.editForm = EmailForm;
-Components.time.editForm = TimeForm;
-Components.checkbox.editForm = CheckboxForm;
-Components.currency.editForm = CurrencyForm;
 Components.fieldset.editForm = FieldsetForm;
-Components.signature.editForm = SignatureForm;
-Components.select.editForm = SelectForm;
-Components.resource.editForm = ResourceForm;
-Components.textarea.editForm = TextAreaForm;
-Components.tags.editForm = TagsForm;
-Components.button.editForm = ButtonForm;
+Components.file.editForm = FileForm;
+Components.form.editForm = FormForm;
+Components.hidden.editForm = HiddenForm;
+Components.htmlelement.editForm = HtmlElementForm;
+Components.location.editForm = LocationForm;
 Components.number.editForm = NumberForm;
-Components.password.editForm = PasswordForm;
 Components.panel.editForm = PanelForm;
-Components.tabs.editForm = TabsForm;
-Components.columns.editForm = ColumnsForm;
-Components.table.editForm = TableForm;
+Components.password.editForm = PasswordForm;
+Components.phoneNumber.editForm = PhoneNumberForm;
 Components.radio.editForm = RadioForm;
+Components.resource.editForm = ResourceForm;
+Components.select.editForm = SelectForm;
 Components.selectboxes.editForm = SelectboxesForm;
+Components.signature.editForm = SignatureForm;
 Components.survey.editForm = SurveyForm;
+Components.table.editForm = TableForm;
+Components.tabs.editForm = TabsForm;
+Components.tags.editForm = TagsForm;
+Components.textarea.editForm = TextAreaForm;
+Components.textfield.editForm = TextFieldForm;
+Components.time.editForm = TimeForm;
 Components.well.editForm = WellForm;
-Components.file.editForm = FileForm;
 
 export default Components;

src/components/button/Button.js

@@ -113,7 +113,6 @@ export default class ButtonComponent extends BaseComponent {
     this.createElement();
     this.createInput(this.element);
     this.addShortcut(this.buttonElement);
-    this.hook('input', this.buttonElement, this.element);
     if (this.component.leftIcon) {
       this.buttonElement.appendChild(this.ce('span', {
         class: this.component.leftIcon
@@ -379,7 +378,7 @@ export default class ButtonComponent extends BaseComponent {
   }
 
   focus() {
-    this.button.focus();
+    this.buttonElement.focus();
   }
 }
 

src/components/datetime/DateTime.js

@@ -192,6 +192,7 @@ export default class DateTimeComponent extends BaseComponent {
   getCalendar(input) {
     if (!input.calendar && !this.options.noCalendar) {
       input.calendar = new Flatpickr(input, this.config);
+      this.addFocusBlurEvents(input.calendar.altInput);
     }
     return input.calendar;
   }

src/components/day/Day.js

@@ -165,6 +165,7 @@ export default class DayComponent extends BaseComponent {
       id
     });
     this.hook('input', this.dayInput, dayInputWrapper);
+    this.addFocusBlurEvents(this.dayInput);
     this.addEventListener(this.dayInput, 'change', () => this.updateValue());
     dayInputWrapper.appendChild(this.dayInput);
     this.setSubinputStyle(dayInputWrapper);
@@ -206,6 +207,7 @@ export default class DayComponent extends BaseComponent {
       id
     });
     this.hook('input', this.monthInput, monthInputWrapper);
+    this.addFocusBlurEvents(this.monthInput);
     this.selectOptions(this.monthInput, 'monthOption', this.months);
     const self = this;
 
@@ -262,6 +264,7 @@ export default class DayComponent extends BaseComponent {
     });
 
     this.hook('input', this.yearInput, yearInputWrapper);
+    this.addFocusBlurEvents(this.yearInput);
     this.addEventListener(this.yearInput, 'change', () => this.updateValue());
     yearInputWrapper.appendChild(this.yearInput);
     this.setSubinputStyle(yearInputWrapper);

src/components/file/File.js

@@ -302,6 +302,7 @@ export default class FileComponent extends BaseComponent {
       },
       class: 'browse'
     }, this.text('browse'));
+    this.addFocusBlurEvents(this.browseLink);
 
     return this.browseLink;
   }

src/components/form/Form.js

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import BaseComponent from '../base/Base';
 import Promise from 'native-promise-only';
 import { isMongoId, eachComponent } from '../../utils/utils';
@@ -217,14 +218,16 @@ export default class FormComponent extends BaseComponent {
     // This submission has not been submitted yet.
     if (this.component.submit) {
       return this.loadSubForm().then(() => {
-        return this.subForm.submitForm().then(result => {
-          this.subForm.loading = false;
-          this.dataValue = this.component.reference ? {
-            _id: result.submission._id,
-            form: result.submission.form
-          } : result.submission;
-          return this.dataValue;
-        });
+        return this.subForm.submitForm()
+          .then(result => {
+            this.subForm.loading = false;
+            this.dataValue = this.component.reference ? {
+              _id: result.submission._id,
+              form: result.submission.form
+            } : result.submission;
+            return this.dataValue;
+          })
+          .catch(() => {});
       });
     }
     else {
@@ -243,12 +246,10 @@ export default class FormComponent extends BaseComponent {
 
   setValue(submission, flags) {
     const changed = super.setValue(submission, flags);
-    if (this.subForm) {
-      this.subForm.setValue(submission, flags);
-    }
-    else {
-      this.loadSubForm().then((form) => {
-        if (submission && submission._id && form.formio && !flags.noload) {
+
+    (this.subForm ? Promise.resolve(this.subForm) : this.loadSubForm())
+      .then((form) => {
+        if (submission && submission._id && form.formio && !flags.noload && _.isEmpty(submission.data)) {
           const submissionUrl = `${form.formio.formsUrl}/${submission.form}/submission/${submission._id}`;
           form.setUrl(submissionUrl, this.options);
           form.nosubmit = false;
@@ -258,7 +259,7 @@ export default class FormComponent extends BaseComponent {
           form.setValue(submission, flags);
         }
       });
-    }
+
     return changed;
   }
 
@@ -268,4 +269,8 @@ export default class FormComponent extends BaseComponent {
     }
     return this.dataValue;
   }
+
+  getAllComponents() {
+    return this.subForm.getAllComponents();
+  }
 }

src/components/nested/NestedComponent.js

@@ -42,6 +42,18 @@ export default class NestedComponent extends BaseComponent {
     return this.components;
   }
 
+  getAllComponents() {
+    return this.getComponents().reduce((components, component) => {
+      let result = component;
+
+      if (component.getAllComponents) {
+        result = component.getAllComponents();
+      }
+
+      return components.concat(result);
+    }, []);
+  }
+
   /**
    * Perform a deep iteration over every component, including those
    * within other container based components.
@@ -417,7 +429,7 @@ export default class NestedComponent extends BaseComponent {
 
   get errors() {
     let errors = [];
-    _.each(this.getComponents(), (comp) => {
+    _.each(this.getAllComponents(), (comp) => {
       const compErrors = comp.errors;
       if (compErrors.length) {
         errors = errors.concat(compErrors);