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

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

@@ -24,6 +24,7 @@ class DataGridComponent extends NestedArrayComponent_1.default {
             icon: 'th',
             group: 'data',
             documentation: '/userguide/form-building/data-components#data-grid',
+            showPreview: false,
             weight: 30,
             schema: DataGridComponent.schema()
         };
@@ -513,7 +514,13 @@ class DataGridComponent extends NestedArrayComponent_1.default {
                         (col.checkConditions(data, flags, dataValue[rowIndex]) && col.type !== 'hidden');
                     if (col.component.logic && firstRowCheck) {
                         const compIndex = lodash_1.default.findIndex(this.columns, ['key', key]);
-                        if (!lodash_1.default.isEqual(this.columns[compIndex], col.component)) {
+                        const equalColumns = lodash_1.default.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/cjs/components/datamap/DataMap.js

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

package/lib/cjs/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/cjs/components/datetime/DateTime.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const moment_1 = __importDefault(require("moment"));
-const Input_1 = __importDefault(require("../_classes/input/Input"));
 const utils_1 = __importDefault(require("../../utils"));
+const Input_1 = __importDefault(require("../_classes/input/Input"));
 class DateTimeComponent extends Input_1.default {
     static schema(...extend) {
         return Input_1.default.schema({
@@ -55,6 +55,20 @@ class DateTimeComponent extends Input_1.default {
             schema: DateTimeComponent.schema()
         };
     }
+    static get serverConditionSettings() {
+        return Object.assign(Object.assign({}, super.serverConditionSettings), { operators: [
+                'isDateEqual',
+                'isNotDateEqual',
+                'isEmpty',
+                'isNotEmpty',
+                'dateLessThan',
+                'dateGreaterThan',
+                'dateLessThanOrEqual',
+                'dateGreaterThanOrEqual',
+            ], valueComponent(classComp) {
+                return Object.assign(Object.assign({}, classComp), { type: 'datetime' });
+            } });
+    }
     constructor(component, options, data) {
         super(component, options, data);
         const timezone = (this.component.timezone || this.options.timezone);
@@ -63,9 +77,15 @@ class DateTimeComponent extends Input_1.default {
         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/cjs/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/cjs/components/day/Day.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
+const moment_1 = __importDefault(require("moment"));
 const Field_1 = __importDefault(require("../_classes/field/Field"));
 const utils_1 = require("../../utils/utils");
 class DayComponent extends Field_1.default {
@@ -42,6 +43,27 @@ class DayComponent extends Field_1.default {
             schema: DayComponent.schema()
         };
     }
+    constructor(component, options, data) {
+        if (component.maxDate) {
+            component.maxDate = (0, moment_1.default)(component.maxDate, 'YYYY-MM-DD').toISOString();
+        }
+        if (component.minDate) {
+            component.minDate = (0, moment_1.default)(component.minDate, 'YYYY-MM-DD').toISOString();
+        }
+        super(component, options, data);
+    }
+    static get serverConditionSettings() {
+        return Object.assign(Object.assign({}, super.serverConditionSettings), { operators: [
+                'isDateEqual',
+                'isNotDateEqual',
+                'isEmpty',
+                'isNotEmpty',
+                'dateLessThan',
+                'dateGreaterThan',
+                'dateLessThanOrEqual',
+                'dateGreaterThanOrEqual',
+            ] });
+    }
     /**
      * The empty value for day component.
      *
@@ -464,18 +486,12 @@ class DayComponent extends Field_1.default {
     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/cjs/components/day/fixtures/comp3.js

@@ -11,8 +11,8 @@ exports.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/cjs/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/cjs/components/editgrid/EditGrid.js

@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
-const native_promise_only_1 = __importDefault(require("native-promise-only"));
 const NestedArrayComponent_1 = __importDefault(require("../_classes/nestedarray/NestedArrayComponent"));
 const Component_1 = __importDefault(require("../_classes/component/Component"));
 const Alert_1 = __importDefault(require("../alert/Alert"));
@@ -48,6 +47,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             icon: 'tasks',
             group: 'data',
             documentation: '/userguide/form-building/data-components#edit-grid',
+            showPreview: false,
             weight: 30,
             schema: EditGridComponent.schema(),
         };
@@ -213,7 +213,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
         return !this.inlineEditMode;
     }
     get minLength() {
-        return lodash_1.default.get(this.component, 'validate.minLength', 0);
+        return this.builderMode ? 0 : lodash_1.default.get(this.component, 'validate.minLength', 0);
     }
     get data() {
         return this._data;
@@ -473,7 +473,12 @@ class EditGridComponent extends NestedArrayComponent_1.default {
                 ].forEach(({ className, event, action, }) => {
                     const elements = row.getElementsByClassName(className);
                     Array.prototype.forEach.call(elements, (element) => {
-                        this.addEventListener(element, event, action);
+                        if (this.options.readOnly && lodash_1.default.intersection(element.classList, ['editRow', 'removeRow']).length) {
+                            element.style.display = 'none';
+                        }
+                        else {
+                            this.addEventListener(element, event, action);
+                        }
                     });
                 });
             }
@@ -673,7 +678,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
     showDialog(rowIndex) {
         const editRow = this.editRows[rowIndex];
         if (lodash_1.default.isEqual(editRow.backup, editRow.data)) {
-            return native_promise_only_1.default.resolve();
+            return Promise.resolve();
         }
         const wrapper = this.ce('div', { ref: 'confirmationDialog' });
         const dialogContent = this.component.dialogTemplate || this.defaultDialogTemplate;
@@ -691,7 +696,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             dialog.close();
         };
         let dialogResult;
-        const promise = new native_promise_only_1.default((resolve, reject) => {
+        const promise = new Promise((resolve, reject) => {
             dialogResult = { resolve, reject };
         });
         this.addEventListener(wrapper.refs.dialogYesButton, 'click', (event) => {
@@ -709,7 +714,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
         const editRow = this.editRows[rowIndex];
         const isAlreadyEditing = editRow.state === EditRowState.Editing || editRow.state === EditRowState.New;
         if (!editRow || isAlreadyEditing) {
-            return native_promise_only_1.default.resolve();
+            return Promise.resolve();
         }
         editRow.prevState = editRow.state;
         editRow.state = this.options.readOnly ? EditRowState.Viewing : EditRowState.Editing;

package/lib/cjs/components/editgrid/fixtures/comp-with-custom-default-value.d.ts

@@ -0,0 +1,190 @@
+declare namespace _default {
+    const type: string;
+    const components: ({
+        label: string;
+        conditionalAddButton: string;
+        tableView: boolean;
+        templates: {
+            header: string;
+            row: string;
+        };
+        addAnother: string;
+        saveRow: string;
+        inlineEdit: boolean;
+        customDefaultValue: string;
+        validate: {
+            minLength: number;
+        };
+        rowDrafts: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        components: ({
+            label: string;
+            columns: ({
+                components: {
+                    label: string;
+                    widget: string;
+                    tableView: boolean;
+                    dataSrc: string;
+                    data: {
+                        custom: string;
+                    };
+                    template: string;
+                    validate: {
+                        required: boolean;
+                    };
+                    key: string;
+                    type: string;
+                    input: boolean;
+                    hideOnChildrenHidden: boolean;
+                }[];
+                width: number;
+                offset: number;
+                push: number;
+                pull: number;
+                size: string;
+                currentWidth: number;
+            } | {
+                components: {
+                    label: string;
+                    widget: string;
+                    tableView: boolean;
+                    dataSrc: string;
+                    data: {
+                        custom: string;
+                    };
+                    template: string;
+                    validate: {
+                        required: boolean;
+                    };
+                    key: string;
+                    logic: {
+                        name: string;
+                        trigger: {
+                            type: string;
+                            javascript: string;
+                        };
+                        actions: {
+                            name: string;
+                            type: string;
+                            property: {
+                                label: string;
+                                value: string;
+                                type: string;
+                            };
+                            state: boolean;
+                        }[];
+                    }[];
+                    type: string;
+                    input: boolean;
+                    hideOnChildrenHidden: boolean;
+                }[];
+                width: number;
+                offset: number;
+                push: number;
+                pull: number;
+                size: string;
+                currentWidth: number;
+            })[];
+            key: string;
+            type: string;
+            tableView: boolean;
+            input: boolean;
+            hideOnChildrenHidden: boolean;
+        } | {
+            label: string;
+            columns: ({
+                components: {
+                    label: string;
+                    widget: string;
+                    tableView: boolean;
+                    data: {
+                        values: {
+                            label: string;
+                            value: string;
+                        }[];
+                    };
+                    refreshOn: string;
+                    validate: {
+                        required: boolean;
+                    };
+                    key: string;
+                    logic: {
+                        name: string;
+                        trigger: {
+                            type: string;
+                            javascript: string;
+                        };
+                        actions: {
+                            name: string;
+                            type: string;
+                            property: {
+                                label: string;
+                                value: string;
+                                type: string;
+                            };
+                            state: boolean;
+                        }[];
+                    }[];
+                    type: string;
+                    input: boolean;
+                    hideOnChildrenHidden: boolean;
+                }[];
+                width: number;
+                offset: number;
+                push: number;
+                pull: number;
+                size: string;
+                currentWidth: number;
+            } | {
+                components: {
+                    label: string;
+                    mask: boolean;
+                    spellcheck: boolean;
+                    tableView: boolean;
+                    currency: string;
+                    inputFormat: string;
+                    validate: {
+                        required: boolean;
+                    };
+                    key: string;
+                    type: string;
+                    input: boolean;
+                    delimiter: boolean;
+                    hideOnChildrenHidden: boolean;
+                }[];
+                width: number;
+                offset: number;
+                push: number;
+                pull: number;
+                size: string;
+                currentWidth: number;
+            })[];
+            key: string;
+            type: string;
+            input: boolean;
+            tableView: boolean;
+            hideOnChildrenHidden: boolean;
+        })[];
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        conditionalAddButton?: undefined;
+        templates?: undefined;
+        addAnother?: undefined;
+        saveRow?: undefined;
+        inlineEdit?: undefined;
+        customDefaultValue?: undefined;
+        validate?: undefined;
+        rowDrafts?: undefined;
+        components?: undefined;
+    })[];
+    const display: string;
+}
+export default _default;