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

package/lib/mjs/components/radio/Radio.js

@@ -1,8 +1,7 @@
 import _ from 'lodash';
 import ListComponent from '../_classes/list/ListComponent';
-import NativePromise from 'native-promise-only';
 import { Formio } from '../../Formio';
-import { boolValue } from '../../utils/utils';
+import { boolValue, componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
 export default class RadioComponent extends ListComponent {
     static schema(...extend) {
         return ListComponent.schema({
@@ -27,6 +26,39 @@ export default class RadioComponent extends ListComponent {
             schema: RadioComponent.schema()
         };
     }
+    static get conditionOperatorsSettings() {
+        return {
+            ...super.conditionOperatorsSettings,
+            valueComponent(classComp) {
+                return {
+                    type: 'select',
+                    dataSrc: 'custom',
+                    valueProperty: 'value',
+                    dataType: classComp.dataType || '',
+                    data: {
+                        custom() {
+                            return classComp.values;
+                        }
+                    },
+                };
+            }
+        };
+    }
+    static savedValueTypes(schema) {
+        const { boolean, string, number, object, array } = componentValueTypes;
+        const { dataType } = schema;
+        const types = getComponentSavedTypes(schema);
+        if (types) {
+            return types;
+        }
+        if (dataType === 'object') {
+            return [object, array];
+        }
+        if (componentValueTypes[dataType]) {
+            return [componentValueTypes[dataType]];
+        }
+        return [boolean, string, number, object, array];
+    }
     constructor(component, options, data) {
         super(component, options, data);
         this.previousValue = this.dataValue || null;
@@ -58,6 +90,10 @@ export default class RadioComponent extends ListComponent {
     get optionSelectedClass() {
         return 'radio-selected';
     }
+    get listData() {
+        const listData = _.get(this.root, 'submission.metadata.listData', {});
+        return _.get(listData, this.path);
+    }
     init() {
         super.init();
         this.templateData = {};
@@ -73,7 +109,7 @@ export default class RadioComponent extends ListComponent {
             if (typeof this.itemsLoadedResolve === 'function') {
                 this.itemsLoadedResolve();
             }
-            this.itemsLoaded = new NativePromise((resolve) => {
+            this.itemsLoaded = new Promise((resolve) => {
                 this.itemsLoadedResolve = resolve;
             });
             if (args.length) {
@@ -81,11 +117,13 @@ export default class RadioComponent extends ListComponent {
             }
             return triggerUpdate(...updateArgs);
         };
-        this.itemsLoaded = new NativePromise((resolve) => {
+        this.itemsLoaded = new Promise((resolve) => {
             this.itemsLoadedResolve = resolve;
         });
-        this.shouldLoad = true;
+        this.optionsLoaded = false;
         this.loadedOptions = [];
+        // Get the template keys for this radio component.
+        this.getTemplateKeys();
     }
     render() {
         return super.render(this.renderTemplate('radio', {
@@ -185,6 +223,13 @@ export default class RadioComponent extends ListComponent {
         }
     }
     loadItems(url, search, headers, options, method, body) {
+        if (this.optionsLoaded) {
+            return;
+        }
+        if (!this.shouldLoad) {
+            this.loadItemsFromMetadata();
+            return;
+        }
         // Ensure we have a method and remove any body if method is get
         method = method || 'GET';
         if (method.toUpperCase() === 'GET') {
@@ -194,33 +239,55 @@ export default class RadioComponent extends ListComponent {
         options.ignoreCache = this.component.ignoreCache;
         // Make the request.
         options.header = headers;
-        if (this.shouldLoad) {
-            this.loading = true;
-            Formio.makeRequest(this.options.formio, 'select', url, method, body, options)
-                .then((response) => {
-                this.loading = false;
-                this.error = null;
-                this.setItems(response);
-                this.shouldLoad = false;
-                this.redraw();
-            })
-                .catch((err) => {
-                this.handleLoadingError(err);
-            });
-        }
+        this.loading = true;
+        Formio.makeRequest(this.options.formio, 'select', url, method, body, options)
+            .then((response) => {
+            this.loading = false;
+            this.error = null;
+            this.setItems(response);
+            this.optionsLoaded = true;
+            this.redraw();
+        })
+            .catch((err) => {
+            this.handleLoadingError(err);
+        });
+    }
+    loadItemsFromMetadata() {
+        this.listData.forEach((item, i) => {
+            this.loadedOptions[i] = {
+                label: this.itemTemplate(item)
+            };
+            if (_.isEqual(item, this.selectData)) {
+                this.loadedOptions[i].value = this.dataValue;
+            }
+        });
+        this.optionsLoaded = true;
+        this.redraw();
     }
     setItems(items) {
+        const listData = [];
         items?.forEach((item, i) => {
             this.loadedOptions[i] = {
                 value: item[this.component.valueProperty],
                 label: this.itemTemplate(item, item[this.component.valueProperty])
             };
+            listData.push(this.templateData[item[this.component.valueProperty]]);
             if (_.isUndefined(item[this.component.valueProperty]) ||
                 _.isObject(item[this.component.valueProperty]) ||
                 (!this.isRadio && _.isBoolean(item[this.component.valueProperty]))) {
                 this.loadedOptions[i].invalid = true;
             }
         });
+        if (this.isSelectURL) {
+            const submission = this.root.submission;
+            if (!submission.metadata) {
+                submission.metadata = {};
+            }
+            if (!submission.metadata.listData) {
+                submission.metadata.listData = {};
+            }
+            _.set(submission.metadata.listData, this.path, listData);
+        }
     }
     setSelectedClasses() {
         if (this.refs.wrapper) {
@@ -283,6 +350,13 @@ export default class RadioComponent extends ListComponent {
         if (value === 'false') {
             value = false;
         }
+        if (this.isSelectURL && this.templateData && this.templateData[value]) {
+            const submission = this.root.submission;
+            if (!submission.metadata.selectData) {
+                submission.metadata.selectData = {};
+            }
+            _.set(submission.metadata.selectData, this.path, this.templateData[value]);
+        }
         return super.normalizeValue(value);
     }
 }

package/lib/mjs/components/recaptcha/ReCaptcha.d.ts

@@ -7,13 +7,14 @@ export default class ReCaptchaComponent extends Component {
         weight: number;
         schema: any;
     };
+    static savedValueTypes(): never[];
     render(): any;
     recaptchaResult: any;
     createInput(): void;
     recaptchaApiReady: any;
     createLabel(): void;
     verify(actionName: any): void;
-    recaptchaVerifiedPromise: any;
+    recaptchaVerifiedPromise: Promise<void> | undefined;
     isLoading: boolean | undefined;
     sendVerificationRequest(token: any): any;
     checkComponentValidity(data: any, dirty: any, row: any, options?: {}): any;

package/lib/mjs/components/recaptcha/ReCaptcha.js

@@ -3,7 +3,6 @@ import Component from '../_classes/component/Component';
 import { Formio } from '../../Formio';
 import _get from 'lodash/get';
 import _debounce from 'lodash/debounce';
-import NativePromise from 'native-promise-only';
 export default class ReCaptchaComponent extends Component {
     static schema(...extend) {
         return Component.schema({
@@ -22,6 +21,9 @@ export default class ReCaptchaComponent extends Component {
             schema: ReCaptchaComponent.schema()
         };
     }
+    static savedValueTypes() {
+        return [];
+    }
     render() {
         this.recaptchaResult = null;
         if (this.builderMode) {
@@ -61,7 +63,7 @@ export default class ReCaptchaComponent extends Component {
             this.recaptchaApiReady = Formio.requireLibrary('googleRecaptcha', 'grecaptcha', recaptchaApiScriptUrl, true);
         }
         if (this.recaptchaApiReady) {
-            this.recaptchaVerifiedPromise = new NativePromise((resolve, reject) => {
+            this.recaptchaVerifiedPromise = new Promise((resolve, reject) => {
                 this.recaptchaApiReady
                     .then(() => {
                     if (!this.isLoading) {
@@ -117,13 +119,13 @@ export default class ReCaptchaComponent extends Component {
         const componentData = row[this.component.key];
         if (!componentData || !componentData.token) {
             this.setCustomValidity('ReCAPTCHA: Token is not specified in submission');
-            return NativePromise.resolve(false);
+            return Promise.resolve(false);
         }
         if (!componentData.success) {
             this.setCustomValidity('ReCAPTCHA: Token validation error');
-            return NativePromise.resolve(false);
+            return Promise.resolve(false);
         }
-        return this.hook('validateReCaptcha', componentData.token, () => NativePromise.resolve(true))
+        return this.hook('validateReCaptcha', componentData.token, () => Promise.resolve(true))
             .then((success) => success)
             .catch((err) => {
             this.setCustomValidity(err.message || err);

package/lib/mjs/components/resource/Resource.d.ts

@@ -1,3 +1,10 @@
 export default class ResourceComponent extends SelectComponent {
+    static get builderInfo(): {
+        title: string;
+        icon: string;
+        weight: number;
+        documentation: string;
+        schema: any;
+    };
 }
 import SelectComponent from '../select/Select';

package/lib/mjs/components/resource/Resource.js

@@ -14,7 +14,6 @@ export default class ResourceComponent extends SelectComponent {
     static get builderInfo() {
         return {
             title: 'Resource',
-            group: 'premium',
             icon: 'files-o',
             weight: 90,
             documentation: '/userguide/form-building/form-components#resource',

package/lib/mjs/components/resource/editForm/Resource.edit.display.js

@@ -5,7 +5,7 @@ export default [
         type: 'htmlelement',
         tag: 'div',
         className: 'alert alert-danger',
-        content: 'The Resource component is deprecated. Use the Select component with data source of "Resource" instead.',
+        content: 'This component has been deprecated and will be removed in a future version of Formio.js.',
     },
     {
         type: 'select',

package/lib/mjs/components/select/Select.d.ts

@@ -7,11 +7,32 @@ export default class SelectComponent extends ListComponent {
         documentation: string;
         schema: any;
     };
+    static get serverConditionSettings(): {
+        valueComponent(classComp: any): any;
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+    };
+    static get conditionOperatorsSettings(): {
+        valueComponent(classComp: any): any;
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+    };
+    static savedValueTypes(schema: any): any[];
     templateData: {} | undefined;
     triggerUpdate: ((...args: any[]) => any) | undefined;
     set itemsLoaded(arg: any);
     get itemsLoaded(): any;
-    itemsLoadedResolve: any;
+    itemsLoadedResolve: ((value: any) => void) | undefined;
     isFromSearch: boolean | undefined;
     searchServerCount: any;
     defaultServerCount: any;
@@ -19,6 +40,7 @@ export default class SelectComponent extends ListComponent {
     searchDownloadedResources: any;
     defaultDownloadedResources: any;
     activated: boolean | undefined;
+    get dataReady(): any;
     get emptyValue(): {};
     get valueProperty(): any;
     get inputInfo(): {
@@ -35,6 +57,7 @@ export default class SelectComponent extends ListComponent {
     get isSelectResource(): boolean;
     get itemsFromUrl(): boolean;
     get isInfiniteScrollProvided(): boolean;
+    get shouldInitialLoad(): any;
     isEntireObjectDisplay(): boolean;
     selectValueAndLabel(data: any): {
         value: any;
@@ -55,11 +78,7 @@ export default class SelectComponent extends ListComponent {
     set downloadedResources(arg: any);
     get downloadedResources(): any;
     getSingleItemValueForHTMLMode(data: any): any;
-    getTemplateKeys(): void;
-    templateKeys: any[] | undefined;
     get loadingError(): boolean | undefined;
-    get selectData(): any;
-    get shouldLoad(): any;
     loadItems(url: any, search: any, headers: any, options: any, method: any, body: any): void;
     getCustomItems(): any;
     asyncValues: boolean | undefined;
@@ -79,6 +98,7 @@ export default class SelectComponent extends ListComponent {
     render(): any;
     wrapElement(element: any): any;
     choicesOptions(): any;
+    attach(element: any): Promise<void> | undefined;
     focusableElement: any;
     choices: Choices | null | undefined;
     scrollList: any;

package/lib/mjs/components/select/Select.js

@@ -2,8 +2,7 @@ import _ from 'lodash';
 import { Formio } from '../../Formio';
 import ListComponent from '../_classes/list/ListComponent';
 import Form from '../../Form';
-import NativePromise from 'native-promise-only';
-import { getRandomComponentId, boolValue, isPromise } from '../../utils/utils';
+import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
 import Choices from '../../utils/ChoicesWrapper';
 export default class SelectComponent extends ListComponent {
     static schema(...extend) {
@@ -54,6 +53,35 @@ export default class SelectComponent extends ListComponent {
             schema: SelectComponent.schema()
         };
     }
+    static get serverConditionSettings() {
+        return SelectComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
+        return {
+            ...super.conditionOperatorsSettings,
+            valueComponent(classComp) {
+                return { ...classComp, type: 'select' };
+            }
+        };
+    }
+    static savedValueTypes(schema) {
+        const { boolean, string, number, object, array } = componentValueTypes;
+        const { dataType, reference } = schema;
+        const types = getComponentSavedTypes(schema);
+        if (types) {
+            return types;
+        }
+        if (reference) {
+            return [object];
+        }
+        if (dataType === 'object') {
+            return [object, array];
+        }
+        if (componentValueTypes[dataType]) {
+            return [componentValueTypes[dataType]];
+        }
+        return [boolean, string, number, object, array];
+    }
     init() {
         super.init();
         this.templateData = {};
@@ -69,7 +97,7 @@ export default class SelectComponent extends ListComponent {
             if (typeof this.itemsLoadedResolve === 'function') {
                 this.itemsLoadedResolve();
             }
-            this.itemsLoaded = new NativePromise((resolve) => {
+            this.itemsLoaded = new Promise((resolve) => {
                 this.itemsLoadedResolve = resolve;
             });
             if (args.length) {
@@ -89,7 +117,7 @@ export default class SelectComponent extends ListComponent {
         }
         // If this component has been activated.//
         this.activated = false;
-        this.itemsLoaded = new NativePromise((resolve) => {
+        this.itemsLoaded = new Promise((resolve) => {
             this.itemsLoadedResolve = resolve;
         });
         if (this.isHtmlRenderMode()) {
@@ -104,7 +132,7 @@ export default class SelectComponent extends ListComponent {
         if (this.root &&
             this.root.submissionSet &&
             !this.attached) {
-            return NativePromise.resolve();
+            return Promise.resolve();
         }
         return this.itemsLoaded;
     }
@@ -165,6 +193,15 @@ export default class SelectComponent extends ListComponent {
     get shouldDisabled() {
         return super.shouldDisabled || this.parentDisabled;
     }
+    get shouldInitialLoad() {
+        if (this.component.widget === 'html5' &&
+            this.isEntireObjectDisplay() &&
+            this.component.searchField &&
+            this.dataValue) {
+            return false;
+        }
+        return super.shouldLoad;
+    }
     isEntireObjectDisplay() {
         return this.component.dataSrc === 'resource' && this.valueProperty === 'data';
     }
@@ -189,7 +226,7 @@ export default class SelectComponent extends ListComponent {
             const value = (typeof itemLabel === 'string') ? this.t(itemLabel, { _userInput: true }) : itemLabel;
             return this.sanitize(value, this.shouldSanitizeValue);
         }
-        if (this.component.multiple ? this.dataValue.find((val) => value === val) : (this.dataValue === value)) {
+        if (this.component.multiple && _.isArray(this.dataValue) ? this.dataValue.find((val) => value === val) : (this.dataValue === value)) {
             const selectData = this.selectData;
             if (selectData) {
                 const templateValue = this.component.reference && value?._id ? value._id.toString() : value;
@@ -434,48 +471,9 @@ export default class SelectComponent extends ListComponent {
         }
         return defaultValue;
     }
-    getTemplateKeys() {
-        this.templateKeys = [];
-        if (this.options.readOnly && this.component.template) {
-            const keys = this.component.template.match(/({{\s*(.*?)\s*}})/g);
-            if (keys) {
-                keys.forEach((key) => {
-                    const propKey = key.match(/{{\s*item\.(.*?)\s*}}/);
-                    if (propKey && propKey.length > 1) {
-                        this.templateKeys.push(propKey[1]);
-                    }
-                });
-            }
-        }
-    }
     get loadingError() {
         return !this.component.refreshOn && !this.component.refreshOnBlur && this.networkError;
     }
-    get selectData() {
-        const selectData = _.get(this.root, 'submission.metadata.selectData', {});
-        return _.get(selectData, this.path);
-    }
-    get shouldLoad() {
-        if (this.loadingError) {
-            return false;
-        }
-        // Live forms should always load.
-        if (!this.options.readOnly) {
-            return true;
-        }
-        // If there are template keys, then we need to see if we have the data.
-        if (this.templateKeys && this.templateKeys.length) {
-            // See if we already have the data we need.
-            const dataValue = this.dataValue;
-            const selectData = this.selectData;
-            return this.templateKeys.reduce((shouldLoad, key) => {
-                const hasValue = _.has(dataValue, key) || _.has(selectData, key);
-                return shouldLoad || !hasValue;
-            }, false);
-        }
-        // Return that we should load.
-        return true;
-    }
     loadItems(url, search, headers, options, method, body) {
         options = options || {};
         // See if we should load items or not.
@@ -514,7 +512,11 @@ export default class SelectComponent extends ListComponent {
         });
         // Add search capability.
         if (this.component.searchField && search) {
-            const searchValue = Array.isArray(search) ? search.join(',') : search;
+            const searchValue = Array.isArray(search)
+                ? search.join(',')
+                : typeof search === 'object'
+                    ? JSON.stringify(search)
+                    : search;
             query[this.component.searchField] = this.component.searchField.endsWith('__regex')
                 ? _.escapeRegExp(searchValue)
                 : searchValue;
@@ -937,7 +939,7 @@ export default class SelectComponent extends ListComponent {
         const items = this.choices._store.activeItems;
         if (!items.length) {
             this.choices._addItem({
-                value: placeholderValue,
+                value: '',
                 label: placeholderValue,
                 choiceId: 0,
                 groupId: -1,
@@ -1107,7 +1109,7 @@ export default class SelectComponent extends ListComponent {
                 if (this.component.multiple) {
                     templateData = {};
                     const dataValue = this.dataValue;
-                    if (dataValue && dataValue.length) {
+                    if (dataValue && _.isArray(dataValue) && dataValue.length) {
                         dataValue.forEach((dataValueItem) => {
                             const dataValueItemValue = this.component.reference ? dataValueItem._id.toString() : dataValueItem;
                             templateData[dataValueItemValue] = this.templateData[dataValueItemValue];
@@ -1175,7 +1177,7 @@ export default class SelectComponent extends ListComponent {
     }
     setValue(value, flags = {}) {
         const previousValue = this.dataValue;
-        if (this.component.widget === 'html5' && (_.isEqual(value, previousValue) || _.isEqual(previousValue, {}) && _.isEqual(flags, {}))) {
+        if (this.component.widget === 'html5' && (_.isEqual(value, previousValue) || _.isEqual(previousValue, {}) && _.isEqual(flags, {})) && !flags.fromSubmission) {
             return false;
         }
         const changed = this.updateValue(value, flags);
@@ -1227,7 +1229,7 @@ export default class SelectComponent extends ListComponent {
             !this.active &&
             !this.selectOptions.length &&
             hasValue &&
-            this.shouldLoad &&
+            this.shouldInitialLoad &&
             this.visible && (this.component.searchField || this.component.valueProperty);
     }
     setChoicesValue(value, hasPreviousValue, flags = {}) {
@@ -1251,7 +1253,8 @@ export default class SelectComponent extends ListComponent {
         else {
             if (hasValue) {
                 const values = Array.isArray(value) ? value : [value];
-                if (!_.isEqual(this.dataValue, this.defaultValue) && this.selectOptions.length < 2) {
+                if (!_.isEqual(this.dataValue, this.defaultValue) && this.selectOptions.length < 2
+                    || (this.selectData && flags.fromSubmission)) {
                     const { value, label } = this.selectValueAndLabel(this.dataValue);
                     this.addOption(value, label);
                 }
@@ -1279,7 +1282,7 @@ export default class SelectComponent extends ListComponent {
         }
     }
     get itemsLoaded() {
-        return this._itemsLoaded || NativePromise.resolve();
+        return this._itemsLoaded || Promise.resolve();
     }
     set itemsLoaded(promise) {
         this._itemsLoaded = promise;

package/lib/mjs/components/selectboxes/SelectBoxes.d.ts

@@ -1,4 +1,41 @@
 export default class SelectBoxesComponent extends RadioComponent {
+    static get serverConditionSettings(): {
+        valueComponent(classComp: any): {
+            type: string;
+            dataSrc: string;
+            valueProperty: string;
+            valueType: string;
+            data: {
+                custom: string;
+            };
+        };
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+    };
+    static get conditionOperatorsSettings(): {
+        valueComponent(classComp: any): {
+            type: string;
+            dataSrc: string;
+            valueProperty: string;
+            valueType: string;
+            data: {
+                custom: string;
+            };
+        };
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+    };
+    static savedValueTypes(schema: any): string[];
     constructor(...args: any[]);
     validators: string[];
     get emptyValue(): any;