Merge branch 'master' of github.com:formio/formio.js into FIO-4112-final

Changelog.md

@@ -223,6 +223,10 @@ Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/e
  - FIO-7406 Fixed plain Textarea interpolating data in readonly mode [#5396](https://github.com/formio/formio.js/pull/5383)
  - FIO-7112: fixed issues with calendar widget display for value components in new simple conditionals ui
  - FIO-7184 Fixed showing incorrect value for DateTime and Time components with multiple value enabled inside of the DataTable
+ - FIO-7553: Changed tooltip text for the Column Properties setting
+ - FIO-7602: fixed submission data for Radio with 0s values
+ - FIO-4235: fixed confirmation dialog popping up when the data is empty in EditGrid
+ - FIO-7577: add skipInEmail comp property to recaptcha
 
 ### Changed
  - Add capability for adding sanitize profiles through sanitizeConfig in options

src/components/columns/editForm/Columns.edit.display.js

@@ -56,7 +56,7 @@ export default [
     key: 'columns',
     label: 'Column Properties',
     addAnother: 'Add Column',
-    tooltip: 'The width, offset, push, and pull settings for each column.',
+    tooltip: 'The size and width settings for each column. One row is equal to 12. (e.g., a row with two columns spanning the entire page should be 6 and 6)',
     reorder: true,
     components: [
       {

src/components/editgrid/EditGrid.js

@@ -554,7 +554,7 @@ export default class EditGridComponent extends NestedArrayComponent {
         }) => {
           const elements = row.getElementsByClassName(className);
           Array.prototype.forEach.call(elements, (element) => {
-            if (this.options.readOnly && _.intersection(element.classList, ['editRow', 'removeRow']).length) {
+            if (this.options.pdf && _.intersection(element.classList, ['editRow', 'removeRow']).length) {
               element.style.display = 'none';
             }
             else {
@@ -713,6 +713,10 @@ export default class EditGridComponent extends NestedArrayComponent {
     const rowIndex = this.editRows.length;
     const editRow = this.createRow(dataObj, rowIndex);
 
+    if (editRow.state === EditRowState.New) {
+      this.emptyRow = fastCloneDeep(editRow.data);
+    }
+
     if (this.inlineEditMode) {
       this.triggerChange();
     }
@@ -793,7 +797,7 @@ export default class EditGridComponent extends NestedArrayComponent {
 
   showDialog(rowIndex) {
     const editRow = this.editRows[rowIndex];
-    if (_.isEqual(editRow.backup, editRow.data)) {
+    if (editRow.state === EditRowState.New ? _.isEqual(this.emptyRow, editRow.data) : _.isEqual(editRow.backup, editRow.data)) {
       return Promise.resolve();
     }
 

src/components/radio/Radio.js

@@ -405,7 +405,9 @@ export default class RadioComponent extends ListComponent {
       return value;
     }
 
-    if (!isNaN(parseFloat(value)) && isFinite(value)) {
+    const isEquivalent = value.toString() === Number(value).toString();
+
+    if (!isNaN(parseFloat(value)) && isFinite(value) && isEquivalent) {
       value = +value;
     }
     if (value === 'true') {

src/components/radio/Radio.unit.js

@@ -13,7 +13,8 @@ import {
   comp6,
   comp7,
   comp8,
-  comp9
+  comp9,
+  comp10
 } from './fixtures';
 
 describe('Radio Component', () => {
@@ -113,6 +114,23 @@ describe('Radio Component', () => {
     });
   });
 
+  it('Should set correct data for 0s values', (done) => {
+    Harness.testCreate(RadioComponent, comp10).then((component) => {
+      component.setValue('01');
+      component.redraw();
+
+      setTimeout(()=>{
+        assert.equal(component._data.radio, '01');
+        component.setValue(1);
+        component.redraw();
+        setTimeout(()=>{
+          assert.equal(component._data.radio, 1);
+          done();
+        }, 200);
+      }, 200);
+    });
+  });
+
   it('Span should have correct text label', () => {
     return Harness.testCreate(RadioComponent, comp1).then((component) => {
       component.element.querySelectorAll('input').forEach((input) => {

src/components/radio/fixtures/comp10.js

@@ -0,0 +1,21 @@
+export default {
+    'label': 'Radio',
+    'optionsLabelPosition': 'right',
+    'inline': false,
+    'tableView': false,
+    'values': [
+        {
+        'label': '01',
+        'value': '01',
+        'shortcut': ''
+        },
+        {
+        'label': '1',
+        'value': '1',
+        'shortcut': ''
+        }
+    ],
+    'key': 'radio',
+    'type': 'radio',
+    'input': true
+};

src/components/radio/fixtures/index.js

@@ -7,4 +7,5 @@ import comp6 from './comp6';
 import comp7 from './comp7';
 import comp8 from './comp8';
 import comp9 from './comp9';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9 };
+import comp10 from './comp10';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10 };

src/components/recaptcha/ReCaptcha.js

@@ -59,6 +59,10 @@ export default class ReCaptchaComponent extends Component {
     return;
   }
 
+  get skipInEmail() {
+    return true;
+  }
+
   verify(actionName) {
     const siteKey = _get(this.root.form, 'settings.recaptcha.siteKey');
     if (!siteKey) {

src/components/select/Select.js

@@ -3,7 +3,7 @@ import { Formio } from '../../Formio';
 import ListComponent from '../_classes/list/ListComponent';
 import Input from '../_classes/input/Input';
 import Form from '../../Form';
-import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
+import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes, unescapeHTML } from '../../utils/utils';
 import Choices from '../../utils/ChoicesWrapper';
 
 export default class SelectComponent extends ListComponent {
@@ -1219,10 +1219,10 @@ export default class SelectComponent extends ListComponent {
     return added;
   }
 
-  getValueAsString(data) {
+  getValueAsString(data, options) {
     return (this.component.multiple && Array.isArray(data))
-      ? data.map(this.asString.bind(this)).join(', ')
-      : this.asString(data);
+      ? data.map((v) => this.asString(v, options)).join(', ')
+      : this.asString(data, options);
   }
 
   getValue() {
@@ -1634,7 +1634,7 @@ export default class SelectComponent extends ListComponent {
     );
   }
 
-  asString(value) {
+  asString(value, options = {}) {
     value = value ?? this.getValue();
     //need to convert values to strings to be able to compare values with available options that are strings
     const convertToString = (data, valueProperty) => {
@@ -1695,13 +1695,20 @@ export default class SelectComponent extends ListComponent {
       return value;
     }
 
+    const getTemplateValue = (v) => {
+      const itemTemplate = this.itemTemplate(v);
+      return options.csv && itemTemplate
+        ? unescapeHTML(itemTemplate)
+        : itemTemplate;
+    };
+
     if (Array.isArray(value)) {
       const items = [];
-      value.forEach(item => items.push(this.itemTemplate(item)));
+      value.forEach(item => items.push(getTemplateValue(item)));
       if (this.component.dataSrc === 'resource' &&  items.length > 0 ) {
         return items.join(', ');
       }
-      else if ( items.length > 0) {
+      else if (items.length > 0) {
         return items.join('<br />');
       }
       else {
@@ -1714,7 +1721,7 @@ export default class SelectComponent extends ListComponent {
     }
 
     return !_.isNil(value)
-      ? this.itemTemplate(value)
+      ? getTemplateValue(value)
       : '-';
   }
 

src/components/select/Select.unit.js

@@ -60,6 +60,12 @@ describe('Select Component', () => {
     });
   });
 
+  it('Should return plain text when csv option is provided', () => {
+    return Harness.testCreate(SelectComponent, comp1).then((component) => {
+      assert.equal(component.getView('red', { csv:true }), 'Red');
+    });
+  });
+
   it('should correctly determine storage type when dataType is auto', function(done) {
     Harness.testCreate(SelectComponent, comp4).then((component) => {
       const value = component.normalizeSingleValue('true');

src/components/survey/Survey.js

@@ -179,6 +179,17 @@ export default class SurveyComponent extends Field {
         return result;
     }
 
+    if (_.isPlainObject(value)) {
+      const { values = [], questions = [] } = this.component;
+      return _.isEmpty(value)
+        ? ''
+        : _.map(value,(v, q) => {
+          const valueLabel = _.get(_.find(values, val => _.isEqual(val.value, v)), 'label', v);
+          const questionLabel = _.get(_.find(questions, quest => _.isEqual(quest.value, q)), 'label', q);
+          return `${questionLabel}: ${valueLabel}`;
+        }).join('; ');
+    }
+
     return super.getValueAsString(value, options);
   }
 }

test/forms/helpers/testBasicComponentSettings/values.js

@@ -57,7 +57,7 @@ const stringValues = {
   day: '01/05/2005',
   time: '04:15',
   currency: '$30,000.00',
-  survey: '{"question1":"yes","question2":"no"}',
+  survey: 'Question 1: yes; Question 2: no',
   numberColumn: '1111',
   textFieldColumn: 'value',
   numberFieldset: '222222',

test/renders/component-bootstrap-survey-string-value1.html

@@ -1 +1 @@
-{"one":"a","two":"b"}
+one: a; two: b

test/renders/component-bootstrap-survey-string-value2.html

@@ -1 +1 @@
-{"one":"b","two":"a"}
+one: b; two: a

test/updateRenders.js

@@ -14,7 +14,7 @@ const forms = require('./formtest');
 Components.setComponents(AllComponents);
 
 const dir = './test/renders';
-const componentDir = './lib/components';
+const componentDir = './lib/cjs/components';
 if (!fs.existsSync(dir)) {
   fs.mkdirSync(dir);
 }