@formio/js 5.0.0-rc.18 → 5.0.0-rc.20

package/lib/mjs/components/_classes/nested/NestedComponent.js

@@ -2,7 +2,6 @@
 import _ from 'lodash';
 import Field from '../field/Field';
 import Components from '../../Components';
-import NativePromise from 'native-promise-only';
 import { getArrayFromComponentPath, getStringFromComponentPath, getRandomComponentId } from '../../../utils/utils';
 export default class NestedComponent extends Field {
     static schema(...extend) {
@@ -46,8 +45,8 @@ export default class NestedComponent extends Field {
         const visibilityChanged = this._visible !== value;
         this._visible = value;
         const isVisible = this.visible;
-        const forceShow = this.options.show && this.options.show[this.component.key];
-        const forceHide = this.options.hide && this.options.hide[this.component.key];
+        const forceShow = this.shouldForceShow();
+        const forceHide = this.shouldForceHide();
         this.components.forEach(component => {
             // Set the parent visibility first since we may have nested components within nested components
             // and they need to be able to determine their visibility based on the parent visibility.
@@ -96,7 +95,7 @@ export default class NestedComponent extends Field {
         return super.parentDisabled;
     }
     get ready() {
-        return NativePromise.all(this.getComponents().map(component => component.ready));
+        return Promise.all(this.getComponents().map(component => component.ready));
     }
     get currentForm() {
         return super.currentForm;
@@ -401,7 +400,7 @@ export default class NestedComponent extends Field {
             collapsed: this.collapsed,
             [this.nestedKey]: 'single',
         });
-        let childPromise = NativePromise.resolve();
+        let childPromise = Promise.resolve();
         if (this.refs[this.nestedKey]) {
             childPromise = this.attachComponents(this.refs[this.nestedKey]);
         }
@@ -419,7 +418,7 @@ export default class NestedComponent extends Field {
                 }
             });
         }
-        return NativePromise.all([
+        return Promise.all([
             superPromise,
             childPromise,
         ]);
@@ -439,7 +438,7 @@ export default class NestedComponent extends Field {
         element = this.hook('attachComponents', element, components, container, this);
         if (!element) {
             // Return a non-resolving promise.
-            return (new NativePromise(() => { }));
+            return (new Promise(() => { }));
         }
         let index = 0;
         const promises = [];
@@ -449,7 +448,7 @@ export default class NestedComponent extends Field {
                 index++;
             }
         });
-        return NativePromise.all(promises);
+        return Promise.all(promises);
     }
     /**
      * Remove a component from the components array.
@@ -560,7 +559,7 @@ export default class NestedComponent extends Field {
      * @return {*}
      */
     beforePage(next) {
-        return NativePromise.all(this.getComponents().map((comp) => comp.beforePage(next)));
+        return Promise.all(this.getComponents().map((comp) => comp.beforePage(next)));
     }
     /**
      * Allow components to hook into the submission to provide their own async data.
@@ -568,7 +567,7 @@ export default class NestedComponent extends Field {
      * @return {*}
      */
     beforeSubmit() {
-        return NativePromise.all(this.getComponents().map((comp) => comp.beforeSubmit()));
+        return Promise.all(this.getComponents().map((comp) => comp.beforeSubmit()));
     }
     calculateValue(data, flags, row) {
         // Do not iterate into children and calculateValues if this nested component is conditionally hidden.
@@ -599,7 +598,7 @@ export default class NestedComponent extends Field {
         return this.ready.then(() => {
             const promises = [super.checkAsyncValidity(data, dirty, row, silentCheck)];
             this.eachComponent((component) => promises.push(component.checkAsyncValidity(data, dirty, row, silentCheck)));
-            return NativePromise.all(promises).then((results) => results.reduce((valid, result) => (valid && result), true));
+            return Promise.all(promises).then((results) => results.reduce((valid, result) => (valid && result), true));
         });
     }
     setPristine(pristine) {
@@ -648,7 +647,7 @@ export default class NestedComponent extends Field {
         this.setPristine(true);
     }
     get dataReady() {
-        return NativePromise.all(this.getComponents().map((component) => component.dataReady));
+        return Promise.all(this.getComponents().map((component) => component.dataReady));
     }
     setNestedValue(component, value, flags = {}) {
         component._data = this.componentContext(component);

package/lib/mjs/components/address/Address.d.ts

@@ -3,6 +3,14 @@ export namespace AddressComponentMode {
     const Manual: string;
 }
 export default class AddressComponent extends ContainerComponent {
+    static get builderInfo(): {
+        title: string;
+        group: string;
+        icon: string;
+        documentation: string;
+        weight: number;
+        schema: any;
+    };
     static get modeSwitcherRef(): string;
     static get removeValueIconRef(): string;
     static get searchInputRef(): string;

package/lib/mjs/components/button/Button.js

@@ -1,5 +1,4 @@
 import _ from 'lodash';
-import NativePromise from 'native-promise-only';
 import Field from '../_classes/field/Field';
 import Input from '../_classes/input/Input';
 import { eachComponent, getArrayFromComponentPath } from '../../utils/utils';
@@ -354,7 +353,7 @@ export default class ButtonComponent extends Field {
         let params = {
             response_type: 'code',
             client_id: settings.clientId,
-            redirect_uri: settings.redirectURI || window.location.origin || `${window.location.protocol}//${window.location.host}`,
+            redirect_uri: (settings.redirectURI && this.interpolate(settings.redirectURI)) || window.location.origin || `${window.location.protocol}//${window.location.host}`,
             state: settings.state,
             scope: settings.scope
         };
@@ -393,7 +392,7 @@ export default class ButtonComponent extends Field {
                         return;
                     }
                     // Depending on where the settings came from, submit to either the submission endpoint (old) or oauth endpoint (new).
-                    let requestPromise = NativePromise.resolve();
+                    let requestPromise = Promise.resolve();
                     if (_.has(this, 'root.form.config.oauth') && this.root.form.config.oauth[this.component.oauthProvider]) {
                         params.provider = settings.provider;
                         params.redirectURI = originalRedirectUri;

package/lib/mjs/components/checkbox/Checkbox.d.ts

@@ -7,6 +7,19 @@ export default class CheckBoxComponent extends Field {
         weight: number;
         schema: any;
     };
+    static get serverConditionSettings(): {
+        operators: string[];
+        valueComponent(): {
+            valueType: string;
+            data: {
+                values: {
+                    label: string;
+                    value: string;
+                }[];
+            };
+            type: string;
+        };
+    };
     get labelClass(): string;
     get inputInfo(): {
         type: string;

package/lib/mjs/components/checkbox/Checkbox.js

@@ -23,14 +23,27 @@ export default class CheckBoxComponent extends Field {
             schema: CheckBoxComponent.schema()
         };
     }
+    static get serverConditionSettings() {
+        return {
+            ...super.serverConditionSettings,
+            operators: ['isEqual'],
+            valueComponent() {
+                return {
+                    valueType: 'boolean',
+                    data: {
+                        values: [
+                            { label: 'Checked', value: 'true' },
+                            { label: 'Not Checked', value: 'false' },
+                        ]
+                    },
+                    type: 'select',
+                };
+            },
+        };
+    }
     get defaultSchema() {
         return CheckBoxComponent.schema();
     }
-    get defaultValue() {
-        const { name } = this.component;
-        const defaultValue = super.defaultValue;
-        return name ? (this.component[name] || this.emptyValue) : (defaultValue || this.component.defaultValue || false).toString() === 'true';
-    }
     get labelClass() {
         let className = '';
         if (this.isInputComponent
@@ -163,6 +176,9 @@ export default class CheckBoxComponent extends Field {
     getValueAsString(value) {
         const { name: componentName, value: componentValue } = this.component;
         const hasValue = componentName ? _.isEqual(value, componentValue) : value;
+        if (_.isUndefined(value) && this.inDataTable) {
+            return '';
+        }
         return this.t(hasValue ? 'Yes' : 'No');
     }
     updateValue(value, flags) {

package/lib/mjs/components/columns/Columns.d.ts

@@ -4,6 +4,7 @@ export default class ColumnsComponent extends NestedComponent {
         icon: string;
         group: string;
         documentation: string;
+        showPreview: boolean;
         weight: number;
         schema: any;
     };

package/lib/mjs/components/columns/Columns.js

@@ -23,6 +23,7 @@ export default class ColumnsComponent extends NestedComponent {
             icon: 'columns',
             group: 'layout',
             documentation: '/userguide/form-building/layout-components#columns',
+            showPreview: false,
             weight: 10,
             schema: ColumnsComponent.schema()
         };

package/lib/mjs/components/container/Container.d.ts

@@ -4,6 +4,7 @@ export default class ContainerComponent extends NestedDataComponent {
         icon: string;
         group: string;
         documentation: string;
+        showPreview: boolean;
         weight: number;
         schema: any;
     };

package/lib/mjs/components/container/Container.js

@@ -22,6 +22,7 @@ export default class ContainerComponent extends NestedDataComponent {
             icon: 'folder-open',
             group: 'data',
             documentation: '/userguide/form-building/data-components#container',
+            showPreview: false,
             weight: 10,
             schema: ContainerComponent.schema()
         };

package/lib/mjs/components/content/Content.d.ts

@@ -10,6 +10,7 @@ export default class ContentComponent extends Component {
     };
     get content(): any;
     render(): any;
+    get dataReady(): any;
     get emptyValue(): string;
 }
 import Component from '../_classes/component/Component';

package/lib/mjs/components/content/Content.js

@@ -1,6 +1,5 @@
 import Component from '../_classes/component/Component';
 import _ from 'lodash';
-import NativePromise from 'native-promise-only';
 export default class ContentComponent extends Component {
     static schema(...extend) {
         return Component.schema({
@@ -45,7 +44,7 @@ export default class ContentComponent extends Component {
         }));
     }
     get dataReady() {
-        return this.root?.submissionReady || NativePromise.resolve();
+        return this.root?.submissionReady || Promise.resolve();
     }
     attach(element) {
         this.loadRefs(element, { html: 'single' });

package/lib/mjs/components/currency/editForm/Currency.edit.data.d.ts

@@ -1,4 +1,15 @@
-declare const _default: {
+declare const _default: ({
+    key: string;
+    ignore: boolean;
+    type?: undefined;
+    input?: undefined;
+    weight?: undefined;
+    label?: undefined;
+    tooltip?: undefined;
+    defaultValue?: undefined;
+    dataSrc?: undefined;
+    data?: undefined;
+} | {
     type: string;
     input: boolean;
     weight: number;
@@ -13,5 +24,6 @@ declare const _default: {
             value: string;
         }[];
     };
-}[];
+    ignore?: undefined;
+})[];
 export default _default;

package/lib/mjs/components/currency/editForm/Currency.edit.data.js

@@ -1,4 +1,8 @@
 export default [
+    {
+        key: 'case',
+        ignore: true
+    },
     {
         type: 'select',
         input: true,

package/lib/mjs/components/currency/editForm/Currency.edit.display.js

@@ -15,6 +15,10 @@ export default [
         key: 'showCharCount',
         ignore: true
     },
+    {
+        key: 'spellcheck',
+        ignore: true
+    },
     {
         type: 'textfield',
         input: true,

package/lib/mjs/components/datagrid/DataGrid.d.ts

@@ -4,6 +4,7 @@ export default class DataGridComponent extends NestedArrayComponent {
         icon: string;
         group: string;
         documentation: string;
+        showPreview: boolean;
         weight: number;
         schema: any;
     };

package/lib/mjs/components/datagrid/DataGrid.js

@@ -19,6 +19,7 @@ export default class DataGridComponent extends NestedArrayComponent {
             icon: 'th',
             group: 'data',
             documentation: '/userguide/form-building/data-components#data-grid',
+            showPreview: false,
             weight: 30,
             schema: DataGridComponent.schema()
         };
@@ -510,7 +511,13 @@ export default class DataGridComponent extends NestedArrayComponent {
                         (col.checkConditions(data, flags, dataValue[rowIndex]) && col.type !== 'hidden');
                     if (col.component.logic && firstRowCheck) {
                         const compIndex = _.findIndex(this.columns, ['key', key]);
-                        if (!_.isEqual(this.columns[compIndex], col.component)) {
+                        const equalColumns = _.isEqualWith(this.columns[compIndex], col.component, (col1, col2, key) => {
+                            // Don't compare columns by their auto-generated ids.
+                            if (key === 'id') {
+                                return true;
+                            }
+                        });
+                        if (!equalColumns) {
                             logicRebuild = true;
                             this.columns[compIndex] = col.component;
                         }

package/lib/mjs/components/datamap/DataMap.js

@@ -32,6 +32,7 @@ export default class DataMapComponent extends DataGridComponent {
             icon: 'th-list',
             group: 'data',
             documentation: '/userguide/form-building/data-components#data-map',
+            showPreview: false,
             weight: 20,
             schema: DataMapComponent.schema()
         };

package/lib/mjs/components/datetime/DateTime.d.ts

@@ -7,6 +7,10 @@ export default class DateTimeComponent extends Input {
         weight: number;
         schema: any;
     };
+    static get serverConditionSettings(): {
+        operators: string[];
+        valueComponent(classComp: any): any;
+    };
     get emptyValue(): string;
     get momentFormat(): string;
     createWrapper(): boolean;

package/lib/mjs/components/datetime/DateTime.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import moment from 'moment';
-import Input from '../_classes/input/Input';
 import FormioUtils from '../../utils';
+import Input from '../_classes/input/Input';
 export default class DateTimeComponent extends Input {
     static schema(...extend) {
         return Input.schema({
@@ -50,6 +50,27 @@ export default class DateTimeComponent extends Input {
             schema: DateTimeComponent.schema()
         };
     }
+    static get serverConditionSettings() {
+        return {
+            ...super.serverConditionSettings,
+            operators: [
+                'isDateEqual',
+                'isNotDateEqual',
+                'isEmpty',
+                'isNotEmpty',
+                'dateLessThan',
+                'dateGreaterThan',
+                'dateLessThanOrEqual',
+                'dateGreaterThanOrEqual',
+            ],
+            valueComponent(classComp) {
+                return {
+                    ...classComp,
+                    type: 'datetime',
+                };
+            },
+        };
+    }
     constructor(component, options, data) {
         super(component, options, data);
         const timezone = (this.component.timezone || this.options.timezone);
@@ -58,9 +79,15 @@ export default class DateTimeComponent extends Input {
         if (!this.component.enableDate) {
             this.component.format = this.component.format.replace(/yyyy-MM-dd /g, '');
         }
+        else if (this.component.enableDate && !/[yMd]/.test(this.component.format) && this.builderMode) {
+            this.component.format = `yyyy-MM-dd ${this.component.format}`;
+        }
         if (!this.component.enableTime) {
             this.component.format = this.component.format.replace(/ hh:mm a$/g, '');
         }
+        else if (this.component.enableTime && !/[mhH]/.test(this.component.format) && this.builderMode) {
+            this.component.format = `${this.component.format} hh:mm a`;
+        }
         else if (time24hr) {
             this.component.format = this.component.format.replace(/hh:mm a$/g, 'HH:mm');
         }

package/lib/mjs/components/day/Day.d.ts

@@ -7,6 +7,7 @@ export default class DayComponent extends Field {
         weight: number;
         schema: any;
     };
+    constructor(component: any, options: any, data: any);
     /**
      * The empty value for day component.
      *
@@ -122,7 +123,6 @@ export default class DayComponent extends Field {
      * @returns {Date}
      */
     get date(): Date;
-    normalizeMinMaxDates(): any[];
     /**
      * Return the raw value.
      *

package/lib/mjs/components/day/Day.js

@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import moment from 'moment';
 import Field from '../_classes/field/Field';
 import { boolValue, getLocaleDateFormatInfo } from '../../utils/utils';
 export default class DayComponent extends Field {
@@ -37,6 +38,30 @@ export default class DayComponent extends Field {
             schema: DayComponent.schema()
         };
     }
+    constructor(component, options, data) {
+        if (component.maxDate) {
+            component.maxDate = moment(component.maxDate, 'YYYY-MM-DD').toISOString();
+        }
+        if (component.minDate) {
+            component.minDate = moment(component.minDate, 'YYYY-MM-DD').toISOString();
+        }
+        super(component, options, data);
+    }
+    static get serverConditionSettings() {
+        return {
+            ...super.serverConditionSettings,
+            operators: [
+                'isDateEqual',
+                'isNotDateEqual',
+                'isEmpty',
+                'isNotEmpty',
+                'dateLessThan',
+                'dateGreaterThan',
+                'dateLessThanOrEqual',
+                'dateGreaterThanOrEqual',
+            ],
+        };
+    }
     /**
      * The empty value for day component.
      *
@@ -459,18 +484,12 @@ export default class DayComponent extends Field {
     get date() {
         return this.getDate();
     }
-    normalizeMinMaxDates() {
-        return [this.component.minDate, this.component.maxDate]
-            .map(date => date ? date.split('-').reverse().join('/') : date);
-    }
     /**
      * Return the raw value.
      *
      * @returns {Date}
      */
     get validationValue() {
-        [this.component.minDate, this.component.maxDate] = this.dayFirst ? this.normalizeMinMaxDates()
-            : [this.component.minDate, this.component.maxDate];
         return this.dataValue;
     }
     getValue() {

package/lib/mjs/components/day/fixtures/comp3.js

@@ -9,8 +9,8 @@ export default {
     'validate': {
         'custom': ''
     },
-    'minDate': '2020-02-04',
-    'maxDate': '2020-02-09',
+    'minDate': '2020-03-01',
+    'maxDate': '2021-01-03',
     'clearOnHide': true,
     'persistent': true,
     'protected': false,

package/lib/mjs/components/editgrid/EditGrid.d.ts

@@ -4,6 +4,7 @@ export default class EditGridComponent extends NestedArrayComponent {
         icon: string;
         group: string;
         documentation: string;
+        showPreview: boolean;
         weight: number;
         schema: any;
     };
@@ -68,10 +69,10 @@ export default class EditGridComponent extends NestedArrayComponent {
         error: null;
         rowIndex: any;
     } | undefined;
-    addRowModal(rowIndex: any): any;
+    addRowModal(rowIndex: any): Promise<any>;
     alert: Alert | null | undefined;
-    showDialog(rowIndex: any): any;
-    editRow(rowIndex: any): any;
+    showDialog(rowIndex: any): Promise<any>;
+    editRow(rowIndex: any): Promise<any>;
     clearErrors(rowIndex: any): void;
     cancelRow(rowIndex: any): void;
     saveRow(rowIndex: any, modified: any): boolean | undefined;

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

@@ -1,5 +1,4 @@
 import _ from 'lodash';
-import NativePromise from 'native-promise-only';
 import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';
 import Component from '../_classes/component/Component';
 import Alert from '../alert/Alert';
@@ -43,6 +42,7 @@ export default class EditGridComponent extends NestedArrayComponent {
             icon: 'tasks',
             group: 'data',
             documentation: '/userguide/form-building/data-components#edit-grid',
+            showPreview: false,
             weight: 30,
             schema: EditGridComponent.schema(),
         };
@@ -208,7 +208,7 @@ export default class EditGridComponent extends NestedArrayComponent {
         return !this.inlineEditMode;
     }
     get minLength() {
-        return _.get(this.component, 'validate.minLength', 0);
+        return this.builderMode ? 0 : _.get(this.component, 'validate.minLength', 0);
     }
     get data() {
         return this._data;
@@ -467,7 +467,12 @@ export default class EditGridComponent extends NestedArrayComponent {
                 ].forEach(({ className, event, action, }) => {
                     const elements = row.getElementsByClassName(className);
                     Array.prototype.forEach.call(elements, (element) => {
-                        this.addEventListener(element, event, action);
+                        if (this.options.readOnly && _.intersection(element.classList, ['editRow', 'removeRow']).length) {
+                            element.style.display = 'none';
+                        }
+                        else {
+                            this.addEventListener(element, event, action);
+                        }
                     });
                 });
             }
@@ -664,7 +669,7 @@ export default class EditGridComponent extends NestedArrayComponent {
     showDialog(rowIndex) {
         const editRow = this.editRows[rowIndex];
         if (_.isEqual(editRow.backup, editRow.data)) {
-            return NativePromise.resolve();
+            return Promise.resolve();
         }
         const wrapper = this.ce('div', { ref: 'confirmationDialog' });
         const dialogContent = this.component.dialogTemplate || this.defaultDialogTemplate;
@@ -682,7 +687,7 @@ export default class EditGridComponent extends NestedArrayComponent {
             dialog.close();
         };
         let dialogResult;
-        const promise = new NativePromise((resolve, reject) => {
+        const promise = new Promise((resolve, reject) => {
             dialogResult = { resolve, reject };
         });
         this.addEventListener(wrapper.refs.dialogYesButton, 'click', (event) => {
@@ -700,7 +705,7 @@ export default class EditGridComponent extends NestedArrayComponent {
         const editRow = this.editRows[rowIndex];
         const isAlreadyEditing = editRow.state === EditRowState.Editing || editRow.state === EditRowState.New;
         if (!editRow || isAlreadyEditing) {
-            return NativePromise.resolve();
+            return Promise.resolve();
         }
         editRow.prevState = editRow.state;
         editRow.state = this.options.readOnly ? EditRowState.Viewing : EditRowState.Editing;