@formio/js 5.0.0-rc.27 → 5.0.0-rc.27-dev.5543.40bb827

package/lib/cjs/components/button/Button.form.js

@@ -1,24 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const Components_1 = __importDefault(require("../Components"));
-const Button_edit_display_1 = __importDefault(require("./editForm/Button.edit.display"));
-function default_1(...extend) {
-    return Components_1.default.baseEditForm([
-        {
-            key: 'display',
-            components: Button_edit_display_1.default
-        },
-        {
-            key: 'data',
-            ignore: true,
-        },
-        {
-            key: 'validation',
-            ignore: true,
-        },
-    ], ...extend);
-}
-exports.default = default_1;

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

@@ -1,467 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const lodash_1 = __importDefault(require("lodash"));
-const Field_1 = __importDefault(require("../_classes/field/Field"));
-const Input_1 = __importDefault(require("../_classes/input/Input"));
-const utils_1 = require("../../utils/utils");
-class ButtonComponent extends Field_1.default {
-    static schema(...extend) {
-        return Input_1.default.schema({
-            type: 'button',
-            label: 'Submit',
-            key: 'submit',
-            size: 'md',
-            leftIcon: '',
-            rightIcon: '',
-            block: false,
-            action: 'submit',
-            persistent: false,
-            disableOnInvalid: false,
-            theme: 'primary',
-            dataGridLabel: true
-        }, ...extend);
-    }
-    static get builderInfo() {
-        return {
-            title: 'Button',
-            group: 'basic',
-            icon: 'stop',
-            documentation: '/userguide/form-building/form-components#button',
-            weight: 110,
-            schema: ButtonComponent.schema()
-        };
-    }
-    static savedValueTypes(schema) {
-        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.boolean];
-    }
-    constructor(component, options, data) {
-        super(component, options, data);
-        this.filesUploading = [];
-    }
-    get defaultSchema() {
-        return ButtonComponent.schema();
-    }
-    get inputInfo() {
-        const info = super.elementInfo();
-        info.type = 'button';
-        info.attr.type = (['submit', 'saveState'].includes(this.component.action)) ? 'submit' : 'button';
-        this.component.theme = this.component.theme || 'default';
-        info.attr.class = `btn btn-${this.component.theme}`;
-        if (this.component.size) {
-            info.attr.class += ` btn-${this.component.size}`;
-        }
-        if (this.component.block) {
-            info.attr.class += ' btn-block';
-        }
-        if (this.component.customClass) {
-            info.attr.class += ` ${this.component.customClass}`;
-        }
-        info.content = this.t(this.component.label, { _userInput: true });
-        return info;
-    }
-    get labelInfo() {
-        return {
-            hidden: true
-        };
-    }
-    set loading(loading) {
-        this.setLoading(this.refs.button, loading);
-    }
-    get skipInEmail() {
-        return true;
-    }
-    // No label needed for buttons.
-    createLabel() { }
-    createInput(container) {
-        this.refs.button = super.createInput(container);
-        return this.refs.button;
-    }
-    get emptyValue() {
-        return false;
-    }
-    getValue() {
-        return this.dataValue;
-    }
-    get clicked() {
-        return this.dataValue;
-    }
-    get defaultValue() {
-        return false;
-    }
-    get className() {
-        let className = super.className;
-        className += ` ${this.transform('class', 'form-group')}`;
-        return className;
-    }
-    get oauthConfig() {
-        if (lodash_1.default.has(this, 'root.form.config.oauth') && this.component.oauthProvider) {
-            return this.root.form.config.oauth[this.component.oauthProvider];
-        }
-        // Legacy oauth location.
-        if (this.component.oauth) {
-            return this.component.oauth;
-        }
-        return false;
-    }
-    render() {
-        if (this.viewOnly || this.options.hideButtons) {
-            this._visible = false;
-        }
-        return super.render(this.renderTemplate('button', {
-            component: this.component,
-            input: this.inputInfo,
-        }));
-    }
-    attachButton() {
-        this.addShortcut(this.refs.button);
-        let onChange = null;
-        let onError = null;
-        if (this.component.action === 'submit') {
-            this.on('submitButton', () => {
-                this.disabled = true;
-            }, true);
-            this.on('cancelSubmit', () => {
-                this.disabled = false;
-            }, true);
-            this.on('submitDone', (message) => {
-                const resultMessage = lodash_1.default.isString(message) ? message : this.t('complete');
-                this.loading = false;
-                this.disabled = false;
-                this.addClass(this.refs.button, 'btn-success submit-success');
-                this.removeClass(this.refs.button, 'btn-danger submit-fail');
-                this.addClass(this.refs.buttonMessageContainer, 'has-success');
-                this.removeClass(this.refs.buttonMessageContainer, 'has-error');
-                this.setContent(this.refs.buttonMessage, resultMessage);
-            }, true);
-            this.on('submitError', (message) => {
-                const resultMessage = lodash_1.default.isString(message) ? this.t(message) : this.t(this.errorMessage('submitError'));
-                this.loading = false;
-                this.disabled = false;
-                this.hasError = true;
-                this.removeClass(this.refs.button, 'btn-success submit-success');
-                this.addClass(this.refs.button, 'btn-danger submit-fail');
-                this.removeClass(this.refs.buttonMessageContainer, 'has-success');
-                this.addClass(this.refs.buttonMessageContainer, 'has-error');
-                this.setContent(this.refs.buttonMessage, resultMessage);
-            }, true);
-            this.on('fileUploadingStart', (filePromise) => {
-                this.filesUploading.push(filePromise);
-                this.disabled = true;
-                this.setDisabled(this.refs.button, this.disabled);
-            }, true);
-            this.on('fileUploadingEnd', (filePromise) => {
-                const index = this.filesUploading.indexOf(filePromise);
-                if (index !== -1) {
-                    this.filesUploading.splice(index, 1);
-                }
-                this.disabled = this.shouldDisabled ? true : false;
-                this.setDisabled(this.refs.button, this.disabled);
-            }, true);
-            onChange = (value, isValid) => {
-                this.removeClass(this.refs.button, 'btn-success submit-success');
-                if (isValid) {
-                    this.removeClass(this.refs.button, 'btn-danger submit-fail');
-                    if (this.hasError) {
-                        this.hasError = false;
-                        this.setContent(this.refs.buttonMessage, '');
-                        this.removeClass(this.refs.buttonMessageContainer, 'has-success');
-                        this.removeClass(this.refs.buttonMessageContainer, 'has-error');
-                    }
-                }
-            };
-            onError = () => {
-                this.hasError = true;
-                this.removeClass(this.refs.button, 'btn-success submit-success');
-                this.addClass(this.refs.button, 'btn-danger submit-fail');
-                this.removeClass(this.refs.buttonMessageContainer, 'has-success');
-                this.addClass(this.refs.buttonMessageContainer, 'has-error');
-                this.setContent(this.refs.buttonMessage, this.t(this.errorMessage('submitError')));
-            };
-        }
-        if (this.component.action === 'url') {
-            this.on('requestButton', () => {
-                this.disabled = true;
-            }, true);
-            this.on('requestDone', () => {
-                this.loading = false;
-                this.disabled = false;
-            }, true);
-        }
-        this.on('change', (value, flags) => {
-            let isValid = value.isValid;
-            const isSilent = flags && flags.silent;
-            //check root validity only if disableOnInvalid is set and when it is not possible to make submission because of validation errors
-            if (flags && flags.noValidate && (this.component.disableOnInvalid || this.hasError)) {
-                isValid = flags.rootValidity || (this.root ? this.root.checkValidity(this.root.data, null, null, true) : true);
-                flags.rootValidity = isValid;
-            }
-            this.isDisabledOnInvalid = this.component.disableOnInvalid && (isSilent || !isValid);
-            this.disabled = this.shouldDisabled;
-            this.setDisabled(this.refs.button, this.disabled);
-            if (onChange) {
-                onChange(value, isValid);
-            }
-        }, true);
-        this.on('error', () => {
-            this.loading = false;
-            this.disabled = false;
-            if (onError) {
-                onError();
-            }
-        }, true);
-        if (this.component.saveOnEnter) {
-            this.root.addEventListener(this.root.element, 'keyup', (event) => {
-                if (event.keyCode === 13) {
-                    this.onClick.call(this, event);
-                }
-            });
-        }
-        this.addEventListener(this.refs.button, 'click', this.onClick.bind(this));
-        this.addEventListener(this.refs.buttonMessageContainer, 'click', () => {
-            if (this.refs.buttonMessageContainer.classList.contains('has-error')) {
-                if (this.root && this.root.alert) {
-                    this.scrollIntoView(this.root.alert);
-                }
-            }
-        });
-        this.disabled = this.shouldDisabled;
-        this.setDisabled(this.refs.button, this.disabled);
-        function getUrlParameter(name) {
-            name = name.replace(/[[]/, '\\[').replace(/[\]]/, '\\]');
-            const regex = new RegExp(`[\\?&]${name}=([^&#]*)`);
-            const results = regex.exec(location.search);
-            if (!results) {
-                return results;
-            }
-            return decodeURIComponent(results[1].replace(/\+/g, ' '));
-        }
-        // If this is an OpenID Provider initiated login, perform the click event immediately
-        if ((this.component.action === 'oauth') && this.oauthConfig && !this.oauthConfig.error) {
-            const iss = getUrlParameter('iss');
-            if (iss && (this.oauthConfig.authURI.indexOf(iss) === 0)) {
-                this.openOauth(this.oauthConfig);
-            }
-        }
-    }
-    get shouldDisabled() {
-        var _a;
-        return super.shouldDisabled || !!((_a = this.filesUploading) === null || _a === void 0 ? void 0 : _a.length) || this.isDisabledOnInvalid;
-    }
-    attach(element) {
-        this.loadRefs(element, {
-            button: 'single',
-            buttonMessageContainer: 'single',
-            buttonMessage: 'single'
-        });
-        const superAttach = super.attach(element);
-        this.attachButton();
-        return superAttach;
-    }
-    /* eslint-enable max-statements */
-    detach(element) {
-        if (element && this.refs.button) {
-            this.removeShortcut(this.refs.button);
-        }
-        super.detach();
-    }
-    onClick(event) {
-        this.triggerReCaptcha();
-        // Don't click if disabled or in builder mode.
-        if (this.disabled || this.options.attachMode === 'builder') {
-            return;
-        }
-        this.dataValue = true;
-        if (this.component.action !== 'submit' && this.component.showValidations) {
-            this.emit('checkValidity', this.data);
-        }
-        switch (this.component.action) {
-            case 'saveState':
-            case 'submit':
-                event.preventDefault();
-                event.stopPropagation();
-                this.loading = true;
-                this.emit('submitButton', {
-                    state: this.component.state || 'submitted',
-                    component: this.component,
-                    instance: this
-                });
-                break;
-            case 'event':
-                this.emit(this.interpolate(this.component.event), this.data);
-                this.events.emit(this.interpolate(this.component.event), this.data);
-                this.emit('customEvent', {
-                    type: this.interpolate(this.component.event),
-                    component: this.component,
-                    data: this.data,
-                    event: event
-                });
-                break;
-            case 'custom': {
-                // Get the FormioForm at the root of this component's tree
-                const form = this.getRoot();
-                const flattened = {};
-                const components = {};
-                (0, utils_1.eachComponent)(form.components, (componentWrapper, path) => {
-                    const component = componentWrapper.component || componentWrapper;
-                    flattened[path] = component;
-                    components[component.key] = component;
-                }, true);
-                this.evaluate(this.component.custom, {
-                    form,
-                    flattened,
-                    components
-                });
-                this.triggerChange();
-                break;
-            }
-            case 'url':
-                this.loading = true;
-                this.emit('requestButton', {
-                    component: this.component,
-                    instance: this
-                });
-                this.emit('requestUrl', {
-                    url: this.interpolate(this.component.url),
-                    headers: this.component.headers
-                });
-                break;
-            case 'reset':
-                this.emit('resetForm');
-                break;
-            case 'delete':
-                this.emit('deleteSubmission');
-                break;
-            case 'oauth':
-                if (this.root === this) {
-                    console.warn('You must add the OAuth button to a form for it to function properly');
-                    return;
-                }
-                // Display Alert if OAuth config is missing
-                if (!this.oauthConfig) {
-                    this.root.setAlert('danger', 'OAuth not configured. You must configure oauth for your project before it will work.');
-                    break;
-                }
-                // Display Alert if oAuth has an error is missing
-                if (this.oauthConfig.error) {
-                    this.root.setAlert('danger', `The Following Error Has Occured ${this.oauthConfig.error}`);
-                    break;
-                }
-                this.openOauth(this.oauthConfig);
-                break;
-        }
-    }
-    openOauth(settings) {
-        if (!this.root.formio) {
-            console.warn('You must attach a Form API url to your form in order to use OAuth buttons.');
-            return;
-        }
-        /*eslint-disable camelcase */
-        let params = {
-            response_type: 'code',
-            client_id: settings.clientId,
-            redirect_uri: (settings.redirectURI && this.interpolate(settings.redirectURI)) || window.location.origin || `${window.location.protocol}//${window.location.host}`,
-            state: settings.state,
-            scope: settings.scope
-        };
-        /*eslint-enable camelcase */
-        // Needs for the correct redirection URI for the OpenID
-        const originalRedirectUri = params.redirect_uri;
-        // Make display optional.
-        if (settings.display) {
-            params.display = settings.display;
-        }
-        params = Object.keys(params).map(key => {
-            return `${key}=${encodeURIComponent(params[key])}`;
-        }).join('&');
-        const separator = settings.authURI.indexOf('?') !== -1 ? '&' : '?';
-        const url = `${settings.authURI}${separator}${params}`;
-        const popup = window.open(url, settings.provider, 'width=1020,height=618');
-        const interval = setInterval(() => {
-            try {
-                const popupHost = popup.location.host;
-                const currentHost = window.location.host;
-                if (popup && !popup.closed && popupHost === currentHost) {
-                    popup.close();
-                    const params = popup.location.search.substr(1).split('&').reduce((params, param) => {
-                        const split = param.split('=');
-                        params[split[0]] = split[1];
-                        return params;
-                    }, {});
-                    if (params.error) {
-                        alert(params.error_description || params.error);
-                        this.root.setAlert('danger', params.error_description || params.error);
-                        return;
-                    }
-                    // TODO: check for error response here
-                    if (settings.state !== params.state) {
-                        this.root.setAlert('danger', 'OAuth state does not match. Please try logging in again.');
-                        return;
-                    }
-                    // Depending on where the settings came from, submit to either the submission endpoint (old) or oauth endpoint (new).
-                    let requestPromise = Promise.resolve();
-                    if (lodash_1.default.has(this, 'root.form.config.oauth') && this.root.form.config.oauth[this.component.oauthProvider]) {
-                        params.provider = settings.provider;
-                        params.redirectURI = originalRedirectUri;
-                        // Needs for the exclude oAuth Actions that not related to this button
-                        params.triggeredBy = this.oauthComponentPath;
-                        requestPromise = this.root.formio.makeRequest('oauth', `${this.root.formio.projectUrl}/oauth2`, 'POST', params);
-                    }
-                    else {
-                        const submission = { data: {}, oauth: {} };
-                        submission.oauth[settings.provider] = params;
-                        submission.oauth[settings.provider].redirectURI = originalRedirectUri;
-                        if (settings.logoutURI) {
-                            this.root.formio.oauthLogoutURI(settings.logoutURI);
-                        }
-                        // Needs for the exclude oAuth Actions that not related to this button
-                        submission.oauth[settings.provider].triggeredBy = this.oauthComponentPath;
-                        requestPromise = this.root.formio.saveSubmission(submission);
-                    }
-                    requestPromise.then((result) => {
-                        this.root.onSubmit(result, true);
-                    })
-                        .catch((err) => {
-                        this.root.onSubmissionError(err);
-                    });
-                }
-            }
-            catch (error) {
-                if (error.name !== 'SecurityError' && (error.name !== 'Error' || error.message !== 'Permission denied')) {
-                    this.root.setAlert('danger', error.message || error);
-                }
-            }
-            if (!popup || popup.closed || popup.closed === undefined) {
-                clearInterval(interval);
-            }
-        }, 100);
-    }
-    get oauthComponentPath() {
-        const pathArray = (0, utils_1.getArrayFromComponentPath)(this.path);
-        return lodash_1.default.chain(pathArray).filter(pathPart => !lodash_1.default.isNumber(pathPart)).join('.').value();
-    }
-    focus() {
-        if (this.refs.button) {
-            this.refs.button.focus();
-        }
-    }
-    triggerReCaptcha() {
-        if (!this.root) {
-            return;
-        }
-        let recaptchaComponent;
-        this.root.everyComponent((component) => {
-            if (component.component.type === 'recaptcha' &&
-                component.component.eventType === 'buttonClick' &&
-                component.component.buttonKey === this.component.key) {
-                recaptchaComponent = component;
-            }
-        });
-        if (recaptchaComponent) {
-            recaptchaComponent.verify(`${this.component.key}Click`);
-        }
-    }
-}
-exports.default = ButtonComponent;